apply css only on safari

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

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

Instantly share code, notes, and snippets.

jbutko / style.css

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

AnithaPal commented Jan 2, 2020

@Valeka , Thanks It works perfectly.

Sorry, something went wrong.

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 Loading

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

shanimal commented Aug 7, 2024 • edited Loading

Safari is a mess. Thank you! Added to my globals...

akshilThumar-toddleapp commented Aug 22, 2024

@MakerTim Thank you very much!

How to Apply Styles to Safari Only?

Introduction:

When working with CSS, the challenge of applying styles to specific browsers while maintaining compatibility with others is common. One such need is styling elements uniquely for Safari, the preferred browser on Apple devices.

Understanding the Problem:

Safari’s use of the WebKit engine, also used by older versions of Chrome, can make it challenging to target it with CSS. However, over the years, various methods have emerged that can effectively isolate Safari.

The Solution:

1. @media Screen and (-webkit-Min-Device-Pixel-Ratio:0) Query:

This method filters out Safari by checking for its minimum device pixel ratio.

2. Double Media Query:

This method employs a nesting technique to target Safari 10.1 and higher.

3. CSS Regions:

Regions, supported only in Safari, enable precise styling control within specific browser areas.

Discussion:

Additional insights from the comments:

• iOS devices use Safari’s engine even in Chrome, so targeting iOS Safari is similar to targeting Safari on desktops.
• It’s crucial to check the test page for live examples before using any of these CSS hacks.
• Media queries can be challenging to work with, so always test thoroughly to avoid unexpected behaviors.

Conclusion:

By leveraging the provided CSS methods, it becomes possible to apply styles exclusively to Safari without affecting other browsers. Understanding the unique properties of each browser allows for more precise and efficient web development.

css for safari only

Answered on: Thursday 18 April, 2024 / Duration: 14 min read

Programming Language: CSS , Popularity : 7/10

Solution 1:

To target Safari only in CSS, you can use the @supports rule along with the -webkit-min-device-pixel-ratio property, which is specific to Safari.

Here is an example code snippet that targets Safari only:

In this example, the background color of the body element will only be light blue in Safari.

Output: In Safari, the background color of the body element will be light blue, while in other browsers it will remain the default color.

Solution 2:

Safari-Only CSS

Safari is a web browser developed by Apple for macOS, iOS, and iPadOS. To target Safari specifically in CSS, you can use the following syntax:

The @supports rule checks for the presence of a特定的CSS特性or property. In this case, -webkit-something is a vendor prefix used by Safari to indicate support for a particular feature. When the specified feature is supported, the CSS rules within the @supports block will be applied.

Example 1: Targeting Safari 10 and Later

To target Safari 10 and later, you can use the following CSS:

In Safari 10 and later, the body element will have text selection disabled when the user touches it. This is because the -webkit-touch-callout property is supported by Safari 10 and later.

Example 2: Targeting Safari 12 and Later

To target Safari 12 and later, you can use the following CSS:

In Safari 12 and later, the .grid-container element will use the Grid Layout Module for its layout. This is because the display: grid property is supported by Safari 12 and later.

* Safari-only CSS rules will only be applied when the specified vendor prefix is supported by the browser. * It's important to use vendor prefixes cautiously and avoid using them for non-essential styling. * Modern browsers generally prefer standard CSS over vendor-prefixed CSS.

Solution 3:

To apply CSS styles specifically in Safari, you can use the -webkit- prefix. This prefix is used for properties and values that are implemented in WebKit-based browsers, such as Safari.

Here's an example of how you can use the -webkit- prefix to change the background color of an element in Safari only:

In the above example, the body element will have a light blue background color in all browsers, but in Safari alone will have a lightcoral background color.

It is important to note that the -webkit- prefix is not standard and might not be supported in the future versions of Safari, so it's recommended to use it as a progressive enhancement, not as a replacement for the standard properties.

Also, it's a good practice to include the standard property before the -webkit- one, so that the style will be applied in all browsers.

Here is an example of the output in safari :


And here is an example of the output in chrome:


You can see that the background color is different for safari than chrome.

More Articles :

Brightness css.

Answered on: Thursday 18 April, 2024 / Duration: 5-10 min read

Programming Language : CSS , Popularity : 4/10

option tag center

Programming Language : CSS , Popularity : 3/10

bootstrap grid only css npm install

Programming Language : CSS , Popularity : 10/10

Capitalise all first letters of words in a sentence with css

Programming Language : CSS , Popularity : 5/10

html disable button

Programming Language : CSS , Popularity : 9/10

how to decurate react router link css

Linking css to html, css cell spacing, what port does wss use, css code for green, change button color in bootstrap.

Programming Language : CSS , Popularity : 6/10

css footer at bottom of page

Border-radius order.

Programming Language : CSS , Popularity : 7/10

ordered list indent

Programming Language : CSS , Popularity : 8/10

media query css for all devices

How to keep :active css style after click a button, css nesting hover, laravel enum column, overflow-x hidden not working, css modern light and dark colors, change last character color css, how to make a game engine, html css good button, fill whole available space css, html video css, add expanding underline on page load css, add shadow to iframe, css letter spacing, how to remove white space in the right side of web page, css remove whitespace around element, align absolute div center.

• Password Generator
• HTML Editor
• HTML Encoder
• JSON Beautifier
• CSS Beautifier
• Markdown Convertor
• Find the Closest Tailwind CSS Color
• Phrase encrypt / decrypt
• Browser Feature Detection
• Number convertor
• CSS Maker text shadow
• CSS Maker Text Rotation
• CSS Maker Out Line
• CSS Maker RGB Shadow
• CSS Maker Transform
• CSS Maker Font Face
• Color Picker
• Colors CMYK
• Color mixer
• Color Converter
• Color Contrast Analyzer
• Color Gradient
• String Length Calculator
• MD5 Hash Generator
• Sha256 Hash Generator
• String Reverse
• URL Encoder
• URL Decoder
• Base 64 Encoder
• Base 64 Decoder
• Extra Spaces Remover
• String to Lowercase
• String to Uppercase
• Word Count Calculator
• Empty Lines Remover
• HTML Tags Remover
• Binary to Hex
• Hex to Binary
• Rot13 Transform on a String
• String to Binary
• Duplicate Lines Remover

How to Fix CSS Issues on Safari

Different browsers serve the web page content differently which can cause problems while using some CSS properties. To solve this kind of issues, there is a simple solution that will help you with 90 percent of cases.

Although many programmers face some difficulties when Safari doesn’t support CSS properties, these properties work fine in other browsers.

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 Safari without any problem.

Example of making the border-radius property work on Safari:

The background-color property may also have the cause problem on Safari. Let’s see one more example.

Example of making the background-color property work on Safari:

Related resources.

• CSS appearance Property
• HTML Basics
• Javascript Basics
• TypeScript Basics
• React Basics
• Angular Basics
• Sass Basics
• Vue.js Basics
• Python Basics
• Java Basics
• NodeJS Basics

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 }

Hi team, Any other -webkit to use ??

wouldnt work. Thanks

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

Technical-QA.com

Can you use CSS only in Safari browser?

Table of Contents

• 1 Can you use CSS only in Safari browser?
• 2 Which is better for numeric input chrome or Safari?
• 3 How can I Make my CSS work on safari?
• 4 What’s the best way to input text in Safari?
• 5 When to use overflow hidden in Safari CSS?
• 6 Why do you use before and after elements in CSS?
• 7 When to use before and after content in JavaScript?

Apply some CSS styles only in the Safari browser Web browsers contain bugs and defects, some of them unique to each browser. Forcing those defects on purpose is one of the best tricks to apply some CSS styles only in some specific browsers, such as Safari.

Is there way to style input buttons for iOS?

I’m using CSS to style the input buttons on my website, but on IOS devices the styling is replaced by Mac’s default buttons. Is there a way to style buttons for iOS, or a way to maybe make a hyperlink that behaves like a submit button?

Which is better for numeric input chrome or Safari?

In fact, the same techniques covered in the Safari section apply to Chrome as well. Opera handles numeric inputs exactly like Chrome. That should come as no surprise since Opera adopts the same Blink rendering engine as Chrome. That means that the same CSS tricks to hide and style the input in Safari and Chrome also apply here with Opera.

When to use input before and after CSS?

With elements like input and hr, :before and :after would still appear before or after the content, but there is no container involved (especially for input). input:checked:before is widely used to indicate checkboxes being checked via css. – Radley Sustaire Jun 18 ’14 at 22:10 Oddly, it works with some types of input. At least in Chrome,

How can I Make my CSS work on safari?

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 Safari without any problem. The background-color property may also have the cause problem on Safari.

How to display CSS properties in safari-w3docs?

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.

What’s the best way to input text in Safari?

Grab a screenshot, open up in Photoshop and zoom in. Three colors are used for the borders: When I’m feeling particularly pixel-retentive I’ll create a 1�1 #C3C3C3 gif to use as a repeating background image in the input to emulate that subtle drop-shadow.

How does input fill the span in Safari?

The input in turn fills the span because of the width: 100%;. Now, rather than waste time micromanaging every detail of each individual form on a site, we can drop our nested inputs into table cells. Each input and its bevelled border will expand to fill the available space.

When to use overflow hidden in Safari CSS?

As mentioned by Jennifer, Safari overlooks “overflow: hidden” when applied to HTML and BODY in CSS. You should target the element selector more directly in CSS, specifically the one that has the content that is overflowing, and use “overflow: hidden” on that element.

What to do if HTML is not applying CSS?

It’s not applying the css file. I’ve tried downloading and saving to different locations, creating a CSS folder, saving the style.css file to that, and updating the href link in the html to css/style.css but nothing seems to work. Any ideas on what I’m doing wrong please?

Why do you use before and after elements in CSS?

The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this: You want the generated content to come before the element content, positionally.

What to do when CSS is not supported in Safari?

Although many programmers face some difficulties when Safari doesn’t support CSS properties, these properties work fine in other browsers. There is a CSS appearance property used to display an element using a platform-native styling based on the users’ operating system’s theme.

When to use before and after content in JavaScript?

You want the generated content to come before the element content, positionally. The ::after content is also “after” in source-order, so it will position on top of ::before if stacked on top of each other naturally. Note that the content is still inside the element they are applied to.

css for safari only

Code examples.

• answer css for safari only

More Related Answers

• Safari only CSS hack
• how to detect safari browser in javascript
• css Safari conditional
• css especifico para safari
• font looking weird when applying bold safari
• css condition if it is safari browser
• How to detect Safari, Chrome, IE, Firefox and Opera browser?
• ios safari controls cover element
• How to make website responsive for safari
• css styles only safari on mac only

Answers Matrix View Full Screen

Documentation

Oops, You will need to install Grepper and log-in to perform this action.

You can make a difference in the Apple Support Community!

When you  sign up with your Apple ID , you can provide valuable feedback to other community members by  upvoting helpful replies and User Tips .

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

How to disable CSS styles in Safari 17?

Previously I could used Develop > Disable Styles. I found very useful for some sites. It is no longer in that menu. How can I disable styles when using Safari 17?

Mac mini, macOS 12.7

Posted on Oct 2, 2023 3:03 PM

Posted on Feb 22, 2024 2:17 PM

Here's a screenshot of where I found the feature in Safari 17.3.1 to hopefully save other people a couple of minutes fruitlessly hunting around in the JavaScript console tab:

Similar questions

• How do I disable the theme colour in safari 15 bar? I just installed Safari 15.0 on my Mac. How do I disable the annoying feature where the bar gets a theme colour from the web site you are at the moment? I google it and found that there should be an option in Safari Preferences under Accessibility, but I don't have it (I only have two options there, "Never use font sizes smaller than" and "Press tab to highlight each item...". Thanks in advance. 322 1
• Safari 17 loses "disable javascript"? Since Safari 17 it looks like the 'disable javascript' option has been removed from the Develop menu. Is there an easy way to disable javascript on demand like there used to be? I found it very useful when troubleshooting web development issues. 2612 8
• Set Safari Develop back to defaults Is there an easy way to set the Develop menu back to default selections? Alternatively if everything is unselected in Experimental Features will it run better? 102 1

Loading page content

Page content loaded

Feb 22, 2024 2:17 PM in response to fredfromminneapolis

Apr 7, 2024 4:36 PM in response to fredfromminneapolis

I have a similar issue, I updated to OS Monterey with disable styles checked, and it's stuck off in Safari 17. I'm unable to toggle styles on or off at all. Any fix for this?

Oct 6, 2023 9:00 AM in response to fredfromminneapolis

It's moved to the JavaScript Console, as explained on this page, along with a screen shot:

https://webkit.org/blog/14445/webkit-features-in-safari-17-0/

New tab -specific setting overlay

Some previously- global settings from the Develop menu, like disabling JavaScript or changing WebRTC behavior, have moved to Web Inspector where they are now scoped to the inspected tab , allowing you to use other tabs and windows normally.

Oct 6, 2023 10:55 AM in response to krl09

It took me a while to find where it now lives, but it was indeed there!

I would rather that it were still simple, but happy it is still available.

Latest features

• WebAssembly BigInt to i64 conversion in JS API
• WebAssembly Threads and Atomics
• WebAssembly Multi-Value
• WebAssembly Import/Export of Mutable Globals
• WebAssembly Non-trapping float-to-int Conversion

Most searched features

• WebP image format
• gap property for Flexbox

Test a feature

Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices.

• Safari on iPhone 14
• Chrome on Galaxy S23

Did you know?

If a feature you're looking for is not available on the site, you can vote to have it included . Better yet, if you've done the research you can even submit it yourself !

You can import usage data from your Google Analytics account and see exactly how well a feature is supported among your own site's visitors. Look under the Settings panel to get started!

Usage data for all countries and continents can be imported via the Settings panel .

By default, older browser versions are only shown if they have >= 0.5% usage share. You can increase or decrease this value from the Settings panel .

Each feature support table includes a "Usage relative" button. This will resize each browser version cell to be relative to the amount of support it has for the selected usage source.

Third party tools

• The CanIUse Embed — Add support tables to your site
• Caniuse Component — Add support tables to your presentations
• Caniuse command line tool
• Doiuse...? — Lint your CSS to check what features work
• I want to use — Select multiple features and see what % of users can use them

See full list

Browser scores

• Chrome 127: 432
• Firefox 129: 414
• Safari 17.5: 404

Please enable JavaScript in your browser to enjoy a better experience.

Getting Started with CSS @property Rule

The CSS @property is a powerful feature that brings more control and flexibility to custom properties, also known as CSS variables .

It is introduced as part of the CSS Houdini project, which is designed to provide developers with deeper access to the browser’s rendering engine. The @property rule allows you to define custom properties with specific types, default values, and even the capability to animate CSS properties .

In this article, we’ll explore what the @property rule is, why it’s useful, and how you can leverage it in your web projects.

What is @property for?

CSS custom properties, also known as CSS variables, have made styles more reusable. It allows you to define a value once and use it throughout your stylesheet.

However, one limitation has been the inability to specify a property’s type or set default values directly in CSS. This means any value can be assigned to a custom property, which can lead to unexpected results and make it harder to maintain your styles in some situations.

This is where the @property rule comes in. It allows you to set a default value, provides a fallback value that will be used if the custom property is not explicitly set, enables custom property animation, and defines a type for a custom property.

This ensures that a variable can only accept a specific data type, such as a length, color, or number.

The type of the property is defined with the syntax property. It accepts a string value defining the CSS type value, as follows:

Let’s say we have a button component. We’d like to define some defaults on this component. Traditionally, we could use custom properties to define the background color and border radius of the button component, like so:

Or, use CSS variables to define the values once and reuse them throughout the stylesheet:

But, what if we want to ensure that the background color is always a valid color value, and the border radius is always a valid length value?

We can use the @property rule to define the type of these custom properties and set default values.

To do so, we could create a couple of custom properties defined with the following options in the @property rule:

In this example, we have two custom properties defining the background color and border radius of the button component.

We use the syntax property to define the type of the custom property, while the initial-value property sets the default value.

We also use the inherits property to specify whether the custom property inherits its value from its parent element, in which case we set them all to false to avoid inheritance.

Once they are set, we can now use these custom properties in our styles, like so:

See the Pen CSS @property by HONGKIAT ( @hkdc ) on CodePen .

Wrapping up

The CSS @property rule brings a significant step forward to CSS custom properties, or CSS variables. All major and latest browsers already support the CSS @property rule.

To sum up, the CSS @property rule is a powerful feature and a great addition to the CSS language that can help you write more maintainable and type-safe stylesheets. If you haven’t already, give it a try in your next project!

Release Notes for Safari Technology Preview 202

Aug 28, 2024

by Jon Davis

Safari Technology Preview Release 202 is now available for download for macOS Sequoia beta and macOS Sonoma. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update.

This release includes WebKit changes between: 281465@main…282389@main .

Accessibility

Resolved issues.

• Fixed text-transform: full-size-kana to not affect AT/speech output. ( 282258@main ) (115504070)

New Features

• Added support for background-clip: border-area . ( 282202@main ) (133788384)
• Added support for line-fit-edge and updated text-box-edge . ( 282228@main ) (133834296)
• Added support for the text-box shorthand. ( 282282@main ) (133942602)
• Added support for ruby-align . ( 282106@main ) (133656625)
• Added support for unprefixed ruby-position . ( 281804@main ) (86128259)
• Added support for scrollbar-width . ( 282068@main ) (133019206)
• Added support for view transition classes. ( 282383@main ) (134020027)
• Added support for view transition types. ( 282344@main ) (133610087)
• Added support for the shape() function. ( 281924@main ) (133322584)
• Added support for closest-corner and farthest-corner in circle and ellipse shapes. ( 281808@main ) (132936677)
• Added support for the color-layers() function. ( 282334@main ) (134013898)
• Added support for @property <string> syntax. ( 281872@main ) (133250776)
• Added support for ::target-text . ( 282356@main ) (134010063)
• Added support for @page margin descriptors. ( 282048@main ) (118773100)
• Added support for jis-b4 and jis-b5 sizes for @page . ( 281814@main ) (133138325)
• Fixed -webkit-line-clamp: none to be parsable. ( 281826@main ) (103158259)
• Fixed serialization of place-content , place-items , and place-self properties. ( 281476@main ) (125415088)
• Fixed masonry intrinsic sizing with fixed size and auto . ( 281677@main ) (132849745)
• Fixed dictation UI no longer showing up when beginning dictation after focusing an empty text field. ( 281474@main ) (131534054) (FB14277296)
• Implemented Float16Array. ( 281870@main ) (109883982)
• Added support for firstDayOfWeek for Intl.Locale info API. ( 281510@main ) (132731533)
• Enabled Base64 and Hex features. ( 281910@main ) (133312461)
• Added support for type reflection for WebAssembly.Module.imports and WebAssembly.Module.exports . ( 281974@main ) (133429946)
• Fixed roundingMode for seconds, microseconds, and nanoseconds in Intl.DurationFormat . ( 281955@main ) (130771643)
• Fixed fullscreen error handling to include error messages. ( 281853@main ) (103073510)
• Fixed margins used for grid items on relayout. ( 282092@main ) (113984882)
• Fixed correctly applying clip-path to the SVG element. ( 281893@main ) (80516912)
• Fixed fill to not be considered a presentation attribute on animation elements. ( 282100@main ) (128896937)

Web Animations

• Fixed alignment-baseline and buffered-rendering to support discrete animation. ( 281602@main ) (94613679)
• Fixed hanging-punctuation to support discrete animation. ( 281616@main ) (94614108)
• Fixed scroll-snap-* properties to support discrete animation. ( 281572@main ) (94614257)
• Fixed column-span to support discrete animation. ( 281505@main ) (96082973)
• Fixed appearance to support discrete animation. ( 281568@main ) (96082999)
• Fixed hyphenate-character to support discrete animation. ( 281484@main ) (132698836)
• Fixed font-optical-sizing to support discrete animation. ( 281489@main ) (132699150)
• Fixed image-rendering to support discrete animation. ( 281506@main ) (132707652)
• Fixed the mask-border-* properties to be animatable. ( 281569@main ) (132783274)
• Fixed stroke-color to be animatable. ( 281570@main ) (132784589)
• Added support for the getPredictedEvents API to PointerEvent . ( 281756@main ) (117767174)
• Added support for Scroll To Text Fragment Generation. ( 282379@main ) (131712706)
• Added support for altitudeAngle and azimuthAngle to PointerEvent . ( 282017@main ) (131974392)
• Added support for the getCoalescedEvents API to PointerEvent . ( 281520@main ) (132210576)

Deprecations

• Removed support for the non-standard “overflow” event. ( 281672@main ) (71129110)

Web Assembly

• Added support for JIT-less Wasm. ( 281726@main ) (113768974)
• Added support for garbage collection. ( 281975@main ) (126103011)
• Added support for Wasm Tail Calls. ( 281716@main ) (131410516)
• Fixed WebDriver sometimes taking screenshots with a transparent grey line at the top and no rounded corners. ( 281887@main ) (116020785)

• a. Send us an email
• b. Anonymous form
• Buyer's Guide
• Upcoming Products
• Tips / Contact Us
• Podcast Instagram Facebook Twitter Mastodon YouTube Notifications RSS Newsletter

Apple Releases Safari Technology Preview 202 With Bug Fixes and Performance Improvements

Apple today released a new update for Safari Technology Preview , the experimental browser that was first introduced in March 2016. Apple designed ‌Safari Technology Preview‌ to allow users to test features that are planned for future release versions of the Safari browser.

The current ‌Safari Technology Preview‌ release is compatible with machines running macOS Sonoma and the macOS Sequoia beta. Set to launch this fall, ‌macOS Sequoia‌ is the newest version of macOS that Apple is working on.

The ‌Safari Technology Preview‌ update is available through the Software Update mechanism in System Preferences or System Settings to anyone who has downloaded the browser from Apple's website. Complete release notes for the update are available on the Safari Technology Preview website .

Apple's aim with ‌Safari Technology Preview‌ is to gather feedback from developers and users on its browser development process. ‌Safari Technology Preview‌ can run side-by-side with the existing Safari browser and while it is designed for developers, it does not require a developer account to download and use.

Get weekly top MacRumors stories in your inbox.

Popular Stories

iPhone 16 Launch Month Is Here: Everything We Know

What Not to Expect at Apple Event on September 9: 'It's Glowtime'

Apple Likely to Launch M4 Macs in November

10 Reasons to Wait for Next Year's iPhone 17

What to Expect From the AirPods 4, AirPods Pro 3, and AirPods Max 2

Top rated comments.

Next Article

Our comprehensive guide highlighting every major new addition in iOS 17, plus how-tos that walk you through using the new features.

Update now for a number of important security fixes.

Get the most out your iPhone 15 with our complete guide to all the new features.

A deep dive into new features in macOS Sonoma, big and small.

Action button expands to all models, new Capture button, camera improvements, and more.

Larger displays, new Capture button, camera improvements, and more.

Updates to Mail, Photos, Messages, and more, with Apple Intelligence features throughout.

iPhone Mirroring, Safari improvements, new Passwords app, and Apple Intelligence features throughout.

Other Stories

4 hours ago by Joe Rossignol

5 hours ago by Joe Rossignol

2 days ago by Tim Hardwick

4 days ago by Joe Rossignol

• Skip to main content
• Skip to search
• Skip to footer

Products and Services

Cisco campus LAN compact switches

Boost your network with small but mighty switches.

Supply your users—wherever they are—with enterprise-class services that are secure, flexible, and cost-effective. These compact switches pack a punch, near or far.

Your network needs to be ready for anything

Get your network into shape now to fortify your organization against the unexpected.

Simplify your network

Extend enterprise-class network management and services to connect your users, wherever they are.

Secure your network

Detect and quash security threats at the user edge.

Power your network

Using Power over Ethernet (PoE), power a wide variety of networked devices, from IP phones to access points, sensors, and security devices.

Be ready for what's next, whenever it comes

Get set for whatever the future brings, with flexible solutions from silicon to software. And enjoy model-driven programmability across the full stack.

Compact switches for every network

Cisco Catalyst 9200CX compact switches

Get enterprise-grade security and insights built into a switch that's perfect for tight spaces and smart buildings.

Cisco Meraki MS120 switches

Simplify management with cloud-managed switches that can configure thousands of ports from one dashboard.

Cisco Catalyst 1000 Series Switches

Modernize your small office with high-performance, enterprise-grade switches that are easy to manage.

Cisco Catalyst Digital Building Series Switches

Get more flexibility and energy efficiency with plenum-rated Cisco UPOE fanless switches for smart buildings.

Cisco Catalyst Micro Switch Series

Enjoy enterprise-class capabilities in switches optimized for smart buildings and fiber-to-the-office (FTTO) networks.

Explore the power of the Cisco Catalyst Center platform

See how you can use artificial intelligence (AI) to connect, secure, and automate your network operations.

Upgrade at deep discounts with Cisco Certified Remanufactured Equipment

Get genuine preowned products that have been remanufactured to like-new condition. Explore the Cisco Refresh program today.

Explore better-together networking solutions

Cisco Software-Defined Access

Transform your business with intuitive, secure access

Protect your workforce, workloads, and workplace by securing access for every user, device, and location.

Cisco smart building solutions

The network is the foundation of a flexible, trusted workplace

Turn insights into action to enhance workplace health and efficiency.

Transform your network from the inside out

Cisco Catalyst and Meraki switches bring wired and wireless together to drive digital transformation.