6 Default Selectors on My Base CSS for Every Project
There’re so many times I find myself struggling with IE6 and 7 issues and some other misbehaviors when working on the css of my designs.
In order to shorten the time I waste on the css and to modify the elements a bit easier, I defined some common base selectors to use and they exist almost on every css file of my previous projects and this site’s css as well.
Doing that, I reset the default values for common elements and selectors, and then I restyle and organize those elements individually, wherever they are needed.
Here are my favourite fixes and resets for my possible troubles:
1- Settings for Headings
Because IE6 displays the font-size and margin/padding properties for headings different than other browsers, I define preliminary standard values for the heading properties:
[source language='css']
h1 {
font-size:138.5%;
}
[/source]
IE6 renders the font sizes for headings differently (mostly for the typefaces like Georgia, Trebuchet MS, etc), so they need to be standardized for all browsers:
[source language='css']
h1,h2,h3 {
margin:1em 0;
}
h2 {
font-size:123.1%;
}
h3 {
font-size:108%;
}
h1,h2,h3,h4,h5,h6 {
font-weight:bold;
}
[/source]
2-Hiding the Horizontal Rules
As I sometimes divide content into divisions, it looks better and more organized by dividing with horizontal rules when site is viewed without stylesheet. And of course, I hide them inside css:
[source language='css']
hr {
display:none;
}
[/source]
3- Removing the Link Outlines
Especially with Firefox view, a links get bordered and outlined on focus and active states. It is annoying when it is not intented, so I deactivate the link outlines.
[source language='css']
a {
outline: none;
}
[/source]
4- Preventing Linked Images Gain Borders
Unstyled img elements gains borders when they are hyperlinked. I remove the possible image borders:
[source language='css']
img {
outline: none;
}
[/source]
However, as Gareth reminded me on his comment; removing outlines may reduce accessibility. Removing outlines and borders on focus or hover will theorically disable browsing using tab key.
Unless you are not worried about this issue, you can use this hack.
5- Resetting Margin and Paddings on My Common Elements
Mostly because IE renders margins and paddings ratherly different than other major standards based browsers, I reset the paddings and margins for my form, paragraph, and list elements.
[source language='css']
p, form, ul, ol, dt, dd {
margin:0;
padding:0;
}
[/source]
6- Clear Fix
Almost in every project, I come to needing the float clearing divs. So I created a base class selector for clearing div and usually pick name from a comic hero. Mostly I name it spiderman/batman =)
[source language='css']
.batman:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.batman {display:inline-block;}
/* Hide from IE Mac */
.batman {display:block;}
/* End hide from IE Mac */
[/source]
Of course some of you might think if all of these settings are necessary, as some of the techniques may be altered with other shortcut selectors.
These are just my kind of solutions, and I hope they help on your projects too. There are many more techniques about base css documents and resetting selectors like Yahoo’s Base CSS and Eric Meyer’s Reset CSS. Just take a loot at them and see how timesaving they are.
Tags: base css, css reset, web design
