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.

IE9 Platform Preview available

A platform preview of Internet Explorer 9 is now available for download. News include better performance and improved support for HTML5, CSS3, DOM, SVG, and XHTML.

Posted on March 16, 2010

CSS efficiency tip: use a single stylesheet file for multiple media

Instead of spreading CSS intended for different media types over several files, you can use @media rules to combine them into a single file and reduce the number of HTTP requests.

Posted on February 22, 2010

Specify a text colour for img elements

Make sure the alt text most browsers display when an image cannot be rendered is readable. If necessary, specify a text colour for images.

Posted on February 11, 2010

sIFR default CSS hides content from at least one screen reader

If you use the CSS that comes with sIFR, Apple’s VoiceOver screen reader will not read the replaced text. But there is a simple fix.

Posted on February 8, 2010

Forgotten CSS selectors

Due to lack of support in Internet Explorer 6, web developers have been avoiding some very useful CSS 2.1 selectors. It’s time to start using them.

Posted on February 4, 2010

Use a background image in your CSS? Remember to specify a backup colour.

Whenever you place text on top of a background image, check if the text is readable if the image is missing and specify a background colour if necessary.

Posted on December 3, 2009

Vendor-specific extensions are invalid CSS

Vendor-specific extensions, even if written according to the CSS 2.1 grammar, use property names and values that are not defined in the CSS specification and are invalid.

Posted on November 16, 2009

Remove the outline from links on :active only

Completely removing the outline from links makes it very difficult for people who do not use a mouse to see where the keyboard focus is. But there is a better way.

Posted on October 13, 2009

Page zoom does not mean the end of flexibility

The fact that most browsers now default to zooming the entire page instead of just changing text size does not take away the need for flexibility in web design.

Posted on June 18, 2009

Find and highlight HTML elements with FireFinder for FireBug

Robert Nyman’s FireFinder plugin for Firebug lets you quickly find and highlight HTML elements that match a CSS selector or XPath expression. Very handy.

Posted on June 1, 2009

Line wrapping text in legend elements

Making text in legend elements line wrap is tricky, but it can be done in most browsers.

Posted on May 18, 2009

CSS background images cannot and should not have alternate text

There is no way to specify alternate text for CSS background images. This is not a problem since background images should be used for presentational purposes only.

Posted on May 6, 2009

Hiding with CSS: Problems and solutions

Be aware that using display:none to hide elements will hide them from screen readers, and if you use JavaScript to show something, also use JavaScript to hide it.

Posted on May 4, 2009

Using an XML declaration triggers Quirks mode in IE 6

If you use an XHTML doctype with an XML declaration, Internet Explorer 6 will switch to Quirks mode and use an incorrect CSS box model.

Posted on April 28, 2009

It’s “class”, not “CSS class”

There is nothing called a “CSS class” in HTML or CSS, so please refer to values of the HTML class attribute as classes or class names instead.

Posted on February 12, 2009

Use CSS Diagnostics with Stylish to find bad HTML

Combining the concept of diagnostic CSS with the Stylish Firefox extension makes it easy to apply CSS that reveals invalid or deprecated HTML to any site you want.

Posted on February 5, 2009

Find inline CSS and JavaScript with Inline Code Finder

Inline Code Finder is a neat quality assurance tool that will find and highlight any elements that have inline events, inline styles, or javascript: links.

Posted on December 16, 2008

Reveal new window links and links to non-HTML files with a user stylesheet

By telling your browser to apply a user stylesheet you can highlight links that open in a new window or point to non-HTML documents, making them less obtrusive.

Posted on December 15, 2008

The order of link pseudo-classes matters

The order in which you define the different link states affects the result. My preferred order is :link, :visited, :hover, :focus, :active.

Posted on November 18, 2008

Specify a maximum width for em-based layouts

When creating layouts with an em-based width, specify a maximum width to avoid horizontal scrolling for users who increase text size.

Posted on March 3, 2008

Page navigation

Archive contents

CSS