Want to give a responsive irregular shape depending on text content/ viewport rounded corners? Here's a super simple pure #CSS + #SVG #filter demo on @codepen doing it https://codepen.io/thebabydino/pen/KwKGrjR
Heavily commented. See also https://mastodon.social/@anatudor/114185324674119212 for details about some of the filter primitives.
Expanding upon my parallax layers experiment from yesterday, now with zero-js 
I also added two more designs to the demo, and tried one with a horizontal parallax 
Doesn't work for Safari or Firefox users, sorry.
Thanks @germanfrelo for the tip.
#Development #Launches
‘Div’ided we Fall · A fun HTML and CSS learning game https://ilo.im/162orz
:dir()
Newly available (from Dec 2023)
https://developer.mozilla.org/en-US/docs/Web/CSS/:dir
The :dir() CSS pseudo-class matches elements based on the directionality of the text contained in them.
Цікавий спосіб розмістити в шаблоні Wordpress кнопку для перемикання стилю шаблона. Додай функцію "Dark Mode" за допомогою JavaScript та Cookies.
#CSS, #JavaScript, #Веб_розробка, #Створення_шаблона_Wordpress
https://ivaniura.org.ua/web/wordpress/knopka-peremykannya-stylyu-shablona-wordpress
“Reimagining Fluid Typography” by @mia
https://www.oddbird.net/2025/02/12/fluid-type/
> Never do pixel math with `em` and `rem` units. That’s where we went wrong, by assuming that `16px == 1em` is a reliable fact.
It reminds me a lot of what I was pretty vocal about a few years ago, including “People don't change the default 16px font size in their browser (You wish!)” and “Users DO change font size”.
But I don't understand how this code…
️ https://nicolas-hoizey.com/links/2025/03/20/reimagining-fluid-typography/
@mnvr I think CSS is render blocking no matter where the link tag appears in the HTML.
I've checked a few resources and none of them suggest moving the tag.
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/CSS
<link href="foo.css" rel="stylesheet"> is render blocking. Not news exactly, but I wanted to see if this is just defacto or dejure, and the answer seems both - https://mnvr.in/render-blocking
@tripplehelix It works without using any reset at all.
Are you sure you need it? User agent stylesheets are a lot more consistent across browsers now than they were before.
I don't use one.
@Chalkllate Good point! This is a setting all platforms could provide. It’s standard #CSS supported by all browsers since years.
Parallax layers 
A subtle shift across 13 layers kept within a frame on the page.
Huh, I'm using a 14-year-old CSS reset. Maybe time to update?
Gosh, that idea is terrifying.
Grammarly Is Quietly Breaking Websites—Here’s How
Web developer Daniel Bushell discovered that the Grammarly browser extension injects global CSS into every website—even if it’s not actively being used.
What’s happening?
・It overwrites --rem on :root, breaking layout calculations
・It bypasses Content Security Policy via stealth styles
・It injects a <grammarly-desktop-integration> tag on every page
・It even loads 20 unnecessary font variants
Bushell’s fix? Renaming his variables to --
.
This raises bigger questions about how browser extensions interact with the web—and the need for more respectful, sandboxed designs.
I've been distracting myself with some updates on my website lately (#LetAWebsiteBeAWorryStone). One such update was to, on hover, show a mockup of my sticker designs on a laptop, with the power of… #CSS! 
I also adjusted the layout of my Projects page on large viewports because regular card grids _can_ get boring.
A new #CSSWG proposal for layout looks ... interesting.
https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/
A bit of fooling around. I started wondering if it's possible to style <head> and it's elements. It turns out you can! I managed to quickly remake <title> into a top bar. :D
You need to give `display: block` to <head> and then other elements inside too.
I can't think of many practical use cases for this, but who knows. This one time, I might need it.
Is there a simple way to code force any browser to resize a portrait aspect ratio image (vertical) so it fits within a predefined box via a div, like the browser does to image files opened "raw" (not in HTML page, just as a file)?
I have a template I created to display images, but the vert images clip below the screen, so one must scroll, no matter what I try.
I AM using an older version of FF to test the page...
Thanks
Here's a simple image stack with an `--ang` rotation around an `--xy` point (both pseudo-random, generated & set inline via Pug) + a 3D entry animation (click Run to run it again).
Live on @codepen https://codepen.io/thebabydino/pen/qEBJpRb?editors=0100
Anyway, I’m noticing that “font size” is very ambiguous. Even the general wisdom of 16px being the smallest font-size to use — realistically in browsers that’s computed as something like 11-point-something-pixels (changes per font). These newer #CSS capabilities make me want more specific guidelines.
For example, the following will make the cap-height of the font and the text box equal to 16px exactly.
```css
font-size-adjust: cap-height 1;
text-box: trim-both cap alphabetic;
```
This means that a `line-height` of 1.5 will create 8px of line spacing. #CSS
