Are you sick of hacking away at CSS to make it browser compatible?

GreatWebSuccess · 12-13-2009, 11:33 PM

Hey everyone,

This is an old script that was born back in July of 2006, and it's one that I've been using since then. Instead of hacking away at CSS for different browsers, especially all versions of IE, you can use this simple method of making it work and it validates through W3C. I've spoken to a lot of web designers and to my astonishment, about 90% of them don't know about this script.

The method works by inserting a javascript file into the <head> section of your website and then using a special attribute in CSS to make it browser and OS specific.

For example if you have an ID that needs some padding-below in IE7/8 only, since it looks fine across FireFox, Chrome, Safari & Opera, you can do something like this:

win.ie #id {padding-below: 20px}

Anyway, check it out by clicking CSS Browser Selector

n7 Studios · 12-14-2009, 02:02 AM

And for those who don't have Javascript enabled?

You would be much better off using a CSS reset stylesheet, which attempts to start you off with a pretty equal footing across all browsers. Also having an in depth knowledge of CSS, and it's specific quirks with specific browsers can help you to avoid common issues.

Take a read of CSS Tools: Reset CSS for more information.

GreatWebSuccess · 12-14-2009, 09:19 AM

n7,

I do use a CSS reset stylesheet as well, but sometimes there is just one or two issues that you come across that you can't resolve.

Most browsers and computers have JavaScript enabled, and the amount of those is relatively low -probably less than the amount of users still using IE6 which is dwindling as the months go by.

I can certainly understand your point though and there are many valid reasons why one should disable javascript but we don't have to get into that right now. This was simply another tool to do something that many people hack away at.

wayfarer · 12-14-2009, 09:53 AM

The amount of users with JavaScript disabled is estimated to be around 5%. This is high enough that you shouldn't count on JavaScript being enabled, though I think it is ok to use hacks like this to target old browsers, like IE6. Almost all IE6 users have JS enabled since they usually aren't very technical users who don't know of any reasons to disabled it, in addition to the fact that IE6 is a shrinking minority of users, though it hasn't disappeared yet.

Then again, it all depends on your users. If you're building a web-application which requires your users to have JavaScript enabled, and you notify them of this requirement any time it is found to be disabled, using JS hacks is not as much of an issue.

That said, there are already CSS only methods to select IE7 and IE6 for specific rules, which are the only two browsers that usually need correction. Plus, using conditional comments is easy.

Karen Blundell · 12-14-2009, 08:45 PM

IE6 - web designers' bane!
oh the horror!

12-13-2009, 11:33 PM	#1
GreatWebSuccess Danny Veiga War Room Member Join Date: Jun 2008 Location: South, Texas Posts: 73 Thanks: 1 Thanked 10 Times in 8 Posts Social Networking Contact Info	Are you sick of hacking away at CSS to make it browser compatible? Hey everyone, This is an old script that was born back in July of 2006, and it's one that I've been using since then. Instead of hacking away at CSS for different browsers, especially all versions of IE, you can use this simple method of making it work and it validates through W3C. I've spoken to a lot of web designers and to my astonishment, about 90% of them don't know about this script. The method works by inserting a javascript file into the <head> section of your website and then using a special attribute in CSS to make it browser and OS specific. For example if you have an ID that needs some padding-below in IE7/8 only, since it looks fine across FireFox, Chrome, Safari & Opera, you can do something like this: win.ie #id {padding-below: 20px} Anyway, check it out by clicking CSS Browser Selector
	==>Wordpress IMDB Movie Plugin - Completely Monetize & Automate Your WP Movie Website!<==

12-14-2009, 02:02 AM	#2
n7 Studios Web Developer, IT Support War Room Member Join Date: Dec 2008 Location: Birmingham, UK Posts: 513 Thanks: 10 Thanked 77 Times in 65 Posts Social Networking	Re: Are you sick of hacking away at CSS to make it browser compatible? And for those who don't have Javascript enabled? You would be much better off using a CSS reset stylesheet, which attempts to start you off with a pretty equal footing across all browsers. Also having an in depth knowledge of CSS, and it's specific quirks with specific browsers can help you to avoid common issues. Take a read of CSS Tools: Reset CSS for more information.
	THE Web Development Guru - Wordpress / Magento / iOS Bespoke Dev. HTML5, CSS3, PHP, MySQL. -- UK Internet Marketing Community.

12-14-2009, 09:19 AM	#3
GreatWebSuccess Danny Veiga War Room Member Join Date: Jun 2008 Location: South, Texas Posts: 73 Thanks: 1 Thanked 10 Times in 8 Posts Social Networking Contact Info	Re: Are you sick of hacking away at CSS to make it browser compatible? n7, I do use a CSS reset stylesheet as well, but sometimes there is just one or two issues that you come across that you can't resolve. Most browsers and computers have JavaScript enabled, and the amount of those is relatively low -probably less than the amount of users still using IE6 which is dwindling as the months go by. I can certainly understand your point though and there are many valid reasons why one should disable javascript but we don't have to get into that right now. This was simply another tool to do something that many people hack away at.
	==>Wordpress IMDB Movie Plugin - Completely Monetize & Automate Your WP Movie Website!<==

12-14-2009, 09:53 AM	#4
wayfarer Web Developer Join Date: Nov 2008 Location: Asheville, NC USA Posts: 420 Thanks: 18 Thanked 57 Times in 51 Posts Social Networking	Re: Are you sick of hacking away at CSS to make it browser compatible? The amount of users with JavaScript disabled is estimated to be around 5%. This is high enough that you shouldn't count on JavaScript being enabled, though I think it is ok to use hacks like this to target old browsers, like IE6. Almost all IE6 users have JS enabled since they usually aren't very technical users who don't know of any reasons to disabled it, in addition to the fact that IE6 is a shrinking minority of users, though it hasn't disappeared yet. Then again, it all depends on your users. If you're building a web-application which requires your users to have JavaScript enabled, and you notify them of this requirement any time it is found to be disabled, using JS hacks is not as much of an issue. That said, there are already CSS only methods to select IE7 and IE6 for specific rules, which are the only two browsers that usually need correction. Plus, using conditional comments is easy.
	Wayfarer \| join me on StoryBlorg

12-14-2009, 08:45 PM	#5
Karen Blundell Senior Warrior Member War Room Member Join Date: Jul 2008 Location: Niagara Region, Canada Posts: 1,113 Thanks: 1,476 Thanked 412 Times in 322 Posts Social Networking Contact Info	Re: Are you sick of hacking away at CSS to make it browser compatible? IE6 - web designers' bane! oh the horror!
	KarenBlundell.com RaisingtheShire.com ClassicRockLover.com