Reset CSS - Thats how you create browser independent web design
If you're a web designer, you probably know what browser compatibility testing means. With Mozilla Firefox, Opera and other browsers holding a 14% share of the web browser market (and increasing), creating designs just for Microsoft Internet Explorer is not enough. Well, even if you did, which version of IE are we talking about? Exactly!
Once in a blue moon we come across sites that look amazing on IE, but very misaligned on Opera or Firefox and vice versa.
Anybody heard of Reset Stylesheets?
Reset stylesheets are normal .css files that can be used on html pages to neutralise the browser's rendering of tags. The default styling of HTML tags is removed and you literally start from scratch. A normal .css file is then used to re-define all HTML elements that you want to use on the web page.
Note: tags like input, a, textarea etc still work as normal. In other words, it doesn't change the function of tags. So on a page thats been reset using reset css, you won't see any difference between H1 and H2 text, but an A tag will continue to link.
Yahoo have created and adopted what they call YUI base CSS. Its supported by all A grade browsers covering 96% of their users.
How to use Reset style sheets?
To use, you link it in the page's header like any other stylesheet. Then, when you create your stylesheet, you can choose how each element should look. For example, you can switch the BOLD on and define what the padding, spacing, size etc will be.
If you want to try out a Reset stylesheet, I'd recommend you go and try Yahoo's YUI base CSS.
There are however, advantages and disadvantages of using Reset CSS.
Advantages of using Reset CSS
1. Helps designers create designs that look same or very similar on all browsers.
2. The designer is in control of exactly how everything should look. You can customise every aspect of HTML elements.
3. Helps professional designers save time. No need to re-write CSS for every new design. Once you've recreated HTML elements the way you like them, adding advanced CSS functions and re-creating perfect HTML pages becomes easier for all your new designs.
In brief: Your HTML page becomes a clean slate and you can do whatever you want with it.
Disadvantages of using Reset Stylesheets
1. The complete removal of all HTML tags produces a lot of work to start with. Every element needs to be defined in your new CSS. This may take some getting used to.
2. The imperfect solution: As Yahoo puts it: "It works for 96% of our users". So this still isn't the 100% solution. Using Reset CSS will definitely help your site look very stable and uniform across most browsers, but you still might have to carry out cross browser testing afterall.
Our overall point of view
There are people who love Reset CSS and there are those who don't. I don't recommend this for beginners, but if a job calls for it, we use Reset css here at Modulus Systems.
Most of the time, you'll be okay using normal css and get away with a little bit of cross-browser testing. If you do plan to create a site that actively uses ajax, javascript or any other form of on-screen processing, Reset css might be a good idea.
Once in a blue moon we come across sites that look amazing on IE, but very misaligned on Opera or Firefox and vice versa.
Anybody heard of Reset Stylesheets?
Reset stylesheets are normal .css files that can be used on html pages to neutralise the browser's rendering of tags. The default styling of HTML tags is removed and you literally start from scratch. A normal .css file is then used to re-define all HTML elements that you want to use on the web page.
Note: tags like input, a, textarea etc still work as normal. In other words, it doesn't change the function of tags. So on a page thats been reset using reset css, you won't see any difference between H1 and H2 text, but an A tag will continue to link.
Yahoo have created and adopted what they call YUI base CSS. Its supported by all A grade browsers covering 96% of their users.
How to use Reset style sheets?
To use, you link it in the page's header like any other stylesheet. Then, when you create your stylesheet, you can choose how each element should look. For example, you can switch the BOLD on and define what the padding, spacing, size etc will be.
If you want to try out a Reset stylesheet, I'd recommend you go and try Yahoo's YUI base CSS.
There are however, advantages and disadvantages of using Reset CSS.
Advantages of using Reset CSS
1. Helps designers create designs that look same or very similar on all browsers.
2. The designer is in control of exactly how everything should look. You can customise every aspect of HTML elements.
3. Helps professional designers save time. No need to re-write CSS for every new design. Once you've recreated HTML elements the way you like them, adding advanced CSS functions and re-creating perfect HTML pages becomes easier for all your new designs.
In brief: Your HTML page becomes a clean slate and you can do whatever you want with it.
Disadvantages of using Reset Stylesheets
1. The complete removal of all HTML tags produces a lot of work to start with. Every element needs to be defined in your new CSS. This may take some getting used to.
2. The imperfect solution: As Yahoo puts it: "It works for 96% of our users". So this still isn't the 100% solution. Using Reset CSS will definitely help your site look very stable and uniform across most browsers, but you still might have to carry out cross browser testing afterall.
Our overall point of view
There are people who love Reset CSS and there are those who don't. I don't recommend this for beginners, but if a job calls for it, we use Reset css here at Modulus Systems.
Most of the time, you'll be okay using normal css and get away with a little bit of cross-browser testing. If you do plan to create a site that actively uses ajax, javascript or any other form of on-screen processing, Reset css might be a good idea.
posted by Modulus Systems at
6:21 PM
2 Comments:
I've used reset.. and i completely agree that it should be considered only when there's too much ajax.. thats what really causes browser problems. Thanks for the yahoo link. have you tried it?
Nice Web Site With Good Informatin
Raghav
Admin
Eweb Model.com
Post a Comment
Links to this post:
Create a Link
<< Home