The Linux Code

Applying CSS Styles to Safari Browser Only

As web developers, we often need to target specific browsers with CSS styling. Safari frequently requires its own special treatment to achieve consistent cross-browser experiences.

In this in-depth guide, you‘ll learn multiple techniques for applying styles exclusively to Safari using CSS, JavaScript, and other clever tricks.

By the end, you‘ll understand the nuances of styling for Safari and be able to build web apps optimized specifically for Apple‘s browser. Let‘s dive in!

Why Would You Want to Single Out Safari for Styling?

Before we look at how to target Safari, it‘s important to understand the motivations behind doing so. There are a few key reasons you may want to intentionally apply CSS only for Safari:

Safari Has Unique Rendering Behavior

Safari often renders elements slightly differently than other major browsers like Chrome, Firefox, and Edge. For example, margins, fonts, and grid layouts may display inconsistently.[1] These cross-browser differences can lead to frustrating styling bugs.

Using Safari-specific CSS overrides gives you more control to achieve pixel-perfect consistency across browsers.

Safari Supports Cutting Edge CSS Features First

Since Safari uses the WebKit rendering engine, it will often implement the latest experimental CSS properties and APIs before other browsers.

For example, Safari was one of the first to ship support for CSS Grid, Flexbox, Custom Properties, and other new capabilities. By leveraging those features only in Safari, you can provide an enhanced experience in that browser while avoiding compatibility issues in others.

Optimizing for iOS Web Apps

On iOS devices like iPhones and iPads, the only browser choice is Safari. So if you are building a web app primarily targeting iOS users, you‘ll want to customize the styling specifically for mobile Safari.

Safari on iOS supports some unique meta tags, viewport values, and other mobile-centric features. Fine-tuning for iOS can provide a seamless app-like experience.

Progressive Enhancement

Another school of thought is to use Safari-specific styling as a progressive enhancement. First build a solid baseline experience that works across all browsers. Then layer on enhancements like animations, shadows, and other bells and whistles just for capable browsers like Safari.

This allows you to maximize compatibility while still providing an elevated experience for targeted browsers.

Safari Market Share and Usage

So how popular is Safari exactly? Here are some statistics on Apple‘s browser market share:

  • On desktop, Safari has around 15% global usage, lower than Chrome, Firefox, and Edge but still considerable.[2]
  • On mobile, Safari dominates with over 50% usage on iPhone and iPads globally.[3]
  • In North America, Safari jumps to nearly 80% market share on mobile thanks to iPhone popularity.[4]

So while Safari may lag behind on desktop, it is by far the mobile browser of choice for millions of Apple device users worldwide. This makes optimizing the mobile experience critical.

Technique #1: Using -webkit Vendor Prefixes

The simplest way to target Safari is by using -webkit vendor prefixed CSS properties.

Safari and other WebKit-based browsers recognize these experimental -webkit- prefixes. So it provides an easy way to provide Safari-only styling.

For example:

This -webkit-appearance style will apply uniquely in Safari. Other major browsers will ignore that line completely.

You can use -webkit- prefixes for animations, gradients, transforms, and more cutting edge CSS features. This allows you to leverage those capabilities exclusively in Safari.

Here is an example applying a Safari-only gradient background:

This progressive enhancement approach will provide a simple #eee background across all browsers. But Safari will also render the more visually appealing gradient version.

One caution with vendor prefixes is browser support does eventually get patched in over time. So the styles may start applying more broadly in the future.

But as an easy short-term shortcut for Safari-specific styling, -webkit- prefixes are quite useful.

Technique #2: The ::i-block-chrome Pseudo-element

Safari also supports a non-standard pseudo-element ::i-block-chrome specifically for blocking rules from applying in Chrome.

We can leverage this to reverse-target Safari-only CSS:

Here the default color style will apply as blue in Chrome. But Safari will override it to red.

This approach is a bit more convoluted but can be handy for overwriting styles in just Safari. Do note browser support:

  • ::i-block-chrome works in Safari 10.1+
  • Chrome and other browsers will ignore it completely
  • Older Safari versions will fail silently without applying overrides

So be sure to test across browsers and provide fallback styling. But used judiciously, the ::i-block-chrome pseudo-element gives you another option for Safari-specific CSS.

Technique #3: @supports Feature Queries

CSS feature queries allow you to conditionally apply styles based on a browser‘s capability support. We can leverage @supports to target Safari like so:

This will restrict the CSS rules to only apply in browsers that recognize the -webkit-appearance property. That matches the WebKit family including Safari.

The major advantage of @supports is it defensive and resilient to browser changes. If other browsers eventually implement the -webkit- prefix, they will automatically apply the styles rather than breaking.

Let‘s look at an example rounding the corners of an image only in supporting browsers:

The rounded corners will display in Safari, while gracefully degrading to square corners in other browsers.

One thing to note is Firefox does not support @supports queries. So avoid relying on it exclusively. But combined with other techniques, it provides robustSafari targeting.

Technique #4: User Agent Detection in JavaScript

For ultimate control, you can use JavaScript to detect the user‘s browser agent string and conditionally apply a class to the <html> tag:

Then write CSS rules that only apply to that class:

This gives you unlimited precision to target styles. But do be careful:

  • User agent sniffing can be unreliable and prone to spoofing
  • Adds JavaScript dependency for styling
  • More complex code maintenance

So in general, opt for progressive enhancement techniques in CSS before JavaScript detection. But having the option available can be helpful in certain cases.

Browser Compatibility for Safari CSS Hacks

To use these techniques effectively, you‘ll need to understand which browser versions support each hack or workaround. Here are some key compatibility notes:

So some important takeaways:

  • -webkit- prefixes workgreat back through Safari 4+ but may get patched in other browsers over time
  • ::i-block-chrome won‘t work in Safari below 10.1 – test carefully
  • No Firefox support for @supports – don‘t rely on it alone
  • JS UA detection works across browsers but can be unreliable

Always check caniuse.com to test browser support for specific CSS features. Test your site in older Safari versions to watch for quirks.

Debugging and Testing Tips

Getting Safari-only styling right can take some trial and error. Here are some tips to smooth out the process:

Use BrowserStack

Sign up for BrowserStack or a similar cloud-based browser testing suite. They make it easy to access old and mobile Safari versions across operating systems for testing.

Use the WebKit Debug Mode

In Safari developer tools, you can toggle "Web Inspector Debug Mode". This will force Safari to use the WebKit rendering engine instead of Nitro for more debugging fidelity.

Test iOS Devices

Acquire some used iPhones or iPod Touches to test directly on real iOS hardware. This will expose mobile Safari quirks you can‘t catch in emulators.

Simulate Mobile in DevTools

In Chrome or Firefox devtools, you can simulate a mobile Safari user agent. Combined with device mode, this mimics Safari on iPhone well for basic testing.

Feature Detection

Use libraries like Modernizr to detect feature support at runtime. Apply browser classes to the html tag to assist styling.

Audit with Lighthouse

Google Lighthouse provides an audit for detecting CSS prefixes needed for cross-browser support. Super handy!

Conditional Comment Debug Code

Use IE-syntax conditional comments to target debug info just to Safari during development:

Following this comprehensive testing approach helps catch styling quirks early across various Safari environments.

Author Background on Cross-Browser Styling

Before we conclude, I wanted to provide some background on my experience wrestling with Safari and cross-browser CSS issues:

I‘ve been working on web design and development for over 15 years now. In that time, I‘ve helped build and maintain dozens of sites targeted at multi-platform users.

These have included:

  • Responsive websites serving millions of global visitors across browsers.
  • Web apps focused on iOS and Android mobile users.
  • Enterprise admin systems needing broad compatibility.
  • Video streaming sites requiring high performance.
  • And many more!

Needless to say, I‘ve run into my fair share of Safari CSS problems over the years. Simple things like button styling, grids, and animations that break on Apple‘s browser.

I‘ve also built web apps specifically for Safari on iPhones and iPads. This involved deep Safari platform research and finding workarounds to enable great mobile user experiences.

Additionally, I stay up-to-date by reading release notes, attending web conferences, and constantly testing new CSS features in browsers. I contribute to open source CSS tools and enjoy sharing front-end knowledge with other developers.

While cross-browser CSS is notoriously tricky, I love the challenge of mastering Safari quirks and finding innovative solutions. Hopefully this guide has shared some helpful secrets for wrangling Safari through its past and future evolutions!

Key Takeaways and Recommendations

Let‘s wrap up with some final tips for applying CSS selectively to Safari:

  • Audit browser usage data to see if Safari optimization is worthwhile for your site. If most of your traffic is Chrome on desktop, targeting Safari may be unnecessary.
  • For the best compatibility and performance , stick to progressive enhancement techniques in CSS before JavaScript detection.
  • Utilize -webkit vendor prefixes for cutting edge styles and experimental APIs in modern Safari versions.
  • For debugging , leverage browser dev tools, emulators, BrowserStack, and feature detection. Test early, test often!
  • Beware mobile Safari – the iOS browser has lots of unique quirks, so thoroughly test on real devices.
  • Understand that browser landscapes evolve quickly . Safari-only hacks today may apply more broadly someday. Build defensively.
  • There are always tradeoffs when targeting specific browsers . Strive for maximum compatibility and minimum complexity.

While selectively styling for Safari can be beneficial, also consider if focusing efforts on general cross-browser robustness may better serve your project and users.

Often the best solution is combining great default styling with judicious enhancements just for capable browsers like Safari. This progressive approach typically yields the best real-world results.

Nonetheless, using the techniques outlined in this guide, you can tap into Safari exclusive capabilities today and optimize sites for Apple‘s ecosystem. The web is a wild platform filled with quirks – by understanding them deeply, we can deliver the best possible experiences to users on the browsers they love.

So get out there, test some Safari CSS hacks, and push the web forward!

  • W3C Specifications
  • CanIUse.com
  • MDN Web Docs

You maybe like,

Related posts, @import and partials in sass | explained.

Supercharging Sass with @import and Partials Hey friends! As front-end developers, we love Sass. It makes writing CSS enjoyable with its arsenal of features –…

10 Must-Play HTML5 Games That Showcase the Future of Web Gaming

HTML5 has ignited a revolution in game development. With its extensive markup language, powerful JavaScript APIs, and support for accelerated graphics through Canvas and WebGL,…

3 Easy Ways to Place Images Side by Side in HTML & CSS

Placing images side-by-side is a common task in web design. It allows you to create an appealing layout with photos, illustrations, icons, and more. In…

A Complete Guide to Ordered Lists in HTML: Usage, Customization, and Best Practices

Ordered lists allow you to easily structure numbered and sequenced content in your web pages. This comprehensive guide will teach you how ordered lists work…

A Complete Guide to the Powerful CSS Inset Property

The CSS inset property gives developers a concise way to set all inner offsets on an element simultaneously. When browser support improves, inset could eliminate…

A Complete Guide to Using Google Icons in Your Web Projects

Icons are a vital part of creating intuitive and visually appealing web interfaces. Implemented well, icons enhance the user experience by communicating complex ideas quickly…

Change CSS rules only in Safari

FabioRosado Saturday 5th, May 2020 2 mins to read 0 Like 0 Comment

How to apply css rules to safari only

The solution.

While working on Thumbs Up News , I've noticed a strange UI bug that happened only on Safari, when the screen was smaller than 900px height-wise. All the other browsers where okay, but the subscribe button was broken. The border was pushed up outside the area of the button and was now between the two elements of the menu. This only happened when a user clicked the categories button and the sub-menu expanded. I'm assuming that this happens because Apple wants space for its bottom menu?

The mobile menu is set on a fixed position. It seems that Safari will change either the padding, the margin or just some border rules when that fixed element doesn't have enough space vertically to show some space under the last element. My first thought was to use the -webkit rule to increase the padding on the button. Using that rule fixed the issue on Safari but broke on Chrome and this is when my search on how to apply CSS rules to a specific browser started.

After searching for a while, I've come across this article written by Ryan - CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge , if you scroll down you come to this little hack that works on Safari 10.1+.

I am using Sass on Thumbs Up News and that means I can't have an empty @media rule. But this was a great starting point for coming up with a solution. I've removed the empty media query to see if the rule would work on Safari and not on any other browser. Surprise, surprise, it worked! Now I decided to play around with the media query rule a bit more, to see what works and what doesn't work.

The Safari only rule hack has two parts. You need to use a unit that is not supported by Safari - dpcm , dpi , dppx and you need to set that media query to not all . The not all rule is important so chrome doesn't pick it up.

After testing different things and playing around with the media query, I've come to the final solution. I've also added a rule to trigger the CSS only when the screen is smaller than 900px high, because we don't want the menu to be broken on a larger screen.

That's all there is to get a media query work on Safari only. I'm still wondering why this trick works and would love to know why, so if you know the answer please let me know!

Webmentions

You might also like these.

A lot of sites make the first letter of a paragraph spread to multiple lines, let me share with you how you can do it.

Make the first letter spread multiple lines

Make the first letter spread multiple lines

Nx makes it easy to work with monorepost, this article will show you how you can use Nx for your projects and talks about some basic commands that will help you.

Getting started with Nx

Getting started with Nx

How to set up an UI element persistent in Gatsby to allow users from Landing in Tech to listen to the latest episode, when navigating the site.

How to make a UI element persistent in Gatsby

How to make a UI element persistent in Gatsby

How to create a function to filter articles by tag. On this post I am using the javascript filter method to filter all articles.

How to filter all MDX articles by tags

How to filter all MDX articles by tags

A rather geeky/technical weblog, est. 2001, by Bramus

CSS @​supports rules to target only Firefox / Safari / Chromium

Yesterday I took some time to rework my Houdini-powered CSS Gradient Border Animation Demo to include a fallback for non-Houdini browsers.

The plan of attack was pretty straightforward:

  • Manual frame-by-frame animations for non-Houdini browsers
  • Automagic Houdini-powered animations for browser with @property support

Only problem with that approach is that there’s currently no way to use @supports to directly detect whether a browser supports Houdini’s @property or not , so I got creative with @supports …

Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine. Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers.

It really is magic, hence it's name Houdini. I'd recommend this slidedeck and this video to get you started

Join the Conversation

' src=

  • Pingback: Web Design & Development News: Collective #668 | Codrops

Hi Bramus, it looks like this is not working. I have both Brave (Chromium) and Safari open next to each other on my desktop and the “combined demo” are both showing blue.. (Safari should be red?). Has something changed with the specs on either of these browsers since 2021?

As mentioned in the post, these tests are really fragile and could stop working any time. I guess that time has come, as more browsers support many new features.

Leave a comment

Cancel reply.

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail. You can also subscribe without commenting.

This site uses Akismet to reduce spam. Learn how your comment data is processed .

CSS rule to style Safari 16.x only

Hello everyone

I was wondering if someone already figured out the CSS rules to only style Safari 16 on MacOS. Since the update some of my stylings break (thanks apple dev team) and I really need to fix them as soon as possible. This rule:

@ media not all and (min-resolution:.001dpcm) { @ supports (-webkit-appearance:none) and (display:flow-root) { .selector { property:value; } } }

will not work

kind regards

It works in iOS16 down to iOS 10:

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

apply css only for safari

Or use this @ supports (-webkit-touch-callout: none) {}

Hi team, Any other -webkit to use ??

wouldnt work. Thanks

Stack Exchange Network

Stack Exchange network consists of 183 Q&A communities including Stack Overflow , the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Safari 5 extension for site-specific CSS customisation?

Is there a Safari 5 extension along the lines of Stylish ? Basically a way to quickly install or create site-specific CSS files.

  • browser-addons

dbr's user avatar

3 Answers 3

Feel free to install my Stylish extension for Safari (also available in Apple Extensions gallery, Developer section) or fork my project on GitHub .

Extension in development, but you can create new styles, search/manage/edit styles from user styles.org database, styles options - only default values supported in current version.

Dave's user avatar

  • What's the status of this? The extensions gallery has been replaced by the app store, and I can't find it there. –  Elliott B Aug 25, 2018 at 5:02
  • 1 Unfortunatelly Apple turned Stylish Safari extension off. By any chance, can someone tell me where my custom CSS were stored by it while I was using it? Had a lot off custom CSS that I really would like to get back. –  Marcelo Myara Apr 15, 2019 at 22:14

http://code.grid.in.th/

Thanks to http://safariextensions.tumblr.com/post/687054388/post-user-css-06-11-10

bradx3's user avatar

It appears as though an independent developer has ported or rewritten Stylish as a Safari extension ! It is currently in beta according to the developer.

NReilingh's user avatar

You must log in to answer this question.

Not the answer you're looking for browse other questions tagged safari css browser-addons ..

  • The Overflow Blog
  • Spreading the gospel of Python
  • OverflowAI and the holy grail of search
  • Featured on Meta
  • Our Partnership with OpenAI
  • What deliverables would you like to see out of a working group?

Hot Network Questions

  • Is it illegal for a company to cross out the "To the order of" line on a check and change companies being paid?
  • Is the Principle of Maximum Entropy a Paradox?
  • Translating "You wanna bet?"
  • Connecting WAN and LAN ports of the same wireless router
  • Should this bare minimum TRIAC circuit light the bulb?
  • Why does the word "ahínco" carry an accent mark if it is llana?
  • Negative pressure projectile propellants (Alternatives to gunpowder)
  • Very Simple: Is white hair good for a hot environment?
  • Director forcing an all day meeting on an off day before a holiday
  • placing randomly random generated numbers in excel
  • When and how of stratification?
  • Why isn't LD_PRELOAD disabled by default in Linux?
  • Is a dome really the most efficient way to contain gas in a vacuum?
  • Why is Paul adamant about the second coming of Christ during his lifetime but it didn't happen?
  • FOSS alternative to GitHub Copilot?
  • Why did the writers of Pokemon decide that Pikachu shouldn't go in the pokeball?
  • Why are the Lion Air and Ethiopian Airlines crashes being litigated in the US?
  • Install the new performance tools from Ubuntu 24.04 in 22.04
  • How to track ride data for a shared bicycle?
  • How to get record Id in record triggered flow
  • Partition of unity without AC
  • "the girl with the red dress on" — What licenses the preposition "on"? What does it function as?
  • How many Friends are there in the circle?
  • Discriminant formula - do the coefficients include their signs?

apply css only for safari

DEV Community

DEV Community

krantikr

Posted on Nov 2, 2019

Browser-specific CSS for Internet Explorer, Firefox, Chrome, Safari and Edge

If you are working with HTML and CSS then definitely you would have faced lots of browser-specific issues in CSS. I have also faced similar kind of issues at times and sometimes it's really tough to fix these issues. We can fix some of these issues by writing browser-specific CSS. I would personally recommend avoiding the use of browser-specific CSS because it depends on the browser and their versions, it might fail with the other versions of the same browser.

Table Of Contents

Internet Explorer Microsoft Edge Chrome Safari Firefox Opera

#Internet Explorer

#microsoft edge, top comments (1).

pic

Templates let you quickly answer FAQs or store snippets for re-use.

ivanoliveiraweb profile image

  • Joined May 26, 2022

Helped me a lot, I needed a CSS rule specific to the Safari browser.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

tarequr profile image

Laravel Error Fix: How to Handle "Attempt property on null"

Tarequr Rahman Sabbir - May 2

aymenalhattami profile image

Filament Context Menu

Ayman Alhattami - May 2

yoshrubin profile image

🚀 Exploring Upgrading to Nuxt 3

Yoshi Rubin - May 2

rajatp profile image

Top 15 Websites for Design Inspiration in 2024

Rajat Patel - May 15

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Controls the level of style and functionality of the site, a lower fidelity meaning less bandwidth, battery, and CPU usage. Learn more .

Custom Style Sheets in Safari

I first heard mention of adding a custom style sheet in Safari a couple months back. I honestly can’t remember where I saw it but I was reading something and, in passing, the author mentioned the idea of hiding the right sidebar on Twitter using a custom style sheet in Safari. This thing:

Screenshot of the right sidebar of twitter.com, circa Jan 2021.

It’s funny how you sometimes miss the entire point of someone’s writing and selectively remember what you want, in this case “hey, I can hide that dumb module on Twitter with little effort?” I’d like to say that I have the self-discipline to avoid clicking on anything in that module, but unfortunately I am not that strong of a person. Sometimes I just get bored and something there makes me think “oh, hmm, I wonder...” and then I click it. It’s one of those things where, if it wasn’t there, it wouldn’t be a problem. Like keeping cookies right next to your desk. But it’s frictionless and easy and RIGHT THERE that I succumb. But I digress. My weaknesses are not on trial in this post.

The thought hit me: “hey I should hide that right sidebar on twitter.com using a custom style sheet in Safari!” So I did. And then I moved on with life. I never thought to write a post about it because, you know, custom style sheets in a browser? That’s old news.

But then, I recently found this post published in November of 2020 about customizing your browsing experience using custom style sheets and thought “I guess this isn’t old news just quite yet.” Plus I’m trying to write a lot more this year , so here we are.

Note: it’s worth mentioning that hiding the right sidebar in twitter isn’t a novel idea. Craig Hockenberry created a Safari extension that’ll do it for you called “Fixerrific”. Granted, like my custom style sheet, this removes the entire right sidebar, including the search box which you might actually find useful. That said, you can still access the search functionality on twitter by going to the Explore tab.

How I Did It

First off, Safari lets you specify a custom style sheet.

Screenshot of Safari’s preferences pane where you can select a custom style sheet.

In case you don’t know, a custom style sheet is a bunch of CSS rules that you get to specify and then the browser will apply them to every single web page you visit .

The first thing I needed to do was open twitter.com and find out what type of CSS rule I could write to target that right sidebar. I can tell you, it wasn’t easy. Twitter has a bunch of generated classes names, which I’m assuming are quite dynamic, so finding a rule that would target the right sidebar and not change in the near future seemed like it might be tough. But then I found it: a DOM node which encompassed the entire right sidebar that had a very specific attribute data-testid="sidebarColumn" .

Screenshot of twitter.com in Safari with the developer tools open and targeting a parent DOM node of the right sidebar.

I can’t say for sure, but that looks like one of those attributes the QA team appends to certain elements they want to find with their automated browser tests. The whole purpose of those kinds of attributes is so the engineers won’t touch them and change their names, that way the automated tests can run for a long time without breaking. Again, I can’t make any guarantees, but this selector will probably be around for a while. So I felt pretty confident I could use that selector and not have it break in a short period of time due to twitter refactoring their DOM markup.

Once I had a selector I could use, I opened my text editor and created the following CSS file:

From there, I saved the .css file in my Dropbox folder (for backup purposes, i.e. a lazy man’s version control) then opened Safari’s preferences and selected my newly created file. A restart of Safari and boom! The sidebar was gone.

Feeling emboldened and empowered with my CSS sword of righteousness, I figured I’d go ahead and get rid of the DM/chat widget thing twitter recently introduced. It was merely visual noise to me. And fortunately, it had a similar way to be targeted: [data-testid="DMDrawer"] .

Screenshot of twitter.com in Safari with the developer tools open and targeting a parent DOM node of the right sidebar.

Pretty cool. Now I have a version of twitter custom tailored to me, free of a lot of distractions I don’t want to see.

Screenshot of twitter.com in Safari with a custom style sheet applied that hides the sidebar and the DM widget in the bottom right.

Observations Nobody Asked For

If you write a lot of custom styles for sites across the web, you could start running into naming collisions. It would be neat if you could scope styles to a specific domain. Maybe there’s a way to do it? I couldn’t think of one. Imagine:

JavaScript has access to a page’s URL via window.location but AFAIK that’s not available—at least not in any standardized way—in CSS.

It's likely a terrible idea, but we have custom user style sheets, is there such a thing as a custom user scripts? Imagine giving a .js file to the browser and it runs it on every single page, like a custom style sheet. Why? Because I want to specify all my custom styles using JavaScript not CSS.

Just kidding.

But seriously, if there was something like this, I could have a script that runs on every page and sticks an attribute on the root html element with the page’s URL. Imagine:

This would result in every page getting an attribute on the root element with the current page’s href on it.

This would allow me to scope every single one of my custom style sheet selectors to a specific domain:

Honestly, that sounds cool but impractical (not to mention the incredible security implications). It’s fun to think about though.

But hey, if I felt like disabling JavaScript, I could use this theoretical custom script functionality to run the following JavaScript on ever page I visit, just to show who really is in power:

I love old-school browser functionality like this. Can you imagine a feature like custom style sheets being proposed and implemented in today’s world? I feel like this is in Safari as a holdover from a bygone era. Could it ever get the momentum to happen today? I worry Apple might take it out sometime in the future.

All that said, if you want to read more, this post has a perspective on the history of custom style sheets in Safari that you might find interesting.

Update: 2020-01-14

I received an email from John P. Rouillard who read my question about having custom user scripts and said “You mean like greasemonkey or tapermonkey?”

I realized when I wrote that paragraph that I was merely describing what browser extensions are for. What I was trying to get at is that it would be really cool if custom user scripts were a feature of the browser, i.e. adding a custom user script was as simple as adding a custom style sheet: select a .js file on disk and boom, you’re done.

That said, maybe I’ll give one of these user scripts extensions a try. I’ve heard of greasemonkey and used it back in like 2012. But I’ve never heard of tampermonkey. Looks like it’s open source and even available for Safari . Thanks John!

  • Write for us
  • Advertising

Web Development, Networking, Security, SEO

CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge A set of useful CSS3 media queries to target only specific versions of the various browsers: Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari and Microsoft Edge

CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge

Table of Contents

IE 6, 7 and 8

Ie 8 standards mode only, ie 8,9 and 10, ie 9 and above, ie 9 and 10, ie 10 and above, ie 11 (and above..), microsoft edge, any version (gecko), quantum only (stylo), legacy (pre-stylo), chrome & safari (any version),  safari (7.1+), safari (from 6.1 to 10.0), safari (10.1+).

If you're a HTML developer you most likely know that there are times when you need to selectively apply some styles to a specific browser, or to a specific version/build of a browser. When such scenarios occur, there are a number of CSS and/or JS based techniques to achieve that result.

Here's a collection of media queries that will allow you to do that in pure CSS3 code, without a single line of JavaScript code: most of them come from the  browserhacks.com web site, which is an excellent resource of browser-specific CSS and JavaScript hacks for these kind of tasks.

Internet Explorer

For further info or additional media queries, visit the awesome browserhacks.com website!

Print Friendly, PDF & Email

Related Posts

TS2564 (TS) Property has no initializer TypeScript error in Visual Studio 2017 - How to fix

How to become a Web Developer: a detailed plan for learning JavaScript A list of the main study topics that await a novice JavaScript developer in his/her learning path to become a great web developer

May 19, 2020 May 19, 2020

Tabulazer - Chrome Extension to Filter and Sort HTML Tables

Tabulazer - Chrome Extension to Filter and Sort HTML Tables A free Google Chrome Extension that can be used to filter, sort and enlarge HTML tables from any web page

October 2, 2019

7 typical reasons why Bootstrap is ideal for responsive Web Design

7 typical reasons why Bootstrap is ideal for responsive Web Design A list of some great features that still makes Bootstrap the world’s most popular front-end component library

July 25, 2019 July 25, 2019

apply css only for safari

IT Project Manager, Web Interface Architect and Lead Developer for many high-traffic web sites & services hosted in Italy and Europe. Since 2010 it's also a lead designer for many App and games for Android, iOS and Windows Phone mobile devices for a number of italian companies. Microsoft MVP for Development Technologies since 2018.

6 Comments on “ CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge A set of useful CSS3 media queries to target only specific versions of the various browsers: Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari and Microsoft Edge ”

Using a media query like this, @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {, to only target Chrome previously worked but now Firefox is picking up those styles in that media query. Any ideas for another workaround for just Chrome? Thanks!

Try one of these:

The css for ‘Safari (from 6.1 to 10.0)’ affects ALL browsers on iPad: Chrome, Safari, Opera. Not only Safari.

_:lang(x)::-ms-backdrop, .selector { color: blue; } /* IE11 */ _:-ms-lang(x)::backdrop, .selector { color: blue; } /* Edge */ _:lang(x)::-internal-media-controls-overlay-cast-button, .selector { color: blue; } /* Chrome */ _:lang(x)::x-, .selector { color: blue; } /* Safari */ _:-moz-any(x), .selector { color: blue; } /* Firefox */

not from me

sadly that edge things no longer works.. kind of tough to find an edge only query..

How to add a media query for a specific browser with specific width? for e.g. Safari browser version 10 and above with width: 1440px

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

 Aggiungi e-mail alla newsletter

Notify me of follow-up comments by email.

Notify me of new posts by email.

This site uses Akismet to reduce spam. Learn how your comment data is processed .

Instantly share code, notes, and snippets.

@jbutko

jbutko / style.css

  • Download ZIP
  • Star ( 8 ) 8 You must be signed in to star a gist
  • Fork ( 1 ) 1 You must be signed in to fork a gist
  • Embed Embed this gist in your website.
  • Share Copy sharable link for this gist.
  • Clone via HTTPS Clone using the web URL.
  • Learn more about clone URLs
  • Save jbutko/6718701 to your computer and use it in GitHub Desktop.

@frknbasaran

frknbasaran commented Nov 25, 2019

@ntnbst thanks a lot. <3

Sorry, something went wrong.

@carlbrn

carlbrn commented Dec 10, 2019

@ntnbst so many thanks!

@AnithaPal

AnithaPal commented Jan 2, 2020

@Valeka , Thanks It works perfectly.

@rhostem

rhostem commented Feb 27, 2020

@ntnbt thanks a lot!!

@vihuy

vihuy commented Apr 21, 2020

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

@Hungreeee

Hungreeee commented Apr 26, 2020

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 }, },

vihuy commented May 8, 2020

@MynameisHung thank you.

@JonathanFSilva

JonathanFSilva commented Aug 12, 2020

Thanks @ntnbst , your approach worked for me!

@onenazmul

onenazmul commented Aug 29, 2020

It worked, thanks a lot @ntnbst

@yogesh-xseed

yogesh-xseed commented Nov 3, 2020 • edited

@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.

@sanket4real

sanket4real commented Jan 18, 2021

Thanks @ntnbst , it worked

@xoriant-vikas

xoriant-vikas commented Feb 18, 2021

@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)

@Chelny

Chelny commented Mar 21, 2021

Thanks @ntnbst !

@Muhammad-Naiem

Muhammad-Naiem commented Mar 24, 2021

need just ios chorme browser all media

@nguyen422

nguyen422 commented May 7, 2021

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

@ShiBa-Shin

ShiBa-Shin commented Sep 1, 2021

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

@Mil00Z

Mil00Z commented Oct 4, 2021

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

@shivam2112

shivam2112 commented Dec 1, 2021

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!

Mil00Z commented Dec 5, 2021

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

@4leeX

4leeX commented Aug 12, 2022

@ntnbst thanks man

@EngineerPlug

EngineerPlug commented Oct 28, 2022

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

Mil00Z commented Oct 31, 2022

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

@dkoutevska

dkoutevska commented Nov 9, 2022

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

@tettoffensive

tettoffensive commented Feb 2, 2023

@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.

@cynthiaeddy

cynthiaeddy commented Oct 9, 2023

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

@MakerTim

MakerTim commented Mar 7, 2024

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

@CerealKiller97

CerealKiller97 commented Mar 31, 2024

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

@RobinSen2217

RobinSen2217 commented Apr 23, 2024

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

an image, when javascript is unavailable

site categories

Piers morgan slams “high profile people in the business” who have said they know the real identity of richard gadd’s abuser in ‘baby reindeer’, chrissy teigen-produced safari series & manhattan reality show lead bravo slate as ‘watch what happens live with andy cohen’ renewed through end of 2025 & ‘the valley’ returning for season 2.

By Peter White

Peter White

Executive Editor, Television

More Stories By Peter

  • The CW To Investigate Miss USA & Miss Teen USA Pageants Following Bullying & Harassment Allegations
  • ‘Penn & Teller: Fool Us’ Among Many Unscripted Decisions To Be Made At The CW As Network Looks To Swipe Left On ‘FBoy Island’
  • ‘Wild Cards’ Still Expected To Be Renewed For Season 2 At The CW

apply css only for safari

Chrissy Teigen , Andy Cohen, the cast of The Valley and numerous Real Housewives will be celebrating today after Bravo unveiled its latest programming slate.

The NBCUniversal cable network has ordered one new show, New York-set reality series Making It In Manhattan , revealed it is developing a South African Bush series produced by Chrissy Teigen and handed out a large swathe of renewals including for buzzy Vanderpump Rules spinoff The Valley and Watch What Happens Live with Andy Cohen .

Related Stories

Andy Cohen

Andy Cohen Cleared Of Booze, Drugs & Sexual Harassment Allegations As Investigators Find Claims “Unsubstantiated”

Ariana Madix and Tom Sandoval on 'Vanderpump Rules'

‘Vanderpump Rules’: The Chilling Season 11 Finale Seemingly Exposes Tom Sandoval’s Manipulation As Ariana Madix Refuses To Be Part Of His “Redemption” Arc

RELATED: Snoop Dogg Making Docuseries About His Daughter As E!, USA Network & Oxygen True Crime Reveal 2024-25 Programming Slates

The series comes from 9th Degree with Michaline Babich, Shari Levine, David O’Connell, Chaz Morgan and Ariel Algus serving as executive producers.

On Safari (w/t) is set in the heart of the South African Bush and explores the world of the most luxurious safari experiences, and the international group of guides who create once-in-a-lifetime moments for their adventure seeking clientele. While five-star service is the priority and expectation, this group of guides proves that the only thing more wild and unpredictable than the animals are the dynamics amongst each other. 

It is produced by Ample Entertainment and Teigen’s Huntley Productions with Teigen exec producing alongside Ari Mark, Phil Lott and Tracy Stevens.

Despite false reports , Watch What Happens Live with Andy Cohen has been picked up through the end of next year as it celebrates its 15 th anniversary this year. This comes as Cohen has been cleared of a number of booze, drugs and sexual harassment allegations.

Other shows with upcoming new seasons include  Married to Medicine, Top Chef, Southern Charm and Southern Hospitality.  

Must Read Stories

Coppola on movie biz & trump after ‘megalopolis’ bow; latest deals & reviews.

apply css only for safari

IATSE & Studios Close To Basic Agreement Deal, But Sticking Points Remain

How ‘young sheldon’ and ‘so help me todd’ said goodbye, la screenings are back: talent returns & slates get global.

Subscribe to Deadline Breaking News Alerts and keep your inbox happy.

Read More About:

No comments.

Deadline is a part of Penske Media Corporation. © 2024 Deadline Hollywood, LLC. All Rights Reserved.

Quantcast

IMAGES

  1. Apply some CSS styles only in the Safari browser

    apply css only for safari

  2. macos

    apply css only for safari

  3. Apply css only for safari latest Browser 12.1.1

    apply css only for safari

  4. Valid way to target CSS at Safari only?

    apply css only for safari

  5. How to View Webpage Source CSS and HTML in Safari Mac?

    apply css only for safari

  6. 3 Tips For Writing CSS That Works In Safari

    apply css only for safari

VIDEO

  1. How to Claim Warranty of Safari Bags|| Safari Trolley|| Help

  2. യൂറോപ്പുകാർ മസാല ഉപയോഗിക്കാറില്ല#turkey #dreamdestinoh #sancharam #santhoshgeorgekulangarasancharam

  3. ഭൂമിക്കടിയിൽ നഗരം #laos#dreamdestinoh #laos #america #trending #sgk #turkey #sancharamepisodes

  4. യൂറോപ്പ് ലാത്വിയ ടിക്കറ്റ് സിസ്റ്റം #dreamdestinoh#sancharam #orusanchariyudediarykurippukalepisodes

  5. THAILAND LAOS പൊറോട്ട #safaritv #santhoshgeorgekulangara #malayalam #making #dreamdestinoh #tamil

  6. ക്രൂയിസ് കപ്പൽ tourism in Kerala #laos#dreamdestinoh #laos #america #trending #sgk #carnival #diary

COMMENTS

  1. css

    The coming versions of Firefox and Microsoft Edge have added support for multiple -webkit- CSS codes in their programming, and both Edge and Safari 9 have added support for @supports feature detection. Chrome and Firefox included @supports previously. /* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */.

  2. Apply CSS only for Safari?

    0. Using the UserAgent string, you can check for Safari and !Chrome. Both use the WebKit Renderer and both have Safari in the UA string, but Chrome also has 'Chrome'. To be honest, I'd just check for Webkit and code to that because who knows what other WebKit browser put in their UA strings. Safari : Mozilla/5.0 (Windows; U; Windows NT 6.1; zh ...

  3. How to Create Browser Specific CSS Code

    When it comes to the Microsoft Edge browser, the process is simple as it involves a simple selector that has a property value. It also provides automatic alignment, which is considered the easy way to create browser-specific CSS code. @supports (-ms-ime-align:auto) {. selector { property: value; } }

  4. Applying CSS Styles to Safari Browser Only

    This -webkit-appearance style will apply uniquely in Safari. Other major browsers will ignore that line completely. You can use -webkit-prefixes for animations, gradients, transforms, and more cutting edge CSS features. This allows you to leverage those capabilities exclusively in Safari. Here is an example applying a Safari-only gradient ...

  5. FabioRosado

    How to apply css rules to safari only Table of Contents. The solution; While working on Thumbs Up News, I've noticed a strange UI bug that happened only on Safari, when the screen was smaller than 900px height-wise. All the other browsers where okay, but the subscribe button was broken. The border was pushed up outside the area of the button ...

  6. How to Target Specific Browsers With CSS

    Web browsers are built with different rendering engines, and this causes small differences in the way your website appears between browsers. The sizing may be a little different, the colors aren't consistent, and many more things of that nature. To counter this, we can use the following CSS to target and style specific browsers.

  7. How to Craft Browser Specific CSS Code

    Source. To write browser-specific CSS code in Google Chrome, you can follow these browser-specific CSS properties: To target the support of browser-specific CSS properties on the Webkit browsers (including Safari) for all Chrome versions: .selector:not(*:root) { property:value; } To target the support of properties on Chrome versions >= 29:

  8. CSS @ supports rules to target only Firefox / Safari / Chromium

    As Chromium (Blink) currently is the only browser that supports @property, we need to create a @supports rule that targets Chromium only. While at it let's also create @supports rules to target only Safari (WebKit), Firefox (Gecko), or a combination thereof. Looking at what each browser uniquely supports, these three rules can be used as a ...

  9. Injecting CSS style sheets into a webpage

    A style sheet can apply to a single webpage, all webpages, or only some webpages — for example, webpages from certain domains. To inject your style sheet, you specify either Some or All website access for your app extension. In Safari 17 or later, users also need to grant your extension access to a website. For more information, see Adjusting ...

  10. CSS rule to style Safari 16.x only

    CSS rule to style Safari 16.x only. Hello everyone. I was wondering if someone already figured out the CSS rules to only style Safari 16 on MacOS. Since the update some of my stylings break (thanks apple dev team) and I really need to fix them as soon as possible. This rule:

  11. Safari 5 extension for site-specific CSS customisation?

    12. Feel free to install my Stylish extension for Safari (also available in Apple Extensions gallery, Developer section) or fork my project on GitHub. Extension in development, but you can create new styles, search/manage/edit styles from user styles.org database, styles options - only default values supported in current version. Share.

  12. Browser-specific CSS for Internet Explorer, Firefox, Chrome, Safari and

    We can fix some of these issues by writing browser-specific CSS. I would personally recommend avoiding the use of browser-specific CSS because it depends on the browser and their versions, it might fail with the other versions of the same browser. Table Of Contents Internet Explorer Microsoft Edge Chrome Safari Firefox Opera. #Internet Explorer

  13. Custom Style Sheets in Safari

    First off, Safari lets you specify a custom style sheet. In case you don't know, a custom style sheet is a bunch of CSS rules that you get to specify and then the browser will apply them to every single web page you visit. The first thing I needed to do was open twitter.com and find out what type of CSS rule I could write to target that right ...

  14. CSS3

    CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or EdgeA set of useful CSS3 media queries to target only specific versions of the various browsers: Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari and Microsoft Edge. February 27, 2018March 11, 2018 - by Ryan - 6 Comments. 161.6K.

  15. Detect Safari browser with pure CSS

    To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz- . We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

  16. html

    In safari 9.0 (only, not > 9.0) you can do it now in CSS with this nice hack. You don't need any JS code. I did it and its working fine for me.

  17. How to Fix CSS Issues on Safari

    Displaying properties in Safari. There is a CSS appearance property used to display an element using a platform-native styling based on the users' operating system's theme. To make it work on Safari, we must set the appearance property to its "none" value. Also, use -WebKit-and -Moz-vendor prefixes.. Let's see an example, where we use this trick to make the border-radius property work on ...

  18. CSS, Safari: Target only Safari browser · GitHub

    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!

  19. Supported CSS Properties

    read-only. The content is read-only. read-write. The content can be read and written. read-write-plaintext-only. The content can be read and written, but any rich formatting of pasted text is lost. Discussion. This is closely related to the contentEditable attribute. Availability. Available in Safari 3.0 and later. (Called -khtml-user-modify in ...

  20. How to make CSS style work in Safari browser?

    Do a hard refresh (on Mac OS using CMD+SHIFT+R) instead of just refreshing the page in order to make sure it gets reloaded correctly. CSS does not get reloaded every time you refresh. - Tim Anthony. Jun 16, 2020 at 12:19. After resetting the safari, only footer fell into place.

  21. Chrissy Teigen-Produced Safari Series & Manhattan Reality Show Lead

    On Safari (w/t) is set in the heart of the South African Bush and explores the world of the most luxurious safari experiences, and the international group of guides who create once-in-a-lifetime ...

  22. css

    I simply wants to modify a styling property for safari browsers only, which will override the default property. simple example: Default. div { color: blue; } Safari browsers. div { color: red; } I imagine this can be done with the @include function of scss but I am not sure how.