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.

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

Clipping text with CSS3 text-overflow

Sometimes you may find that a design forces you to clip content. Fortunately CSS3 offers a way of indicating that text has been clipped.

Posted on May 9, 2011

Controlling width with CSS3 box-sizing

The CSS3 box-sizing property can be incredibly useful when you want flexible widths on elements that also have padding and/or borders. And browser support is rather good.

Posted on April 5, 2011

The CSS3 Flexible Box Layout (flexbox)

The Flexible Box Layout Model allows us to align and distribute boxes vertically and horizontally as well as have boxes flex to use all available space.

Posted on March 22, 2011

Source order and display order should match

Using CSS to change the display order of content without also changing the order in the HTML source can cause accessibility issues and should be avoided.

Posted on March 17, 2011

Flexible height vertical centering with CSS, beyond IE7

Using display:table to center a page layout vertically works in most browsers. There is an unfortunate issue with some screenreaders to be aware of though.

Posted on March 9, 2011

Enterprise HTML, CSS and JavaScript explained

Explanations of why some of the bad practices that are made fun of at the Enterprise CSS/HTML/JS sites are bad practices.

Posted on February 3, 2011

CSS Validator to report vendor-specific extensions as warnings, not errors

The W3C CSS Validator is about to add an option where you can choose to have vendor-specific extensions reported as warnings rather than errors, making it easier to find real errors in your CSS.

Posted on January 26, 2011

Media queries, viewport width, scrollbars, and WebKit browsers

WebKit-based browsers do not include vertical scrollbars in the viewport width, which goes against the Media Queries specification and differs from Firefox and Opera.

Posted on January 18, 2011

Only use ems for the total width of em-based layouts

For em-based layouts, using ems to specify column widths can cause problems when text size is increased. Using percentages for columns width is often a better choice.

Posted on January 10, 2011

@font-face tip: define font-weight and font-style to keep your CSS simple

When using @font-face with typefaces that have multiple weights and styles it’s important to do it correctly, or your CSS will become unwieldy and browsers will have no fallback styles.

Posted on December 22, 2010

Controlling text size in Safari for iOS without disabling user zoom

How to prevent your website from having unreadably small text when it is first loaded in Safari on iOS and how to prevent auto-scaling of text when you change orientation from portrait to landscape on your iPhone/iPod/iPad

Posted on December 21, 2010

YUI Compressor and CSS media queries

Older versions of YUI Compressor have a bug that makes some media queries malformed after minifying, causing browsers to skip the rules within. There is a fix though.

Posted on December 20, 2010

How to create a 3-column layout with CSS

A tutorial that explains how to use the CSS float property to create layouts with three or more columns.

Posted on December 16, 2010

Beware of -webkit-text-size-adjust:none

Think very carefully before using -webkit-text-size-adjust:none since it will prevent people using WebKit-based browsers from resizing text. Needless to say, that is not user-friendly.

Posted on November 25, 2010

Tips for creating enterprise-level HTML, CSS and JavaScript

A set of sites making fun of worst practice front-end code commonly found on enterprise type sites and in large content management systems.

Posted on November 11, 2010

Parts of CSS3 in Internet Explorer now with CSS3 PIE

Progressive Internet Explorer uses Behaviors to emulate several of the most popular CSS3 properties like border-radius and box-shadow in IE versions 6-8.

Posted on September 13, 2010

Remember non-vendor-prefixed CSS 3 properties (and put them last)

When using CSS 3 properties that still have experimental implementations and use vendor prefixes, also include the non-prefixed version and put it after any vendor-specific properties in your CSS rules.

Posted on September 2, 2010

Minimise file size with the YUI Compressor TextMate Bundle

You can use the YUI Compressor TextMate bundle to make minifying your CSS and JavaScript files from within TextMate as easy as hitting a keystroke.

Posted on August 26, 2010

Page navigation

Archive contents

CSS