How to Write CSS for Safari Browser Only?

Safari, Apple’s default browser, has unique rendering quirks that may cause inconsistencies in web design. To ensure a consistent user experience, developers sometimes need to apply Safari-specific CSS.

In this blog, we’ll explore different methods to target Safari and apply CSS styles specifically for it.

1. Why Target Safari with Custom CSS?

Safari often renders CSS differently due to:
✅ Different Flexbox behavior compared to other browsers.
✅ Issues with backdrop-filter and position: sticky.
✅ WebKit-specific properties that require adjustments.

To fix these, we can use Safari-specific CSS hacks.

---

2. Methods to Write CSS for Safari Only

1️⃣ Using WebKit-Specific CSS (Targets Safari & Chrome)

Safari is a WebKit-based browser, so using WebKit-specific selectors applies styles to both Safari and Chrome.

Example: Applying Styles with -webkit- Prefix

/* Applies to WebKit browsers (Safari & Chrome) */
.element {
    -webkit-appearance: none;
    -webkit-border-radius: 10px;
}

✅ Works for both Safari and Chrome
❌ Does not target Safari exclusively

---

2️⃣ Targeting Safari Using @supports and -webkit-appearance

Safari supports certain CSS properties that other browsers don’t. We can use @supports to detect and apply styles exclusively to Safari.

Example: Targeting Safari with @supports

@supports (-webkit-touch-callout: none) {
    .safari-only {
        background-color: lightblue;
    }
}

✅ Works for Safari only
✅ Ignores Chrome & Firefox

---

3️⃣ Targeting Safari Using @media screen and (-webkit-min-device-pixel-ratio:0)

This media query only applies to WebKit-based browsers, but mostly affects Safari.

Example: Safari-Specific Media Query

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .safari-fix {
        font-size: 18px;
    }
}

✅ Works for Safari and WebKit browsers
❌ May also apply to some older versions of Chrome

---

4️⃣ Targeting Only Safari on macOS Using @supports and backdrop-filter

backdrop-filter is natively supported only in Safari, making it a great way to target Safari users.

Example: Targeting Safari on macOS

@supports (-webkit-backdrop-filter: blur(10px)) {
    .safari-mac {
        background-color: lightgray;
    }
}

✅ Works for macOS Safari only
❌ Does not target iOS Safari

---

5️⃣ Targeting Safari on macOS and iOS Using _::-webkit-full-page-media Hack

To target only Safari (including mobile and desktop versions), we can use the following hack:

Example: Targeting Safari (macOS & iOS)

@media not all and (_::-webkit-full-page-media) {
    .safari-only {
        color: red;
    }
}

✅ Works for Safari on macOS and iOS
✅ Does not affect Chrome or Edge

---

6️⃣ Using JavaScript to Detect Safari and Apply CSS

For a more dynamic approach, use JavaScript to detect Safari and add a CSS class.

Example: Detecting Safari with JavaScript

if (navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome")) {
    document.body.classList.add("safari-browser");
}

Then, in CSS, apply Safari-specific styles:

.safari-browser .element {
    color: green;
}

✅ Only affects Safari
✅ Works on both macOS & iOS Safari

---

3. Best Practices for Writing Safari-Specific CSS

✔ Use @supports instead of hacks for better maintainability.
✔ Minimize browser-specific styles—try to use cross-browser solutions.
✔ Test on different Safari versions (macOS and iOS).
✔ Use JavaScript detection for advanced control.

---

4. Conclusion

If your website doesn’t render correctly in Safari, use these techniques to apply Safari-only CSS styles:

✅ WebKit prefixes for Safari & Chrome compatibility.
✅ @supports rules to target Safari-specific properties.
✅ Safari-only media queries for precise targeting.
✅ JavaScript-based detection for dynamic CSS application.

By following these methods, you can fix Safari rendering issues while keeping your CSS clean and efficient.