Safari 3 CSS Hack
I hate CSS hacks. I do. But in all honestly, I like to try and find new ones. Maybe it’s the discovery feeling I’m after. Like I have found a hidden gem or something. I don’t know, but I keep playing around with CSS in hopes of finding new things all the time. And so, when recently reveiwing with the hack I discovered a while ago (Safari 2.0 Specific CSS Hack? ) I realized that it was a bit annoying if you actually needed to use it. Not only did it need to target an element through a parent and not directly, but you also needed to “un-do” the hack for IE.
The need for an improved version was obvious. And so, I give you the Safari 3 CSS hack. I don’t have Safari 2 anymore to test with, so if you have it please let me know if it works. But as for now I’ll will only claim for it to work in Safari 3 (PC and Mac). Here are the browsers I have tested on:
- Windows XP - Firefox 2.0.0.12
- Windows XP - IE 7
- Windows XP - IE6 (standalone version)
- Mac OS X (10.4.11) - Firefox 2.0.0.12
- Mac OS X (10.4.11) - Safari 3.0.4
Let me make one thing clear before I show the code and give an example: I believe that if you reach a point where you need to “hack” Safari, then there is something wrong with your code, not with Safari. With that said, we have all had those late nights before something is due and need a quick fix. And thus, I give you the new Safari CSS hack:
#tester:first-of-type { background:green }
Now, I know what you’re thinking, but even though it says first-of-type it will apply to all elements of a given class name, not only the first one. On a sad note, it is only a matter of time until all other browsers support this pseudo-class. So for those of you who want a little extra insurance on your hack, feel free to mix it with the previous Safari CSS hack I have posted like so:
/*/*/html*#tester:first-of-type {background:green;}/* */
As always, please leave a comment with your browser and OS versions along with your result to the test example. Thanks.
