Global CSS Reset

Different web browsers having their own defaults defined for most of the CSS properties and thus pose a problem in cross browser compliancy of front-ends. In order to address this, you should use CSS resets which brings the browser defaults to a same value across browsers. Various CSS resets are available in the web world, among which, Eric Meyer’s Reset Reloaded, YUI Reset CSS, Siolon’s global reset, Shaun Inman’s Global Reset & Tantek’s CSS reset  are notable. Personally I use Eric’s Reset Reloaded because it neutralizes virtually every default CSS rule of browser.

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}

body {
   line-height: 1;
}

ol, ul {
   list-style: none;
}

blockquote, q {
   quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}

/* remember to define focus styles! */
:focus {
   outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
   text-decoration: none;
}

del {
   text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   border-collapse: collapse;
   border-spacing: 0;
}

Easy Selectors

These are the valid CSS selectors to address a particular browser or browser version. Most of the time, this technique is used for Internet Explorer only, although we can use it with every other browser. Below is the usage of selectors for addressing different browsers.

IE 6 and below

* html {}

IE 7 and below

*:first-child+html {} * html {}

IE 7 only

*:first-child+html {}

IE 7 and modern browsers only

html>body {}

Opera versions 9 and below

html:first-child {}

Google Chrome

body:nth-of-type(1) p {
   color: #333333;
}

Apple Safari

html:lang(en)>body  .classname {}

IE Conditional Comments

This technique is used to address some CSS for Internet Explorer only and make other browsers to simply avoid it or report it as comment. It works by putting up your code in comment style IE Conditional tags.

<!--[if IE ]>
   <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

Again we can use different sytax to address a particular browser versions like

<!--[if IE6 ]>
   <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

<!--[if lt IE6 ]>
   <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

You can read more about version targeting IE at quirksmode.org

Transparent PNGs

Although all the modern browsers support transparency for PNGs, yet again Internet Explorer 6 has a problem with it. IE6 displays a white patch beneath the PNG image. There are lot of scripts / techniques / solutions available to tackle this problem. One of the solution is to use HTC script with your page. Many other plugins and scripts are available to tackle this problem. jQuery pngFix, jQuery iepngfix are used alongwith jQuery. I personally use DD_belatedPNG.

According to its author

This is a Javascript library that sandwiches PNG image support into IE6 without much fuss

It has support for PNGs in background or in SRC of an <img/> element. It also fixes background-position and background-repeat properties of CSS, which creates a problem with other scripts used. It uses Microsoft’s buddy, VML to fix the issues.

Here is its usage

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
/* EXAMPLE */
DD_belatedPNG.fix('.png_bg');

/* string argument can be any CSS selector */
/* .png_bg example is unnecessary */
/* change it to what suits you! */
</script>
<![endif]-->

Fixing IE Box Model Bug

This is perhaps the most common and frustrating bug in IE 6 and below. It is caused due to IEs different approach in calculating the total size of a box. Let us say you write

.box {
   width:100px;
   padding:10px;
   border:2px solid #CCC;
}

According to W3C specifications, the total width of the box should be 124px, which all the modern browsers follow, while as IE calculates it as 100px only.

This deviation from the specs can cause lot of layout problems. IE 6 can actually get it right if you are in standards-compliant mode. There are various workarounds for this problem. Some of them are:

Box-in-a-Box

According to this technique, we simply use extra markup to fix the issue. Instead of using the padding on the main element, we insert another element inside it and use padding on it. Like

<div class=”box”>
  <div class=”box-inner”>
    Testing for box model hack
  </div>
</div>

In this case our markup will be

.box { width:100px;}
.box-inner {padding:10px;}

Simplified Box Model Hack (SBMH)

It uses the CSS parsing  bug of Internet Explorer to address the issue. This was first detailed by Andrew Clover

The structure for this hack is

.box {
   padding:20px;
   width: 100px;
   \width: 140px;
   w\idth: 100px;
}

The first line “width: 100px;” is for browsers like Mozilla and Opera that render correctly. Opera and other browsers choke on the escape character (\) and so will ignore the second and third properties. The second property “\width: 140px;” is for IE 5 and 6/quirks mode. The final line “w\idth: 100px;” will be read by escape friendly browsers (including IE 6 in non-quirks mode) and set the width back to 100px.

box-sizing

The newly introduced CSS3 box-sizing property allows you to choose which box-model your browser should use. The W3C box model is called `content-box` and the Internet Explorer box model is called `border-box`.

This can make it easier to control the size of elements and to make sizes behave the same across different browsers.

.box {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

If the website is rendered in quirks mode, IE6 will render using the non-standard box model, so it will already be rendering as if it had the “border-box” property on. Modern browsers will adopt the IE’s buggy box-model by setting this property.

Hover State

All the modern browsers support :hover pseudo-class for about any element, but IE 6 has the support for hover pseudo class on <a> element only (you need to set the href attribute for <a> element to get this working in IE6). To fix this issue with IE6, you need a proprietary fix for this.

Whatever:hover is a small script that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser.

Download the script file and add this line in your CSS file, and you are done.

body { behavior: url("csshover3.htc"); }

Note that behavior URLs are relative to the html file, not to the CSS file like a background image URL would be.

Double Margin Bug

Most of the people working with Web will be familiar with IE’s double margin bug. The bugs arises when you float an element to one side and apply some margin on that side. Without any reason, it simply doubles that margin.

For example, if we do this,

.box {
   float: right;
   margin-right: 10px;
}

IE6 will double the margin (most of the times) to 20px without any reason. But this bug can be easily overruled by changing the display property of the floated element from block to inline. So the CSS will be

.box {
   float: right;
   margin-right: 10px;
   display: inline;
}

Stepdown problem in IE6

When you float elements of a fixed width, they will align themselves horizontally to fit the width of the parent element. At least, that’s how it works in most browsers. In IE6, the floated items will not be displayed in a straight line, but rather will appear to stepdown in bizarre, staircase-like fashion. This can be fixed by applying display: inline; property to floated elements.

Previous Article CSS Best Practices

Avoid in-line css

Use of inline styles hinders the purpose of CSS and should not be used in a live site.

Test your code in A-Grade browser

Test your code in an advanced browser before checking it in a broken browser. Building the site on a broken browser results in your code relying on the rendering of that browser and breaking on standards-complaint browser.Instead start from perfection and then hack for the less able browsers.

Minimize and cleanup your code

Use as little CSS as possible, remove styles and parts of styles not being used or that were experimented with in the design process. You can even use some compressors to compress the code by removing unwanted white space and line breaks.

Combine Selectors

Use inheritance to minimize your code as much as possible, like this.

Instead of writing

h1 {
  font-family:Arial, sans-serif;
  font-size:2em;
  font-weight:bold;
  font-style:normal;
  color:#DE43A2;
}

h1 .title {
  font-family:Arial, sans-serif;
  font-weight:bold;
  font-style:normal;
  color:#CCC;
}

We can write

h1 {
  font-family:Arial, sans-serif;
  font-size:2em;
  font-weight:bold;
  font-style:normal;
  color:#DE43A2;
}

h1 .title {
  color:#CCC;
}

Use generic font families

While assigning fonts to the font-family cssproperty, always follow your fonts by a generic font family of that type like serif, sans-serif etc This will make any font available from that family substitute to the font, mentioned by you in the style and not available in the client computer.

Target your stylesheet

While linking your stylesheet in your document, specify the media in which to be used like print, screen, projection etc

<link rel="stylesheet" src="style.css" media="screen" />

Name your styles properly

Never name your styles on the basis of their properties or the appearance they are going to make, like arialblue5, redbox etc. Instead name the styles in terms of usage like sub-head, sidebar-box etc.  One of the most important benefits of CSS is being able to change the look without having to change the HTML.

Use functional names for your classes, avoid words that describe how they look.

Use a browser reset

One of the most common mistakes that designers fall victim to when it comes to CSS is not resetting their browser defaults. This leads to inconsistencies in the appearance of your desing across different browsers. So before doing anything else, when coding a website, you should reset the styling. You can use a simple reset with the universal selector like this

* { margin:0;padding:0;}

But using the universal selector is sometimes a bad idea as it is very heavy on the rendering agent to apply rules to every single element in the document.

One of the most popular browser resets is of CSS Reset by Eric Meyer. As Meyer says, “the styles should list all the actual elements to be reset and exactly how they should be reset.”

Another Browser Reset Library is Yahoo! UI Library: Reset CSS. It removes and neutralizes the default styling of html elements providing a foundation upon which you can explicity declare your extentions.

Another very useful CSS reset is CSS Global Styles Reset by Kyle Neath. A simple CSS Reset with some additional classes for better debugging.

Size text without using pixels

Web Designing best principles is to enable a site to withstand a user enlarging text and setting absolute text sizes is not a good practice. Instead we can size our text relative to the browser. Standard browser font size is 1em which is equal to 16px. A little web designer trick works around the issue and resets the font sizes for the entire site so that 1em is equal to 10 px.

body { font-size:62.5%; }

Simply throwing the font-size to 62.5% for the entire site does the trick. Now you can use em instead of pixels.

Organise your CSS Code

Organising your CSS code helps you with future maintainability of your site. You should make independent style sheets for different purposes and then linke them in your master stylesheet. Like you should maintain your typographic styles and structure selectors independently in different stylesheets and then link them together in your master stylesheet.

@import url("reset.css")
@import url("structure.css")
@import url("typography.css")


Make your code easy to read

While scanning through CSS, I came across a very nicely separated CSS coded probably by Rundle. It looked something like this:

h1 {}
h1#title { font-size:2em; }

div {}
div#error { color:#eee; }

This technique is very useful if you’re sharing code or working on a large site where you are using the same div tag in multiple places.

Document your code

This might be common sense to some of you but sometimes I look at CSS and it’s not documented at all. It is always a good practice to document your code or atleast provide a separate heading for a part of code as it makes working with code months or years later easier.

/**********************************/
/* Primary Navigation - Top Links */
/*********************************/
#nav {
border:1px solid #eee;
margin:10px auto;
padding:5px;
}

/***************/
/* Search Box */
/**************/
#search-box {
position:absolute;
top:30px;
left:30px;
}

Keep containers to minimum

Avoid using too many Divs as it makes your document too much complex and tougher to handle. Avoid block level tags as much as possible and consider all options before using DIVs. New Developers to CSS often mistake DIVs for table cells and maximise their use to achieve the layout. Some people even style their headings with DIVs. Try using small tags or inline tags for goodness sake.

Use Shorthand CSS

Work smarter, not harder with CSS. You can wrap multiple properties within a single declaration by using special syntax. Avoid unnecessary properties as it directly effects your troubleshooting efforts.

Like instead of writing

margin-left:2px;
margin-top:3px;
margin-right:4px;
margin-bottom:5px;


You can write

margin:3px 4px 5px 2px;

Similarly we can use shorthand for border, background, padding, font and other properties.

Specify Units

Always specify units for the Property values unless it is 0. This a very common mistake among CSS beginners. In HTML you can get away with this but in CSS all length values should have a unit. While there’s no wrong in specifying a unit for 0 value, but for me it’s only a wastage of space.

padding:2px 3px 0 10px;

Working with Colors

In hexadecimal notation, a color is represented by three pairs of hexadecimal digits. You can write a color more efficiently by omitting every second digit like this.

#ffffff can be written as #fff

Similarly #ff3366 can be written as #f36

Another color related tip is that you can specify web safe colors by using only digits that are multiples of 3 for the red, green and blue.

Don’t redeclare inherited values

The values of many properties are inherited by any descendants of the element that you specify the property for. So there is no fun of redeclaring those properties again and again. Some of the commonly inherited properties are of font and color.

div { font-size:2em;color:#ef321d; }
div.hello { font-size:2em;color:#ef23ef; }


can be written as

div { font-size:2em;color:#ef321d; }
div.hello { color:#ef23ef; }


Multiple Classes

You can assign multiple classes to a single HTML element. This allows you to write several rules that define different properties and only apply them as needed. The multiple classes (assuming .head & .head-about) can be applied to a single element like this.

<div class="head head-about">This is test for multiple classes</div>


Minimise CSS Hacks

Hacks are the tricks, usually non-standard, to overcome some browser limitations. Don’t use hacks unless it is a known and documented bug as it makes the future maintenance of the code very difficult in absence of proper documentation and standard coding design.

Define pseudo classes for links in the LoVe/HAte order

Link, Visited, Hover & Active, as the above represents. You should define your pseudo classes in this order

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }


Define generic font families

“When we declare a specific font to be used within our design, we are doing so in the hope that the user will have that font installed on their system. If they don’t have the font on their system, then they won’t see it, simple as that. What we need to do is reference fonts that the user will likely have on their machine, such as the ones in the font-family property below. It is important that we finish the list with a generic font type. [Getting into good coding habits]

p { font-family: Arial, Verdana, Helvetica, sans-serif; }


1 ID per page, many classes per page

“Check your IDs: Only one element in a document can have a certain value for the id attribute, while any number of elements can share the same class name. [..] Class and id names can only consist of the characters [A-Za-z0-9] and hyphen (-), and they cannot start with a hyphen or a digit (see CSS2 syntax and basic data types).” [Roger Johansson]

Horizontally Centering an element

It is very easy to center an element horizontally using HTML with the align attribute, but there is no such property in the CSS. Instead we use margin to center the element like this

margin:0 auto;

Here ‘auto’ automatically divides the space left on the sides of element into half and assigns each half on each side of the element

Conditional Comments of IE

IE versions less than 7 adhere to CSS standards very less and often create a nasty CSS bug or issue to deal with. You can come around the issue by creating a different style to address the issue and then include the style for only IE using IE conditional comments like this.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Next Article in Series CSS Best Practices – II