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 icons, which is great. I do however see an issue related to accessibility pop up now and again, so I’d like to share a little tip about that. Many, probably the majority, of articles explaining how to use inline SVG for icons describe multiple ways of ensuring that your SVG graphics have a text alterna...| 456 Berea Street
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 stylelint in multiple ways. I use it via the PostCSS plugin, but you can run it from the command line, from within code editors like Atom and Sublime Text, or call it from Node scripts. There are different ways to specify the configuration, but I always use a .stylelintrc config file in the root of my projects. ...| 456 Berea Street
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, over and over. Some people will understand, most won’t. Or they don’t want to. But here’s an attempt to explain my reasoning. Back when CSS preprocessors first came into fashion I did try using them. And then every couple of years, due to external pressure and nagging, I have taken new looks and gi...| 456 Berea Street
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 overboard with the support and add every possible prefix that has ever been in use (and sometimes even ones that were never used). I think there are a bunch of CSS properties that we can safely stop using vendor prefixes for, or at least considerably cut down on the number of prefixes. In the examples that ...| 456 Berea Street
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 full-width and the links have to fill up the entire width regardless of how many of them there are The text in each link needs to be vertically centered and wrap to multiple lines if necessary The entire area of each item in the navbar needs to be clickable After exploring lots of different methods I...| 456 Berea Street
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 tables. While that may work in some cases, it often will not be very pleasant to use. Since I wrote that post, many, many small screen devices that you can use to browse the web have been released, which means that the risk of people encountering a data table that is too wide to fit their browser window is ...| 456 Berea Street
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 element has a min-height specified (in pixels), but no height The child’s height is set to 100% I was expecting the child to get the same height as its parent, but that is not what happens. What happens instead may well be according to the CSS 2.1 Specification, but a bit nonintuitive, at least to me. ...| 456 Berea Street
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 – all you need to do is give the image a width (or max-width) in percent: img { max-width:100%; } This will prevent any img element from getting wider than its container. If the container is narrower than the image, the image will scale down. But there is a catch. If an img element has dimension attr...| 456 Berea Street
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 see any dots, but then tried Firefox. And sure enough, there were sets of three dots in the dropdown menu. It didn’t take long to find the cause, fortunately. Just below the dropdown menu was a list of news items whose text-overflow value was set to ellipsis. The dots in the dropdown menu were the ...| 456 Berea Street
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.| www.456bereastreet.com