I'm trying to find a way to apply CSS just to Safari, but everything I find also applies to Chrome. I know these are currently both WebKit browsers, but I'm having problems with div alignments in Chrome and Safari; each displays differently.
I have been trying to use this but it affects Chrome as well:
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
Does anyone know of another one that will just apply to Safari?
PLEASE PLEASE -- If you are having trouble, and really want to get help or help others by posting a comment about it, Post Your Browser and Device (MacBook/IPad/etc... with both browser and OS version numbers!)
Claiming none of these work is not accurate (and actually not even possible.) Many of these are not really 'hacks' but code built into versions of Safari by Apple. More info is needed. I love the fact that you came here, and really want things to work out for you.
If you have issues getting something from here working on your site, please do check the test site via links below -- If a hack is working there, but not on your site, the hack is not the issue - there is something else happening with your site, often just a CSS conflict as mentioned below, or perhaps nothing is working but you may be unaware that you are not actually using Safari at all. Remember that this info is here to help people with (hopefully) short term issues.
The test site:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
AND MIRROR!
https://browserstrangeness.github.io/css_hacks.html#safari
NOTE: Filters and compilers (such as the SASS engine) expect standard 'cross-browser' code -- NOT CSS hacks like these which means they will rewrite, destroy or remove the hacks since that is not what hacks do. Much of this is non-standard code that has been painstakingly crafted to target single browser versions only and cannot work if they are altered. If you wish to use it with those, you must load your chosen CSS hack AFTER any filter or compiler. This may seem like a given but there has been a lot of confusion among people who do not realize that they are undoing a hack by running it through such software which was not designed for this purpose.
Safari has changed since version 6.1, as many have noticed.
Please note: if you are using Chrome [and now also Firefox] on iOS (at least in iOS versions 6.1 and newer) and you wonder why none of the hacks seem to be separating Chrome from Safari, it is because the iOS version of Chrome is using the Safari engine. It uses Safari hacks not the Chrome ones. More about that here: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ Firefox for iOS was released in Fall 2015. It also responds to the Safari Hacks, but none of the Firefox ones, same as iOS Chrome.
ALSO: If you have tried one or more of the hacks and have trouble getting them to work, please post sample code (better yet a test page) - the hack you are attempting, and what browser(s) (exact version!) you are using as well as the device you are using. Without that additional information, it is impossible for me or anyone else here to assist you.
Often it is a simple fix or a missing semicolon. With CSS it is usually that or a problem of which order the code is listed in the style sheets, if not just CSS errors. Please do test the hacks here on the test site. If it works there, that means the hack really is working for your setup, but it is something else that needs to be resolved. People here really do love to help, or at least point you in the right direction.
That out of the way here are hacks for you to use for more recent versions of Safari.
You should try this one first as it covers current Safari versions and is pure-Safari only:
This one still works properly with Safari 17.0 (Fall-2023):
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
To cover more versions, 6.1 and up, at this time you have to use the next pair of css hacks. The one for 6.1-10.0 to go with one that handles 10.1 and up.
So then -- here is one I worked out for Safari 10.1+:
The double media query is important here, don't remove it.
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Try this one if SCSS or other tool set has trouble with the nested media query:
/* Safari 10.1+ (alternate method) */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
This next one works for 6.1-10.0 but not 10.1 (Late March 2017 update)
This hack I created over many months of testing and experimentation by combining multiple other hacks.
NOTES: like above, the double media query is NOT an accident -- it rules out many older browsers that cannot handle media query nesting. -- The missing space after one of the 'and's is important as well. This is after all, a hack... and the only one that works for 6.1 and all newer Safari versions at this time. Also be aware as listed in the comments below, the hack is non-standard css and must be applied AFTER a filter. Filters such as SASS engines will rewrite/undo or completely remove it outright.
As mentioned above, please check my test page to see it working as-is (without modification!)
And here is the code:
/* Safari 6.1-10.0 (not 10.1) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
For more 'version specific' Safari CSS, please continue to read below.
/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
One for Safari 11.0:
/* Safari 11.0 (not 11.1) */
html >> * .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
One for Safari 10.0:
/* Safari 10.0 (not 10.1) */
_::-webkit-:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Slightly modified works for 10.1 (only):
/* Safari 10.1 */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Safari 10.0 (Non-iOS Devices):
/* Safari 10.0 (not 10.1) but not on iOS */
_::-webkit-:-webkit-full-screen:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9 CSS Hacks:
A simple supports feature query hack for Safari 9.0 and up:
@supports (-webkit-hyphens:none)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
A simple underscore hack for Safari 9.0 and up:
_:not(a,b), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Another one for Safari 9.0 and up:
/* Safari 9+ */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
and another support features query too:
/* Safari 9+, < 13.1 */
@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
One for Safari 9.0-10.0:
/* Safari 9.0-10.0 (not 10.1) */
_::-webkit-:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9 now includes feature detection so we can use that now...
/* Safari 9 */
@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Now to target iOS devices only. As mentioned above, since Chrome on iOS is rooted in Safari, it of course hits that one as well.
/* Safari 9.0 (iOS Only) */
@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
one for Safari 9.0+ but not iOS devices:
/* Safari 9+ (non-iOS) */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
And one for Safari 9.0-10.0 but not iOS devices:
/* Safari 9.0-10.0 (not 10.1) (non-iOS) */
_:-webkit-full-screen:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Below are hacks that separate 6.1-7.0, and 7.1+ These also required a combination of multiple hacks in order to get the right result:
/* Safari 6.1-7.0 */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{
.safari_only {(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
Since I have pointed out the way to block iOS devices, here is the modified version of Safari 6.1+ hack that targets non-iOS devices:
/* Safari 6.1-10.0 (not 10.1) (non-iOS) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
_:-webkit-full-screen, .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
To use them:
<div class="safari_only">This text will be Blue in Safari</div>
Usually [like in this question] the reason people ask about Safari hacks is mostly in reference to separating it from Google Chrome (again NOT iOS!) It may be important to post the alternative: how to target Chrome separately from Safari as well, so I am providing that for you here in case it is needed.
Here are the basics, again check my test page for lots of specific versions of Chrome, but these cover Chrome in general. Chrome is version 45, Dev and Canary versions are up to version 47 at this time.
My old media query combo I put on browserhacks still works just for Chrome 29+:
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
An @supports feature query works well for Chrome 29+ as well... a modified version of the one we were using for Chrome 28+ below. Safari 9, the coming Firefox browsers, and the Microsoft Edge browser are not picked up with this one:
/* Chrome 29+ */
@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none))
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Previously, Chrome 28 and newer were easy to target. This is one I sent to browserhacks after seeing it included within a block of other CSS code (not originally intended as a CSS hack) and realized what it does, so I extracted the relevant portion for our purposes:
[ NOTE: ] This older method below now pics up Safari 9 and the Microsoft Edge browser without the above update. 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 */
@supports (-webkit-appearance:none)
{
.chrome_and_safari {
color:#0000FF;
background-color:#CCCCCC;
}
}
The block of Chrome versions 22-28 (If needed to support older versions) are also possible to target with a twist on my Safari combo hacks I posted above:
/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0)
{
.chrome_only {-chrome-:only(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
NOTE: If you are new, change class name but leave this the same-> {-chrome-:only(;
Like the Safari CSS formatting hacks above, these can be used as follows:
<div class="chrome_only">This text will be Blue in Chrome</div>
So you don't have to search for it in this post, here is my live test page again:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
[Or the Mirror]
https://browserstrangeness.github.io/css_hacks.html#safari
The test page has many others as well, specifically version-based to further help you differentiate between Chrome and Safari, and also many hacks for Firefox, Microsoft Edge, and Internet Explorer web browsers.
NOTE: If something doesn't work for you, check the test page first, but provide example code and WHICH hack you are attempting for anyone to assist you.
@ media screen and (max-width: 767px) { _::-webkit-full-page-media, _:future, :root .flex-container { display: none; } } Works without the media query though. Any ideas? –
Baseline --chrome-10-11-color: red or for Safari, --safari-color: blue? I have a use case now that I need to make adjustments for Edge. If I could say --edge-color: green in one line of CSS I would be done with the project. If later on Edge changes I can go back and change that line to --edge-upto-12-color: green. –
Coxa -safari-line-height:1 and -webkit-line-height:1 in Safari and neither were applied. –
Coxa There is a way to filter Safari 5+ from Chrome:
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.myClass {
color:red;
}
/* Safari only override */
::i-block-chrome,.myClass {
color:blue;
}
}
Sarari Only
.yourClass:not(:root:root){
/* ^_^ */
}
9.1.1! –
Oleviaolfaction :not(:root:root) selector is invalid according to CSS Selectors 3 spec (in which :not() can contain only a simple selector, i.e. one type selector or one ID or one class or one pseudo-class), but completely valid according to CSS Selectors 4 (where :not() accepts list of selectors). It's true that currently only Safari understands CSS Selectors 4 syntax, but this solution is not future-proof. –
Planogamete Works on iOS 16 and macOS Ventura:
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
.body {
background-color: red;
}
}
font: -apple-system-body part? –
Pulque This hack 100% work only for safari 5.1-6.0. I've just tested it with success.
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .yourcssrule {
your css property
}
}
When using this safari-only filter I could target Safari (iOS and Mac), but exclude Chrome (and other browsers):
@supports (-webkit-backdrop-filter: blur(1px)) {
.safari-only {
background-color: rgb(76,80,84);
}
}
For those who want to implement a hack for Safari 7.0 and below, but not 7.1 and above -- use:
.myclass { (;property: value;); }
.myclass { [;property: value;]; }
Replace your class in (.myClass)
/* Safari only */
.myClass:not(:root:root) {
enter code here
}
I like to use the following method:
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari) {
$('head').append('<link rel="stylesheet" type="text/css" href="path/to/safari.css">')
};
By the way, for any of you guys that just need to target Safari on mobiles, just add a media query to this hack:
@media screen and (max-width: 767px) {
_::-webkit-full-page-media, _:future, :root .safari_only {
padding: 10px; //or any property you need
}
}
And don't forget to add the .safari_only class to the element you want to target, example:
<div class='safari_only'> This div will have a padding:10px in a mobile with Safari </div>
This works:
@media not all and (min-resolution:.001dpcm) {
@media {
/* your code for Safari Desktop & Mobile */
body {
background-color: red;
color: blue;
}
/* end */
}
}
@media queries to target iOS Safari Mobile but not Firefox Desktop - this is the first one I've come across that has worked. Thank you. –
Holliman https://www.bram.us/2021/06/23/css-at-supports-rules-to-target-only-firefox-safari-chromium/#safari
@supports (background: -webkit-named-image(i)) {
//
}
h1::after {
content: "No";
margin-left: .3em;
color: red;
}
@supports (background: -webkit-named-image(i)) {
h1::after {
content: "Yes";
color: green;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Safari?</h1>
</body>
</html>Note: If iOS-only is sufficient (if you're willing to sacrifice Safari desktop), then this works:
@supports (-webkit-overflow-scrolling: touch) {
/* CSS specific to iOS devices */
}
hi i ve made this and it worked for me
@media(max-width: 1920px){
@media not all and (min-resolution:.001dpcm) {
.photo_row2 {
margin-left: 5.5% !important;
}
}
}
@media(max-width: 1680px){
@media not all and (min-resolution:.001dpcm) {
.photo_row2 {
margin-left: 15% !important;
}
}
}
@media(max-width: 1600px){
@media not all and (min-resolution:.001dpcm) {
.photo_row2 {
margin-left: 18% !important;
}
}
}
@media (max-width: 1440px) {
@media not all and (min-resolution:.001dpcm) {
.photo_row2 {
margin-left: 24.5% !important;
}
}
}
@media (max-width: 1024px) {
@media not all and (min-resolution:.001dpcm) {
@media {
.photo_row2 {
margin-left: -11% !important;
}
}
}
If you are looking Safari specific browser hack
I tried this, and it's working for me (only for Safari)
@supports (-webkit-hyphens:none){
@content
}
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
@content
}
}
You can use a media-query hack to select Safari 6.1-7.0 from other browsers.
@media \\0 screen {}
Disclaimer: This hack also targets old Chrome versions (before July 2013).
Step 1: use https://modernizr.com/
Step 2: use the html class .regions to select only Safari
a { color: blue; }
html.regions a { color: green; }
Modernizr will add html classes to the DOM based on what the current browser supports. Safari supports regions http://caniuse.com/#feat=css-regions whereas other browsers do not (yet anyway). This method is also very effective in selecting different versions of IE. May the force be with you.
At the end I use a little JavaScript to achieve it:
if (navigator.vendor.startsWith('Apple'))
document.documentElement.classList.add('on-apple');
then in my CSS to target Apple browser engine the selector will be:
.on-apple .my-class{
...
}
It works in from 10 to 16 IOS version:
@supports (-webkit-hyphens:none){
...
}
Wordpress solution:
<?php
add_filter( 'body_class', 'browser_body_class' );
function browser_body_class( $classes ) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
if( $is_lynx ) $classes[] = 'lynx';
elseif( $is_gecko ) $classes[] = 'gecko';
elseif( $is_opera ) $classes[] = 'opera';
elseif( $is_NS4 ) $classes[] = 'ns4';
elseif( $is_safari ) $classes[] = 'safari';
elseif( $is_chrome ) $classes[] = 'chrome';
elseif( $is_IE ) $classes[] = 'ie';
else $classes[] = 'unknown';
if( $is_iphone ) $classes[] = 'iphone';
return $classes;
}
?>
...practically only for iSF3.2+(mSF4+)
@media (-webkit-transition) {/*CSS*/}
Why? https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transition
...only for iSF10.1+(mSF10.12.1+)
@supports (-webkit-appearance:-apple-pay-button) {/*CSS*/}
...only for iSF9+
@supports (-webkit-touch-callout:none) {/*CSS*/}
Why? https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout
See https://mcmap.net/q/48065/-css-media-query-to-target-only-ios-devices-duplicate
Why not invert-detect apple pay? that's what we do:
@supports (not (-apple-pay-button-style: inherit)) {
.hide-apple-wallet-on-non-safari {
display: none;
}
}
It working 100% in safari..i tried
@media screen and (-webkit-min-device-pixel-ratio:0)
{
::i-block-chrome, Class Name {your styles}
}
I have tested and it worked for me
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .myClass {
height: 1070px !important;
}
}
© 2022 - 2024 — McMap. All rights reserved.