Situation: you have a single line of text in a flex child element. You don't want that text to wrap, you want it truncated with ellipsis (or fall back to just hiding the overflow). But the worst happens. The unthinkable! The layout breaks and forces the entire flex parent element too wide. Flexbox is supposed to be helping make layout easier!

Fortunately, there is a (standardized) solution. You just need to use a non-flexbox property/value to do it.

Checkboxes are great. Combine them with the right CSS and you can pull off some really neat tricks. This article aims to showcase some of the creative things you can do with checkboxes. Read on and keep in mind that the demos in this article use no JavaScript.

The Basic Formula

It all starts with the HTML.

Nothing tricky there. The for attribute on <label> matches the id on <input>, so clicking on the <label> will toggle the <input> checkbox. This is important, because our next step is to hide <input>.

Why not display: none? Because that would cause it to be ignored by screen readers and keyboard tabbing. This method keeps

HTTP/2 (h2), the successor to HTTP/1.x (h1), started to gain significant mainstream support with service providers such as CDNs during 2016. A major design goal of h2 is improved performance over h1 and some of the optimisations it makes include:

This is one of those web development tasks that starts simple but gets complicated in the process: Applying vertical margins to elements inside an article, for example a blog post that consists of compiled markdown.

Most of the time, you have to deal with exceptions and dependencies: Headlines and images need more whitespace. But if an image follows another image, there should be less whitespace between them. The whitespace between an h2 and an h3 should be larger than between an h2 and a paragraph. And so on.