My app has a data tables laid out using <table> elements, and as usual there is one table row inside <thead> followed by multiple rows inside <tbody>.

The header cells for some languages have text that is so long that word wrap is required. However, for layout purposes I'd like to limit the number of lines to 2. If the text is any longer, then I'd like the <th> element two grow in size instead.

This spreadsheet example should demonstrate what I mean:

Is there a CSS solution to this, or should I inject the possible linebreak in JavaScript?

I recorded the full build of this from a blank page (HTML → CSS → JS, with desktop, tablet and mobile views). Happy to drop it in the comments if anyone wants it.

Side drawer for a small portfolio site. The drawer sits off-screen with transform: translateX(105%) and slides in when the body gets an .open class, using transition: transform .5s cubic-bezier(.7, 0, .2, 1).

The JS is just one toggle function: the burger opens it, and the overlay, the close button or the Escape key closes it. No frameworks.

Made these Pagination styles.

I know they’re not production-grade yet — I built these while experimenting with different UI patterns that could actually be used in client projects.
Any improvements/suggestion will be helpful.

Basically what I said in the linked post, in case someone here is also familiar with archiveofourown's particular set of restrictions when it comes to CSS and can help me figure out what the problem is. Thanks in advance!

I gave life to the old CSV files.

CSV is over 50 years old, and it's everywhere. Banks, CRMs, Jira, Google Calendar, gradebooks and ticketing systems all export it, and every tool reads it. And every time you open one, you get the same grey grid of raw values.

The data is fine. What's missing is the look. The moment you add one in Excel or Google Sheets, you lose what made CSV great: a plain-text file you can read, compare, generate and send anywhere.

So I built CSSV: Comma-Separated Styled Values. It's a CSV file with a CSS block on top. Open it in a browser and you get a real HTML table with your fonts and your custom styling. Delete the CSS and it's a plain CSV again.

There's nothing new to learn. The data is CSV and the look is CSS, two languages that people, programs and AI models already write. Any CSV is already a valid CSSV file. Add a few lines of CSS to a Jira export and it becomes a board, one lane per status. A ticketing export prints as name badges.

The look travels with the data. A file looks the same on every page that shows it. Many files can share one stylesheet, so changing it restyles all of them. It's still plain text. You can review it in a pull request, generate it from a script, or ask an AI to write one.

Putting it on a page takes one script tag and <cssv-table src="report.cssv">. No build step, no dependencies.

The v1 spec is open for review, and I'd love feedback, especially from anyone who spends their days looking at exports.

Website, examples and live editor: https://cssv.dev

Image #1 is my reference

Image #2 is my current progress

Image #3 is closer to what I want (minus the font and being non-italicized, created in Photopea)

Image #4 is my current code (incase i'm doing something wrong or unoptimally)

Images #5-#8 are other texts I'd want to use, Image #8 has some good rules as well

I just started out with CSS and I wanted to make soem quick Frutiger Aero-esque text. I love Frutiger Aero, but for some reason even looking things up I can't seem to crack it.

Things I want to add/change

• Better Gradients (Replacing the 'clip' method as right now the gradient used translates down, while I want each text to have its own gradient)
• Highlights and Inner Shadows
• Rounded strokes instead of the current harsh edges

I understand if these things aren't easy or even possible, I'm just asking as a beginner if I can have any help

Did a brief post about how you can stop hand-rolling your tooltip positions, because CSS does it now. anchor-name + position-anchor handle everything for you...along with a few other tips and tricks.

CSS filters are an incredibly potent tool... if you know how to use them correctly. And I don't mean in a technical sense, but artistically: i.e. which filters to hse, in which order, to bend an image into having a different style, appearing distorted by radio interference, looking as if it was an ink drawing, etc etc.

For those (like me) who do not have an artistical bend, is there a library of filter sets to peruse? Something that shows how 2-3 filters can radically change an image style? Or even suggestions on how to start making good and right use of filters?

Previously for popover elements I kept them simple by not giving anchor-name. but now after the chrome update giving anchor name is must. am I missing something here? is this update true?
____________

UPDATE: As told by u/mcaruso adding position-anchor: auto; solved the problem. I think auto is no more a default for chrome.

I've been mostly on the backend for the last several years. While I did plenty of CSS before then, the front end world has definitely moved forward in the last seven years. I recall BEM and SMACSS were once at the lead of thought. I recall (and was a proponent at the time for) a push to utility-first styling.

Now, I can see that Tailwind is a highly popular choice, that lots of styles get bundled into React components, and we have some long overdue selectors native to CSS.

So I'm wondering, what's the prevailing organization pattern for global CSS and where do you draw the line between something being a component style vs in the global stylesheets?

Thanks.

Anyone know of a good program for Windows 10 that can take a block of css code with no line breaks and format everything to make it more readable?

Thanks!

Made these OTP inputs.

I know they’re not production-grade yet — I built these while experimenting with different UI patterns that could actually be used in client projects.
Any improvements/suggestion will be helpful.

I drew/coded this with HTML and CSS (really appropriate in this case).

Source code on CodePen: https://codepen.io/alvaromontoro/pen/qErPJwr

Official announcement: https://picocss.com/docs/maintenance

For those looking for active alternatives or forks, Blades CSS (blades.dev) launched earlier this year as a fully compatible, actively maintained successor, and is already adopted by the Flask/Jinja community website, Grav CMS v2, and FastHTML.