Skip navigation.

Being EDU™ Blog

May 10, 2005

Filtering Your CSS for Safari 1.2

By Max Kiesler

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 */
}

By Max Kiesler (Email) at 09:39 PM.


Trackback Pings

TrackBack URL for this entry:
http://www.beingedu.com/blog/beingedu.html/11

Comments

Post a comment

Thanks for signing in, . Now you can comment. (sign out)

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)



Remember me?


Email this entry

Send a friend, colleague, or yourself a link to this article in email.
  1. Enter the email address you want to send the message to.
  2. Enter your email address so your friend or colleague knows who this message is coming from.
  3. Enter a text message if you wish, and click "Send" to deliver the email.
Email this entry to:


Your email address:


Message (optional):



You'll be redirected to this page when your message is sent. Email addresses are confidential and protected.

Read other entries:
« Blog Software Comparison | Main | Flickr Your School's Photos »


Being EDU™ is an Ideacodes weblog. For questions, tips, or submissions, email the editors.




Being EDU™ Newsletter
Sign up for web design and development tips, including information on user experience, design, CSS, CMS, and web strategy. Your email is used only for this newsletter and never sold.
Name

Email