CSS_herald

Google Chrome and Apple Safari CSS only Hack

The new Google Chrome web browser, uses the Apple WebKit engine for displaying its pages - which in turn is used to display pages in Safari. Webkit was built on the Konqueror browser on Linux.

Pages don’t render 100% exactly the same on these browsers compared to Firefox, Opera and Internet Explorer - treat it as a completly new browser with its own quirks. Mainly pages render fine but tend to fail when positioning textual elements, as well as differences in the way padding works. Its weird, but you will see tiny errors which will bug the hell out of you in Chrome / Safari but don’t know how to fix.

Enter the Safari hack - shake this baby into line for we’ve got a hack coming and its not easy to remember, so best copy and paste this in your notebook for future reference (or bookmark this page).

Say you’ve got a class yourclass and you want to alter what happens in safari, its not playing ball, this is what you do:

/*\*/
html>body*.yourclass {padding:6px;font-size:13px;}
/**/

You can add additional elements within the comments to save your sanity:

/*\*/
html>body*.yourclass {padding:6px;font-size:13px;}
html>body*.yourborderclass {border-width:10px;}
html>body*.yourotherclass {padding:10px;}
/**/

Thats all for now, i hope it saves your sanity like it did mine, its not easy work hacking css, a designers life is not the easiest but this should help!

Share This

« NicEdit - AJAX content editor for textareas

2 Comments, Comment or Trackback

  1. yomatiase

    I testes this on safari pc and chrome and dint work either, im doing somethong wrong?
    I hace an html with varoius css hacks for testing here:

    http://www.etchevarne.net/toolkit/css-hacks.html


    Comment from cssherald.com:

    Your code is incorrect, you’ve used the CSS for safari as the ie7 block in your source code!

  2. Chris

    Wow - thanks for this, works a treat! My site was a mess in safari without this hack.

Reply to “Google Chrome and Apple Safari CSS only Hack”


Google_reader