Recently iv stumbled upon the nightmare of styling webpages across different browsers. Im very surprised that a standard such as CSS isnt implemented identically across these browsers…
So here are a couple of CSS hacks which will target specific browsers:
Internet Explorer (All Versions)
Firefox
@-moz-document url-prefix()
{
CSS code here
}
Google Chrome and webkit browsers (Safari, IPhone)
@media screen and (-webkit-min-device-pixel-ratio:0)
{
CSS code here
}
I’ve decided to leave the best for last… These guys have developed a little Javascript function known as css_browser_selector, which takes advantage of the various ways which browsers interpret CSS. By using their script, you are able to target any browser you like, by simply prefixing the CSS code with the applicable browser name.
This certainly simplified my life, and I hope it will yours, since trying to find browser specific code just takes forever and often doesnt work. I’ll leave you to fiddle around with that, will I try and figure out how to scale my website to fit all screen resolutions. Over ‘n out for now!