Did You Know This Trick In CSS?
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
- Save This Page
Like This Post?
You Might Also Like:
19 Responses to “Did You Know This Trick In CSS?”
Leave a Reply
Anthony on November 23rd, 2008
Thank you very much this is a big help
Ronny Karam on November 25th, 2008
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.
valiik on November 25th, 2008
That is a very good point.
Loyalty card printing on November 25th, 2008
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.
Maneet Puri on November 27th, 2008
Hey.. Thanks for sharing!
michelle on November 29th, 2008
Thanks alot. I am new to web design and the difference in browsers drives me nuts. This helped heaps. Thanks again.
web designer Kathaperumal on December 9th, 2008
Thank you for sharing this knowledge with the rest of the community. As a CSS web designer this trick is very useful to me
LMC on December 17th, 2008
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 */
}
valiik on December 17th, 2008
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.
Neal G on December 18th, 2008
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!
Eric Winther on December 19th, 2008
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.
Ivan Frantar on December 19th, 2008
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.
Zig Z on December 19th, 2008
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.
Monkeytail on December 19th, 2008
// 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
———————————————–
Web Developer on December 29th, 2008
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.
Abdurrahman Gemei on February 1st, 2009
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.
Basic on May 5th, 2009
Awesome… I love these simple things that make life so much easier :-)
Phpengineer on October 24th, 2009
how about the chrome ? Its too has some issues like IE6 :(
valiik on October 24th, 2009
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.