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.

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

Conditional sibling class names for IE patching

A different approach to using conditional comments to add class names for targeting CSS at different versions of Internet Explorer.

Posted on April 11, 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

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