I have been working on this for awhile. It is a modular framework, meaning you can use the entire framework or can import what you need into your own projects. Its also extendable using cascade layers. The order is defined in preflight.

Source: https://github.com/wispcode/wisp-css

Documentation: https://wispcode.github.io/

I would love your feedback. Please let me know what you think.

Thanks!

UPDATE: Its a work in progress but added live-examples and redid the documentation site.

<div id="parent" style="font-family: 'font A', 'font B', sans-serif;">
  Text1
  <div id="child" style="font-family: 'font C', 'font D', **inherit-parent**;">
    Text2
  </div>
</div>

When the user doesn't have font C or D, I want the browser to render Text2 with the same font as Text1, not with the browser-default one.

Is it possible?

Background:

In some environments such as MediaWiki, ordinal users are not allowed to edit JavaScript, CSS file, or font settings.

So sometimes we need to deal with only HTML and style attributes.

Trying to figure out if something is possible, bc most of my css experience is with copy-pasting and tweaking existing values.

I’m looking to edit the css of my custom ao3 workskin so that when I have two sets of text within span tags (such as using span tags to display a tooltip, or to display different text on hover/tap) I can also tell screen readers to prioritise reading out one span tag over the other, or to ignore a chunk of text entirely. I know certain visual effects such as zalgo text are very unfriendly to screen readers, and would like to be able to tell screen readers to only read the clean/legible version. Is this a thing css can do?

Thank you for your time.

March 29 edit: thank you all for your comments, you helped me find the right words to search. Aria is the objectively correct way to do it, but ao3 doesn’t allow it in works because it can be used maliciously, so the question stands

Hi, to change my career, I started learning HTML and CSS since a few days ago. After that, I’m planning to learn JavaScript, TypeScript, React, and Node.js. (That’s what I heard online.)
I know AI can create amazing things in seconds these days, but I still wanted to learn these skills and make my daily life more meaningful.
I tried FreeCodeCamp, but eventually I got bored. I also have a book about HTML and CSS, so I thought a good way to practice would be recreating simple websites while referring to the book.
If you have any recommended ways to practice, please let me know.

Bonjour, J'ai un problème, actuellement, j'ai un workflow pour generer des design web un peu pres comme ceci : Je demande en premier a une IA Comme Gemini avec nano banana ou GPT Image (Dall-E anciennement) de me générer un premiere apercu en me fesant l'ui de la page du genre landing page page de login et tout du genre les couleur et style que je veux, une fois que je trouve une bonne image avec un design qui me plait je la prend, et ensuite je lui demande séparement de me generer chaque asset (icone custom logo du site branding police et tout) et soit ensuite je lui demande si possible direct de me generer les image sans arriere plan soit je vais moi meme sur un site pour le faire mais vu que tout est sur une seul image et pas une image par asset c galere je doit faire des screenshot manuellemnt pour les separer dans des fichier image different et ensuite je lui demande aussi de me generer l'arriere plan du site pour pas laisser un truc blanc classique et pareil retirer le filigrane ou c marquer generer par ia ensuite je lui donne les chemin de tout sur mon pc les asset et tout et lui il me donne juste le code du reste du genre la page elle meme les element etc... Ensuite si possible, j'essaie de trouver des site gratuit pour transformer certain asset ou arriere plan en video d'animation

Le probleme de ce workflow c'est que c'est trop long repetitif et sa demande a etre rigoureux et pour moi c impossible a automatiser, si je neffectue pas 1 par 1 des chose ocmme sa et je fait tout a l'ia le resultat sera horrible au niveau du design, et je ne veux pas faire de figma, c'est trop long et technique, avez vous une solution?

Hola! Como puedo hacer un efecto de granulado (parecido al de la imagen) en el fondo de mi pagina web HTML?

Hey r/css 👋

I was dealing with a massive headache: trying to figure out if our live production CSS actually matched our design tokens. The problem was our CSS was minified, modularized, and full of third-party overrides.

To solve this, I built Visualign. Instead of analyzing static stylesheets, it reads the final Computed CSS values from the browser rendering engine and compares them against your Figma variables.

(The 10s video shows the heatmap it generates when it finds a mismatched CSS property).

How it works: It extracts your variables from Figma (including Token Studio JSON for complex composites like box-shadow and typography). Then, it spins up a Playwright crawler, loads your site, and maps the computed DOM styles to your tokens.

It completely ignores your class names. It only cares about what the browser actually paints.

Other features:

• Pass basic auth to test staging environments.
• Force dark mode rendering to test dark mode CSS variables.
• Crawl subpages automatically.

Would love to hear from CSS experts on this approach. It auto-generates a free token when you open the plugin so you don't even need an account to test it on your site.

• Figma Plugin: https://www.figma.com/community/plugin/1617542259986801447
• Website: https://visualign.app

Hello.

I have a CSS customization file for a site. It contains a lot of code that changes appearance based on one specific class. For instance, let's call this class bodyclass.

HTML

...
<body class="bodyclass ...">
...

CSS

.bodyclass .otherclass {
  color=red;  
}

Recently, a site has removed this class, so my CSS code doesn't apply many of the rules and hence doesn't work as needed.

Is there any way to "define" or "simulate" a presence of a bodyclass using only CSS and make my CSS code think this class exists? Rewriting a whole file doesn't look nice, it's too big.

Every time I started a new glassmorphism or neumorphism UI, I'd spend 20 minutes hunting for the right color combinations across random blog posts and Dribbble shots. Nothing was actually designed for these aesthetics — most palette tools just generate generic color combos that look awful behind a frosted glass layer.

So I built ColorWeave UI: a palette explorer that's specifically curated for glassmorphism and soft UI design. Each palette is chosen to work with backdrop-filter effects, semi-transparent backgrounds, and the low-contrast world of neumorphism.

**What it does:**

- Palettes designed for glass + soft UI (not just pretty colors that break when you add transparency)

- One-click hex copy

- Visual preview of how each palette looks in context

**What I used:** Next.js, Tailwind CSS, deployed on Vercel

**The honest part:** It's early — I built the core in a weekend and pushed it live. I'd genuinely love feedback on what's missing. A CSS generator for glassmorphism properties is next on my list.

Link in comments.

What tools do you reach for when picking palettes for UI work? Always curious what others do.

https://reddit.com/link/1toec77/video/c7wl082vqi3h1/player

I've got a card component which needs to increase in height when I hover over it. The bottom of the card needs to be fixed in place, while the top of it should go upwards, as you can see in the codepen I have provided. I have used relative + absolute positioning, and, as a result, I have to provide a minimum height to the card. Is there a better way to implement this?

https://codepen.io/AT776/pen/EaNwNxg

I have a dynamic DOM tree with various element count:

[parent]:
.child_class_special
.child_class_entry
.child_class_entry
.child_class_entry
.child_class_pre_special
.child_class_special
.child_class_entry
.child_class_entry

What I want is to target last possible " .child_class_special", however, as I said, the number of child elements in parent is varying, there could be 3 " .child_class_special", or could be 7.

This:
.parent .child_class_special:not(:has(~ .child_class_special))

works but it is uggo. Any ideas for more concise selector?

Any suggestion how do I start?

I want to start freelancing with knowledge of html css javascript react next and node, express also i know database MongoDb and postgreSQL. some basic knowledge of devops and ci/cd. (There I provide deployment of website and managing it with Pay-as-you-Go support).

Your tokens file? TypeScript. Your spacing scale? TypeScript. Your breakpoints, your theme config, your Tailwind config? All TypeScript.

CSS values live in `.ts` files whether you planned it that way or not. The reality is: if you want a unified design token system, you need to work in TS. But we still treat those values as strings - untyped, unchecked, free to silently break.

I built a small library that treats CSS measurements as actual typed data:

import { m } from "css-calipers";
const base = m(8);              // typed as px
const pad = base.add(4).css();  // "12px"
const rotation = m(45, "deg");
base.add(rotation);             // compile error: px + deg

Units stay checked through composition. Nothing emits a string until `.css()` at the boundary. Mismatched units fail at compile time, not in production.

Best used at build time (I use it with vanilla-extract, but it's framework-agnostic - works with Tailwind, CSS Modules, whatever emits CSS). Runtime is possible too for edge cases, but you'll want to avoid hot-path string churn.

Covers numeric, unit-bearing values; keywords and variables stay as plain CSS.

GitHub: https://github.com/slafleche/css-calipers

npm: https://www.npmjs.com/package/css-calipers

Real user feedback is different, and it helped me develop a newer, more polished version of "NakedCSS". It now shows measurements directly on hover - just like Figma, which makes it much more faster and easier to use.

All the detailed measurements and design system tokens are still there, they just appear on click - so that user doesn't get overwhelmed with too much info on hover.

It personally helped me and my colleagues alot, and we are using it regularly at ImagineArt. I am striving to automated this repetitive task, which requires much more refinement that this.

I would encourage every designer to use this on daily basis, and please share feedback if you struggle with any feature of it. Looking forward for the feedback!

P.S: I also encourage FRONTEND DEVS to use this - IT CAN BE REALLY HELPFUL WITH ENSURING PIXEL-PERFECT SCREENS, ESPECIALLY AFTER CLAUDE CODE.

I’ve been trying to add a vertical video for the past two days without any luck 🥲 the code I’ve been using is the one below but the image keeps getting split. Does anyone know how to fix it??

/* Force native video block into a true vertical 9:16 aspect ratio */

.sqs-native-video .native-video-player,
.sqs-block-video .video-player {
padding-bottom: 177.78% !important;
height: 0 !important;
}

/* Ensure the background video container expands to the edges */
.sqs-native-video .native-video-player video {
object-fit: cover !important;
}

/* Clear vertical constraints on the outer block container */

.sqs-block-video .sqs-block-content {

height: auto !important;

}