Spread the word

Sunday, May 11, 2008

CSS Hacks - Writing Browser specific CSS codes

Why are CSS Hacks needed ?

CSS are widely used now a days but the main problem with CSS is lack of Browser support. CSS Hacks are needed to display your website properly and exactly how you ant it to be. Many browsers display different elements differently. You can fix them up through CSS Hacks for different browsers.

What are CSS Hacks ?


CSS (Cascading Style Sheets) are used in a website for styling different html elements. CSS are used widely and are a essential part of a website today. If you don't know CSS you can consult any CSS tutorial available anywhere. But while using CSS and testing your website in different browsers, you may had seen that your website looks different in some browsers. Many browsers may break your elements display styles, making your website looking ugly and unusable. You can use different CSS hacks for different browsers to show up your website exactly how you want it to be.

Every designers know after designing any website, the most of the time they have to give is on cross-browser testing and debugging. Making a website not makes all the sense of showing it to the world. but preparing it for the whole world is matter of challenge these days. Lots of browsers and Operating Systems have came into being. The most problematic browser so far is Microsoft Internet Explorer. Making your CSS Website compatible with Microsoft IE (Internet Explorer) has been the most irritative task for a designer. I am also a Designer ans know its issues very well.

Here are some hacks for Internet Explorer:

To show some code only to IE use the // Hack.
margin: 20px;
//margin: 10px;

The second line of the code will only be processed by IE and not by Firefox or Opera or Netscape. So by this way you will have margin of 10px in IE and 20px in all other browsers.

To hide something from IE use the child selector command. IE don't understand this child selector command. A child selector command is a command through which we select the child element of a parent html element, as simple as html>body means we are selecting the body element which is the child of the html element.
#wrapper {margin: 10px;}
html>body #wrapper {margin: 20px;}

IE can't understand the second line and ignores it and uses the 1st line. all other browsers understands this and uses the second line.

Detecting IE 5

IE 5 has a typical problem in its box model i.e. when you define padding, border and margin of an element, IE 5 calculates it within the element's width and thus incorporates a smaller size element than other browsers. Here is a solution to detect IE 5.
#wrapper {padding: 2px; border: 1px; width: 56px; voice-family: "\"}\"";
voice-family:inherit; width: 50px;}

Here IE 5 will detect only the 1st part and will present an element with 4px of padding in both side and 2px of border on both side making it 50px wide from 56px. All other browsers will by default present a 50px wide element from the second line.

Hiding anything from IE on the MAC Operating System

To something from IE on the Mac OS, wrap it within a set of starts and dashes.
/* This will hide from IE on Mac \*/
#wrapper {margin: 10px;}
#content {margin: 20px;}
/* End hide */


Detecting Netscape Browser

Individual element hacking for Netscape has been very much non essential for designers since its market share has been below 1%, and now AOL has stopped development and active support on this browser. Read this article to know more about that. So you can hide a total CSS from Netscape and show it another CSS. Use @import to call a CSS file to hide it from Netscape. Enclose these codes in Script tag of CSS.
@import url(style.css);

Writing Opera specific CSS Hacks

There is no exact CSS hack for Opera. For Opera so you have to implement another procedure. Thats is you just include another CSS file for Opera. Detect Opera at the header of your site, just before including your CSS file. Enclose these codes in Script tag of JavaScript.

if (navigator.userAgent.indexOf(’Opera’) != -1) {
document.write(””);
}
else {
document.write(””);
}


So from now you will never face any cross-browser Design problems. All problems you can solve out through these browser specific CSS hacks. it you still face any problem report me, I will try to solve it out.

7 comments:

Stan said...

I am indeed very grateful to you for all these "CSS Hacks".

I ran into trouble with IE and others while designing a customer's website. The very first hack "//" was my savior.

Thanks for taking the time to put this on here.

Acmeous said...

Thanks Stan for visiting my site and I am very much glad to hear that it helped. You are always Welcomed.
Please keep visiting this blog regularly for useful updates.

Thanks,
Acmeous.

Vamshi Krishna said...

Nice article! I was trying to use css hacks for my application to work in different browsers but the CSS Hack syntax for IE is not recognized in visual studio 2005. can you please help!

Acmeous said...

Hi Vamshi,
You can easily use these hacks which should be working with Visual Studio.
But if anyway these don't help then try the [* html] hack. It is generally recognized by everyone and is also validated by the W3C Validator.
To know more please see this article:
http://acmeous.blogspot.com/2009/01/how-to-validate-browser-specific-css.html.

Still if you face any problem then let me know by mail.

round said...

Your way is explanation is very good. I like it very much thanks for helping "DEVLOPERS"

The Apprentice said...

Thank you so much, this helped me a lot, I seriously hate IE when managing cross-browser compatibility, but this Hacks saved me a lot of work, time and effort.

Term Papers said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards

Post a Comment