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.

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

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

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