Working with Houdini’s new CSS Typed Object Model (Typed OM)

Chrome 66 will add support for Houdini’s Typed OM. Eric Bidelman from Google has documented how we can use this. CSS now has a proper object-based API for working with values in JavaScript. The days of concatenating strings and subtle bugs are over! The example shown above merely defines a value and is quite a […]

Subsetting web fonts with glyphhanger

glyphhanger is a great tool to work with web fonts, developed by the folks at Filament Group. It serves two goals: It shows what unicode-ranges are used on a web page: # local and remote URLs $ glyphhanger ./test.html $ glyphhanger https://example.com # output characters instead of Unicode code points $ glyphhanger ./test.html –string # […]

Using @supports to detect if a browser supports CSS Variables

As tweeted by Ire Aderinokun: @supports (color: var(–)) { /* has support */ } Not too surprising if you’ve used Feature Queries before, but what does surprise me is that you can make it work by only passing the prefix of CSS Custom Properties (e.g. –) into the var() function. See the Pen Supports CSS […]

Emoji Compositions — Create your own emoji by combining existing ones (👱‍♂️ + 🎩 + 🔎 = …)

Last Friday Max Lynch sent out this tweet: I'm still not over Apple killing the best emoji there ever was pic.twitter.com/gVOMhEP3Mn — Max Lynch (@maxlynch) March 15, 2018 Inspired by an idea that first came to my mind after seeing these emoji compositions using the 😎 emoji, I quickly replied that it’d be perfectly possible […]

Responsive Components: a Solution to the Container Queries Problem

Extensive writeup by Philip Walton on how he tackles the Container Queries problem. Instead of narrowly focusing on the specific CSS feature proposal we call “container queries”, I want to focus on the broader concept of building components that respond to their environment. And if you accept this larger framing, there are actually new web […]