Safari 9 CSS Hacks

These are my legal CSS Hacks for fixing web browser quirks or outright bugs. Please enjoy, I have been working on them for years. May it help you if you need them. Please read here first: [What are these CSS Hacks Anyway?] Then check my [Live CSS Hacks Test Page] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

Safari has changed since version 6.1, as many have noticed.

You need to be aware that these do change, and be clear on which version of Safari you have. There is no catch-all hack that works on all versions of Safari.

To see them working live, As always — I have created a test page here:

http://browserstrangeness.bitbucket.io/css_hacks.html#webkit

or here:

http://browserstrangeness.github.io/css_hacks.html#webkit

Please note: if you are using Chrome on iOS (at least in versions 6.1-8) 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: http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/

When I wrote this, for about a month I have been working on Safari 9 (beta) – Safari 9 on iOS (and the beta which is due to be released soon for desktops) and here is the resulting set of CSS hacks for you.

/* Safari 9 (only) */

@supports (overflow:-webkit-marquee)
   and (justify-content:inherit) {
     .selector { property:value; } 
}

Author: Jeff Clayton

A couple of one-Liners:

/* Safari 9.0+ */

 _:default:not(:root:root), .selector { property:value; } 

Author: Jeff Clayton

/* Safari 9.0-10.0 */

_::-webkit-:not(:root:root), .selector { property:value; } 

Author: Jeff Clayton

a support features query:

/* Safari 9+ */

@supports (-webkit-marquee-repetition:infinite
   and (object-fit:fill) {
     .selector { property:value; } 
}

Author: Jeff Clayton

And other One-Liners:

/* Safari 9.0+ */

 _:default:not(:root:root), .selector { property:value; } 

Author: Jeff Clayton

/* Safari 9.0-10.0 (non-iOS) */

_:-webkit-full-screen:not(:root:root), .selector { property:value; } 

Author: Jeff Clayton

There is now a way as of Safari 9 to target iOS devices as well!
(updated October 2017)

/* Safari 9+ (iOS Only!) */

@supports (-webkit-text-size-adjust:none) 
   and (-webkit-marquee-repetition:infinite
 and (object-fit:fill) {
     .selector { property:value; } 
}

Author: Jeff Clayton

So you don’t have to scroll back up:

There are more now. To see them working live, As always — I have created a test page here:

http://browserstrangeness.bitbucket.io/css_hacks.html#webkit

or here:

http://browserstrangeness.github.io/css_hacks.html#webkit

Advertisement

About Jeff Clayton

IT Director/Senior Software Engineer, Photographer I test and create new CSS web page formatting hacks for BrowserHacks.com for the purpose of repairing web sites. PS-- CSS hacks are fun, but please attempt good CSS first unless in a bind. See Test Pages: https://browserstrangeness.bitbucket.io and https://browserstrangeness.github.io

‹ How to get the Microsoft Edge browser out of WebKit Media Queries that work for Safari and Google Chrome

CSS Hacks for Chrome 46+ ›

Tagged with: Apple, Browser, Browser Versions, Browsers, Code, Computer, Computers, Cool Code, CSS, CSS Hacks, Safari, Safari 9
Posted in Apple, Computers, Cool Code, CSS, CSS Hacks, Safari, Safari 9