CSS, Safari: Target only Safari browser

style.css

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .flex-direction-nav-featured a{
        margin-top: 4%;
    } 

    /* Safari only override */
    ::i-block-chrome,.flex-direction-nav-featured a{
        margin-top: 5%;
    } 
}

@ntnbt thanks a lot!!

when i added
@media screen and (min-color-index: 0) and (-webkit-min-device-pixel-ratio: 0) { @media {
#activity-list{
margin-top: 25px;
}
}}
it still runs on chrome browser

thank @ntnbt a lot it worked well for me.

@vihuy I only do:
.classname {
@media screen and (min-color-index: 0) and (-webkit-min-device-pixel-ratio: 0) {
@media {
margin-top: 25px;
}
}
}

or if u are using React MUI useStyles like me just
'@media not all and (min-resolution:.001dpcm)': {
'@supports (-webkit-appearance:none)': {
sth here
},
},

@MynameisHung thank you.

Thanks @ntnbst, your approach worked for me!

It worked, thanks a lot @ntnbst

@media screen and (-webkit-min-device-pixel-ratio: 0) { _::-webkit-full-page-media, _:future, :root , .some-class { top:just save 0; } }

@Valeka thank you so much you just saved my day.

Thanks @ntnbst, it worked

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

    .safari_only { 

        color:#0000FF;
        background-color:#CCCCCC; 

    }
}}

although its working perfectly but have sass lint error.

Include leading zeros on numbers for @media not all and (min-resolution:.001dpcm)

Vendor prefixes should not be used for @supports (-webkit-appearance:none)

Thanks @ntnbst!

need just ios chorme browser all media

@ntnbst works for me too ;) Thanks so much!!

@ntnbst Works like a charm. Thanks for shared this.

@ntnbst
OMG , i don't really understand it works but thank you very much !!!! (if you have some explanations, i'm ready ^^)

works fine on Chrome and Firefox but not on Safari (iOS or MacOS). I am getting a “zero sized error” on Safari. I recently had an expired cert but renewed it using Let’s Encrypt. I did not test on Safari after renewal as it worked fine on Chrome.
created wordpress website can solve this problem.
Thanks in advance!

It's work without SASS process
The hack applies on Firefox Standard (why ? Don't know)
I think some of User Agent specs are the same between Firefox and Safari MacOs

@ntnbst thanks man

So can i just plug this in and it will work?

So can i just plug this in and it will work?

yes, it's work for me so just check the Developer tools on Firefox so the hack appear on sometimes :)

FYI:
@ntnbst's approach works great for desktop browsers, but it will target every mobile browser on iOS devices. :)

@ntnbst's approach did not work for me on Safari desktop. It didn't affect any browser. If I remove the "not all", it seems to affect all browsers.

@Valeka - many thanks! your solution worked for me.

@supports (-webkit-hyphens: none) {
    @content;
  }

Works fine for me & without errors from linter(s)

@MakerTim Thank you so much!!! You made my day!!

@MakerTim Thank you very much, good sir!!!

MakerTim 🎉

Safari is a mess. Thank you! Added to my globals...

.media-safari(@rules) {
  @supports (-webkit-hyphens: none) {
    @rules();
  }
}

@import (reference) "../less/index.less";

display: grid;

.media-safari ({
    display: flex;
});

@MakerTim Thank you very much!