On a recent project I found a need to apply a single style rule to Safari. Initially I turned up a great link to dithered.com which has all known CSS filters. Unfortunately, I could not locate one that filtered for Safari only.
After quite a bit of searching all I turned up were several posts looking for the same thing or even a few that said filtering for Safari was impossible. After a few more pages of search results I came upon a link to gunlaug.no which had an article titled ”CSS Filters - not recommended but...”. This turned out to be an excellent system (hats off to the author) which isolated Safari perfectly!
Be sure to read the article carefully as the entire top of the hack needs to be there to filter for Safari and not affect other browsers. This progressive filtering system must also be sequenced exactly as laid out in the article.
The only issue I found was that the @media all and (min-width: 0px) line caused a problem with CSS validation. I took the entire Opera hack out and it still worked fine for Safari without affecting other browsers.
The Code (please visit the above listed link before using)
.element {prop: value; ....}/* apply to all browsers */
* html .element {prop: value; ....}/* apply to IE mac & >=IE4.0 win */
@media all {
* html .element {prop: value; /* apply to >=IE5.0 win */
prop/**/: value; /* apply to >=IE5.5 win */
p\rop: value; /* apply to IE6 win */
html>body .element {prop: value; ....}/* apply to Safari, Moz & Opera */
html>body .element:lang(en) {prop: value; ....}/* apply to Moz & Opera */}
@media all and (min-width: 0px){
.element {prop: value; ....}/* apply to >=Opera7.22 */
html>body .element {prop: value; ....}/* apply to >=Opera7.22 */
html>body .element:lang(en) {prop: value; ....}/* apply to >=Opera7.50 */
}
Your second link in this article goes only to the home page, and unfortunately, I don’t know the language =)
Either way, your code snippet above might be enough to get me along, thanks!
Safari needs to follow W3C guidelines more closely. If IE and Safari rendered like Firefox, the internet would be a better place.
Max Kiesler is an award-winning strategic designer and co-founder
and principal of Ideacodes.com, a web consultancy in San Francisco focused on next generation websites. About Max...
Blog Comments