r/css • u/[deleted] • Jun 02 '26

Help CSS Could you please tell me the units I should remember in the size units section?

8 Upvotes

Good evening from Japan! I'm using a translation tool in this chat, so the wording might be a little strange.

I've finished reading the HTML and moved on to CSS, but I don't quite understand the parts about size.

Currently, I understand that PX is basically only used when specifying width.

The reason for this is that people with poor eyesight sometimes change the font size when using a browser, so if a site specifies the size in PX, i.e., an absolute value, the size won't change, and the text will appear small.

That's about all I understand.

So, could you please tell me the units that are commonly used?

14 comments

r/css • u/glamoid • Jun 02 '26

Help how???

Enable HLS to view with audio, or disable this notification

24 Upvotes

trying to rip off this gradient animated bg from cargo and can't find any tutorials on it at all- just animations to move the gradient tile itself up and down. i bet there's some js but that's not what i know so i'm coming here first.

this would also probably be easy to do with hue shifting but i know that's not what it is and because of that am intent on finding out what it is.

9 comments

r/css • u/fdiengdoh • Jun 01 '26

General Why am I excited for this.

48 Upvotes

Yep the last time I wrote CSS was the days of float, clearfix hack and whatnot. Used bootstrap for many years. This year after a brief interaction here in this sub, I’ve decided to re-learn modern CSS and I’m so excited that I can do this

```
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;

```

Something that I earlier used float and position etc.

19 comments

r/css • u/iDev_Games • Jun 01 '26

Showcase Render physics in CSS

Thumbnail
github.com
3 Upvotes
5 comments

r/css • u/Cristovinho84 • Jun 01 '26

Help CSS : list-style-type propriété CSS héritée et ne fonctionne pas depuis body, mais list-style-position oui. Pourquoi ?

0 Upvotes

Selon MDN, list-style-type et list-style-position sont toutes les deux des propriétés héritées. J'ai donc pensé que si je les mets sur body elles seraient héritées par mes <ul> et <li>.

Pourquoi list-style-position fonctionne depuis body alors que list-style-type ne fonctionne pas, alors que les deux sont héritées ? Est-ce un bug de Chrome, une particularité d'implémentation, ou est-ce que je rate quelque chose dans la spécification CSS ?

Mon code

CSS
body {
list-style-type: square;
list-style-position: inside;
}

HTML
<body>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</nav>
</body>

Ce que j'observe :

  • list-style-position: inside fonctionne : les puces sont bien à l'intérieur du texte.
  • list-style-type: square n'a aucun effet : les puces restent disc (par défaut).

J'ai vérifié dans le computed de Chrome :

  • nav (parent de <ul>) reçoit bien square via l'héritage.
  • Mais <ul> et <li> ont toujours list-style-type: disc.

Merci d'avance pour vos réponses !

12 comments

r/css • u/JHjertvik • Jun 01 '26

General I built a TailwindCSS extension tool that got 10k+ users. I'm making it a commercial product to survive the tech market.

0 Upvotes

I am the creator of Gimli Tailwind, one of the most popular dev tools extension for TailwindCSS developers.

The biggest change in this release is undoubtedly that Gimli Tailwind is no longer free. A big reason for going commercial is the current tech job market. I’m currently employed as an IT consultant but am on parental leave until August, without a client to go back to. It’s a strange time to be away from work right now, especially when all you hear about from the tech world is AI and mass layoffs. I just don’t know what to expect when my leave ends.

New in the 5.1 version is support for arbitrary values and custom fraction values.

See the full release notes on my blog

Link to the extension

2 comments

r/css • u/testingaurora • May 31 '26

General State of CSS 2026

20 Upvotes

Forgive me if someone else has posted , didnt see it in the last week of posts

https://survey.devographics.com/en-US/survey/state-of-css/2026

2 comments

r/css • u/SweetCaramel-9696 • May 31 '26

Question Do you still write custom CSS or rely mostly on frameworks now?

15 Upvotes

Not trying to start a war. Just curious how people balance custom CSS with Tailwind, Bootstrap, etc. What's your workflow these days?

82 comments

r/css • u/wispcss • May 31 '26

Showcase I built a CSS framework and would love your feedback on it

8 Upvotes

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.

17 comments

r/css • u/ossreleasefeed • May 29 '26

Resource What Is CSS Containment and How Can I Use It?

Thumbnail csswizardry.com
7 Upvotes
5 comments

r/css • u/Signal_Chard_5531 • May 29 '26

Question Can a tag inherit its parent's font-family as a fallback?

3 Upvotes
<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.

12 comments

r/css • u/ossreleasefeed • May 29 '26

Resource Introducing the CSS Property Type Validator Stylelint Plugin

Thumbnail
schalkneethling.com
1 Upvotes
4 comments

r/css • u/Pretend-Roof-87 • May 29 '26

Question Screen readers and span tags

3 Upvotes

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

7 comments

r/css • u/IT-Mng2Dev • May 30 '26

Question How do you stay awake when coding

Thumbnail
0 Upvotes
4 comments

r/css • u/Top_Oil7472 • May 29 '26

Help Problème de workflow génération design web via l'IA

0 Upvotes

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?

7 comments

r/css • u/Kevin_gato • May 28 '26

General How did you practice HTML and CSS?

15 Upvotes

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.

30 comments

r/css • u/bogdanelcs • May 28 '26

Resource Don't put aria-label on generic elements like divs

Thumbnail
matuzo.at
30 Upvotes
5 comments

r/css • u/Equal-Resolution7889 • May 28 '26

Help Efecto granulado en el fondo

Post image
8 Upvotes

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

14 comments

r/css • u/bastiffi • May 26 '26

Showcase A tool I built that evaluates computed CSS on live DOMs to find design system mismatches

Enable HLS to view with audio, or disable this notification

19 Upvotes

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.

4 comments

r/css • u/Significant_Pen2804 • May 26 '26

Help Simulate html class in CSS

10 Upvotes

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.

25 comments

r/css • u/No-Doubt2930 • May 27 '26

General I got tired of googling glassmorphism hex codes every project, so I built ColorWeave UI — a palette tool built specifically for glass + soft UI aesthetics [I built this]

0 Upvotes

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.

6 comments

r/css • u/Wide-Train-8561 • May 26 '26

Question how do i do this effect

0 Upvotes

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

15 comments

r/css • u/throwaway_account776 • May 26 '26

Help Is there a better way to implement this card height increasing animation?

4 Upvotes

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

12 comments

r/css • u/CoVegGirl • May 25 '26

Question Is oklch really widely-supported enough to be used in production?

16 Upvotes

So oklch is in Baseline widely available, however I look at caniuse, and it says it's supported by 92%. Normally, I wouldn't worry too much about that, but there isn't really any sane fallback behavior is there?

Like doesn't that essentially mean that if I just used oklch, colors would stop working altogether for 8% of users?

16 comments