Web design

Since writing the article about HTML errors I thought, why not list those common CSS errors too?

Using colour keywords

Ok, ok, this isn’t strictly an ‘error’ (it’s in the CSS spec), but in my book it’s wrong. Each browser supports colour keywords differently, so to be safe you might as well use another method. I personally prefer the hex notation, which can be very easily gathered from Photoshop or Paint Shop Pro, but the RGB decimal notation is also a useable notation.

Using inline styling

The ability to add style to a tag by using the style=”" attribute can be handy, but it also sort of defeats the whole purpose of using CSS. One of the major benefits of CSS is the ability to easily change a visual aspect of a website without having to change page after page. Sure, use inline styling for testing purposes, but keep your styles to an external file. And remember, if you’re using styles that are only for one or two pages, there really is nothing from stopping you using multiple external files!

Not using semantic class names

Again going back to being able to easily change the style of a site using CSS, keep in mind that your site will likely change when naming your tag classes. Using the class name “bigyellowbox” might seem like a good idea now, but in a couple of years will it still make sense when you change the colour to blue?

Using px for font size

Many people will disagree with me here, but I’m of the opinion that fonts on the web should be the same as fonts in any other medium. Fonts have always been measured in point since the early days of the paper press right up to the day of Microsoft Word. People say that using pixels makes it easier to line up text to images, but in my opinion the web is a fluid medium and shouldn’t be strictly controlled like that.

Using height

Again, I think that the web is a fluid medium, and setting a height of an element using CSS contradicts this. Anyway, it never quite works as you expect once implemented. There are many cases where the height of an element will be different to as you’d like such as the text being resized by the user, the font not existing on the user’s computer, site copy being changed, and one browser (incorrectly) rendering your CSS differently to another browser.

Using class and id incorrectly

There’s a subtle, but important, difference between the HTML class and id attributes; it might even surprise you to learn that an element can indeed have both.

• id is a unique identifier for that particular element. Effectively, it’s a name so that you can reference just that element (for example, the footer div) in your CSS and javascript
• class is less unique, and is a way of identifying the element as part of a group of elements. For example, a website might have restricted pages whose links you want to look different to those page links that aren’t restricted. This can be achieved by giving the link tag an attribute of class=”restricted-link”

As you’ve noticed, a few weeks ago I launched a redesign of my website and blog. Although I’ve used some elements of CSS3 in the past, this design uses the most. Not all browsers display all CSS3 styles, but most modern browsers implement at least some.

The CSS3 styles that I used on this site are rounded corners and drop shadows, but other elements include alpha transparency control, web fonts, text shadows, and attribute selectors.

Rounded corners

The classic way of creating rounded corners involves creating background images, which is difficult and messy to do. Although it only works in Firefox and Safari/Chrome, the CSS3 method is much simpler and requires two lines of CSS on the element:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

The top line is read by Firefox, and the second line by Webkit browsers (Safari and Chrome)

Drop shadows

Although it only currently works in Safari, drop shadows now (or will soon) no longer require the use of graphics:

-webkit-box-shadow: 1px 1px 5px #ccc;

The first two values contain the horizontal and vertical (respectively) distance between element and shadow, the third value (5px) the size of the drop shadow, and the last element defines the colour.

Alpha transparency

CSS3 lets you define exactly how opaque a colour is by using the RGBA format (red-green-blue-alpha). This can be used in place of a hex code anywhere you define colour in your CSS. For example, if you want a semi-transparent black background for a div you might use

background-color: rgba(0, 0, 0, 0.8);
Where the red, green and blue values are 0 and alpha is at 80%.

Web fonts

With CSS2, the only choice you had regarding fonts were using a web-safe font such as Arial or Gill Sans, or using an image replacement tool such as sIFR or FLIR. CSS3 includes web fonts, which allows the browser to import a font file stored on the web server. This is achieved using the @font-face rule.

Text shadows

Text shadows allow you to give normal text a small drop shadow, which is especially useful if you have a background image that may make the text harder to read. This can be achieved very easily, with a format similar to drop shadows:

text-shadow: 1px 1px 2px #ccc

Attribute selectors

CSS3 allows you to style a tag depending on any attributes. So for example you can include an icon after an external link, or apply a style to a password input box.

a[href^='http://']:after{
content: url(images/externallink.png);
}

href^=’http://’ means to match <a> tags with the attribute ‘href’ beginning with ‘http://’
^ can be replaced with $ to match those ending with a string, or replaced with * to match those attributes which contain a string.

Conclusion

So even though not all browsers support all parts of CSS3 yet, I believe it’s worth using those that are supported now, as part of progressive enhancement.