Fabio Giolito explores three new CSS color features that landed in Safari Technology Preview:
Relative color syntax, e.g.
background-color: hsl(from var(--theme-primary) h s 90%);
background-color: hsl(from var(--theme-primary) h s 80%);
background-color: hsl(from var(--theme-primary) h s 70%);
CSS color-contrast, e.g.
color: color-contrast(var(--theme-primary) vs white, black);
CSS color-mix, e.g.
color: color-mix(var(--theme-primary), black 10%);
color: color-mix(var(--theme-primary), black 20%);
One of the best ways to control an object is with a Proxy. You can do a lot of fun things with Proxies, which we will explain in this article.
After reading yet another blog post about JS classes being “just sugar for prototypal inheritance”, I’ve decided to write this post to help clarifying, one more time, why this statement is misleading; a post that hopefully explains what’s the difference and why it matters to understand it.
I also used to say this — echo’ing statements by others — but will refrain from doing so from now on 😅
To self-host Webfonts from Google Fonts — which you should — there’s google-webfonts-helper which you can use. They offer the entire Google Fonts catalog and provide a way to easily download the fonts and accompanying CSS snippets you need.
Stage-3 is the Candidate Stage where the feature is considered complete and only critical changes will happen based on implementation experience. If all goes well the proposal will advance to Stage 4 without any changes, after which it will to become part of the ECMAScript Specification.
Nathan Sebhastian has a good overview on how it compares to Date, along with some practical examples.
Creating and dealing only with immutable Temporal objects
Straightforward API for date and time computations
This approach however won’t work in Chromium, as only Firefox/Safari support animating text-underline-offset at the moment … but thankfully a tiny amount of CSS Houdini Magic can be sprinkled on top to make Chromium happy 🤩