Most recent post

Replacing images when printing

It isn’t all that uncommon that, after you’ve polished your print stylesheet to make a site look well on paper as well as on screen, you realise that the logo really doesn’t look its best. It may look blurry or pixelated on paper due to having a pixel density intended for screen viewing, of course. But even worse, its edges may look ugly or it may actually be invisible because whatever is behind it when viewed on screen isn’t printed.

Applying a background colour to the logo image or its containing element in the print CSS isn’t going to help either since most browsers by default do not print backgrounds at all. If you can’t change the image used for screen so that it will look good in print as well, you need to somehow make browsers use a different image when printing. One way of doing that is by using CSS generated content.

Posted on May 14, 2013 in CSS

Slightly older posts

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 in Accessibility, Browsers, CSS

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 in Browsers, CSS

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 in CSS

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 in CSS

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 in CSS

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 in CSS

Making elements keyboard focusable and clickable

Either use natively keyboard accessible elements to trigger JavaScript interactions or make what you use instead mimic the appropriate native element as closely as possible.

Posted on February 12, 2013 in Accessibility, JavaScript

More posts are in the archive