Some useful CSS utilities, classes & hacks

 – posted May 10th, 2007 by Colm McBarron     Comments (8)

When I’m creating a typical standards based design I often use a standard collection of css properties to do very common things, so I don’t have to write classes or do as many browser hacks as I would have to do normally.

To reset all margins and padding.

* {

   padding: 0;

   margin: 0;

}

To make sure that there are no borders on fieldsets or images.

fieldset,img {

   border: 0;

}

Give Internet Explorer a tags a height, this solves a number of bugs/issues the IE has with a tags, especially when it comes to navigation and increasing their hit area.

* html a {

   height: 1px;

}

An accessible way to hide text from a visual agent.

.hidden {

   position: absolute;

   top: -1000px;

   left: -1000px;

}

Form elements tend not to resize in some browsers when a user increases the text size, so by giving them a font-size this allows them to increase in size along with the form element, also textarea’s tend to use a default font face of courier instead of the fonts you’ve specified on your page.

input, select, textarea {

   font-size: 100%;

   font-family: inherit;

}

Download the css file with all these in it.

This is by no means a comprehensive list but these are pretty invaluable to me for most projects.

Can you add any more?

Categories Accessibility, Technology

Comments Open | Trackbacks On | permalink