A little something about everything

internet marketing and website development made simple..

How to target Safari only using CSS and Javascript while keeping your page W3 compliant and completely valid

Here is a neat little trick you can use to target Safari and make it behave while fixing cross browser layouts. This method will allow you to keep a page valid and it will allow you to only target Safari.

First thing you want to do is use javascript to inject a css file for all browsers that support webkit with this code: 

Now, like I stated above this will target all browsers that currently support webkit and add support for it in the future so you cannot rely on only this. So now you need to create the css file and add some code that is Safari specific by using the double # method. Some people will ask, why not just include the double # to begin with? And the simple answer is that it will cause your CSS not to validate.

Here is the example css code that will target only Safari


Comments (2) -

  • Jaffar Mohamed

    3/6/2012 6:22:42 AM |

    Thanks for the tip. I was having problems with setting margins on Safari and Chrome. The above Javascript worked for me.

  • joco324

    6/13/2012 10:06:27 AM |

    Worked for me to resolve Safari positioning issues. Great fix. Thanks for posting.

Pingbacks and trackbacks (1)+

Add comment