I just recently found this out and it’s pretty cool so I have to share. When dealing with browser compatibility of CSS I used to have an IF statement in the HTML that would call for the appropriate CSS file according to the browser that is displaying the page. Well, I found a trick on how to keep all the class or id attributes together so it’s easy to find and adjust later.
The trick is you can use the pound sign (#) and underscore character (_) to comment out attributes for IE7, IE6 and FireFox.
The FireFox sees # and _ to be comment characters, Internet Explorer 6 sees # as comment character, Internet Explorer 7 sees _ as a comment. So if you build your CSS statement like the folowing example you should be able to please all 3 browsers. And this is great when dealing with paddings and margins, since Firefox and IE do not agree on these two.
Example:
#divid {
padding: 0px 0 20px 40px; /* All browsers see this */
#padding:0px; /* FireFox will not see this but IE7 & IE6 will */
#margin: 20px 0 0 40px; /* FireFox will not see this but IE7 & IE6 will */
_margin: 10px 0 0 30px; /* FireFox and IE7 will not see this but IE6 will */}
I have not tested it in other browsers like Opera and Safari but it does work really good FireFox and IE’s. Let us know if this works for you or not.
Download this post in PDF: http://www.webdesignideas.org/Browser-Compatibility-CSS-Trick.pdf
Digg It
Vote It Up
Retweet It
Share It
Bookmark It
Thank you very much this is a big help
It’s a very useful trick and can be used if you don’t care about your CSS validating or not since using # and _ will prevent your CSS from validating.
That is a very good point.
Thanks for nice and great idea. Actually while working with CSS, browser compatibility is a major issues and as Web Developer/Designer, this issues becomes headache often.
Hey.. Thanks for sharing!
Thanks alot. I am new to web design and the difference in browsers drives me nuts. This helped heaps. Thanks again.
Thank you for sharing this knowledge with the rest of the community. As a CSS web designer this trick is very useful to me
I’m confused. You say that IE 6 sees # as a comment but below you say that it can be seen in IE7 and IE6.
Example:
#divid {
padding: 0px 0 20px 40px; /* All browsers
see this */
#padding:0px; /* FireFox will not see
this but IE7 & IE6 will */
#margin: 20px 0 0 40px; /* FireFox will not
see this but IE7 & IE6 will */
_margin: 10px 0 0 30px; /* FireFox and
IE7 will not see this but IE6 will */
}
I am sorry, i know this is confusing. Check this out. Here is how you do this:
First you use the regular CSS to position while verifying how it looks in FireFox.
padding: 0px 0 20px 40px;
All browsers see this but you only make it look good in FireFox at this point. Once everything is positioned and looks good in FireFox then you can start adding comments for IE7.
#padding: 10px 0 30px 50px;
This comment will apply to IE6 and IE7 but it is only meant for IE7. Once everything looks good in IE7 you can move on to the IE6 comments.
_padding: 15px 0 35px 55px;
After everything looks good in IE6 your styling is done.
I do however suggest, to make your CSS valid, to move all the # & _ commented styles to sepparate files and have a valid browser checker script calling for those files, like you normally would. This is just s shortcut to making everything look good without messing with different files.
Hope this helps.
The *property and _property hacks for IE7 and IE6 have been around for awhile but I haven’t heard of the #property hack before. These are really great in the early stages of CSS development when you want to test workarounds in IE but I wouldn’t push this to a production enviroment just because of the validation issues. After you’ve determined whether to use a * or _ hack i’d move it to it’s appropriate .css file. Nice post!
Sorry but I knew it and i’ve used it in my projects for more than one year now. I use this:
selectior(for all)
//selector(Only ie6 and ie7)
_selector(only ie6)
I write bmy css first in firefox. then I fix hacks for both ie. then finally fixes for ie6.
Interesting. I’ve using the ‘*’ character to target IE7 and IE6. I’m reluctant to use the ‘#’ because it might compromise a bit the readability of the document. Although I think it’s better to keep your hacks away from your core styles but not always possible with working with other people maintaining the same styles.
The # property is used when applying css to elements based on ID, so it’s not such a great idea to use it as comments.
This goes for Firefox as well.
// and — also work.
At development stage I use it all the time to ‘comment things out’.. saves a lot of typing.
———————————————–
!! ‘prepend’ characters won’t validate
———————————————–
As far as I know, IE6 is nowadays the most problematic browser. So if everything is ok in IE6, everything should be ok in Opera.
Wow! This is very helpful. Browser compatibility issues are such a pain in the ass. I think users should all make our jobs easier and use Firefox.
Awesome… I love these simple things that make life so much easier :-)
how about the chrome ? Its too has some issues like IE6 :(
I found a good article that talks about some of these hacks here: http://www.giantisland.com/Resources/LitePacificHackforSafariAndIE7.aspx. I have not read it all the way through but see that they are suggesting using some exception characters like back slashes and others. Take a look, maybe it’ll help you. I’ll see if I can test them and write another article explaining it in the near future.