Cascade layers recently [end of 2024] reached the completely arbitrary “baseline widely available” milestone, which means they have been available across all modern browsers for more than 30 months now.
I’ve been a huge advocate of cascade layers since day one. I can’t imagine writing CSS without layers. So obviously I have a lot to say about layers. But today I want to focus only on one point (and it’s worth repeating): Your CSS reset should be placed inside a cascade layer.
For users to experience a quality service it must be built in a robust way.
Progressive enhancement is a way of building websites and applications based on the idea that you should make your page work with HTML first.
Only after this can you add anything else like Cascading Style Sheets (CSS) and JavaScript.
All government services must follow progressive enhancement, even if part of the service or a parent service needs JavaScript.
The new CSS Color 4 specification has added the new oklch() notation for declaring colors. In this post, we explain why this is important for design systems and color palettes.
The oklch() functional notation expresses a given color in the Oklab color space. oklch() is the cylindrical form of oklab(), using the same L axis, but with polar Chroma (C) and Hue (h) coordinates.
I want to make emoji bigger than the text that surrounds them. At my age and eyesight, it can be difficult to tell the difference between 😃, 😄, and 😊 when they are as small as the text.
Is there a way to use CSS to increase the font size of specific characters without having to wrap them in an extra <span> or similar?
Yes! Although it is a bit of a hack.
Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.
MIT licensed
Minimal snippets for modern CSS layouts and components
VanJS is an ultra-lightweight, zero-dependency, and unopinionated Reactive UI framework based on pure vanilla JavaScript and DOM. Programming with VanJS feels like building React apps in a scripting language, without JSX.
Discover beautiful color combinations your whole audience can appreciate and follow Web Content Accessibility Guidelines (WCAG) with ease.
#
The color pairings follow WCAG 2.1 AA based on a contrast ratio of 4.5:1. The pairings have sufficient contrast for use with normal text, large text and graphics.
Free SVG icons for popular brands
»Firefox is the only browser that supports the fancy element() CSS function (with a vendor prefix, but hey 🤷♂️). The function allows you to display images of arbitrary HTML elements on your page! And the best thing is: it's live!«