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 .

DEV Community

DEV Community

Stephan Lamoureux

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

pic

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

llxd profile image

🕵️‍♂️ The Art of Self-Learning: How to Teach Yourself Any Programming Concept 🤓

Lucas Lima do Nascimento - Apr 16

pavanbelagatti profile image

This is How You Build AI Apps Using the RAG Framework in 5 Minutes!

Pavan Belagatti - Apr 18

thepracticaldev profile image

Join Us For The Next Frontend Challenge: Earth Day Edition!

dev.to staff - Apr 17

mikeyoung44 profile image

The Curious Decline of Linguistic Diversity: Training Language Models on Synthetic Text

Mike Young - Apr 18

DEV Community

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

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

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.

target safari only css

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

target safari only css

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

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

target safari only css

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 .

Chris LaChance's logo Chris L a Chance

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

New CSS Hacks to Target Safari

Cerfs from L'animal dans la décoration (1897) illustrated by Maurice Pillard Verneuil. Original from the The New York Public Library. Digitally enhanced by rawpixel.

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 .

Instantly share code, notes, and snippets.

@jbutko

jbutko / style.css

  • Download ZIP
  • Star 7 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.

@furey

furey commented Oct 6, 2019

Thanks @ntnbst !

Your approach worked for me as well.

Sorry, something went wrong.

@frknbasaran

frknbasaran commented Nov 25, 2019

@ntnbst thanks a lot. <3

@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

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

  • 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

article header image

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!

foto Boris Hoekmeijer

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 *

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

Browser Specific Hacks

Avatar of Chris Coyier

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

IMAGES

  1. Target all versions of safari in css

    target safari only css

  2. We Can Target Only Safari 10 In CSS

    target safari only css

  3. How to target Safari 16+ with a CSS @supports media query

    target safari only css

  4. CSS3

    target safari only css

  5. Is their any hack for css, that will only target safari browser.

    target safari only css

  6. HTML : Target safari css, but not chrome

    target safari only css

VIDEO

  1. 3 March 2024

  2. The only regret is the path not taken

  3. video output F7C28A2B 1931 4226 BF23 4D201FBDCAD6

  4. SAFARI INDUSTRIES SHARE ANALYSIS FOR TARGET UPDATE🔰SAFARI INDUSTRIES NEWS🌺SHORT TERM 13/01/2024

  5. Unforgettable Safari Encounter: Lioness Peeing on My Jeep

  6. safari

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

    Example css fixes, which can be in page or in your external css file etc: /* Safari Mac specific alterations * (relies on class added by js browser detection above), * to take into account different font metrics */ .safari-mac #page4 .section p.fussyDesigner { margin-right: -15px; } .safari-mac #page8 .section-footer { width: 694px; }

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

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

  5. FabioRosado

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

  6. How to target Safari 16+ with a CSS @supports media query

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

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

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

  10. New CSS Hacks to Target Safari • Chris LaChance

    New CSS Hacks to Target Safari. June 2021 • Category: Misc. 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 */.

  11. Sometimes you just need to target Safari in your CSS (either ...

    It's absolutely better. It just feels so backward to have to target specific browsers in 2021. This is the future we've been fighting the whole time and there doesn't seem to be much we can do about it sometimes.

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

    CSS, Safari: Target only Safari browser Raw. style.css This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. ...

  13. Sometimes you just need to target Safari in your CSS (either ...

    Sometimes you just need to target Safari in your CSS (either on desktop or mobile). Here's a small snippet that I use for that (link of the codepen in comments) comments sorted by Best Top New Controversial Q&A Add a Comment

  14. Detect Safari browser with pure CSS

    You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself. You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it.

  15. Tutorials ★ How to target a specific browser using CSS only ★ Boris

    In my opinion, though, it is better to add all of the CSS to one CSS file, as this keeps the number of HTML requests to a minimum. In some cases, though, you may want or need to use this (taken from the Quirksmode website ).

  16. 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….

  17. New WebKit Features in Safari 13.1

    CSS Shadow Parts. New support for CSS Shadow Parts allows web authors to style parts of web components without the need to understand how they are constructed. This provides a mechanism to define author-defined style parts akin to input element's pseudo elements in WebKit. See the CSS Shadow Parts specification for more information. More CSS ...

  18. javascript

    So: Is here a way to target !ONLY! safari version 8? Targeting could be any-as comment in html, like old comments for "if IE7" as in CSS somehow (but -webkit targets all webkit browsers, not only safari) as in javascript/jquery; So, any sugggestions, please?

  19. Browser Specific Hacks

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

  20. Get Started with Intel® Advisor

    Visible to Intel only — GUID: GUID-38D6D68E-0570-46D9-8E49-5BE361C16AE9. View Details. Close Filter Modal. ... Fortran, SYCL, OpenCL application, or an application with OpenMP target pragmas. For an application running on a GPU, determine if your application can get speedup from running on a different next-generation GPU and identify ...