Quick Hit #38
Chrome has delayed shipping @function to Chrome 139! A wise choice, if you ask me; functions will set a before and after in CSS.…
Articles Tagged
11 Articles
Functions 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.
The What If Machine: Bringing the “Iffy” Future of CSS into the Present
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.
Lee Meyer
on
Typecasting and Viewport Transitions in CSS With tan(atan2())
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 …
Come to the light-dark() Side
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.
Sara Joy
on
Quick Hit #22
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?…
Geoff Graham
on
CSS Functions and Mixins Module Notes
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 …
Geoff Graham
on
Calculate Viewport Size in CSS
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;
Geoff Graham
on
Using Absolute Value, Sign, Rounding and Modulo in CSS Today
For quite a while now, the CSS spec has included a lot of really useful mathematical functions, such as trigonometric functions (sin(), cos(), tan(), asin(), acos(), atan(), atan2()), exponential functions (…
Ana Tudor
on
CSS Functions Guide
Like any other programming language, CSS has functions. They can be inserted where you’d place a value, or in some cases, accompanying another value declaration.
Eric Bailey
on
