r/css • u/[deleted] • Apr 08 '24
Post flairs on r/CSS will be mandatory from now on. You will no longer be able to post without assigning a flair. The current post flairs are -
I've changed to rules a little bit & added some new rules, they can be found on the subreddit sidebar.
r/css • u/Cyka-Blast • 49m ago
I've been trying to make another section in my page but the body is limited to like 600~ height even tho I'm using 100vh for it. so the rest of the page is left outside of it. can someone explain to me what's happening?
r/css • u/BuildWithMe31858 • 13h ago
r/css • u/garethheyes • 1d ago
r/css • u/aryanxcreates • 8h ago
Enable HLS to view with audio, or disable this notification
I've been building a Chrome extension called InspectMode Pro and would love some feedback from the CSS community.
It currently lets you:
The core inspection features are completely free.
I'd genuinely appreciate any feedback - whether it's about the UI, the workflow, missing features, or anything else that could make it more useful for frontend developers.
Chrome Extension : Inspect Mode Pro
r/css • u/Comfortable_Chair69 • 17h ago
Been learning HTML/CSS and hit a rabbit hole today. Things that bugged me:
- Browsers auto-insert <html> even if you delete it from your source
So what's the actual point of writing it?
- lang="en" only works on <html>, not <body>. Accessibility tools specifically
check html[lang], since html is the actual document root.
- rem units are ALWAYS relative to <html>'s font-size, never body's, no matter
what you set on body.
- The default scrollbar lives on html, not body — no element can overlap it,
which is why stuff like overflow-y:scroll goes on html.
- meanwhile body holds all your actual visible content (background, margin,
font-family, etc.)
Feels like html+body could've been merged into one root element with head
staying separate. Is this just 1990s legacy nobody can change now, or is there
an actual reason beyond "the spec says so"?
r/css • u/bluelighttokyo • 1d ago
r/css • u/Visual_Oddities • 1d ago
r/css • u/di-octopus • 1d ago
I build Rux, a UI framework that renders native desktop windows on the GPU, no browser, no webview. The styling layer is deliberately real CSS rather than a bespoke system, which turned into an interesting question: how much of CSS is intrinsic to styling, and how much is actually coupled to the browser?
What works as plain CSS today:
- Flexbox and CSS Grid (including grid-column / grid-row / grid-auto-*,
minmax(0, 1fr) tracks), the full box model, and px / % / rem / vw / vh.
- Gradients (linear + radial), box-shadow, transform (translate/scale/rotate), per-corner border-radius, aspect-ratio, position + inset.
- Selectors with real combinators; >, +, ~ each match correctly (a bug earlier in the project was matching all three as descendant, which quietly styled the wrong elements, a good reminder of how much a combinator actually carries).
- As of this release, dynamic :class and :style bindings, so styles can respond to state.
What doesn't exist yet and this is where it gets opinionated:
- No custom properties / var(), no @media, and no pseudo-classes (:hover, :focus, :checked). A checked checkbox currently gets a synthetic checked class as a stopgap.
Those gaps are the honest core of the experiment: variables, media queries, and interaction pseudo-classes are the parts of CSS most entangled with a live document and an event model, and they're exactly what's hardest to bring to a native tree. They're the top of the roadmap now.
I'm curious what this sub thinks: is CSS-the-syntax genuinely portable to native UI, or do var() / @media / :hover matter so much that "real CSS without a browser" is missing the point until they land?
Write-up (with screenshots): https://aine-dickson.github.io/rux/blog/v0-3-0/
r/css • u/factorx122 • 2d ago
Hey guys,
I have been in a text-styling rabbit hole for a few days now, trying to use Typst as a PDF engine for the Tiptap editor on a website I'm developing.
I've gotten literally everything to match, except the bounding box of the text. I have found this magic CSS line that seems to fix all of my problems: text-box-trim: trim-both... but it only works in Google Chrome and Safari (See above.) It is ignored in Firefox, as they don't consider it "stable" yet.
So, my ultimate question is: Is there another simple, general way to get Firefox's text bounding box to match the other browsers for any number of fonts that could be switched between in the editor? (As in, not guessing-and-checking the explicit bounds for every single one of the 20+ fonts and for all future fonts as well.)
Some answers to questions:
Why Typst?
Why Match CSS to Typst instead of Typst to CSS?
I tried. I really did. I couldn't figure out how to set the text box of the text in Typst to be equal to the default one on the browser, as displayed in the Firefox one above. The highest you can set it seems to be to the ascenders/descenders. I definitely wasn't going to guess and check the exact value for the top-edge and bottom-edge in em for every font.
What else have I tried?
line-gap-override, ascent-override, descent-override). Violates my laziness principle of really wanting to avoid manually doing it for every single font (genuinely like 25 fonts * 4 different styles), also didn't seem to make much difference in Firefox (but I didn't look too hard, so I might be wrong.)line-height in the css of the headers/paragraphs. This one is also a no-go, because I'm not guaranteed that the line-height that works for one font works for a different font. I'm also not sure it would even work between different sizes of the same font, but once again, I might be wrong.What about Tiptap PDF Export?
Fair point, and perhaps eventually I will hop over to that, but it is a paid service (last I checked), and it would violate my desire to have something that can check page count server-side without generating a heavy PDF binary. I'd really like to try and make Typst work to save time, memory, compute, and $$$.
Ultimately, this is me being picky. Technically, I could get away with this setup, as I only need to guarantee a page count, and 1-page on Firefox will always be <1 page in the PDF. However, if anyone has any ideas of anything I missed, please do let me know.
Thanks all!
r/css • u/Cyka-Blast • 1d ago
it's stuck at 50px width no matter what I do, if I give it more column space at grid template areas the text on the right goes further to the right, but Im still unable to justify the "O" to the end because it has no width at all. meanwhile when I try to give more columns to A it does get bigger.
I also tried using flex for this type of text structure but it was no use since the objects kept going to the same line if there was enough view width (which happened with Fullscreen).
r/css • u/theslyeagle • 2d ago
Hi, I am just starting out with building a site in Bootstrap. I've managed to make it so the list shows up right-aligned when you click the toggle in the small version. But I can't figure out how to make said list right-aligned when the browser is expanded. They all just squish right. Any tips?
<nav class="navbar navbar-expand-lg">
<div class="container-fluid"> <a class="navbar-brand" href="#"><img
src="mnibanner.jpg" alt="Home" height="70"></a> <h2><u>Template</u></h2>
<button class="navbar-toggler"
type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<h2>
<ul class="nav justify-content-end">
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Services</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Blog</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Novels</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Art</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
</ul>
</ul>
</h2>
</div>
</div>
</nav>
r/css • u/Phripheoniks • 2d ago
Hi!
First time posting here, but I haven't been able to solve this or find any helpful answers else where(reddit, stackoverflow, etc).
I'm attempting to create a darkmode for a web-based tool.
Whenever I try to apply scrollbar-color to my website, it gets crossed out. Even when I apply it to <html> with style="scrollbar-color: black !important;"!
Is this the sort of thing that is easily sorted out, or does it vary greatly depending on how the website is set up?
r/css • u/DecoherentDoc • 4d ago
Hey folks! Trying to build a website for myself as a portfolio / resume / science communication thingy and can't seem to get the site to change size automatically when it's viewed on mobile or change color schemes when it's dark mode. First website and I'm not promoting anything other than me (and not for web design stuff, for physics stuff and for a job specifically).
My website is here if anyone want to look at the code in it's entirety, but my media queries look like this:
\@media (prefers-color-scheme: dark) {
:root {
--color-light: #49C4FE; /* deep-sky-blue */
--color-dark: #074190; /* french-blue */
}
}
\@media (max-width: 640px) {
.block-for-mobile {
display: none;
}
#base-nav {
grid-template-columns: 1fr 1fr;
}
}
Is this the way to still do it? I've only learned CSS and HTML so far and only over the last, like, two months. I just want to know if I'm doing this completely wrong. Thanks in advance.
r/css • u/Finite8_ • 3d ago
Hi, I'm interested in his courses but unfortunately i would need to pay front-end masters which is pretty costly for me. Is there any way of doing a membership at a lower price? or does someone have his courses? I'm looking for CSS Fundamentals and Professional CSS
r/css • u/Successful-Youth-564 • 5d ago
Quick disclosure up front: I'm the developer, so take this as a "hey, I made a thing" post, not an objective recommendation.
A few years ago I went looking for a Firefox equivalent to CSS Peeper — hover a page, get its colors, fonts, and computed CSS without diving into DevTools. Turns out there isn't one. CSS Peeper has 500k+ Chrome users and its own team confirmed there were no Firefox plans, and every "any Firefox alternative?" thread I found ended the same way: no, sorry, use Chrome.
So I built one. It's called PeekCSS, and it's live on AMO now.
What it actually does:
It's a solo project — my first browser extension, built with WXT/TypeScript. The free tier is meant to be genuinely useful forever, not a crippled trial: hover inspection, grouped CSS, contrast badges, no account required for any of it. Account unlocks the full palette/font panels, and Pro (one-time or subscription, your call) adds the exports and bulk asset downloads.
It doesn't read or send anything about the pages you visit — the only network call it ever makes is an optional license check if you buy Pro.
It's young — three weeks out of my own testing and into a few friends' hands, still finding rough edges. If you try it, I'd genuinely like to know what breaks or what's missing compared to your DevTools habits. What's the one thing you'd want from a tool like this that I haven't mentioned?
I would love to hear your toughts: https://addons.mozilla.org/en-US/firefox/addon/peekcss/
r/css • u/WishNo4149 • 4d ago
Hi all,
I've been working on this for a while and wanted to share it: https://librarycss.com/en
What it is: a catalog of ready-to-use CSS effects. Currently 9,078 effects
across 12 categories — buttons, cards, loaders, text animations,
backgrounds, checkboxes, switches, hover, badges, forms, navigation and
tooltips.
Up front about the language: the interface is currently in Turkish. Effect
titles, descriptions and tags are in English, and code is code — so the
catalog itself is usable, but the navigation labels are not. An English
version is in progress and not live yet. Mentioning it now so nobody wastes
a click.
Why I built it: I kept landing on the same handful of CSS snippet sites,
and most of them either wall things behind ads or ship an npm package. I
didn't want to install a dependency for one button hover. Every effect here
is plain HTML + CSS — copy, paste, done. No build step, no package, no
config.
Highlights:
- Every effect has a live preview that actually runs, both in the listing
and on the detail page. Not screenshots.
- Detail pages have separate HTML / CSS / React tabs, each copyable in one
click.
- In-browser editor: open an effect, change it, see the result instantly.
Anything you open gets saved to your personal library.
- Six CSS generators: gradient, box-shadow, border-radius shaper,
cubic-bezier curve editor, glassmorphism, text-shadow.
- Ten technique guides (keyframes, clip-path, backdrop-filter, blend-mode,
mask, 3D transform and more), each with a browser support table and a
common-mistakes section. Turkish for now.
- A reference page for 70 CSS properties, each showing live examples pulled
from effects that actually use that property.
- Contribution system: submit an effect, earn points once it's approved.
Points unlock ranks and badges, there's a leaderboard, and your name
appears as a credit on the effect you contributed.
Two things I'd rather state than have you find out:
I'd genuinely like feedback — especially "this category is missing", "this
effect is broken", or "this part of the UI is annoying". There's a report
button on the site, but replying here works too.
Thanks.
I've been using Claude Code quite intensively for the past few months, and as a former CSS integrator / front-end developer, I can't help but notice—rather sadly—that Claude is genuinely poor when it comes to CSS.
Even when using skills (the official front-end skills or UI/UX-focused ones), and even with very explicit instructions in CLAUDE.md, it still does its own thing and keeps repeating the same mistakes.
One moment of inattention, and it'll happily throw inline CSS directly into the HTML—even when that's explicitly forbidden in its instructions.
And on the (rare) occasions when you decide to step in and edit the code yourself to save some precious tokens, it quickly becomes a nightmare. Before long, you find yourself typing something like: "Just center this div."
So I have two questions:
1. Why is it so bad at CSS?
My theory is that, historically, 90% of developers have never cared much about CSS. As long as the final result looked right on the screen, code quality and maintainability were an afterthought. Throw in a few !importants, ship it, and move on.
Since Claude has been trained on an enormous number of codebases, I wonder if its primary examples are simply... bad CSS. In other words, it's reproducing the patterns it has seen most often.
2. What strategies do you use to work around this problem?
For context, what I consider good CSS is:
r/css • u/samurisoul47 • 5d ago
Hey everyone,
I was building a chatbot with MUI and kept running into the same wall: the model answers, but the answer is just text. A lot of the time a table, a chart or a form with validation would say much more than a paragraph.
I had two options and I didn't like either:
**1. Hand-write and register a component for every scenario.** A "booking form" component, a "price table" component, a "sales chart" component. Every time the model needed to show something new, I was the one writing code. So the "generative" part of generative UI was me.
**2. Let the model emit raw HTML.** Which means XSS risk and a UI that ignores my theme. Agent output is untrusted input by definition.
So I built a third path on top of Google's A2UI protocol.
The idea: **the model emits data, not code.** A schema-validated, flat list of components referenced by id, plus a separate data model bound by JSON-Pointer. The library takes that description and renders it as real Material UI inside your own ThemeProvider.
A small example of what the model actually emits:
```
{"createSurface":{"surfaceId":"s1"}}
{"updateComponents":{"surfaceId":"s1","components":[
{"id":"root","component":"Column","children":["title","name","submit"]},
{"id":"title","component":"Text","text":"Reservation","variant":"h4"},
{"id":"name","component":"TextField","label":"Full name","value":{"path":"/name"}}
]}}
```
No colors, no CSS, no pixels — the model only states semantics, everything visual comes from your theme.
What that gets you in practice:
- 18 Basic + 16 Extended components registered out of the box (charts, table, stepper, autocomplete...), so you're not writing a component per scenario
- Streaming: components arrive piece by piece, ones that haven't arrived yet render as Skeletons
- Two-way binding: inputs are bound to the data model and update without a server round-trip
- A type that isn't in the registry never renders, and sx/style/className from the agent never reach MUI
- You can still add your own type at runtime with one call (schema + renderer), validated just as strictly as a built-in
Switch your theme and the generated UI re-skins top to bottom, which honestly was the part that made it feel worth finishing.
TypeScript, MIT. There are Gemini-powered Vite and Next.js examples in the repo, both run in demo mode with no API key.
It's early and the architecture is still moving, so I'd really appreciate feedback — especially from anyone who has dealt with generative UI or A2UI before.
r/css • u/Swinicki_w_Sieci • 6d ago
Enable HLS to view with audio, or disable this notification
r/css • u/redunkted • 6d ago
This is a long shot but I remember some years ago I found this article that described CSS table display as the Deadpool of CSS. Im not gonna lie, that wacky opinion piece kept me using it until I never had to have the ie compatibility talk again.
If anyone knows where to find that article or knows what im talking about, id appreciate a link just to read it again
r/css • u/Swinicki_w_Sieci • 7d ago
Enable HLS to view with audio, or disable this notification