Issue
Is there a way to override a css for only Safari browser?
I am using Safari version 15.1 but looking to be able to target any version.
Tried the following via codepen. But it does not override in Safari.
.myClass {
background-color: grey;
color: red;
width: 2000px;
height: 50px;
}
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
.safari_only {
.myClass {
background-color: yellow;
color: green;
width: 2000px;
height: 50px;
}
}
}}<html>
<body>
<div class="myClass">
Sample 1
</div>
</body>
</html>Seen examples such as following explaining safari overrides.
But these are not overriding a css class.
is there a css hack for safari only NOT chrome?
How do I add a css line ONLY for Safari
Solution
-webkit-appearance is (luckily or not) also supported by Firefox and Edge as mentioned in the mozilla documentation. Only thing I can imagine to work is to use JavaScript to target the user agent:
function detectBrowser() {
if (navigator.userAgent.includes("Safari")) {
// your code here
}
}
Answered By - GiovanniManetti11
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.