Articles Tagged

Chrome has delayed shipping @function to Chrome 139! A wise choice, if you ask me; functions will set a before and after in CSS.…

Arguments?! Return values?! What's crazier, you can use functions right now in Chrome Canary! So, after reading and playing around, here are my key insights on what you need to know about CSS Functions.

My thesis for today's article offers further reassurance that inline conditionals are probably not the harbinger of the end of civilization: I reckon we can achieve the same functionality right now with style queries, which are gaining pretty good browser support.

We’ve been able to get the length of the viewport in CSS since… checks notes… 2013! Surprisingly, that was more than a decade ago. Getting the viewport width is as easy these days as easy as writing 100vw, but …

The random() function in CSS is an experimental feature (i.e., not supported in any browser) that returns a random numeric value or random choice among multiple values from a range you specify. It works the same as JavaScript’s Math.random function…

Dark mode interfaces have matured a lot in the past few years. We all know the "traditional" approach using media queries but in this article, Sara Joy demonstrates modern CSS features that make respecting user color scheme preferences pretty darn easy.

Adam’s got this idea for a CSS syntax based on functional notations. Some “hate” it (Sass baggage) but we’re already sorta moving that way. Perhaps shorthand properties become shorthand functions?…

Most days, I’m writing vanilla CSS. Thanks to CSS variables and nesting, I have fewer reasons to reach for Sass or any other preprocessor. The times I reach for Sass tend to be when I need a @mixin to loop …

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;
  

…