how to target only safari with css

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

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

DEV Community

Posted on Apr 23, 2021 • Updated on Oct 10, 2022

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.

Chrome & Safari (Webkit)

Microsoft edge, ie11 and up, top comments (0).

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

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

Tic-Tac-Toe JavaScript game for beginners

Marcos - Apr 17

ReadStream and WriteStream Explained

shailesh_ - Mar 26

Now You Can Full Fine Tune / DreamBooth Stable Diffusion XL (SDXL) with only 10.3 GB VRAM via OneTrainer

Furkan Gözükara - Mar 26

HOW I MADE CITEAL 2.0 MY VERY OWN APP. 😆

Mince - Apr 16

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

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

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

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 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 target Safari 16+ with a CSS @supports media query

Easiest method for targeting Safari with CSS in 2024.

I just spent over 30 minutes looking for a way to only target Safari with CSS media queries and could not find a reliable way that works with Safari 17 without also targeting Chrome.

Looking through the compatibility table on caniuse.com you can spot that Safari 16+ has a unique property which is not supported by Chrome or Firefox called hanging-punctuation .

Using that property and -webkit-appearance we can target Safari specifically until any other browser decides to support it.

✦ 2024 Update: You can also chain it with font: -apple-system-body to make this more bulletproof. Thanks to Saber Hayati for the tip.

If you open this page in Safari, the right column will be red.

All Browsers

Safari only

Nice, but why does it also target Arc, Chrome, Firefox, Brave, Internet Explorer, etc. on my iPhone, iPad, or Vision Pro?

Because iOS and iPadOS (and visionOS) use the Mobile Safari rendering engine for all webviews. This means if you are using Chrome or any other “browser” on your iPhone it is still Safari under the hood.

That’s the case until these apps ship with their own rendering engines which will start being possible with iOS 17.4 for the EU.

get notified when i write something new or launch a new project right into your inbox.

Thanks for your time & attention.

• 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

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!

Related Posts

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

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 .

A little something about everything

How to target specific browsers within certain platforms, such as mozila & safari within mac for css design.

You would first need to target the operating system which can be best accomplished by using javascript such as:

if(navigator.userAgent.indexOf('Mac') > 0) { //code }

Now in order to target the browser version you can use things such as if ie triggers for internet explorer

<!--[if (gt IE 6)&(lte IE 7)]> <link href="/css/IE.css" rel="stylesheet" type="text/css"> <![endif]-->

or webkit for mozila or safari

@media screen and (-webkit-min-device-pixel-ratio:0) { your css here }

final code to target internet explorer on mac would look something like this:

if(navigator.userAgent.indexOf('Mac') > 0) { <!--[if (gt IE 6)&(lte IE 7)]> <link href="/css/IE.css" rel="stylesheet" type="text/css"> <![endif]--> }

Related posts

• How to target specific browsers within certain platforms, such as mozila & safari within mac for CSS design targeting os and/or browser for custom design code such as CSS
• How to target Safari only using CSS and Javascript while keeping your page W3 compliant and completely valid Here is a neat little trick you can use to target Safari and make it behave while fixing cross brows...
• Staggered Animation in CSS for Slideshow Staggered animation to create a slideshow from pure CSS and HTML5

Add comment

5+5 = The captcha value you provided is incorrect.

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:

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.

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

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"] .

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.

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!

Instantly share code, notes, and snippets.

jbutko / style.css

• Download ZIP
• Star 8 You must be signed in to star a gist
• Fork 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 commented Nov 25, 2019

@ntnbst thanks a lot. <3

Sorry, something went wrong.

carlbrn commented Dec 10, 2019

@ntnbst so many thanks!

AnithaPal commented Jan 2, 2020

@Valeka , Thanks It works perfectly.

rhostem commented Feb 27, 2020

@ntnbt thanks a lot!!

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 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 commented Aug 12, 2020

Thanks @ntnbst , your approach worked for me!

onenazmul commented Aug 29, 2020

It worked, thanks a lot @ntnbst

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 commented Jan 18, 2021

Thanks @ntnbst , it worked

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 commented Mar 21, 2021

Thanks @ntnbst !

Muhammad-Naiem commented Mar 24, 2021

need just ios chorme browser all media

nguyen422 commented May 7, 2021

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

ShiBa-Shin commented Sep 1, 2021

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

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 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 commented Aug 12, 2022

@ntnbst thanks man

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 commented Nov 9, 2022

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

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 commented Oct 9, 2023

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

MakerTim commented Mar 7, 2024

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

CerealKiller97 commented Mar 31, 2024

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

RobinSen2217 commented Apr 23, 2024

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

• Logo ontwerp
• Drukwerk ontwerp
• Website advies
• Algemene voorwaarden

Deze website maakt gebruik van cookies. Hoe zit dat?

How to target a specific browser using CSS only

It’s every webdesigner’s nightmare: dealing with all the different browsers and their different versions interpreting your code differently. It goes without saying that we’re talking mainly about Internet Explorer, but I’ve come across differences in every browser. Luckily, there’s a ton of information out there on the Internet. Problem is, the specific information is not always easy to find. Or you’ve found it once, and you can’t find it again. So to save myself, and hopefully you, time, I’ve started a collection of browser targeting methods: Different ways to target a specfic browser (version). I.e. creating some code that is only used by a specific browser or browser version. For CSS, or otherwise (like conditional comments will allow you to use for example javascript only for IE).

By no means have I collected these tricks all by myself. I’ve used many sources over the years, and the large part of this list comes from Paul Irish and Cats that Code

The best way, is to always start with a CSS reset. What this does, is reset all items, so each browser sets out at the same starting point and then interprets your code. I always use Eric Meyer’s famous version:

Targeting specific browsers or browser versions

Selector hacks, targeting ie 6,7,8 and 9 separately in wordpress, attribute hacks, conditional comments, when css is not enough.

In some cases, you won’t make it with CSS only. Chrome for example, can be difficult to target without also targeting Safari.

Targeting Chrome with Javascript

Using php: add body class for each browser/os type.

A useful PHP code snippet which adds a different class to the body tag allows for a lot of freedom: Add the following code to the functions.php file of your theme:

“Browser Detect” PHP Class

In case you need to detect several browsers, and you’re working with PHP, the Browser Detect class is a very useful tool for detecting more than 20 different browsers. Download the package

JQuery browser detection

You can also use jQuery to detect the most common browsers (Safari, Firefox, Chrome, IE and Opera): by using the browserdetect.js Jquery plugin. The plugin will add a css class to your body tag, depending on the browser used by the visitor. For example, using FireFox 3 will result in the following body tag:

Download the plugin

I will add to this collection whenever I find new ways. If you have any to add, or a question, please leave your comment!

GREAT! GREAT! GREAT! GREAT! GREAT! GREAT! I have no words to describe the value of this post. just amazing. god blase you

You’re welcomne Saurabh, I’m glad it’s helped you!

Excellent blog post. I certainly appreciate this website. Thanks!

I really appreciate this post. I¡¦ve been looking all over for this! Thank goodness I found it on Bing. You have made my day! Thank you again

Simply amazing. Thank you very much.

I don’t normally comment but I gotta state regards for the post on this amazing one :D.

Very informative post. Your current Website style is awesome as well!

GREAT! thanks!

Leave a Reply Cancel reply

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

Chris LaChance's logo Chris L a Chance

Site is updating in the open. Rough patches ahead. 😊

New CSS Hacks to Target Safari

While trying to create a new scalable way to support Dynamic Type on iOS devices , I ran into a snag where it also affected Desktop Safari font sizes. After playing around, I came up with what I believe to be new Safari and iOS CSS targeting hacks.

/* iOS browsers */ @supports(font:-apple-system-body) and (-webkit-touch-callout:default){}   /* Desktop Safari */ @supports(font:-apple-system-body) and (not(-webkit-touch-callout:default)){}

Hope this helps.

Add a comment Cancel

Remember me

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

Browser Specific Hacks

Check out BrowserHacks.com for more.

• Hilbrand Edskes Permalink to comment # September 6, 2009 /* Not IE 5.5 and below */ line-height/**/:/**/ Reply

Okay… maybe its just me… but I’m not sure I understand this snippet. Anyone care to explain?

Hi there, just like Chris, I would like an explanation of what this code does?

Please can any one explain what this codes does ? i meant am confues .. But i found it interesting .. please can any one help me out in explaining to me in details

I think it explains the ways to do browser-specific css-rules. For example, if you want to have red background on element with IE6, you take the first selector and do your magic with it.

It’s not working properly. Please add a demo page.

It’s working but should be follow hierarchic.

Thanks Sanjay for the solution. How to use it with !important?

/*For IE 8 Only*/

.header{border:#000 solid 5px /;

i am not able to submit right code for IE8.

/* Safari */ html[xmlns*=””] body:last-child .yourclass { } This is not working in safari. I need a filter which can differ webkit from chrome.

Very cool, thanks for sharing. Can you have it directed to an external style sheet or does it have to be embedded?

I use these hack for targeting specific IE versions

color : green; /* IE9 and below */ color : green\9; /* IE8 and below */ *color : yellow; /* IE7 and below */ _color : orange; /* IE6 */

But W3C validation doesn’t validate the IE target CSS like I have given:

color:green\9;

Why using hack on each line ? If you’ve got a complex integration, use the conditionnals comments with specifics div ids.

For example if you wanna target IE7

Your content

Different syntaxs here : http://www.quirksmode.org/css/condcom.html

Chrome Hack only

Firefox Hack only

coloe:red\9; hack works on IE9

Thank You very much, its working fine for IE and not not affecting to other browser, Thanks a lot.

I am not totally css hack fanatic, I prefer to design and develop simple website yet effective than using fancy website but full of css hack and someday the newer version of browser will no longer adopt this kind of scripting.

IE8 hack aslo working in IE9

:( is there any perfect hack that apply only for IE8 and below ?

IE8 Hack works

@media screen { .item { background: #000; } }

missed “” infront of “screen”

correction : missed “slash0” infront of “screen”

Hi, Please help me with Google chrome only css hack. I am having @ font-face issue with google chrome only. I just need to hack google chrome alone to make it ‘Arial’

Thanks Anil

To work only chrome or safari, try my answer in Stackoverflow – Is there a Google Chrome-only CSS hack?

IE9 another hack (works for me):

Over the years I ask myself again and again the same question: “When are browser builders going to sit down together and begin to build browsers that work WITHOUT all those irritating differences?!?”

Wake up you guys and do what you have to do. Be responsible and free us from all that cr@p!

By the way: Many thanks to all people who are trying so hard to make right what browser builders are messing up!

html[xmlns] .clearfix { display: block; }

Hi,this hack is to which browser and version? :D

Hi, i want android css hack solution please provide hack css. for me…please………..

it’s amazing!!!!

I can not seem to correct a chrome element without breaking a safari element. The Chrome exclusive hacks available do not make any difference.

You can read more about browser specific selector and attribute hacks below it was very helpful for me so just sharing it. Thanks!

Selector Hacks:

http://mydons.com/browser-specific-css-rules-you-must-memorize-part-1/

Attribute Hacks:

http://mydons.com/browser-specific-css-rules-you-must-memorize-part-2/

@media screen and (-webkit-min-device-pixel-ratio:0) { .ar #form-wrapper { width: 330px; } }

Above hack for safari and chrome, i need only chrome if u know share to me

Is there any separate hack for chrome ,and separate hack for safari

now i have solved all my browsers issue….. thanks .

@anil, If you like to create separate style for chrome and safari, you can use individual css “with” browser detection function. For your question, it might be impossible due of both browser are under the same Webkit browser engine. IMHO.

More Browser hacks at BrowserHacks .

\9 hack for ie9 and below. i want only ie8 and below. your information is wrong. please update it….. thanks.

Can anyone of you here that could help me to fixed the issue of my filePicker button color display on mobile phones/iphones.

http://www.jotformpro.com/form/31846176706965

I am using some custom css to change the color from original blue to green but it doesn’t work.

This is the CSS that I’ve injected into this form.

.filePicker-button { background: linear-gradient(to bottom, #008000 0%,#008000 100%); }

.filePicker-button:hover { background: linear-gradient(to bottom, #008000 0%,#008000 100%); }

Can you help me?

@media screen and (-webkit-min-device-pixel-ratio:0) { #safari { display: block; } }

safari css hack

@media screen and (-webkit-min-device-pixel-ratio:0) { /* Safari only override */ ::i-block-chrome, .wrapper th > p span { position: relative; } }

Thanks It’s working fine for me :)

This is working only for safari. Thanks.

@media screen and (-webkit-min-device-pixel-ratio:0) no longer works in Chrome for Mac v31 (not sure in which version this stopped working).

Many of the these are missing indications that they work in IE10+. Hacks are still relevant to newer versions of IE, because even IE11 has its own major quirks (like it’s positioning of fixed nested elements).

I would also add these to collection ;) – CSS hacks: Firefox, Opera, Safari and Internet Explorer

I found the code, it’s working on “iPad|iPhone|iPod|android” devices, i have use this code on my bigcommerce site “http://cancooker.com/” you can see the result on it. This is the site where i pick the code. https://gist.github.com/jsoverson/4963116#file-device-js

Thanks! Sam

Have a look: https://github.com/tarunsharma20/initiator

following css not working in ie 8 if any thing wrong let me know

$(“ul.dynamic”).css(‘margin-top/ * /’,’30px\9′);

Thanks Bhaskar

• Georgi Kolev Permalink to comment # July 2, 2014 @media all and (-ms-high-contrast:none) { .foo { color: green } /* IE10 */ *::-ms-backdrop, .foo { color: red } /* IE11 */ } Reply

Just found out this specific hack for chrome!!! because Webkit on Mac is making fonts sometimes a bit thinner – but on Retina Displays the thinner font is looking fine!

at least I didn´t used it, because I took the normal Chrome and Safari Hack and overwritet the Retina Display later!

Anyone know a hack to get media queries to work for iphone 5/5s? My media-queries are working on everything but the iphone 5 and iphone 5s.

You need to write this:

@Johann, Thanks for the snippet. I’m using mobile first, and em’s but I’ll try this.

Due to a bug in IE 10 & 11, I needed to target some specific CSS at them. This is where I normally turn to find those kinds of hacks, but it wasn’t listed here.

Here’s how I was able to do it. I hope you’ll consider adding it to your list:

Awesome, thank you very much. this guide needs to be updated now that IE:10+ no longer support all the code in the guide. Surprised I had to go comment hunting for a solution.

Nice, thanks for sharing

awesome, however that is old post , but it help :) for me i usually use this hacks ..

Hey, my friend and I are having an argument. I said “I’m pretty sure the \9 hack is just called ‘the slash hack.'” but she thinks it has a different name. I don’t suppose you know what it’s called, do you? Cheers :)

p{ border-color: blue \ ; }

for Internet Explorer 8 only

I have used HelveticaNeueLTStdCn font on a web page which is cool on every browser except Safari browser. Thats why i need to use different font family only on safari browser.

Do you have any idea to write only Safari browser specific css …

This page may come in handy: http://browserhacks.com/ .

Leave a Reply Cancel reply

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

Save my name, email, and website in this browser for the next time I comment.

Copy and paste this code: micuno *

Leave this field empty

CSS target chrome and safari only / Firefox only without plugins

Css target chrome and safari only.

/* Webkit browser engine: Safari and Chrome */

@media screen and (-webkit-min-device-pixel-ratio:0) { ... }

Useful for form inputs and dropdown styling as IE and Firefox are a bit less flexible on that…

CSS target Firefox only

@-moz-document url-prefix() { ... }

Copyright © 2016-2024. All rights reserved. Designed and coded by Denis Bouquet

You are using an outdated browser. Please upgrade your browser to improve your experience.

Apple to unveil AI-enabled Safari browser alongside new operating systems

Safari getting new AI tools in iOS 18

The software — expected to debut as Safari 18 later in 2024 — is currently undergoing evaluation alongside internal builds of Apple's next-generation operating system updates, namely iOS 18 and macOS 15, according to people familiar with the matter. Should all of the new features make it to the release candidate stage, users will be treated to a new user interface (UI) for customizing popular page controls, a "Web eraser" feature, and AI-driven content summarization tools.

Intelligent Search - AI-enhanced browsing and text summarization

Engineers evaluating the latest builds of Safari 18 can find a toggle for the new page controls menu within the browser's address bar. The menu consolidates — and provides quick access to — old and new page control tools, among them being the browser's new "Intelligent Search" feature.

This feature is not automatically enabled in test builds of Safari 18 and instead requires manual activation from the page controls menu. Once enabled, it's believed the tool leverages Apple's on-device AI technology — specifically the Ajax language-learning model — to identify topics and key phrases within a webpage for which to base the summarization.

In selecting key phrases, Apple's LLM software identifies sentences that provide explanations or describe the structure of objects, depending on the text in question. Words repeated within a text and key sentences are recognized as text topics.

These early indications suggest Apple is striving to deliver text summarization alongside Safari 18 later this year, though the exact implementation of this feature remains fuzzy.

Apple's text summarization features could be a response to rival generative AI tools, such as OpenAI's ChatGPT. But Apple's on-device models and technologies like Private Relay could make the experience much more secure for users. Intelligent Search is also likely to be the same AI browser assistant that one X user hinted at a couple of weeks back.

Web Eraser for better content-blocking

Also accessible from the new page controls menu is a feature Apple is testing called "Web Eraser." As its name would imply, it's designed to allow users to remove, or erase, specific portions of web pages, according to people familiar with the feature.

The feature is expected to build upon existing privacy features within Safari and will allow users to erase unwanted content from any webpage of their choosing. Users will have the option to erase banner ads, images, text or even entire page sections, all with relative ease.

The erasure is said to be persistent, rather than limited to a browsing session. This means that Safari will remember the changes even after the original tab or window has been closed.

When visiting a web page with previously erased content, Safari will inform the user that the page has been modified to reflect their desired changes. The browser will also give the user the option to revert changes and restore the webpage to its initial, unaltered state.

As for where Apple got the inspiration for Web Eraser, the company could have Sherlocked the feature from the third-party app 1Blocker. The application features a similar way of erasing ads, where users would tap ads to make them disappear.

Updated UI will move key tools into one easy location

The new page controls menu referenced throughout this article will attempt to offer Safari 18 users quick and easy access to several options previously located across different menus and the Share Sheet. Running on pre-release versions of macOS 15, for instance, the menu also pulls in the "Aa" menu common on existing iPadOS versions of the browser. These include zoom options, webpage settings for privacy controls, content blocking options, extension shortcuts, and access to the new AI and erasure tools.

These various options existed previously on macOS, but were found by navigating through the Safari settings menu. Having all of these controls in one central location in the Address Bar will make these options more discoverable for end users. Other options like on-page text search and reader mode are also in this menu.

This all suggests Apple intends to unite the iPadOS and macOS Safari UI paradigms when it unveils its new OS releases during its Worldwide Developers Conference in June.

AI-enhanced Visual Lookup feature could be available in 2025

Simultaneously, Apple is also working on a much more powerful visual search feature scheduled for integration sometime in 2025 that will allow users to obtain information on consumer products when browsing through images. People familiar with the tool say it's similar to the Visual Lookup feature, through which Siri can identify plants, pets and landmarks from photos.

Visual Search could be implemented as a system-wide feature. So, instead of surfacing search results in the Photos app, the user may be able to use Visual Search directly in Safari by selecting an image.

Given development of this tool is in the earlier stages, it remains unclear how Apple will ultimately go about implementing it. It also remains to be seen whether or not the feature will make it through internal testing.

The iPhone maker has expressed significant interest in artificial intelligence and more recently published research related to on-device language learning models. This goes hand in hand with widespread rumors about several other AI-powered software features, many of which are expected to make their debut later this year with iOS 18.

Another big year for Safari

From its inception, Safari was always meant to rival existing web browsers.

Safari was originally added to macOS as a means of replacing Microsoft's Internet Explorer for Mac, which was the default browser. Over the years, the app made its way to the iPhone , and has since received various upgrades over the years.

More recent versions of Safari provide users with personalized web suggestions, and allow for greater privacy protection with features such as iCloud Private Relay.

This latest set of enhancements only serves to better position Safari against the competition, in an ever-increasing landscape of generative AI tools and third-party ad-blockers.

While Apple tests many such features during different development stages, it is important to remember that not all of them make it to release. Apple has been known to delay features or cancel them entirely, so there's always a chance we may not see these new Safari features after all.

Along with Safari 18 and its associated improvements, we should also see a revamped Calculator with Math Notes make its way to iPadOS 18. Freeform Scenes and Adaptive Voice Shortcuts are new OS features, which are also expected to debut later this year.

Apple is expected to introduce various AI-related enhancements as part of iOS 18 and macOS 15, both of which should be announced at the company's annual WWDC on June 10.

28 Comments

"As for where Apple got the inspiration for Web Eraser, the company could have Sherlocked the feature from the third-party app 1Blocker. The application features a similar way of erasing ads, where users would tap ads to make them disappear." They may also have been inspired by Simplified Page....

As long as I can turn it off/hide it they can knock themselves out. 

Will the web eraser feature remove pop up videos, such as the ones that appear on this site?

I use the 'Reader' function in Safari quite a bit, but sometimes it doesn't work very well. Seems like something that AI could help make better. 

Web ads suck but how else do you think your favorite websites will stay in business? Are you prepared to pay a subscription to every site? I doubt it…

Top Stories

Save $200 on this 14-inch MacBook Pro M3 Pro with 36GB RAM, 1TB SSD

Apple's iOS 18 to streamline task management with unified events and reminders

(PRODUCT)RED is getting our hopes up for a vibrant iPhone 15

Apple headphone shootout: Beats Solo 4 vs AirPods Max

Apple's Q2 2024 earnings results may have some drama — what to expect

Featured deals.

Amazon crushes it with $179 AirPods Pro 2, $299 Apple Watch Series 9 deals

Latest exclusives.

An inside look at Apple's various internal iOS variants that aid development

Apple's iOS 18 AI will be on-device preserving privacy, and not server-side

Apple's macOS 15 to get rare cognitive boost via Project GreyParrot

Latest comparisons.

M3 15-inch MacBook Air vs M3 14-inch MacBook Pro — Ultimate buyer's guide

M3 MacBook Air vs M1 MacBook Air — Compared

Latest news.

How to fix System Data filling your iPhone's storage

Your iPhone may have low storage because it's been consumed by System Data, which can potentially consume all available capacity. Here's how to regain space when things get too bloated to function.

Pennsylvania has two battling bills that could make tracking with AirTags unlawful

Pennsylvania state representatives have pushed forward a second piece of legislation that would penalize the unauthorized use of Bluetooth trackers, like AirTag, to track someone.

iPhone 15 Pro is unexpectedly the sales champion of spring 2024

Historically, the "Pro" iPhone models get passed by the lower-end model in the spring — but so far 2024 is very different.

Amazon-funded Anthropic launches AI app to compete with ChatGPT

An Amazon-backed firm that's pushing for safe and trustworthy artificial intelligence apps has released its Claude AI app for the iPhone and iPad — but not the Mac.

Apple's M3 Pro 14-inch MacBook Pro with an upgrade to 36GB memory and 1TB storage is eligible for an exclusive $200 coupon discount on top of $50 off three years of AppleCare.

Apple profiles three distinguished Swift Student Challenge winners

Apple has profiled three of the "Distinguished Winners" of its 2024 Swift Student Challenge, with apps covering care, extreme sports, and breathing exercises.

LG first to add native Apple Music Dolby Atmos support to smart TVs

LG has become the first smart TV producer to enable support for Dolby Atmos Apple Music support without the use of Apple TV hardware.

Apple Vision Pro could launch in Japan very soon

A reference to Apple Vision Pro accessories being excluded from a limited-time promotion in Japan hints that there may be an early May launch for the headset there.

GM's CarPlay replacement doesn't work well, and has a long road ahead of it

GM's decision to move away from CarPlay was to avoid Apple having too much control over vehicles. It's going to be a bumpy ride for consumers.

Latest Videos

Beats Solo 4 headphones review: Great audio quality and features

iPhone 16 Pro: what to expect from Apple's fall 2024 flagship phone

New iPad Air & iPad Pro models are coming soon - what to expect

Latest reviews.

Unistellar Odyssey Pro review: Unlock pro-level astronomy with your iPhone from your backyard

Ugreen DXP8800 Plus network attached storage review: Good hardware, beta software

Espresso 17 Pro review: Magnetic & modular portable Mac monitor

{{ title }}

{{ summary }}