Ever wanted a website that looks the same in all browsers? Tired of fighting slimy monsters while searching for excellance? Do these differences in UL padding make your head explode? So it's time for you to apply some CSS Reset Magic.
When it relates to CSS reset, there's a bunch of literature, do's and don't's, faqs and howtos, so this one won't take us too long.
The problem
There are more styles applied in a website than those you define in your CSS: The default CSS. Every browser has its own defaults, varying between brands and even between versions of a browser. So, following the unordered list example above, Firefox renders this, by default, as ul { margin-left:0; padding-left:40px; }. Instead, Internet Explorer uses ul { margin-left:2.5em; padding-left:0; }, resulting in some minor differences that builds up, whether you choose one or the other.
The solution
Unlike math problems, CSS questions have more than one answer. "CSS Reset" is not a single static solution, but a pattern. The intention is to add a CSS sheet to our website which will replace the default styles, no matter what they are.
This often involves clearing all margins and paddings, adjusting line-heights and font-sizes, setting borders and outlines, for every possible HTML element. Another approach is to define this styles to a set of commonly used values, whether they are given by the W3C or the ones used on Firefox.
Then, you build your CSS by modifying the reset file, knowing that no obstacles will arise on your path to success.
Step 1: Download Reset
There are plenty tons of material, out there, about the subject. Nearly every CSS expert website has its own reset. But there is no expert sitting on this side of the screen, so I urge you to go for a ride on the intertubes and download some (often, one it's enough). Here you are some external links in case googling is not among your skills:
Step 2: Choose your Reset
I know, it may be difficult to choose only one, but, trust me, it's for your own good.
Have a look at them, learn and understand how they work. This knowledge will help you when you build up your own CSS later.
When you have found the "chosen one", save it as your project's CSS and continue.
Step 3: Add your own CSS
Now you can add your custom CSS in the same file, modifying the reset values if needed. Most advocate to have a "reset.css" file and to include it in every page. That's pretty lame, because many values will be overriden by your own values. Anyway, I often use it on non-critical internal applications.
Step 4: Spread the Word!
That's what I'm trying to do with this post. Sure it will have no relevance on the world, but these are my time, my blog and my poor little fingers.
Conclusion
There are good practices so pretty simple that should be a must for every developer out there. The Net will profit, the user experience rises and that comes for little or no work. Using CSS Resets is one of those techniques. May the reset be with you.
Aucun commentaire:
Enregistrer un commentaire