CSS masonry with flexbox, :nth-child(), and order

Tobias Ahlin: On the surface it seems fairly easy to create a masonry layout with flexbox; all you need to do is set flex-flow to column wrap and voilà, you have a masonry layout. Sort of. The problem with this approach is that it produces a grid with a seemingly shuffled and obscure order. Flexbox […]

CSS Color Scheme Queries (“Dark Mode CSS”)

Next to Safari 12.1 earlier this month, Firefox 67 now also supports “CSS Color Scheme Queries”. The prefers-color-scheme media feature allows sites to adapt their styles to match a user’s preference for dark or light color schemes, a choice that’s begun to appear in operating systems like Windows, macOS and Android. Chrome will support + […]

Truncating Multi-line Text with CSS

To truncate multiline text in CSS, Safari introduced -webkit-line-clamp a long time ago (first mentions I found date back to 2010). .line-clamp-3 { /* Required declarations: */ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; /* Limit the text block to three lines */ -webkit-line-clamp: 3; } By now the property has been standardised as line-clamp. Firefox […]

Breaking Elements out of Their Containers in CSS with .full-bleed

About two years ago I wrote a post on How to Break Elements out of Their Containers in CSS so that they are “full bleed”. Whilst the method which uses CSS Grid still is accurate and works really well (I use it “in production”), the “old” method I used (in case of situations where one […]

Displaying the (Numeric) Value of CSS Custom Properties (CSS Variables) inside Generated Content

Nice hack by Cassie: she uses counter-reset as a temporary storage space so that the value of a CSS Variable it can be used inside generated content (e.g. with the content property). I was trying to display the numeric value stored in a CSS variable inside generated content…Turns out you can't do that.But you can […]

The future of CSS: Nesting Selectors

Early March the first draft for the CSS Nesting Module was published. The draft outlines a future mechanism by which we’ll be able to nest CSS selectors natively (e.g. in pure CSS, without the use of any preprocessors) This module describes support for nesting a style rule within another style rule, allowing the inner rule’s […]