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 […]
Tag Archives: css
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 […]
Geometric cover replication with CSS Grid, clip-path, and writing-mode
This one was fun dissecting: Geometric cover replication with CSS Grid, clip-path, and writing-mode →
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 […]
CSS Houdini Experiments
At the very end of the Say Hello to Houdini and the CSS Paint API article there’s only a small mention of this site. However it’s that great that it’s worth a link/post on its own. ⚠️ Be sure to use Chrome Canary – with “Experimental Web Platform features” enabled via chrome://flags – when visiting […]
Say Hello to Houdini and the CSS Paint API
With the CSS Paint API already being available in Chrome 65 and the CSS Layout API on its way it’s a good time to look at Houdini again. Say Hello to Houdini and the CSS Paint API → Related: This talk by Sam Richard: Magic Tricks with CSS Houdini
Lesser known CSS Quirks & Advanced Tips
Whether your a seasoned developer looking for a good overview, or a beginning developer trying to get your head wrapped around CSS, this list of CSS Quirks (which you might have gotten accustomed to over time) is great. Lesser known CSS Quirks & Advanced Tips →
30 seconds of CSS
I like these bite-sized CSS snippets. Reminds me of BRICSS (rip) 30 seconds of CSS →
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 […]