Rachel Andrew: An increasingly common question — now that people are using CSS Grid Layout in production — seems to be “What are the best practices?” The short answer to this question is to use the layout method as defined in the specification. The particular parts of the spec you choose to use, and indeed …
Tag Archives: css
Scroll to the future – CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry.
Very in-depth article on Evil Martians’ team blog on scrolling: We have scrolled to the bottom of modern web specifications to take you on a whirlwind tour of latest CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry. Subjects tackled are styling of scrollbars, position: sticky, IntersectionObserver, Smooth …
Variable Fonts, an interactive presentation
How CSS’s display: contents; works
You might know that display: contents; does what it states it does: it only shows an element’s contents, just as if you were to remove the opening and closing tag. But what about the element’s attributes? What about the bound JavaScript events? What about … ? Ire Aderinokun digs deeper. How display: contents; works →
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 …
Continue reading “Working with Houdini’s new CSS Typed Object Model (Typed OM)”
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
UPDATE: The code snippet has been updated to use –custom instead of –. When Ire originally tweeted this — was a valid name for a custom property. This is no longer the case. As tweeted by Ire Aderinokun: @supports (color: var(–custom)) { /* has support */ } Not too surprising if you’ve used Feature Queries …
Continue reading “Using @supports to detect if a browser supports CSS Variables”
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 …