Cutting down on vendor prefixes

A number of CSS3 properties that you can use unprefixed or with just a single vendor prefix.

Posted on November 13, 2013

Full-width justified vertically centered navbar

Two different ways of creating a full-width navigation bar with vertically centered links whose entire height is clickable.

Posted on October 13, 2013

Responsive scrollable tables

A responsive technique for making data tables (or any other element) wider than their parent horizontally scrollable.

Posted on September 21, 2013

Height in percent when parent has min-height and no height

Giving an element a height in percent may not do what you expect if its parent does not have an explicit height set.

Posted on June 28, 2013

How to proportionally scale images that have dimension attributes

Images that have dimension attributes in the HTML will retain their height when scaled down with CSS unless you add a height:auto declaration.

Posted on June 13, 2013

Firefox and the magical text-overflow:ellipsis z-index

If you start seeing mysterious dots rendered on top of positioned elements in Firefox, check your text-overflow and z-index properties.

Posted on May 31, 2013

Replacing images when printing

Sometimes you want to use different images when viewing a web page on screen and when printing it. One way of doing that is to use CSS generated content.

Posted on May 14, 2013

Using a transparent image as an icon fallback

When you use an icon or other graphic instead of text for buttons, make sure there is real text for users who cannot see the image.

Posted on April 30, 2013

Responsive drop shadows

A few examples of how you can create a non-rectangular drop shadow that will adapt to the width of the element it is applied to.

Posted on April 4, 2013

Letting users disable responsive layout

If you need to give users the choice to disable responsive layout, here is one way of implementing a switch to toggle it off and on.

Posted on March 25, 2013

How to shrinkwrap and center elements horizontally

When you need to center a floated element horizontally you can't say "float:center", but fortunately there are several other ways of solving the problem.

Posted on March 4, 2013

Fieldset, legend, border-radius and box-shadow

Applying border-radius or box-shadow to fieldset elements that have a legend child element causes strange rendering in some browsers unless you float the legend element.

Posted on February 23, 2013

CSS background-position and percent

Using percent to position a background image has its quirks. A workaround is to use calc().

Posted on February 4, 2013

Media Query width and vertical scrollbars

All browsers do not handle vertical scrollbars the same way when calculating the width to match in a media query.

Posted on January 25, 2013

The mysterious WebKit placeholder overflow bug

Under some circumstances using a placeholder attribute on text input fields can cause overflow problems in WebKit-based browsers.

Posted on January 12, 2013

iOS WebKit browsers and auto-zooming form controls

Web browsers on small iOS devices auto-zoom many form controls on focus. Here's why and what you can do about it.

Posted on December 17, 2012

Accessible custom checkboxes and radio buttons

How to use CSS only to customise radio buttons and checkboxes.

Posted on November 16, 2012

Using JavaScript to check if images are enabled

It can be useful to know if images are enabled in the browser, so that you can adjust your CSS and JS to make sure that the page is still usable even if images aren't loaded.

Posted on November 1, 2012

How to line wrap text in legend elements, even in IE

Internet Explorer doesn't line wrap text in legend elements, which can cause overflow and layout-breaking issues. Here's how to fix it.

Posted on October 25, 2012

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

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

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

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

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

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

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

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

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 January 12, 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

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

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

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

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

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

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

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

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

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

Choose an accessible image replacement method

When you have to use image replacement for text, choose a method that causes as few problems as possible for as few people as possible.

Posted on December 3, 2007

Screen readers sometimes ignore display:none

Using display:none does not always hide content from screen readers like JAWS and Window-Eyes, but there is a workaround.

Posted on November 7, 2007

CSS diagnostics with XRAY and MRI

John Allsopp has written a couple of handy bookmarklets that help you troubleshoot CSS without having to install a browser extension.

Posted on October 30, 2007

Is it time for CSS 2.2?

Is it time to form a 2nd Generation CSS Samurai to create a CSS 2.2 specification?

Posted on May 25, 2007

Creating bulletproof graphic link buttons with CSS

How to use CSS and two images to create flexible, shrinkwrapping, image based link buttons.

Posted on May 22, 2007

How to prevent HTML tables from becoming too wide

A rarely used CSS property comes to the rescue when dealing with oversized content in tables.

Posted on April 25, 2007

IE 7 does not resize text sized in pixels

The Page Zoom feature has led to people thinking that IE 7 lets the user resize text sized in pixels or absolute units. It does not.

Posted on March 20, 2007

Browser testing CSS and JavaScript

My preferred CSS and JavaScript browser testing order.

Posted on February 26, 2007

Styling form controls with CSS, revisited

Screenshots from 8 browsers on 4 operating systems showing the effects of CSS applied to form controls.

Posted on January 9, 2007

Internet Explorer and the CSS box model

Various methods of dealing with the incorrect CSS box model used by older versions of Internet Explorer for Windows.

Posted on December 21, 2006

IE expressions ignore CSS media types

If you're having problems with print style sheets in Internet Explorer 6, check your use of CSS expressions.

Posted on November 29, 2006

CSS Validator colour warnings are not errors

Messages about missing colours or background-colours are not errors and can often safely be ignored.

Posted on October 5, 2006

Transparent custom corners and borders, version 2

A technique that combines CSS and JavaScript to create flexible boxes with custom corners and borders and optional alpha transparency.

Posted on September 25, 2006

CSS Frames v2, full-height

Create the visual effect of HTML frames with CSS and make the scrolling area stretch to 100 % height regardless of the amount of content.

Posted on September 5, 2006

Base elements cause text selection problems in IE

When an HTML document contains a base element and text in floated elements, the text becomes almost unselectable in Internet Explorer.

Posted on August 8, 2006

New clearing method needed for IE7?

Internet Explorer 7 is now layout complete, meaning that no new CSS features will be added, only bug fixes.

Posted on March 21, 2006

Writing cross-browser CSS

Some advice that will help you avoid common problems when creating cross-browser CSS.

Posted on February 7, 2006

Setting font size in pixels

Web professionals should be able to specify font size in pixels, but if we do, Internet Explorer users will not be able to change the text size.

Posted on February 1, 2006

CSS 3 selectors explained

CSS 3 brings us many powerful new CSS selectors. Browser support is currently lacking, but taking a look at what lies ahead is still useful.

Posted on January 10, 2006

CSS 2.1 selectors, Part 3

Part 3 of 3 in a series of articles explaining the selectors available in CSS 2.1.

Posted on October 24, 2005

CSS 2.1 selectors, Part 2

Part 2 of 3 in a series of articles explaining the selectors available in CSS 2.1.

Posted on October 10, 2005

CSS 2.1 selectors, Part 1

Part 1 of 3 in a series of articles explaining the selectors available in CSS 2.1.

Posted on September 26, 2005

Check marking visited links

How to use generated content in CSS to insert a check mark symbol after visited links.

Posted on September 19, 2005

Custom borders with advanced CSS

Using advanced CSS to create custom corners and borders with multiple background images and generated content.

Posted on September 12, 2005

Print-friendly CSS and usability

A discussion on whether using CSS media types to automatically load a print stylesheet may break user expectations when printing web pages.

Posted on September 6, 2005

Customising custom corners and borders

How to create your own images for my Transparent custom corners and borders technique.

Posted on June 21, 2005

Transparent custom corners and borders

Create a resizable box with custom, transparent corners and borders and no extra markup.

Posted on May 16, 2005

Fixed or fluid width? Elastic!

A quick explanation of the concept of elastic width layouts.

Posted on April 25, 2005

CSS tips and tricks, Part 2

Tips and tricks for writing efficient CSS. Part 2 of 2.

Posted on March 21, 2005

CSS tips and tricks, Part 1

Tips and tricks for writing efficient CSS. Part 1 of 2.

Posted on March 15, 2005

Setting the current menu state with CSS

How to use CSS only to change the appearance of the current state of a navigation bar.

Posted on March 3, 2005

Efficient CSS with shorthand properties

Tricks for writing more efficient CSS by using shorthand properties.

Posted on February 21, 2005

Turning a list into a navigation bar

How to use CSS to create a horizontal navigation bar out of a simple ordered list.

Posted on January 10, 2005

Clearing floated images in body text

Posted on December 14, 2004

Styling even more form controls

Posted on October 14, 2004

Styling form controls

Posted on September 27, 2004

Grids, tables, CSS

Posted on September 9, 2004

Inverted Sliding Doors Tabs

Posted on June 28, 2004

Flexible box with custom corners and borders

Posted on June 25, 2004

Flexible news list

Posted on June 20, 2004

CSS teaser box revisited

Posted on June 14, 2004

CSS Teaser Box

Posted on June 9, 2004

Equal height boxes with CSS, part II

Posted on June 1, 2004

Equal height boxes with CSS

Posted on May 30, 2004

A List Apart #167

Posted on January 10, 2004

Liquid layout and web standards

Posted on December 30, 2003

Trim your CSS

Posted on December 3, 2003

CSS Selectors explained

Posted on December 1, 2003

The difficulties of learning CSS

Posted on November 19, 2003

CSS Best Practices

Posted on November 17, 2003

Really advanced CSS

Posted on November 16, 2003

More Sliding Doors

Posted on October 31, 2003

CSS Borders

Posted on October 26, 2003

Image tabs

Posted on October 15, 2003

Float it

Posted on October 15, 2003

Mid Pass Filter

Posted on October 11, 2003

Soft dropshadow

Posted on October 4, 2003

CSS Frames updated

Posted on October 1, 2003

Nested Lists Tabs

Posted on September 27, 2003

Listamatic 2

Posted on September 25, 2003

Rounding Tab Corners

Posted on September 18, 2003

Image Replacement for IE5/Mac

Posted on September 17, 2003

Floating bugs

Posted on September 16, 2003

More lists

Posted on September 13, 2003

Lists of lists

Posted on September 9, 2003

More CSS Tabs

Posted on August 24, 2003

CSS Frames

Posted on August 16, 2003

CSS Tabs

Posted on August 9, 2003

Image replacement techniques

Posted on August 5, 2003

Complex CSS layout

Posted on August 3, 2003

Before: Tag Soup. After: CSS Clutter

Posted on August 3, 2003

Centering with CSS

Back in the old days, if you wanted to center your whole (fixed size) page both horizontally and vertically in the browser window…

Posted on July 30, 2003

More dropshadows

Posted on July 28, 2003


Posted on July 28, 2003

Rounded corners

Posted on July 22, 2003

CSS 3 Selectors

Posted on June 21, 2003

CSS Rollovers

Posted on June 21, 2003


Posted on May 17, 2003


Posted on May 17, 2003

Zen Garden

Posted on May 10, 2003

Lower class style

Posted on April 25, 2003

Archive contents