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…)
May 28, 2020 Yahoo virus also referred as Yahoo Search “virus” on Mac can be noticed in popular web browsers like Safari, Chrome, Firefox, and Opera. In fact, the sudden and unwanted appearance of Yahoo Search in Safari or another browser you prefer is related to. Mar 30, 2014 Question: Q: css bug only on safari browser hi i'm developer, i want to ask for bug only in saffari browser, why when i'm working on css position absolute of child tag does'nt work if also his parent has position absolution. This is a big bug and need to fix in this browser.
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:
The page background will show orange in Safari 3+, Chrome and Opera (< 9.5) browsers. In all other browsers it should show pink.
– 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.
I hope this information will be helpful. Your comments and suggestions are appreciated.
If you know CSS, you know that the above just seems to good to be true. Well, it is!
You really can’t make this happen without a little JavaScript. But, with a little JS, we can make our CSS much more complete.
Css Target Safari
Let’s imagine that we wanted to apply a whole bunch of CSS rules to Mac OS X browsers only. Wouldn’t it be great if we could just do something like:
Ideally, this would force all Mac OS X browsers to style paragraph tags with a 2em line height.
Well, as I said before, with a little JavaScript, we can actually make this possible. The below example uses jQuery.
:max_bytes(150000):strip_icc()/001-web-browser-developer-tools-3988965-7b2957116c6d4a03b739d045ba7c6ea1.jpg "Safari")
Essentially, we’re adding the mac-os class name to your body tag if a Mac OS operating system is detected, which makes the above CSS rules possible!
Quick Tips
Safari Specific Css
Css Safari Only
- You may not have the jQuery library loaded, in which case, this is easily done with “traditional” JavaScript:
document.getElementsByTagName('body')[0].className += ' mac-os'; - If you wish to target only Webkit browsers on the Mac (Safari and Chrome), you can couple this tip with webkit’s proprietary media query as follows:
- Similarly, if you wanted specific styles to target individual Mac browsers, you could do the following:
Then, within your CSS, you’re able to do something like the following:
- Although these tricks may do the job, they may cause issues for you down the line. It may make sense to “reset” your CSS styles first. Each browser has a different set of defaults styles for each element (some might have a line height of 1em for paragraph tags while others have 1.25 em as the height).The best way to ensure consistency is to first set a base style for all elements. This technique is popular within WordPress themes but can be done easily by adding this one line of CSS to the beginning of your stylesheet:
Minified CSS reset styles