Great find by Stefan Judis: Today I learned that the content property supports a way to define alternative text for generated content. You can specify the alternative content after a /: .new::before { content: url(./img/star.png) / "New!"; } Here’s how that works with screen readers: .new-item::before { /* "black star" and element content is read […]
Tag Archives: css
Everything I Learned About min(), max(), clamp() in CSS
Ahmad takes a look into the CSS min(), max(), and clamp() functions. As with all his articles, he also provides some practical use cases and examples. Regarding the clamping of the font-size of a page, you don’t really need clamp(): This is how to accessibly set a viewport relative scaling `font-size` with a min AND […]
100vh in Safari on iOS
When working with Viewport Units there’s this longstanding and extremely annoying bug in Safari on iOS where it does not play nice with the vh unit. Setting a container to 100vh for example will actually result in an element that’s a wee bit too high: MobileSafari ignores parts of its UI when calculating 100vh. Image […]
CSS Grid Layout Module Level 2: Masonry Layout
A long requested CSS feature is to be able to create a “Masonry Layout” using pure CSS. Today we can already create a Masonry-like layout using grid-auto-flow: dense;, but unfortunately that’s not the real deal. 🤔 Masonry Layout? Masonry is a grid layout based on columns, as popularized by Pinterest. Unlike other grid layouts, it […]
Emoji Customizer created with CSS Variables
Fun pen by Jakob Eriksen in which he combines Emoji and CSS Custom Properties to create an Emoji Customizer. The reason that this works is because of the fact that emoji can have modifiers. Skin Tone and Hair, as used in the demo above, are such modifiers. Using the ZWJ (“\u200d”) you can glue all […]
Colors in CSS: Hello Space-Separated Functional Color Notations
The CSS Color Module Level 4 spec introduces a new way to define colors in CSS: Space-Separated Functional Color Notations. Start using them today!
Using CSS to Control Text Selection
Will Boyd digs into the user-select CSS property: CSS lets you control how text selection behaves and appears on your pages. This can help you improve usability in certain situations and add a little bit of visual flair. Let’s dive in! His posts includes a very nice hack to make user-select: all; work only at […]
The Quest for the Perfect Dark Mode Toggle, using Vanilla JavaScript
In The Quest for the Perfect Dark Mode, Joshua W Comeau extensively explains how he has implemented the Dark Mode Toggle on his Gatsby-powered website. It follows the system’s light/dark mode preference, but also allows for an override which he persists in localStorage. The flow to decide if Dark Mode should be used or not […]
Dark Mode and Variable Fonts
Robin Rendle writing for CSS-Tricks, on leveraging Variable Fonts when implementing a Dark Mode: Oddly enough, these two bits of text [shown above] are actually using the same font-weight value of 400. But to my eye, the white text looks extra bold on a black background. How do we fix this? Well, this is where […]
98.css – A design system for building faithful recreations of old UIs.
98.css is a CSS library for building interfaces that look like Windows 98. 😂 98.css → UPDATE 2020.04.28: Jordan Scale, the author of the library, has done a write-up on 98.css.