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.

Removing whitespace around text fields

Different browsers on different platforms insert varying amounts of whitespace around text fields. How to remove that whitespace is not completely intuitive, but possible.

Posted on October 17, 2012

Use inherit to reduce repetition of CSS property values

Instead of repeating property values in your CSS, you can use the inherit value to make an element inherit a property’s computed value from its parent.

Posted on September 27, 2012

Tell CSS that JavaScript is available ASAP

When you need to apply different styling depending on the availability of JavaScript, you want to let CSS know whether JS is on or not as soon as possible during page load.

Posted on September 20, 2012

Using media queries to hide CSS3 from older browsers

Wrapping advanced CSS in a simple media query rule saves you from worrying about it causing problems for older browsers.

Posted on June 26, 2012

Beware of @import rules when concatenating CSS files

Be careful when using @import rules in CSS files that are concatenated before being deployed.

Posted on June 14, 2012

An alternative to select elements as navigation in narrow viewports

Using a select element for navigation in narrow viewports is not an ideal solution. Here is an alternative technique that uses real links and is fully stylable.

Posted on June 8, 2012

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

Page navigation

Page 1 | Page 2 | Page 3 | Page 4 | Page 5 | Page 6 | Page 7 | Page 8 | Page 9 | Page 10 | Page 11 | Page 12 | Page 13 | Page 14 | Page 15 | Page 16 | Page 17 | Page 18 | Page 19 | Page 20 | Page 21

Archive contents