Articles Tagged

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 …