A way to calculate the viewport’s width and height without JavaScript, by way of Temani Afif over at CSS Tip:
@property --_w {
syntax: '<length';
inherits: true;
initial-value: 100vw;
}
@property --_h {
syntax: '<length';
inherits: true;
A few sirens went off a couple of weeks ago when the CSS Working Group (CSSWG) resolved to add an if() conditional to the CSS Values Module Level 5 specification. It was Lea Verou’s X post that same day that …
SVG is the best format for icons on a website, there is no doubt about that. It allows you to have sharp icons no matter the screen pixel density, you can change the styles of the SVG on hover …
Gradients have been a part of the CSS spectrum for quite some time now. We see a lot of radial and linear gradients in a lot of projects, but there is one type of gradient that seems to be a …
We can make variables in CSS pretty easily:
:root {
--scale: 1;
}And we can declare them on any element:…
Imagine you have an element with a multi-value CSS property, such as transform: optional custom property values:
.el {
transform: translate(100px) scale(1.5) skew(5deg);
}Now imagine you don’t always want all the transform values to be applied, so some …
You know how you can get cardboard boxes that come totally flat? You fold ‘em up and tape ‘em to make them into a useful box. Then when it’s time to recycle them, you cut them back apart to flatten …
If you’re disciplined and make use of the inheritance that the CSS cascade provides, you’ll end up writing less CSS. But because our styles often comes from all kinds of sources — and can be a pain to structure and …
Huh! I did not realize that CSS custom properties had their own resolution behavior for how !important works in their values. Uh, despite writing a guide about them. 😬 But hey it’s now updated.
