RSS Verzeichnis RSS FEED 456 Berea Street

Feed Titel:
456 Berea Street
Feed Beschreibung:
Roger Johansson is a web professional specialising in web standards, accessibility, and usability.
Anbieter Webseite:
RSS Feed abonnieren:

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. Read full postPosted in SVG, Accessibility.Copyright © Roger Johansson

Linting CSS with stylelint

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. Read full postPosted in CSS.Copyright © Roger Johansson

Why I don’t use CSS preprocessors

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. Read full postPosted in CSS.Copyright © Roger Johansson

Cutting down on vendor prefixes

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. Read full postPosted in CSS.Copyright © Roger Johansson

Full-width justified vertically centered navbar

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’ve found two solutions to the problem. As is often the case, both have their drawbacks and you need to choose which compromise to make. Read full postPosted in CSS, JavaScript.Copyright © Roger Johansson

Responsive scrollable tables

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 greater than ever. There are already several different strategies for dealing with data tables on small screens, involving things like flipping tables, hiding columns, rearranging data cells, and making over-wide tables scrollable. See Responsive Data Table Roundup at CSS-Tricks for some examples. Every technique for making tables flexible (or “responsive”) that I have seen comes with its own set of drawbacks. That’s expected really – I don’t think this is a problem that can be solved perfectly, so we have to compromise somehow. But I do think that one of the simplest and least inelegant ways to handle data tables is to make them horizontally scrollable when necessary, and so I thought I’d describe how I do that. Read full postPosted in CSS, JavaScript.Copyright © Roger Johansson