Hiding inline SVG icons from screen readers


Roger Johansson:

SVG files may contain a title element which may or may not get announced by screen readers (depending on SVG embedding technique, browser name and version, and screen reader name and version). So far I haven’t run into a situation where I want any other behaviour than screen readers completely ignoring icons (since they are all accompanied by text).

After a bit of testing, I found that simply adding aria-hidden="true" to the svg element solves the problem.

Like so:

<svg aria-hidden="true">
	<use xlink:href="icons.svg#icon" />

Hiding inline SVG icons from screen readers →

Elsewhere , , , Leave a comment

You Can’t Get Comfortable in Web Development


Rey Bango, after having read the aforementioned “How it feels to learn JavaScript in 2016”:

A lot of the discomfort we’re feeling is the belief that we need to know how to use every new framework or tool that comes out. It’s really not the case. There will always be someone building a new tool or library and of course you’ll have the early adopters that will flock to it saying that it’s the cool thing that everyone should be using.


We should be asking why we need a framework or a tool before just dropping it in. It’s not to say that you shouldn’t learn new things. YOU ABSOLUTELY SHOULD BE CONTINUOUSLY LEARNING! But you should ensure that you have a solid base to work from.

Yes, yes, yes, and YES! And no, these thoughts aren’t new, I’ve been linking to and writing about it since 2013: It’s all going (too) fast and you can’t keep up (a thing my former employer just wouldn’t get). Don’t try to keep up, because it will eventually bring you down.

You Can’t Get Comfortable in Web Development →

Related: The cartoon Relentless Persistence comes to mind.

Elsewhere , , 1 Comment

Simple Flexbox Grid System

… with blackjack, and hookers! (ref)

Introduction and Requirements

A while ago, I created a small and simple flexbox-based grid system for use in the projects we make at work. The developed Grid System inspired upon how Bootstrap works:

  • it divides the grid into 12 columns (configurable).
  • it supports gutters in between columns (configurable).
  • it supports different viewport sizes, linked to keywords:
    XXS, XS, SM, MD, and LG (configurable).
  • it allows columns to adjust size based on the viewport size.
    Eg. .column-xs-12 applies only to the XS layout, .column-md-6 only applies to the MD layout, .column-lg-4
  • it allows offsetting of columns, also reliant upon the viewport size.
    Eg. .offset-md-4, .offset-lg-6.
  • it allows nesting of grids, keeping the defined gutter in place.

Along with that, a few extra requirements/features were added:

  • it must be standalone
  • it must use flexbox – not floats – for layout.
  • it must use em-based units – not px-based units – for sizing (where appropriate).
  • it must support viewport-unreliant column sizing. Eg. .column-8.
  • The columns must fill up the entire width of the wrapper/row. E.g. no (half-)gutter to the left of the first column, and no (half-)gutter to the right of the last column.
  • (added 2016.10.18) it must support auto and stretch columns in case you want to go off-grid



Embedded below is the source and the demo pen. The CSS is written in Stylus, our CSS preprocessor of choice.

See the Pen Flexbox Grid by Bramus! (@bramus) on CodePen.

TIP: You might want to check out the pen in a standalone tab/window, so that you can resize it.

How to use

To get started, add .has-columns onto the wrapper. For each column add .column along with one ore more size specifications such as .column-xs-4 and (optional) an offset specification such as .offset-xs-2.

Column size names are based on portions/units. A column .column-xs-4 for example is 4 units of the total of 12 columns, resulting in a column of approximately – depending on the gutter size – 33% in width.

<div class="has-columns">
    <div class="column column-xs-4">.column-xs-4</div>
    <div class="column column-xs-4">.column-xs-4</div>
    <div class="column column-xs-4">.column-xs-4</div>

See the pen embedded above for some examples.

Columns with the classname .column-auto will not take up a given portion, but will only take up the space their content requires. This kind of column is typically used in combination with a column .column-stretch. An example would be for a message-component that consists of an avatar and a content:

<div class="message">
    <div class="has-columns">
        <div class="column column-auto">
            <img class="message__avatar" src="avatar.png" alt="" title="" />
        <div class="column column-stretch">
            <div class="message__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

How it works

tl;dr: the width of each column is adjusted – using calc() – to take the defined gutter into account.

Say you have 2 columns that you want to display, each being 6 units wide (e.g .column-6). We can safely state that their base-width is 6/12, or 50% each.

<div class="has-columns">
    <div class="column column-6">.column-6</div>
    <div class="column column-6">.column-6</div>

In between those two columns a gutter of 1em is injected, using margin-right on the first column. There’s no gutter to the left of the first column, nor to the right of the second column (put differently: all columns, except for the last one, get a gutter applied using margin-right).

Given our 2 columns of 50% width each, this yields of a combined width that exceeds 100%: 50% (base-width) + 1em (gutter) + 50% (base-width) + 0em (no gutter for the last column!) = 100% + 1em = too wide.

Columns without adjusted width = too wide

To not exceed 100%, the actual width of our columns need to be adjusted by (in this case) -0.5em each, neutralizing the 1em gutter in between. With the adjustment applied, this yields a combined width of exactly 100%: 50% (base width) – 0.5em (adjustment) + 1em (gutter) + 50% (base width) – 0.5em (adjustment) + 0em (no gutter for the last column!).

Columns with adjusted width= perfect fit

For 3 columns (each being 4 units wide, or 4/12, or 33.3333% base-width each) a total gutter worth of 2em is injected. The adjustement for these 3 columns therefore is 0.666666667em.

If one would derive a formula to calculate the $gutterAdjustmentPerColumn, it’s this:

$gutterAdjustmentPerColumn = $gutterSize * (1 - ($columnWidthInUnits / $totalNumberOfColumns))

The same logic – albeit a tad different – is used to calculate the $offsetAdjustmentPerColumn

Simple Flexbox Grid System →

Elsewhere , , , Leave a comment

Fukol™ Grids


Building a CSS Grid System isn’t that hard really, thanks to flexbox. Heydon has stripped it to its smallest form:

.fukol-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5em;

.fukol-grid > * {
  flex: 1 0 10em;
  margin: 0.5em;

Fukol™ is a lightweight, breakpoint free, completely responsive, element query driven*, progressive enhancement based CSS grid framework. It is 93 bytes minified, fitting comfortably inside a tweet.

Embeded below is a demo pen:

See the Pen Fukol by Heydon (@heydon) on CodePen.

Fukol™ Grids →

Elsewhere , , , , Leave a comment

Why there is no CSS4?

Rachel Andrew:

If you read something about CSS3 Selectors, then what is actually being described is something that is part of the CSS Selectors Level 3 specification. […] The CSS Working Group is now working on Selectors Level 4 with new proposed features plus the selectors that were part of Level 3 (and CSS 1 and 2). It’s not CSS4, but Level 4 of a single specification. One small part of CSS.

There is no spoon 🙂

Why there is no CSS4? Explaining CSS Levels →

Elsewhere , , Leave a comment

Film Meets Art

Art inspires cinema, cinema inspires art. As lover of both, I just wanted to look into films that are inspired by famous paintings throughout history. There are plenty of movies more to include, maybe for a second part in the future.

There’s also a part 2.

(via Kottke)

Elsewhere , , Leave a comment

Gmail to remove CSS :checked support 😟


With a new update about to roll (already rolling?) out, Gmail has added support for – amongst other things – media queries and non-inline styles. Along with that update however, they’ve also axed support for :checked:

Also gone is the support for :checked selectors. The only pseudo-class selector supported in Gmail and G Suite webmail is :hover. In Inbox, :hover isn’t supported either.

This is a real shame imho, because it would prevent the creation of interactive e-mail using punched card coding. One of such mails is shown above. Yes, that really is an e-mail.

Embedded below a slidedeck by Mark Robbins (who kinda put it all together) on the subject, which he gave at CSS Day earlier this year:

See the Pen CSS Day slides – Mark Robbins by Mark Robbins (@M_J_Robbins) on CodePen.

And yes, even that entire presentation works *INSIDE* an e-mail.

Responsive email support in Gmail is coming →
Gmail update: A closer look at Google’s rendering refresh →
Punched card coding: the secret of interactive email →

Elsewhere , , Leave a comment

CSS Transparent and Outlined Text

For a recent project we did at work I needed outlined text. Using text-shadow you can achieve the desired effect, but one must admit: it’s ugly.

Some browsers however (Webkit) support the text-stroke property which gets a much nicer result. Here’s a demo pen:

See the Pen CSS Transparent and Outlined Text by Bramus! (@bramus) on CodePen.

The code above uses @supports to apply text-stroke when supported. If not supported it falls back to the (ugly) faux outline technique.

This is how it looks like in browsers that support text-stroke:


And this is how it looks like in browsers that don’t support text-stroke (note the ugly outline around the letter A):


Note: Unfortunately this technique does not work on emoji (cfr. Emoji Silhouettes and Emoji Outlines with CSS)

Elsewhere , , , 1 Comment

Emoji Silhouettes and Emoji Outlines with CSS

From StackOverflow:

It’s possible to include Emoji characters in modern browsers, but how can one make it a single color and choose that color?

Using an (inset) text-shadow in combination with transparent text color this indeed is possible:


With some more CSS – and an extra attribute – it’s possible to even achieve a (faux) outline.

Here’s a combined pen:

See the Pen Emoji Silhouettes & Emoji Outlines by Bramus! (@bramus) on CodePen.

Note: To outline text (without emoji), use the CSS Transparent and Outlined technique. It yields much nicer results.

Elsewhere , , 1 Comment

New CSS rotate syntax

In the CSS Transforms Module Level 2 there will be individual transform properties for translate, scale, and rotate.

This pen by Wes Bos demonstrates the new rotate syntax (use Canary):


See the Pen ALbmzN by Wes Bos (@wesbos) on CodePen.

So how exactly is said syntax? Here’s a snippet from the spec:

The rotate property accepts an angle to rotate an element, and optionally an axis to rotate it around, specified as the X, Y, and Z lengths of an origin-anchored vector. If the axis is unspecified, it defaults to 0 0 1, causing a “2d rotation” in the plane of the screen.

Elsewhere , , Leave a comment