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%;
    } 
}

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!

@MakerTim thx 👍

@MakerTim thanks, this is still working in June 2025.

@MakerTim thanks, still works as of in September 2025