Hiding inline SVG icons from screen readers
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.
Linting CSS with stylelint
I use stylelint to keep my CSS in order. Here’s how I configure it.
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.
Cutting down on vendor prefixes
A number of CSS3 properties that you can use unprefixed or with just a single vendor prefix.
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.
Responsive scrollable tables
A responsive technique for making data tables (or any other element) wider than their parent horizontally scrollable.
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.
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.
More posts are in the archive.