Does anyone know what's the status of `random()` with Chrome/ Firefox?

I can test it out using Epiphany Technology Preview on Linux, but I have no idea about when to expect to see it elsewhere or where I can find that info. It has no MDN page, no CanIUse page... can anyone help me out here?

#CSS #random #cssFunction #coding #web #dev #webDevelopment #webDev #code #frontend

I have a new article out on Frontend Masters: Non-Square Image Blur Extensions https://frontendmasters.com/blog/non-square-image-blur-extensions/

It details the how behind creating the base effect with a single `img` element and only 4 #CSS declarations, then... well, check the article, I promise you'll learn something new!

#cssGrid #cssLayout #cssFunction #filter #cssFilter #SVG #svgFilter #code #coding #web #dev #webDevelopment #webDev #frontend #containerQueries

#Development #Misconceptions
CSS light-dark() vs. prefers-color-scheme · “light-dark() isn’t just a shorter ‘prefers-color-scheme’ query.” https://ilo.im/168oi0

_____
#CssFunction #MediaQuery #LightMode #DarkMode #Browser #WebDev #Frontend #CSS

light-dark() isn't always the same as prefers-color-scheme

`light-dark()` and `prefers-color-scheme` treat the defined `color-scheme` values differently.

#Development #Introductions
Rolling the dice with CSS random() · Native random numbers are coming to CSS https://ilo.im/166bac

_____
#ModernCSS #Randomness #CssFunction #CustomProperties #Safari #Browser #WebDev #Frontend #CSS

Rolling the Dice with CSS random()

Random functions in programming languages are amazing.

WebKit

#Development #Previews
A more powerful CSS attr() function · What to expect from the upcoming enhancement https://ilo.im/16166k

_____
#ModernCSS #CssFunction #HtmlAttribute #Browser #WebDev #Frontend #HTML #CSS

A more powerful CSS attr() function

Fallback values and non-string values, for any CSS property, not just content

#tinyCSStip (or gotcha) If you want to get the correct result when using smth like
atan2(var(--y), var(--x))
with --y and --x having different units...

then you need to register --x and --y as length values!

Or how I lost > 30min trying to figure out why my angle was 4° off...

#maths #mathematics #cssMaths #trigonometry #gotcha #cssGotcha #code #coding #frontend #webDev #web #dev #webDevelopment #houdini #cssVariables #customProperties #cssFunction

A quick light-dark() experiment

I wanted to experiment with the new CSS function light-dark() and get a sense of how to use it in a CSS architecture of nested (web) components. I think it’s going to be a powerful tool in the new responsive world of component architecture but I don’t want to recommend something unless I have experience with it in a project first.

daverupert.com