Wednesday 26 June 2013

CSS hack for Safari Browser

In the current situation it's a challenging task for the web developers to build websites which is compatible with different and popular browsers available (like IE, Firefox, Mozilla, Safari, Google Crome, Opera etc...)
Different browsers have their different ways of serving the web page content and may create problem while using some CSS properties to get a desired output. To avoid these kinds of problems there is are solutions which are called "CSS hacks" and which are also different for different browsers. Using CSS hack is not recommended as per the W3C validation rules but in some cases we have to use them to get our task done. I knew about CSS hack for IE, Firefox but I came across CSS hack for Safari which I was not aware of and as Safari is one of the mostly used browser in world so I think this information might help others as well to overcome from these kind of browser compatibility issues.
While working on one of my projects I faced a problem where Safari browser was not supporting one of CSS properties and was distrorting the layout, however, it was worknig fine in IE and Firefox. To fix this I had to use a CSS hack for Safari. Here is an simple example which you can test quickly and see the difference.
 
- Create an HTML file and name as you want, then copy and paste the following code to your file:
<html>
    <head>
        <title>Safari CSS Hack Example</title>
        <style type="text/css">
            body {
                background-color: #FF00FF;
                font-family:Arial, Helvetica, sans-serif;
                color: #fff;
                font-size:14px;
                font-weight:bold;
            }
            @media screen and (-webkit-min-device-pixel-ratio:0) {body {background-color: #FF6500;}}
        </style>
    </head>
    <body>
        <p>
            The page background will show orange in Safari 3+, Chrome and Opera (< 9.5) browsers. In all other browsers it should show pink.        </p>
    </body>
</html>
- Now try opening the file in Firefox/IE and Safari and see the difference. The page background is different in Safari from the background shown in IE.
 
If you look in web for CSS hack for Safari then you might find different ways like using body:nth-of-type(1) or body:first-of-type which can be used to apply specific CSS property for Safari but these properties are also supported by Firefox 3.5x.
 
So here the CSS hack I have used is "@media screen and (-webkit-min-device-pixel-ratio:0) " and here are the few stpes how to use it:
- You don't need write your entire class inside "@media screen and (-webkit-min-device-pixel-ratio:0){}". As shown in the above example you can just write the required property that you want to apply for Safari. In the above example from the all of the CSS properties of body I want to only change the background-color for Safari so I just specified the CSS classname/ID and the property with different values.
- I also noticed one more limitation which you might need to be careful while using this is the way it is written needs to stay like this which means your new property needs to be written in between "@media screen and (-webkit-min-device-pixel-ratio:0){}" but if you are using any code minifier to minify your CSS file then it will try to remove the extra spaces used which will create problem and this property will not be effective.



Good Luck...
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)