456 Berea Street

Icon fonts are finally being phased out in favour of a technology that’s more fit for purpose: SVG . There are many tutorials and guides that describe different ways in which you can use SVG ic...

https://www.456bereastreet.com/archive/201609/hiding_inline_svg_icons_from_screen_readers/

I like to keep my CSS tidy and consistently formatted. One of the tools I use to help with that is stylelint . If anyone’s curious, this post explains how I configure it. You can run stylelin...

https://www.456bereastreet.com/archive/201604/linting_css_with_stylelint/

Whenever I mention that I don’t use CSS preprocessors I tend to get strange looks from people who cannot imagine writing CSS without Sass. And so I have to defend my choice and explain why, ove...

https://www.456bereastreet.com/archive/201603/why_i_dont_use_css_preprocessors/

Most web developers currently use vendor prefixes in CSS to enable certain features in some browsers. That’s fine, but sometimes I see code examples and prefix-adding tools that go a bit overb...

https://www.456bereastreet.com/archive/201311/cutting_down_on_vendor_prefixes/

In a couple of recent projects I’ve faced designs where the main navigation bar gave me more trouble than usual. These are the prerequisites that make the problem tricky to solve: The navbar is...

https://www.456bereastreet.com/archive/201310/full-width_justified_vertically_centered_navbar/

Over six years ago I wrote a short post about preventing HTML tables from becoming too wide . The solutions I offered in that post involve using table-layout:fixed to lock down the width of table...

https://www.456bereastreet.com/archive/201309/responsive_scrollable_tables/

When trying to force an element to always extend to the height of its parent I ran into some peculiar browser behaviour that I thought was worth mentioning. Here’s the situation: The parent ele...

https://www.456bereastreet.com/archive/201306/height_in_percent_when_parent_has_min-height_and_no_height/

Allowing images to scale along with their container is an important part of responsive web design (and was so even before the term “responsive web design” existed). It’s really quite easy �...

https://www.456bereastreet.com/archive/201306/how_to_proportionally_scale_images_that_have_dimension_attributes/

A while ago I received a strange bug report for a site I’d been working on. The report mentioned dots appearing on top of a dropdown menu when it was expanded. I had a look in Safari, could not...

https://www.456bereastreet.com/archive/201305/firefox_and_the_magical_text-overflowellipsis_z-index/

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. ...

https://www.456bereastreet.com/archive/201305/replacing_images_when_printing/