CSS

Cascading Style Sheets are used to define the presentation layer of websites. How CSS works is not always self-evident, so many of these articles explain various aspects of using CSS.

CSS generated content and screen readers

CSS generated content is announced in some - but not all - screen readers, so use with care.

Posted on May 18, 2012

iOS orientation change and automatic text resizing

There is a clever script that fixes the iOS orientation change zoom bug. Here is a reminder about a couple of issues you may run into when using it.

Posted on May 9, 2012

Automatic line breaks in narrow columns with CSS 3 hyphens and word-wrap

As text columns become narrower, the risk of long words overflowing increases. Luckily you can use the hyphens and word-wrap CSS properties to prevent it.

Posted on April 23, 2012

Use only what you need

Don’t add boilerplate code, polyfills, shivs, frameworks and other things that increase the weight of your site unless you actually need it.

Posted on March 23, 2012

Using max-width on images can make them disappear in IE8

Images that have a CSS max-width, a width attribute in the HTML, and are children of a floated element that has no explicit width set may be invisible in IE8.

Posted on February 2, 2012

Visited links can only be differentiated by colour

It used to be possible to apply any CSS to visited links. This has privacy issues, so most browsers have implemented styling restrictions and only allow colours to be changed.

Posted on December 8, 2011

The difference between width:auto and width:100%

If you’re using width:100% to undo a previously set width on a block level element, you should probably be using width:auto instead. Here’s why.

Posted on December 2, 2011

Styling buttons in iOS WebKit and -webkit-appearance:none

When applying CSS to buttons there are some odd behaviours in WebKit browsers for iOS. Luckily there are at least two ways of working around them.

Posted on November 24, 2011

Screen readers and CSS

Some CSS intended for visual media types only has unexpected and semantic effects on screen readers.

Posted on November 17, 2011

An accessible, keyboard friendly custom select menu

A way of styling the closed state of select elements without sacrificing accessibility.

Posted on November 3, 2011

Using display:table has semantic effects in some screen readers

When you use the table-related display properties of CSS to get the display properties of a table, some screen readers will treat the non-table markup as a real table.

Posted on October 11, 2011

Styling button elements to look like links

In many situations when we tend to use links to trigger actions we should really be using buttons. Here’s how to use real button elements and make them look like links.

Posted on October 4, 2011

Screen readers, list items and list-style:none

Many developers expect screen readers to ignore visual styling of semantic HTML elements. They mostly do, but with list items their behaviour is hit-or-miss.

Posted on September 14, 2011

Line-height in input fields

The Firefox default stylesheet uses the !important keyword when declaring line-height for text inputs. You can’t override this from an author stylesheet, so a workaround is necessary.

Posted on August 23, 2011

Do not use display:none to visually hide content intended for screen readers

Hiding content with display:none hides it from all users, including those who use screen readers. Be aware of this when deciding how to hide content visually.

Posted on August 16, 2011

The Book of CSS3 (Book review)

The Book of CSS3 is a great developer companion - a no-nonsense, well-written guide to the various specifications that make up CSS3.

Posted on July 9, 2011

Adaptive Web Design (Book review)

In this brief and easy-to-read book, Aaron Gustafson does an excellent job of explaining what progressive enhancement is and how to apply it in your daily work.

Posted on June 17, 2011

Responsive Web Design (Book review)

Ethan Marcotte’s book on designing for an ever-increasing variety of browsers, resolutions and screen sizes is a must-read for all web professionals.

Posted on June 9, 2011

Centering button elements and input buttons

Some browsers don’t let you center button elements horizontally by assigning auto margins. Bug or not?

Posted on June 1, 2011

Styling ordered list numbers

How to use generated content to style the numbers of an ordered list separately from the rest of the list item.

Posted on May 25, 2011

Page navigation

Archive contents

CSS