CSS

Linting CSS with stylelint

I use stylelint to keep my CSS in order. Here’s how I configure it.

Posted on April 3, 2016

Why I don’t use CSS preprocessors

I don’t use CSS preprocessors they way many people do. Here’s an attempt to explain why.

Posted on March 27, 2016

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

@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

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

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

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

Why styling form controls with CSS is problematic

Eric Meyer explains the technical reasons for form controls being so hard to style consistently across platforms.

Posted on May 24, 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

New CSS properties in Safari

Safari gets support for multi-column layout and the text-stroke and box-shadow CSS properties.

Posted on February 6, 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

Useful tips for writing efficient CSS

Ten useful tips for writing CSS that is better, more efficient, and easier to maintain.

Posted on October 25, 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

Font size inconsistencies with font-family: monospace

Why specifying monospace as a font-family alternative will make Safari render text smaller than other browsers.

Posted on September 27, 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

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

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

Styled bar graphs marked up as lists or tables

How to use CSS to create bar graphs from unordered lists or data tables.

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

Use CSS background images responsibly

CSS background images should only be used for presentational images, not for informational or functional images.

Posted on December 27, 2005

The history of CSS hacks

Tantek Çelik recaptures the history and evolution of CSS hacks and filters.

Posted on December 9, 2005

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

Stop using CSS hacks now

Still using CSS hacks for Internet Explorer? Kick the habit now or you’ll be sorry.

Posted on October 13, 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

Class Presentation

Interesting discussion on how to keep class names non-presentational.

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

A problem that I’ve been running into more often in these days of CSS based layouts than I did back in the old table days is the “image-st…

Posted on December 14, 2004

Styling even more form controls

This is a follow-up to my previous post about Styling form controls. For some background info and comments, you may want to read that post…

Posted on October 14, 2004

Styling form controls

A question that is frequently asked in forums like the css-discuss mailing list is how to style form controls in a consistent way across p…

Posted on September 27, 2004

Printing stylesheets

Use server side scripting to load a print stylesheet.

Posted on September 23, 2004

Grids, tables, CSS

In a few recent posts, starting with the one in which he talks about the technique used for Sliding Faux Columns, and continued in CSS Gri…

Posted on September 9, 2004

Inverted Sliding Doors Tabs

A few days ago in Flexible box with custom corners and borders I promised to write about something that isn’t about different ways of styl…

Posted on June 28, 2004

Flexible box with custom corners and borders

This will be the last thing I write about boxes with rounded corners, custom borders or dropshadows for a while. I promise ;) Next time I’…

Posted on June 25, 2004

Flexible news list

Time for yet another example of a “flexible boxes with rounded corners” technique. This time I’ve created a flexible news list by styling …

Posted on June 20, 2004

CSS teaser box revisited

In case you had a look at my CSS teaser box demo from last week, you’ll know that it has one flaw: its width is fixed. I wanted to find a …

Posted on June 14, 2004

CSS Teaser Box

Just a little something that may be of use to someone. It’s pretty common for websites to have “teasers” that show an excerpt of a full ar…

Posted on June 9, 2004

Equal height boxes with CSS, part II

Since Internet Explorer doesn’t support the display:table, display:table-row and display:table-cell properties, it obviously messes up the…

Posted on June 1, 2004

Equal height boxes with CSS

Many web designers really like the idea of being able to place two or more containers, or boxes, side by side and make them be of equal he…

Posted on May 30, 2004

A List Apart #167

In Faux Columns, one of the two articles in the latest issue of A List Apart, Dan Cederholm shows a trick that will make a CSS layout with…

Posted on January 10, 2004

CSS Selectors explained

If you enjoyed Max Design’s Listutorial and Floatutorial, you’ll like the new Selectutorial, which is just as informative. This tutorial e…

Posted on December 1, 2003

The difficulties of learning CSS

Today there was a post to the css-discuss mailing list from someone who needed to vent his frustration with CSS. I can definitely understa…

Posted on November 19, 2003

More Sliding Doors

Last week, when A List Apart was relaunched, my favourite article was Doug Bowman’s Sliding Doors of CSS. This week’s ALA brings us Slidin…

Posted on October 31, 2003

CSS Borders

Next time you’re styling a border with CSS, try something new. Instead of going from your editor of choice to your browser and back in a l…

Posted on October 26, 2003

Float it

Floatutorial is an excellent guide to floating elements. Understanding how floats work and how they can be used can be a bit confusing, so…

Posted on October 15, 2003

Mid Pass Filter

Mid Pass Filter is a new CSS hack by Tantek Çelik. This hack is a filter that targets only version 5.x Internet Explorer for Windows brows…

Posted on October 11, 2003

Soft dropshadow

I added another demo page to my Lab section. Soft dropshadow uses background images to create a dropshadow effect. The code is pretty simp…

Posted on October 4, 2003

CSS Frames updated

Today I checked my CSS Frames demo in IE5/Win for the first time. I discovered that things were a bit broken. Hrmm. Ooops. What I thought …

Posted on October 1, 2003

Nested Lists Tabs

I copied the HTML from Listamatic 2 and started tweaking the CSS I had from a while back when I first tried styling a nested list. The res…

Posted on September 27, 2003

Listamatic 2

Time for another automatic list generator. Listamatic 2 will generate HTML and CSS for nested lists. Visitors are encouraged to submit the…

Posted on September 25, 2003

Rounding Tab Corners

Eric Meyer has published a new CSS article at his Complex Spiral Consulting site. The article explains how to use CSS to turn an unordered…

Posted on September 18, 2003

Image Replacement for IE5/Mac

As noted by Matt Haughey, IE5/Mac has problems with recent image replacement techniques (Image Replacement–No Span and A new image replace…

Posted on September 17, 2003

Floating bugs

No, I’m not talking about dead insects floating on water here. I’m talking about an incredibly frustrating bug in IE/Win. I encountered th…

Posted on September 16, 2003

More lists

Complementing Listamatic, Listutorial explains, step by step, how to use CSS to style HTML lists.

Posted on September 13, 2003

Lists of lists

For some time (a few months) I’ve been using lists to mark up things like navigation bars, menus and lists of links. Thanks to the CSS sup…

Posted on September 9, 2003

CSS Frames

After taking a close look at Simon Jessey’s fixed sidebars and Eric Bednarz’s position:fixed; fixed for IE5(+)/win I created an example la…

Posted on August 16, 2003

CSS Tabs

While working on a project at my daytime job I needed to find a good way of using CSS to create a tabbed menu with submenus. I couldn’t fi…

Posted on August 9, 2003

Image replacement techniques

Two new ways of using CSS to replace the text of a header (or any other element) with an image have shown up. The using background-image t…

Posted on August 5, 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

I was browsing the entries at the CSS Zen Garden and was inspired by an entry called Friendly Beaches, which has a dropshadow with soft ed…

Posted on July 28, 2003

Dropshadows

Hmm… looks like maybe I should start a “How to do it with CSS”-section on this site. The other day I had a closer look at rounded corners,…

Posted on July 28, 2003

Rounded corners

I spent some time exploring different ways of creating a box with rounded corners. After checking out how other people have attacked the p…

Posted on July 22, 2003

CSS 3 Selectors

In CSS 3 Selectors, Russel Dyer writes about CSS selectors, all the way from those included in CSS 1 to those in the recently finished CSS…

Posted on June 21, 2003

CSS Rollovers

Uberlink CSS Rollovers is a nice tutorial at PVII on how to use unordered lists to mark up navigation links, and CSS to spice the links up…

Posted on June 21, 2003

Hierarchy

Having just implemented a JavaScript-hierarchical dynamic menu I really wish Internet Explorer would catch up to the level of CSS support …

Posted on May 17, 2003

CSS3

The W3C recently published four CSS3 Candidate Recommendations: CSS3 Text Module, CSS3 Color Module, CSS3 Ruby Module and CSS TV Profile 1…

Posted on May 17, 2003

Zen Garden

The CSS Zen Garden is a showcase intended to let graphic artists apply their own designs to the same, properly structured, HTML file simpl…

Posted on May 10, 2003

Lower class style

Read this and realize why littering your code with <div class="blahblah"><span class="bleh"> adds unnecessary bloat and comple…

Posted on April 25, 2003