11 ms·

Aspects of modern HTML/CSS you may not be familiar with

453 points by todsacerdoti 1y ago

paulddraper 1y ago
> Yes, the syntax isn’t the prettiest, but is it really that hard? Explain float: clear? Does that have anything to do with display: flow-root? And white-space is not actually whitespace? And when does vertical-align work vs not? --- ^ That is all CSS (and not particularly edgy CSS, except for flow-root). So....yes, CSS is really that hard. Unless you use the subset of CSS that you have decided to learn + use. Not unlike C++.
- rebane2001 1y ago
  The sentence you quoted refers to the 'centering a div' example, not CSS as a whole.
- whytaka 1y ago
  I haven't used float in at least half a decade. CSS is easy.
  - JohnFen 1y ago
    I suspect, as with programming languages, some people think in a way that makes it easy for them and others think in a way that makes it hard. Personally -- and I'm no web dev, so I probably don't count -- I think CSS is hard (maybe more irritating than hard, but in any case I wouldn't call it easy). In large part because the syntax is ugly, but also because it just doesn't "mesh" with me. If I'm reading it or writing it, I always feel like I'm having to decode it. But I can easily and happily work with some programming languages that most devs would cross the street to avoid. Maybe that's also why some people are attracted to being web devs and others aren't? As a user, nothing would thrill me more than if web pages just stopped using JS, though, so I am very happy that there is a feasible alternative to doing that that web devs could enjoy!
    - extraisland 1y ago
      > I suspect, as with programming languages, some people think in a way that makes it easy for them and others think in a way that makes it hard. No that often isn't the case. What is usually the case is that people don't bother the learning the basics. CSS is very easy. You can literally mess about with it on the fly in the browser and instantly see the result. It is easier now than it has ever been. Since all the browsers for the most part implement the standards properly. Safari is the only standout and all the issues with that are well known. > In large part because the syntax is ugly, but also because it just doesn't "mesh" with me. If I'm reading it or writing it, I always feel like I'm having to decode it. But I can easily and happily work with some programming languages that most devs would cross the street to avoid. It is probably because you haven't learned the basics. Whenever anyone has issues understanding CSS, they haven't bothered learning the basics and think they can flub their way through doing it. I don't understand what is ugly about the syntax. <some element selector> { property_1: <some value> property_2: <some other value> } It is about as straight forward as it could be. The difficulty with CSS is organisation as the web app becomes larger. There are well documented strategies on how to do this. > As a user, nothing would thrill me more than if web pages just stopped using JS, though, so I am very happy that there is a feasible alternative to doing that that web devs could enjoy! Non-trivial functionality requires JS. Basic Websites rarely require JS. So I am not sure what you are trying to say here.
      - typpilol 1y ago
        Agreed. Honestly the best thing I tell people to get some decent css basics is try to build a few stylus themes. You can instantly see the results in devtools. I can't think of any other language that does that besides html, and even then you have to save and refresh. Css is pretty easy to pick up in the chrome devtools at least because it has built in autocomplete. Showing you exactly what you can set the values too etc
      - b_e_n_t_o_n 1y ago
        CSS is easy, but it's not simple - it's enormously complex. Imagine the worst sins you could commit in a Ruby or Python codebase, multiply that by 100x and that's a normal CSS codebase. The syntax has never been the issue imo.
  - paulddraper 1y ago
    > Unless you use the subset of CSS that you have decided to learn + use. Not unlike C++.
  - Semaphor 1y ago
    I have used it recently, it’s now back to doing what it was supposed to, originally: Float objects into text.
- nicoburns 1y ago
  IMO it's more like PHP or JavaScript than C++. With C++ there are lots of different dialects in common use and you kinda have to learn them all to be good at C++. Whereas with PHP/JavaScript/CSS there are still ugly corners, but everyone pretty much agrees which the good bits are and which the ugly bits are, and you can mostly just ignore the old legacy bits.
  - paulddraper 1y ago
    What part of JavaScript language should you not use? The only one that comes to mind is is `with`, which is officially discouraged in the spec. I suppose the other one is type coercion. (Like [] + [] stuff. That's no end of "ha ha JS weird.")
    - nicoburns 1y ago
      with, == (except certain idiomatic uses), __prototype__, eval, etc.
- socalgal2 1y ago
  is float:clear still a thing? I remember being a thing 15-20 years ago? I can't remember needing it in the last 10+ white-space seems pretty straight forward: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space https://developer.mozilla.org/en-US/docs/Web/CSS/white-space vertical-align, yea, alignment in general is hard and IMO it's hard because it's a hard topic in general, CSS or native. but yea, it's not "vertical-align"
  - paulddraper 1y ago
    > pretty straight forward Anything but. It combines whitespace collapsing and text wrapping in one property and makes a mess of both. See https://drafts.csswg.org/css-text-3/#white-space-property https://drafts.csswg.org/css-text-3/#white-space-property to get an idea of how complicated it is. The MDN article is self-contradictory, e.g. note how the example don't match the "syntax" section. Plus, it has inconsistent quirks with HTML textarea.
- SquareWheel 1y ago
  Maybe this only proves your point, but there is no float: clear. They're separate properties. float: none; clear: both;
  - paulddraper 1y ago
    You're right. And the fact that yours was the only comment to point this out...
user3939382 1y ago
Who would have thought UI layout and rich formatting would be the hard problem that destroyed personal computing.
lemonwaterlime 1y ago
Modern CSS is indeed great. I'm using modern CSS, htmx, and Haskell to develop apps and am loving it.
- frizlab 1y ago
  Same but with Swift instead of Haskell. I’m an iOS/macOS developer, but I have to do a web app currently, and I was pleasantly surprised by how powerful and relatively easy CSS is.
- graypegg 1y ago
  I haven't touched Haskell in quite a while! If you ever feel like sharing any info about your experience working with it for web service dev, I'd be really interested to read it!
keeganpoppen 1y ago
i will say that though i am predisposed to appreciate and agree with an article like this, any sort of value proposition around "some users don't want javascript" just doesn't... hit for me. and, mind you: i am a card-carrying arch user and have spent more time messing with browser scripting and web crawling, and am more of a True Believer than most. it's just such a niche user preference that i think it should largely be simply ignored. yes, i would love the world to be better for the "noscript" universe, no, i don't think that any individual "grassroots" effort should stake itself on "no javascript" being any part of its utility. i think there are a million other reasons why CSS should win out that are more compelling than an appeal to what feels, extremely ironically, like a callback to the "but 10% of your users use IE6" days... all in all, yes: this is somewhat of a minor point wrt. to the article (which btw i think is great), but i am just calling the "trend", such as it is / has been, for what (i think) it is.
- jauntywundrkind 1y ago
  I agree; I don't find the noscript-ians to be useful or worth targeting. At the same time, I want to emphasize more strongly the flip side that I think you don't at but don't go much I to: I do find that writing less code & using the platform is enormously valuable! Doing less & letting the browser do the thing is a very nice win.
  - lukan 1y ago
    "Doing less & letting the browser do the thing is a very nice win." If only they would do it nice and consistently, I would agree. Sadly they don't. On one plattform you get sliders in this color who pop in when the mouse moves there, on another you have fixed size sliders of a different color and style. Impossible to make a coherent style like this.
- rebane2001 1y ago
  fwiw, i've been using the internet with noscript and i find it perfectly usable for any sites that do need js, i simply enable it for them from the extension, so it never gets in the way with sites i use regularly it's pretty nice for performance/battery and security have you ever tried living with noscript for over a week? i feel like your perspective could be a bit mislead, because i felt the exact same way as you before i started using noscript disclaimer: i'm the author of the blogpost
wpollock 1y ago
How can one learn modern CSS and is there an online reference that is up to date?
- squeegee_scream 1y ago
  MDN is what you're looking for https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics https://developer.mozilla.org/en-US/docs/Learn_web_developme...
- ZYbCRq22HbJ2y7 1y ago
  There are a number of sites that aggregate some things, here is one https://moderncss.dev/topics/ https://moderncss.dev/topics/ Recent survey of what people use to learn CSS: https://2025.stateofcss.com/en-US/resources/ https://2025.stateofcss.com/en-US/resources/ CSS Tricks article on this: https://css-tricks.com/how-to-keep-up-with-new-css-features/ https://css-tricks.com/how-to-keep-up-with-new-css-features/
awongh 1y ago
TIL about baseline widely available. I do wish we would start to move further towards a sane set of front-end application (logic) technologies (I don't think the current leader, Typescript NextJS is it) But I do appreciate that CSS is starting to feel a lot more sane these days.
- Uninen 1y ago
  Vite (which is used by a large portion of modern frontend frameworks) by default builds the production bundle for baseline widely available: https://vite.dev/guide/build.html#browser-compatibility https://vite.dev/guide/build.html#browser-compatibility
Quarrelsome 1y ago
omg that's so much prettier than it used to be. What they've done with it is extremely impressive.
Animats 1y ago
This should make WYSISYG HTML/CSS editors possible again. Here's a thought. Build a WYSISYG tool like that. HTML/CSS only. Round trip; that is; it reads its own HTML/CSS and works on that, rather than using some separately stored representation. If you want to use Javascript with this, it has to be inside a manually edited IFRAME or FRAME. If you have Javascript, it's probably for interacting with a server or doing something graphical. Or, more likely, for ads, tracking, and such. Not for layout.
socalgal2 1y ago
This article has lots of nice stuff in it but ... that first example in the tweet at the top, cool-thing { display: flex; &[shadow] { box-shadow: 1px 1px #0007; } @media (width < 480px) { flex-direction: column; } } and html like <cool-thing shadow>wow</cool-thing> I pasted it into a file and it doesn't work. I honestly didn't expect it to work. I thought you needed more to get a cool-thing element but in any case, it's not encouraging to see the first example fail. Am I missing some context? -- update -- my bad - I think it was just subtle and I thought it wasn't doing anything. Thanks for all the replies
- rebane2001 1y ago
  it should work, did you put the css between <style> tags? also the box-shadow is a box shadow, you might wanna change it to text-shadow if that's what you'd expect from it
  - msie 1y ago
    text-shadow works. Was the use of box shadow a mistake?
    - rebane2001 1y ago
      that snippet of code was never meant to be used, it was supposed to be illustrative code that fits in a tweet text-shadow does make more sense if you're actually trying out the code, but the original intention was to demonstrate a more complex element having a shadow modifier
- ZYbCRq22HbJ2y7 1y ago
  That is just showing nesting with some older features - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting... - https://caniuse.com/css-media-range-syntax https://caniuse.com/css-media-range-syntax - https://caniuse.com/css-nesting https://caniuse.com/css-nesting - https://caniuse.com/flexbox https://caniuse.com/flexbox
throwaway81523 1y ago
The great wheel of karma. All the stuff that made javascript despicable now makes css despicable as well.
- ZYbCRq22HbJ2y7 1y ago
  Can you elaborate on what all that stuff is?
  - SoftTalker 1y ago
    My interpretation is that although making your site a unique snowflake is fun, it's ultimately a burden on the users. GUIs are successful when they follow visual and behaviorial standards. With everything that CSS and JS can do, every website becomes an exercise in discovery just to be able to use it for its intended purpose.
    - ZYbCRq22HbJ2y7 1y ago
      > GUIs are successful when they follow visual and behaviorial standards. Wouldn't that be a design or HCI issue, not something innate to a language? What is a behavioral standard?
      - SoftTalker 1y ago
        Yes technically but the language enables it. A behavioral standard would be that scrolling always works by sliding the scroll bar or using the arrow or page-down keys. Or that the back button takes you to the previous page. Just two examples. Many sites break these and you have to discover what they replaced them with.
dwd 1y ago
I don't agree with his "Do not the vw/vh". I find vw very useful for a scaling pixel-perfect mobile portrait view that looks identical whether your mobile is 320px or 440px viewport width.
- rebane2001 1y ago
  not my pronoun, and not what the section talks about if you're going to disagree with something, please at least read it first
- alt187 1y ago
  I agree, vw has been very useful in making sites work the same on mobile and desktop. Even vh, sometimes.
  - dwd 1y ago
    Definitely sometimes. I generally avoid vh, and rely more on calc and vw to calculate any height that needs cropping, padding or scaling. For example dynamically equalising the height of boxes with unequal content - used to be something you did need JavaScript for. Another is setting widths, heights and gaps using a css grid to create responsive mosaic image layouts.
interstice 1y ago
> You are allowed to just make up elements as long as their names contain a hyphen RIP any semblance of using meaningful tags for machine readability I guess.
- rebane2001 1y ago
  it's a lot more readable than a bunch of divs if an element that semantically fits your needs already exists you don't need to make up an element in the first place
  - mixmastamyk 1y ago
    Hmmm, I thought you had to register these with JS first, but my browser seems to recognize them.
- voat 1y ago
  And even if they don't contain a hyphen! You can just <use> <anything> <you> <want>
  - masklinn 1y ago
    The soft-requirement for hyphens is a form of namespacing: nothing precludes whatwg from adding <use> or <want> elements to HTML in the future, and that would conflict with and possibly break your page.
    - 1718627440 1y ago
      To prove your point, <use> already exists although in SVG. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/use https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...
- nozzlegear 1y ago
  What's the use case for machine readability these days?
- 1y ago
wewewedxfgdf 1y ago
JavaScript is for more than augmenting CSS.
wordofx 1y ago
Unfortunately we are stuck with trash tailwind.
- timeon 1y ago
  Just another brick in bloated web.
adithyassekhar 1y ago
Colour picker isn't working for me on android Chrome stable 139.0.7258.158.
- rebane2001 1y ago
  the picker's touch area is really small on mobile, you can use it but you have to be accurate
  - adithyassekhar 1y ago
    It worked when I zoomed in, thanks. That's impressive.
mannyv 1y ago
Ugh, the syntax for CSS is just so crappy. I know like 10-15 different languages, and CSS is by far the hardest to read and understand. It's easier to understand x86 assembly than CSS. CSS is basically pre-tokenized input that drives a renderer, but they sort of went halfway and didn't really make it real tokens or really human-writable. I'd say that it should take the place of ASN.1 in the RFCs as an example of "what not to do."
- icedchai 1y ago
  I feel the same way. I find it the worst part of the HTML / CSS / JS trio.
- ZYbCRq22HbJ2y7 1y ago
  > I know like 10-15 different languages, and CSS is by far the hardest to read and understand. CSS is hard to know, even if you know 15 languages. I can understand many programming languages and write in a subset of many of their features, but I wouldn't claim to know them. That would require a monumental amount of day to day effort, in my opinion (see https://en.wikipedia.org/wiki/Illusion_of_explanatory_depth https://en.wikipedia.org/wiki/Illusion_of_explanatory_depth). To me, the best way to understand CSS is to evaluate it after rendering, and I have been writing it for decades.
- jy14898 1y ago
  What do you mean by "CSS is basically pre-tokenized input"? Can you give an example of what you have trouble with?
- lionelw 1y ago
  How many of those languages are declarative, or domain specific? There's no use comparing CSS and assembly. It betrays a shallow understanding of CSS. Points to ponder: - Assembly is superlatively imperative while CSS is the opposite. The difference can be jarring for some. It's commonly felt in day-to-day frontend work that switching to CSS (declarative) from almost anything else (imperative) -- JavaScript, PHP, etc. -- requires a significant mental shift, though it does get easier with experience. - Lot of the vocabulary and concepts used in CSS come from outside the computing world, namely design and publishing. It's somehow a rarely shared factoid, but it's a hint at how too far away from Kansas we are to be making fair comparisons. - A pervasive mistake that coders make (and unfortunately a lot of CSS teaching material out there too) is to approach CSS as a set of explicit, atomic instructions -- a fair coder-y assumption, but a bad mental model that leads to frustration. Understand that these instructions can affect one another; some switch entire layout algorithms[0] in a given scope, changing how other instructions behave (predictably). [0] https://www.joshwcomeau.com/css/understanding-layout-algorithms/ https://www.joshwcomeau.com/css/understanding-layout-algorit...
dsmmcken 1y ago
Two of those wishlists css features already exist as specs: > n-th child variable See sibiling-index() and sibling-count() https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-index https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-ind... > Reusable blocks See @function and @mixin draft spec, https://drafts.csswg.org/css-mixins-1/ https://drafts.csswg.org/css-mixins-1/ and https://css-tricks.com/functions-in-css/ https://css-tricks.com/functions-in-css/ Both are available in chrome already.
nsonha 1y ago
Still waiting for "you no longer need CSS". Can we offload it entirely to figma, AI, or the designer? It's such a dumb thing to have to write code for, even lamer than CRUD, at least that does something.
- lionelw 1y ago
  Ask your boss to hire someone better at CSS than you.
  - nsonha 1y ago
    I am pretty comfortable with CSS, enough to find tailwind useless. I've done front-end work exclusively too (not anymore). Just because one has the skill doesn't mean they can't acknowledge the stupidity of it. People bash CRUD code not because they can't write it, it's just boring and sometimes wrong too (crud API, don't get me started on that)
    - lionelw 1y ago
      Alright, if you say so. But what stupidity do you mean? What do you mean offload it to figma etc? Why is it dumb to write code for... the job CSS is built for?
      - nsonha 1y ago
        design should be visual, you should not have to write code for it. Even if you write code for it, you should be able to write code in a way that express your high level thinking, something similar to constrain layout in mobile dev. CSS has 4 levels of overlapping features so far and every new layout model comes out are slightly better but still a little bit off. The newer features like variables have bolted-on syntax that looks like garbage, nobody understand CSS grammar anyway (does it even have one?) Given how convoluted CSS is despite how little it has to do, I consider it a poorly designed programming language, if you can call it that.
        1y ago
apt-apt-apt-apt 1y ago
That is the most beautiful meow button I've ever seen!
edg5000 1y ago
For making UIs, web or not, I always go for HTML+CSS. It can be a bit awkward to interact with native code (e.g. C++), since you'll have to generally do message passing which involves serialisation/deserialisation. Given that HTML+CSS is really damn powerful as this post makes clear, how do other UI toolkits compare? I've always wanted to do more with Qt, but probably it won't come near HTML+CSS in terms of functionality and flexibility?
- 1718627440 1y ago
  Native toolkits now also have CSS (the syntax, not the properties). They also long had an often XML based UI specification language.
b_e_n_t_o_n 1y ago
I really do appreciate the nesting they've added but looking at it as a whole, CSS is a really strange and in my humble opinion, a terrible language. Perhaps I'm just holding it wrong, but it's just so complicated and messy, it sometimes feels like you're just arranging arcane runes in different ways until you make it sort of work for you. It's both a system for styling text based on inheritance, and a layout system for block and inline elements, nested recursively but without inheritance, only containment. I think it was a mistake to combine styling and layout, and I don't feel like adding more and more capabilities to something fundamentally broken can fix it.
- tobr 1y ago
  This is all true. But it is what we have. I’ve found myself wondering if a model with stronger conceptual integrity could be designed and use CSS as a compilation target. For example, with container queries and calcs you could probably implement a more coherent layout system with just math. Unfortunately the preprocessor languages we have just add even more half-baked ideas on top of the half-baked ideas already in CSS, according to the principle that syntax sugar = good.
  - b_e_n_t_o_n 1y ago
    Tailwind is the closest popular thing to that and it's no wonder it's become so liked. Not so much in terms of providing a better layout system, but it just removes so much of what's wrong with CSS, at least for those who don't like it. I haven't seen anything out there that provides an alternative but it does seem like CSS has almost added enough features you could actually build something that works. Alternatively it could be done through higher level abstractions built on something like React: <Flex>, <Grid> etc.
    - floydnoel 1y ago
      that's a great observation. previously to (finally) trying Tailwind for the first time, I would write utility CSS classes to handle those cases like a stack or grid and it worked great building alone. Unfortunately, CSS is really hard to do with others, especially in a big team. Classes always added instead of using the existing one, nothing ever cleaned up. Tailwind is nice in that you get all the power of CSS, just a bit more ergonomic of an API. Plus using it really is just using CSS, just with all the possible utility classes already made for you! that said i do like to still use classes like "btn" to consolidate a bunch of styles. I think it was a mistake for TW devs to discourage that pattern for so long.
Dansvidania 1y ago
is there a book that you'd recommend to a CSS noob so that a hypothetical backend developer could learn modern CSS that allegedly does not suck in a curated and guided, not pick-your-own-adventure via blogpost and tutorials way?
- deleted 1y ago
  [deleted]
- Kerrick 1y ago
  If you’re not turned off by its heft, CSS:The Definitive Guide, 5th Edition by Meyer & Weyl.
leecommamichael 1y ago
Do hardened browsers also disable Wasm? I suppose so since you need a touch of JS to kick it off… darn.
sbinnee 1y ago
I always knew that there should be a way to have a button to change light and dark mode on my website without javascript. But I couldn’t figure it out (pre llm era) and gave up and just used javascript. Now it’s time to make an update on that. This blog motivated me.
- Sateeshm 1y ago
  Isn't it just `prefers-color-scheme`
  - rebane2001 1y ago
    that's the "auto" option, but the comment is taking about adding buttons to switch between the themes too
  - wjrb 1y ago
    That would be the media query; sort of a long-hand way. I learned about the color function for settings the vars from the article, never saw those in use before.
- masklinn 1y ago
  It’s nice but probably not that useful as you still need JS to persist the setting. For testing there are extensions which allow overriding the browser’s scheme (for Firefox anyway).
  - exodust 1y ago
    > JS to persist the setting. Yes, local storage is crucial functionality. I don't get people who disable JS, but I suppose if they have a bunch of sites they whitelist it's less painful... but then they must trust those sites all the time? How do they know if those sites haven't installed new scary scripts? Perhaps one possible solution is for browsers to offer a setting to enable all the "safe" functionality of javascript such as button events for fancy carousels, but block the stuff that causes anxiety. I suppose then we'd all argue about what aspects are safe vs scary.
  - 1y ago
firefoxd 1y ago
The worst thing about CSS is that a lot of people don't bother learning it, then have a strong opinion after they were forced to use it for a day.
- locallost 1y ago
  I learned CSS 20 years ago. My strong opinion is that it should be renamed Crappy Style Sheets, but that would take away from its primary fault, that it's cascading. As we learned in many other things, "inheritance" is not a great idea. Especially for something that gets applied globally, by a team of five people. "I will now adjust this thing over here, which will mess up everything my colleague is doing over there" is not a good feature. Its main feature is to give you complex rules how to overrule a certain rule. As a feature it's a a headache, when that's what you base everything around, it's bad. It gives you complex ways to target things, and over time it became even more complex. If you're a sane person, you've learned to avoid most of these otherwise you'll end up with .foo > .bar:nth-child(2n) ~ .baz . Then you will adjust that and come full circle to my argument, which is that it will break Mark's completely unrelated thing. At the same time doing the simplest imaginable layout was a headache. I've done it, and it was interesting as in, this is a challenge and I am taking it head on, but it never should've been a challenge. Things have improved exponentially here, but it should've been the idea all along. Not how to cascade rules. All other criticism, the syntax etc. is nitpicky and not important. As long as it's allowing you to do something useful without much fuss, I am ok with any syntax. But it didn't and it never did. Making a webpage layout should not be a full time job.
  - archerx 1y ago
    I have also been doing CSS for 20 years but it seems you have some skill issues?
  - tankenmate 1y ago
    I love the fact that CSS is cascading; inheritance is a great idea, "where it fits". The main reason I like the cascading in CSS is because it is inherently a tree, and when it comes to parsing documents (using context free or non context free languages) a tree is very often a good fit. That and humans have long used trees (abstract or otherwise) to organise knowledge. And since documents "fit" trees way more often than not; I'd say CSS is a good fit.
atomicfiredoll 1y ago
Okay, but are those radio tabs accessible? I think that if you want to follow WAI-ARIA practices, the aria-selected, tabindex and aria-controls need to be updated via JS when the active tab changes? I'd love to be wrong about that. Accessibility is often an afterthought. And, sometimes there's an assumption that by working with HTML/CSS directly, accessibility comes built in. Just Something to keep in mind when choosing an approach.
- japanuspus 1y ago
  Did you read the article? The author specifically addresses accessibility in multiple places, including taking extra steps to work around browser bugs [0]. [0]: https://lyra.horse/blog/2025/08/you-dont-need-js/#fn:10 https://lyra.horse/blog/2025/08/you-dont-need-js/#fn:10
- rebane2001 1y ago
  I think so? I am aware that people who read the blog might base parts of their websites on my examples, so I definitely want to make sure they're accessible as to not cause a negative ripple effect on the web. I don't have a background in accessibility, but I try to do the best I can. I try out what I make with various accessibility tools (e.g. keyboard navigation, screenreaders), and also read up on how things should be handled. For the radio tabs specifically - they are keyboard navigable, work with screenreaders, and follow the tabbing to content practice mentioned in the WAI-ARIA example[0]. [0] https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/ https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-...
  - atomicfiredoll 1y ago
    Thanks! Sorry if I came off as brash, time has been tight recently. You've already put a lot of work into a very informative article, and it's appreciated. The outlook is solid. I'd like to find an opportunity to revisit some of my own code with your writing in mind. Part of the reason for mentioning the radio-tabs is because I was working on my own implementation for a personal project a few weeks ago. My goal was specifically using the role="tab"/role="tabpanel" pattern, but my read of the guidance left me feeling like I was trapped with using JS to set those. Since it was timeboxed, I bailed out to augmenting it with JS for and moved on. My hope was maybe somebody on HN with more of a background on accessibility could interject some thoughts here.
righthand 1y ago
I think the hardest part of CSS is the weird specific lingo. I recently had to do some flexbox work, and while it's pretty easy to understand the naming conventions are just screwy. JustifyContent, AlignContent, JustifySelf, AlignSelf, etc. These all have to do with different axis depending on how you set FlexOrientation (column or row). This makes it difficult for Anyone to jump into CSS work. Is this intentional?
futurecat 1y ago
Fantastic post! Learned a ton.
geokon 1y ago
Not a webdev, so I'm curious: Have we reached the point where you can you make credit card payments without JS? (if not, what are the blockers?)
- ludicrousdispla 1y ago
  I believe you can do that without JS by using an HTML form containing the requisite user input fields.
- newscombinatorY 1y ago
  I think for such a trivial task as submitting a form with some data (such as CC info), JS was never required to begin with.
- chrismorgan 1y ago
  Credit card payments on the web are older than JavaScript, and I don’t think that anything even today actually requires JavaScript—all the fancy security things I know of could be done easily enough with additional form submissions and/or meta redirects (alas for multipart/x-mixed-replace, it was never reliable and its removal is almost complete). Unfortunately, PCI DSS makes it expensive now to direct things via your own server, so a typical business will be at the mercy of what their payment gateway provides: and I don’t know if any popular ones will support JavaScript-free operation any more, even though it’s theoretically pretty easy.
  - geokon 1y ago
    "makes it expensive now to direct things via your own server" can you expand on this? why expensive..? i figured Visa and company would mandate some JS monstrosity. However ive had some really ancient weird credit card online forms in Asia that i suspect have no JS
    - chrismorgan 1y ago
      The Payment Card Industry has a set of Data Security Standards: if you want to accept cards, you must comply with their rules, or they may ban you. There are different degrees of compliance requirements. If someone else handles everything (e.g. external link or iframe), you get the easiest time: Self-Assessment Questionnaire A. If the data is actually in your DOM but you’re submitting to someone else (by form post or by JS), your burden is a little more, but still fairly small: SAQ A-EP. But if the card number is ever going to touch your server, you can’t use these things, and must go up to SAQ D which is several hundred questions long, and some of the requirements of which may be bothersome, involving things like quarterly penetration testing from approved vendors; and if you have a larger number of transactions, you end up needing mandatory full on-site audits. (In practice, at the lower levels compliance is not typically validated, and I wouldn’t be surprised if less than 1% of e-commerce merchants were actually fully compliant even at SAQ A.)
amai 1y ago
See also https://justfuckingusereact.com/ https://justfuckingusereact.com/
maelito 1y ago
Thanks a lot for this article. As a 10-year experience Web dev, we need this to shake our beliefs. The title is bad, though. Almost didn't read it. CSS will not render maps ;)
- timeon 1y ago
  > CSS will not render maps ;) It could with CSS+SVG. You still need to control navigation somehow.
mosselman 1y ago
Great to see another CSS > JavaScript enthousiast. To do these things I use Tailwind which makes it easier for me to change and see what is happening. You can do so many things with just CSS. Dropdowns, animated sidebar menus, toggled areas, file-upload areas with resets to previous version or removing an upload, modals with and without backdrops, etc, etc. I hardly use any JavaScript anymore and it is great.
Leftium 1y ago
Amazingly, this interactive effect works without JS: https://veneer.leftium.com/base/s.13E_wsbrKLEsuV-eDaTKl0a967EdpYgcZrXH0Gq_KK3g/list?yay https://veneer.leftium.com/base/s.13E_wsbrKLEsuV-eDaTKl0a967... - Falling confetti animation - Alert with functional close icon - Dismissing alert also dismisses confetti - Tabs also work (but unlike example in TFA, requires page load from server...) - (The page is enhanced with JS; the JS version is smoother and includes fancier confetti)
mediumsmart 1y ago
You never needed JavaScript and this css is arcane and messy Mantra is entertaining. CSS has always been awesome.
- draw_down 1y ago
  [dead]
thedanbob 1y ago
I didn't realize that nesting is official now, last time I checked it was still a proposal. Nice! CSS has a lot of weirdness but I feel like it's been following the trajectory of Javascript toward becoming decent language. Flexbox and the :has selector, and now nesting, cover a lot of the pain points I've had over the years.
tobyhinloopen 1y ago
I love how some of the examples simply don't work or are partially broken.
- rebane2001 1y ago
  Which ones? What browser/version are you running?
  - tobyhinloopen 1y ago
    Safari
    - rebane2001 1y ago
      What version? I tested my blogpost on Safari and added stuff specifically to accommodate it - the only known broken thing is the color picker, and I mention it in the post.
ChrisRR 1y ago
Arguably most sites don't need javascript or CSS trickery anyway just to show text and images
rossant 1y ago
Unpopular opinion, but I find it wild how much people dislike CSS around here. I learned it over 25 years ago and loved it. I still use it regularly and appreciate the constant evolution of the language. Like every language, it has its quirks, but it gets the job done.
- graypegg 1y ago
  Same! I can find the syntax to be a bit too vague sometimes (I'll never memorize the weird order of values for the shortcut animation property) but I could say that about a lot of technology I really enjoy. For me, I feel comfortable enough with working around it's quirks to be effective making web UI. That's good enough for me! Saying that, if it just doesn't grok in someone else's head, I can't fault them for that, but my opinion isn't really going to shift... regardless of the superlative-riddled doom-saying.
z3t4 1y ago
I could do this 15 years ago. we're just adding more syntax and featurea so that we can do stuff in new ways and call it the modern way. Whats ironic is that the more featurea that are added the more frameworks are invented to manage it. There are even transpilers!
wildpeaks 1y ago
Some people don't realize how far we've come in 20 years, CSS is so good now I even got rid of the last bit of preprocessing I was still using (CSS Modules, for generating globally-unique classnames at build time) now that I switched to Web Components for both frontend and backend (thanks to JSDOM) given they use already globally-unique tag names.
vegadw 1y ago
Just want to drop in and say I love this site (With the name of Vega, I might be biased, but still <3 ). The entire site's style is great and this page's content is awesome and I'll definitely be linking it to anyone I know doing web-dev stuff in the future. I also love https://lyra.horse/arrupted/ https://lyra.horse/arrupted/ I've made some pretty cool pieces with it in the past, so it was really cool to see a domain I recognize on the front page today!
1vuio0pswjnm7 1y ago
HN changed title Original title chosen by author: "You no longer need Javascript"
- rebane2001 1y ago
  Original HN title: You no longer need JavaScript: an overview of what makes modern CSS so awesome Changed HN title: Aspects of modern HTML/CSS you may not be familiar with As the author, I don't really have a problem with either title :). Externally, the title is meant to be augmented by the summary (as seen in the original HN title), and I much prefer that over just the title alone by itself. I usually make my titles fun and catchy, and a part of the story I want to tell, while the summary's there to provide a more neutral and accurate overview of the post before people click on it. The post's story doesn't make sense with the changed title, but that's not an issue because if people click on the link they'll see the original title on the website. I don't mind the title of an external link being more descriptive.
nottorp 1y ago
> CSS animations on my 240hz monitor look amazing Please don't waste my battery with animations running at 240 Hz, in CSS or Javascript...
Rapzid 1y ago
Not every site needs JavaScript but many of the ARIA APG patterns absolutely require it to be implemented properly. So yeah you don't need JavaScript in the sense that you never needed it if your site isn't doing things that require it..
- rebane2001 1y ago
  Could you point out ARIA APG patterns the blogpost and its examples are not hitting due to no JS?
  - Rapzid 1y ago
    I'm good. Try Claude research.
    - rebane2001 1y ago
      I do care about accessibility, so seeing comments implying I'm doing something wrong without telling me what's wrong just kind of sucks.
ouraf 1y ago
The second big board with all the radio buttons doesn't work in my phone. I barely started the article and CSS is already causing problems.
- rebane2001 1y ago
  Which part are you referring to? What browser/version are you using?

453 points by todsacerdoti 1y ago

> Yes, the syntax isn’t the prettiest, but is it really that hard? Explain float: clear? Does that have anything to do with display: flow-root? And white-space is not actually whitespace? And when does vertical-align work vs not? --- ^ That is all CSS (and not particularly edgy CSS, except for flow-root). So....yes, CSS is really that hard. Unless you use the subset of CSS that you have decided to learn + use. Not unlike C++.

rebane2001 1y ago
The sentence you quoted refers to the 'centering a div' example, not CSS as a whole.
whytaka 1y ago
I haven't used float in at least half a decade. CSS is easy.
- JohnFen 1y ago
  I suspect, as with programming languages, some people think in a way that makes it easy for them and others think in a way that makes it hard. Personally -- and I'm no web dev, so I probably don't count -- I think CSS is hard (maybe more irritating than hard, but in any case I wouldn't call it easy). In large part because the syntax is ugly, but also because it just doesn't "mesh" with me. If I'm reading it or writing it, I always feel like I'm having to decode it. But I can easily and happily work with some programming languages that most devs would cross the street to avoid. Maybe that's also why some people are attracted to being web devs and others aren't? As a user, nothing would thrill me more than if web pages just stopped using JS, though, so I am very happy that there is a feasible alternative to doing that that web devs could enjoy!
  - extraisland 1y ago
    > I suspect, as with programming languages, some people think in a way that makes it easy for them and others think in a way that makes it hard. No that often isn't the case. What is usually the case is that people don't bother the learning the basics. CSS is very easy. You can literally mess about with it on the fly in the browser and instantly see the result. It is easier now than it has ever been. Since all the browsers for the most part implement the standards properly. Safari is the only standout and all the issues with that are well known. > In large part because the syntax is ugly, but also because it just doesn't "mesh" with me. If I'm reading it or writing it, I always feel like I'm having to decode it. But I can easily and happily work with some programming languages that most devs would cross the street to avoid. It is probably because you haven't learned the basics. Whenever anyone has issues understanding CSS, they haven't bothered learning the basics and think they can flub their way through doing it. I don't understand what is ugly about the syntax. <some element selector> { property_1: <some value> property_2: <some other value> } It is about as straight forward as it could be. The difficulty with CSS is organisation as the web app becomes larger. There are well documented strategies on how to do this. > As a user, nothing would thrill me more than if web pages just stopped using JS, though, so I am very happy that there is a feasible alternative to doing that that web devs could enjoy! Non-trivial functionality requires JS. Basic Websites rarely require JS. So I am not sure what you are trying to say here.
    - typpilol 1y ago
      Agreed. Honestly the best thing I tell people to get some decent css basics is try to build a few stylus themes. You can instantly see the results in devtools. I can't think of any other language that does that besides html, and even then you have to save and refresh. Css is pretty easy to pick up in the chrome devtools at least because it has built in autocomplete. Showing you exactly what you can set the values too etc
    - b_e_n_t_o_n 1y ago
      CSS is easy, but it's not simple - it's enormously complex. Imagine the worst sins you could commit in a Ruby or Python codebase, multiply that by 100x and that's a normal CSS codebase. The syntax has never been the issue imo.
- paulddraper 1y ago
  > Unless you use the subset of CSS that you have decided to learn + use. Not unlike C++.
- Semaphor 1y ago
  I have used it recently, it’s now back to doing what it was supposed to, originally: Float objects into text.
nicoburns 1y ago
IMO it's more like PHP or JavaScript than C++. With C++ there are lots of different dialects in common use and you kinda have to learn them all to be good at C++. Whereas with PHP/JavaScript/CSS there are still ugly corners, but everyone pretty much agrees which the good bits are and which the ugly bits are, and you can mostly just ignore the old legacy bits.
- paulddraper 1y ago
  What part of JavaScript language should you not use? The only one that comes to mind is is `with`, which is officially discouraged in the spec. I suppose the other one is type coercion. (Like [] + [] stuff. That's no end of "ha ha JS weird.")
  - nicoburns 1y ago
    with, == (except certain idiomatic uses), __prototype__, eval, etc.
socalgal2 1y ago
is float:clear still a thing? I remember being a thing 15-20 years ago? I can't remember needing it in the last 10+ white-space seems pretty straight forward: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space https://developer.mozilla.org/en-US/docs/Web/CSS/white-space vertical-align, yea, alignment in general is hard and IMO it's hard because it's a hard topic in general, CSS or native. but yea, it's not "vertical-align"
- paulddraper 1y ago
  > pretty straight forward Anything but. It combines whitespace collapsing and text wrapping in one property and makes a mess of both. See https://drafts.csswg.org/css-text-3/#white-space-property https://drafts.csswg.org/css-text-3/#white-space-property to get an idea of how complicated it is. The MDN article is self-contradictory, e.g. note how the example don't match the "syntax" section. Plus, it has inconsistent quirks with HTML textarea.
SquareWheel 1y ago
Maybe this only proves your point, but there is no float: clear. They're separate properties. float: none; clear: both;
- paulddraper 1y ago
  You're right. And the fact that yours was the only comment to point this out...

user3939382 1y ago

Who would have thought UI layout and rich formatting would be the hard problem that destroyed personal computing.

lemonwaterlime 1y ago

Modern CSS is indeed great. I'm using modern CSS, htmx, and Haskell to develop apps and am loving it.

frizlab 1y ago
Same but with Swift instead of Haskell. I’m an iOS/macOS developer, but I have to do a web app currently, and I was pleasantly surprised by how powerful and relatively easy CSS is.
graypegg 1y ago
I haven't touched Haskell in quite a while! If you ever feel like sharing any info about your experience working with it for web service dev, I'd be really interested to read it!

keeganpoppen 1y ago

i will say that though i am predisposed to appreciate and agree with an article like this, any sort of value proposition around "some users don't want javascript" just doesn't... hit for me. and, mind you: i am a card-carrying arch user and have spent more time messing with browser scripting and web crawling, and am more of a True Believer than most. it's just such a niche user preference that i think it should largely be simply ignored. yes, i would love the world to be better for the "noscript" universe, no, i don't think that any individual "grassroots" effort should stake itself on "no javascript" being any part of its utility. i think there are a million other reasons why CSS should win out that are more compelling than an appeal to what feels, extremely ironically, like a callback to the "but 10% of your users use IE6" days... all in all, yes: this is somewhat of a minor point wrt. to the article (which btw i think is great), but i am just calling the "trend", such as it is / has been, for what (i think) it is.

jauntywundrkind 1y ago
I agree; I don't find the noscript-ians to be useful or worth targeting. At the same time, I want to emphasize more strongly the flip side that I think you don't at but don't go much I to: I do find that writing less code & using the platform is enormously valuable! Doing less & letting the browser do the thing is a very nice win.
- lukan 1y ago
  "Doing less & letting the browser do the thing is a very nice win." If only they would do it nice and consistently, I would agree. Sadly they don't. On one plattform you get sliders in this color who pop in when the mouse moves there, on another you have fixed size sliders of a different color and style. Impossible to make a coherent style like this.
rebane2001 1y ago
fwiw, i've been using the internet with noscript and i find it perfectly usable for any sites that do need js, i simply enable it for them from the extension, so it never gets in the way with sites i use regularly it's pretty nice for performance/battery and security have you ever tried living with noscript for over a week? i feel like your perspective could be a bit mislead, because i felt the exact same way as you before i started using noscript disclaimer: i'm the author of the blogpost

wpollock 1y ago

How can one learn modern CSS and is there an online reference that is up to date?

squeegee_scream 1y ago
MDN is what you're looking for https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics https://developer.mozilla.org/en-US/docs/Learn_web_developme...
ZYbCRq22HbJ2y7 1y ago
There are a number of sites that aggregate some things, here is one https://moderncss.dev/topics/ https://moderncss.dev/topics/ Recent survey of what people use to learn CSS: https://2025.stateofcss.com/en-US/resources/ https://2025.stateofcss.com/en-US/resources/ CSS Tricks article on this: https://css-tricks.com/how-to-keep-up-with-new-css-features/ https://css-tricks.com/how-to-keep-up-with-new-css-features/

awongh 1y ago

TIL about baseline widely available. I do wish we would start to move further towards a sane set of front-end application (logic) technologies (I don't think the current leader, Typescript NextJS is it) But I do appreciate that CSS is starting to feel a lot more sane these days.

Uninen 1y ago
Vite (which is used by a large portion of modern frontend frameworks) by default builds the production bundle for baseline widely available: https://vite.dev/guide/build.html#browser-compatibility https://vite.dev/guide/build.html#browser-compatibility

Quarrelsome 1y ago

omg that's so much prettier than it used to be. What they've done with it is extremely impressive.

Animats 1y ago

This should make WYSISYG HTML/CSS editors possible again. Here's a thought. Build a WYSISYG tool like that. HTML/CSS only. Round trip; that is; it reads its own HTML/CSS and works on that, rather than using some separately stored representation. If you want to use Javascript with this, it has to be inside a manually edited IFRAME or FRAME. If you have Javascript, it's probably for interacting with a server or doing something graphical. Or, more likely, for ads, tracking, and such. Not for layout.

socalgal2 1y ago

This article has lots of nice stuff in it but ... that first example in the tweet at the top, cool-thing { display: flex; &[shadow] { box-shadow: 1px 1px #0007; } @media (width < 480px) { flex-direction: column; } } and html like <cool-thing shadow>wow</cool-thing> I pasted it into a file and it doesn't work. I honestly didn't expect it to work. I thought you needed more to get a cool-thing element but in any case, it's not encouraging to see the first example fail. Am I missing some context? -- update -- my bad - I think it was just subtle and I thought it wasn't doing anything. Thanks for all the replies

rebane2001 1y ago
it should work, did you put the css between <style> tags? also the box-shadow is a box shadow, you might wanna change it to text-shadow if that's what you'd expect from it
- msie 1y ago
  text-shadow works. Was the use of box shadow a mistake?
  - rebane2001 1y ago
    that snippet of code was never meant to be used, it was supposed to be illustrative code that fits in a tweet text-shadow does make more sense if you're actually trying out the code, but the original intention was to demonstrate a more complex element having a shadow modifier
ZYbCRq22HbJ2y7 1y ago
That is just showing nesting with some older features - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting... - https://caniuse.com/css-media-range-syntax https://caniuse.com/css-media-range-syntax - https://caniuse.com/css-nesting https://caniuse.com/css-nesting - https://caniuse.com/flexbox https://caniuse.com/flexbox

throwaway81523 1y ago

The great wheel of karma. All the stuff that made javascript despicable now makes css despicable as well.

ZYbCRq22HbJ2y7 1y ago
Can you elaborate on what all that stuff is?
- SoftTalker 1y ago
  My interpretation is that although making your site a unique snowflake is fun, it's ultimately a burden on the users. GUIs are successful when they follow visual and behaviorial standards. With everything that CSS and JS can do, every website becomes an exercise in discovery just to be able to use it for its intended purpose.
  - ZYbCRq22HbJ2y7 1y ago
    > GUIs are successful when they follow visual and behaviorial standards. Wouldn't that be a design or HCI issue, not something innate to a language? What is a behavioral standard?
    - SoftTalker 1y ago
      Yes technically but the language enables it. A behavioral standard would be that scrolling always works by sliding the scroll bar or using the arrow or page-down keys. Or that the back button takes you to the previous page. Just two examples. Many sites break these and you have to discover what they replaced them with.

dwd 1y ago

I don't agree with his "Do not the vw/vh". I find vw very useful for a scaling pixel-perfect mobile portrait view that looks identical whether your mobile is 320px or 440px viewport width.

rebane2001 1y ago
not my pronoun, and not what the section talks about if you're going to disagree with something, please at least read it first
alt187 1y ago
I agree, vw has been very useful in making sites work the same on mobile and desktop. Even vh, sometimes.
- dwd 1y ago
  Definitely sometimes. I generally avoid vh, and rely more on calc and vw to calculate any height that needs cropping, padding or scaling. For example dynamically equalising the height of boxes with unequal content - used to be something you did need JavaScript for. Another is setting widths, heights and gaps using a css grid to create responsive mosaic image layouts.

interstice 1y ago

> You are allowed to just make up elements as long as their names contain a hyphen RIP any semblance of using meaningful tags for machine readability I guess.

rebane2001 1y ago
it's a lot more readable than a bunch of divs if an element that semantically fits your needs already exists you don't need to make up an element in the first place
- mixmastamyk 1y ago
  Hmmm, I thought you had to register these with JS first, but my browser seems to recognize them.
voat 1y ago
And even if they don't contain a hyphen! You can just <use> <anything> <you> <want>
- masklinn 1y ago
  The soft-requirement for hyphens is a form of namespacing: nothing precludes whatwg from adding <use> or <want> elements to HTML in the future, and that would conflict with and possibly break your page.
  - 1718627440 1y ago
    To prove your point, <use> already exists although in SVG. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/use https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...
nozzlegear 1y ago
What's the use case for machine readability these days?
1y ago

wewewedxfgdf 1y ago

JavaScript is for more than augmenting CSS.

wordofx 1y ago

Unfortunately we are stuck with trash tailwind.

timeon 1y ago
Just another brick in bloated web.

adithyassekhar 1y ago

Colour picker isn't working for me on android Chrome stable 139.0.7258.158.

rebane2001 1y ago
the picker's touch area is really small on mobile, you can use it but you have to be accurate
- adithyassekhar 1y ago
  It worked when I zoomed in, thanks. That's impressive.

mannyv 1y ago

Ugh, the syntax for CSS is just so crappy. I know like 10-15 different languages, and CSS is by far the hardest to read and understand. It's easier to understand x86 assembly than CSS. CSS is basically pre-tokenized input that drives a renderer, but they sort of went halfway and didn't really make it real tokens or really human-writable. I'd say that it should take the place of ASN.1 in the RFCs as an example of "what not to do."

icedchai 1y ago
I feel the same way. I find it the worst part of the HTML / CSS / JS trio.
ZYbCRq22HbJ2y7 1y ago
> I know like 10-15 different languages, and CSS is by far the hardest to read and understand. CSS is hard to know, even if you know 15 languages. I can understand many programming languages and write in a subset of many of their features, but I wouldn't claim to know them. That would require a monumental amount of day to day effort, in my opinion (see https://en.wikipedia.org/wiki/Illusion_of_explanatory_depth https://en.wikipedia.org/wiki/Illusion_of_explanatory_depth). To me, the best way to understand CSS is to evaluate it after rendering, and I have been writing it for decades.
jy14898 1y ago
What do you mean by "CSS is basically pre-tokenized input"? Can you give an example of what you have trouble with?
lionelw 1y ago
How many of those languages are declarative, or domain specific? There's no use comparing CSS and assembly. It betrays a shallow understanding of CSS. Points to ponder: - Assembly is superlatively imperative while CSS is the opposite. The difference can be jarring for some. It's commonly felt in day-to-day frontend work that switching to CSS (declarative) from almost anything else (imperative) -- JavaScript, PHP, etc. -- requires a significant mental shift, though it does get easier with experience. - Lot of the vocabulary and concepts used in CSS come from outside the computing world, namely design and publishing. It's somehow a rarely shared factoid, but it's a hint at how too far away from Kansas we are to be making fair comparisons. - A pervasive mistake that coders make (and unfortunately a lot of CSS teaching material out there too) is to approach CSS as a set of explicit, atomic instructions -- a fair coder-y assumption, but a bad mental model that leads to frustration. Understand that these instructions can affect one another; some switch entire layout algorithms[0] in a given scope, changing how other instructions behave (predictably). [0] https://www.joshwcomeau.com/css/understanding-layout-algorithms/ https://www.joshwcomeau.com/css/understanding-layout-algorit...

dsmmcken 1y ago

Two of those wishlists css features already exist as specs: > n-th child variable See sibiling-index() and sibling-count() https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-index https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-ind... > Reusable blocks See @function and @mixin draft spec, https://drafts.csswg.org/css-mixins-1/ https://drafts.csswg.org/css-mixins-1/ and https://css-tricks.com/functions-in-css/ https://css-tricks.com/functions-in-css/ Both are available in chrome already.

nsonha 1y ago

Still waiting for "you no longer need CSS". Can we offload it entirely to figma, AI, or the designer? It's such a dumb thing to have to write code for, even lamer than CRUD, at least that does something.

lionelw 1y ago
Ask your boss to hire someone better at CSS than you.
- nsonha 1y ago
  I am pretty comfortable with CSS, enough to find tailwind useless. I've done front-end work exclusively too (not anymore). Just because one has the skill doesn't mean they can't acknowledge the stupidity of it. People bash CRUD code not because they can't write it, it's just boring and sometimes wrong too (crud API, don't get me started on that)
  - lionelw 1y ago
    Alright, if you say so. But what stupidity do you mean? What do you mean offload it to figma etc? Why is it dumb to write code for... the job CSS is built for?
    - nsonha 1y ago
      design should be visual, you should not have to write code for it. Even if you write code for it, you should be able to write code in a way that express your high level thinking, something similar to constrain layout in mobile dev. CSS has 4 levels of overlapping features so far and every new layout model comes out are slightly better but still a little bit off. The newer features like variables have bolted-on syntax that looks like garbage, nobody understand CSS grammar anyway (does it even have one?) Given how convoluted CSS is despite how little it has to do, I consider it a poorly designed programming language, if you can call it that.
      - 1y ago

apt-apt-apt-apt 1y ago

That is the most beautiful meow button I've ever seen!

edg5000 1y ago

For making UIs, web or not, I always go for HTML+CSS. It can be a bit awkward to interact with native code (e.g. C++), since you'll have to generally do message passing which involves serialisation/deserialisation. Given that HTML+CSS is really damn powerful as this post makes clear, how do other UI toolkits compare? I've always wanted to do more with Qt, but probably it won't come near HTML+CSS in terms of functionality and flexibility?

1718627440 1y ago
Native toolkits now also have CSS (the syntax, not the properties). They also long had an often XML based UI specification language.

b_e_n_t_o_n 1y ago

I really do appreciate the nesting they've added but looking at it as a whole, CSS is a really strange and in my humble opinion, a terrible language. Perhaps I'm just holding it wrong, but it's just so complicated and messy, it sometimes feels like you're just arranging arcane runes in different ways until you make it sort of work for you. It's both a system for styling text based on inheritance, and a layout system for block and inline elements, nested recursively but without inheritance, only containment. I think it was a mistake to combine styling and layout, and I don't feel like adding more and more capabilities to something fundamentally broken can fix it.

tobr 1y ago
This is all true. But it is what we have. I’ve found myself wondering if a model with stronger conceptual integrity could be designed and use CSS as a compilation target. For example, with container queries and calcs you could probably implement a more coherent layout system with just math. Unfortunately the preprocessor languages we have just add even more half-baked ideas on top of the half-baked ideas already in CSS, according to the principle that syntax sugar = good.
- b_e_n_t_o_n 1y ago
  Tailwind is the closest popular thing to that and it's no wonder it's become so liked. Not so much in terms of providing a better layout system, but it just removes so much of what's wrong with CSS, at least for those who don't like it. I haven't seen anything out there that provides an alternative but it does seem like CSS has almost added enough features you could actually build something that works. Alternatively it could be done through higher level abstractions built on something like React: <Flex>, <Grid> etc.
  - floydnoel 1y ago
    that's a great observation. previously to (finally) trying Tailwind for the first time, I would write utility CSS classes to handle those cases like a stack or grid and it worked great building alone. Unfortunately, CSS is really hard to do with others, especially in a big team. Classes always added instead of using the existing one, nothing ever cleaned up. Tailwind is nice in that you get all the power of CSS, just a bit more ergonomic of an API. Plus using it really is just using CSS, just with all the possible utility classes already made for you! that said i do like to still use classes like "btn" to consolidate a bunch of styles. I think it was a mistake for TW devs to discourage that pattern for so long.

Dansvidania 1y ago

is there a book that you'd recommend to a CSS noob so that a hypothetical backend developer could learn modern CSS that allegedly does not suck in a curated and guided, not pick-your-own-adventure via blogpost and tutorials way?

deleted 1y ago
[deleted]
Kerrick 1y ago
If you’re not turned off by its heft, CSS:The Definitive Guide, 5th Edition by Meyer & Weyl.

leecommamichael 1y ago

Do hardened browsers also disable Wasm? I suppose so since you need a touch of JS to kick it off… darn.

sbinnee 1y ago

I always knew that there should be a way to have a button to change light and dark mode on my website without javascript. But I couldn’t figure it out (pre llm era) and gave up and just used javascript. Now it’s time to make an update on that. This blog motivated me.

Sateeshm 1y ago
Isn't it just `prefers-color-scheme`
- rebane2001 1y ago
  that's the "auto" option, but the comment is taking about adding buttons to switch between the themes too
- wjrb 1y ago
  That would be the media query; sort of a long-hand way. I learned about the color function for settings the vars from the article, never saw those in use before.
masklinn 1y ago
It’s nice but probably not that useful as you still need JS to persist the setting. For testing there are extensions which allow overriding the browser’s scheme (for Firefox anyway).
- exodust 1y ago
  > JS to persist the setting. Yes, local storage is crucial functionality. I don't get people who disable JS, but I suppose if they have a bunch of sites they whitelist it's less painful... but then they must trust those sites all the time? How do they know if those sites haven't installed new scary scripts? Perhaps one possible solution is for browsers to offer a setting to enable all the "safe" functionality of javascript such as button events for fancy carousels, but block the stuff that causes anxiety. I suppose then we'd all argue about what aspects are safe vs scary.
- 1y ago

firefoxd 1y ago

The worst thing about CSS is that a lot of people don't bother learning it, then have a strong opinion after they were forced to use it for a day.

locallost 1y ago
I learned CSS 20 years ago. My strong opinion is that it should be renamed Crappy Style Sheets, but that would take away from its primary fault, that it's cascading. As we learned in many other things, "inheritance" is not a great idea. Especially for something that gets applied globally, by a team of five people. "I will now adjust this thing over here, which will mess up everything my colleague is doing over there" is not a good feature. Its main feature is to give you complex rules how to overrule a certain rule. As a feature it's a a headache, when that's what you base everything around, it's bad. It gives you complex ways to target things, and over time it became even more complex. If you're a sane person, you've learned to avoid most of these otherwise you'll end up with .foo > .bar:nth-child(2n) ~ .baz . Then you will adjust that and come full circle to my argument, which is that it will break Mark's completely unrelated thing. At the same time doing the simplest imaginable layout was a headache. I've done it, and it was interesting as in, this is a challenge and I am taking it head on, but it never should've been a challenge. Things have improved exponentially here, but it should've been the idea all along. Not how to cascade rules. All other criticism, the syntax etc. is nitpicky and not important. As long as it's allowing you to do something useful without much fuss, I am ok with any syntax. But it didn't and it never did. Making a webpage layout should not be a full time job.
- archerx 1y ago
  I have also been doing CSS for 20 years but it seems you have some skill issues?
- tankenmate 1y ago
  I love the fact that CSS is cascading; inheritance is a great idea, "where it fits". The main reason I like the cascading in CSS is because it is inherently a tree, and when it comes to parsing documents (using context free or non context free languages) a tree is very often a good fit. That and humans have long used trees (abstract or otherwise) to organise knowledge. And since documents "fit" trees way more often than not; I'd say CSS is a good fit.

atomicfiredoll 1y ago

Okay, but are those radio tabs accessible? I think that if you want to follow WAI-ARIA practices, the aria-selected, tabindex and aria-controls need to be updated via JS when the active tab changes? I'd love to be wrong about that. Accessibility is often an afterthought. And, sometimes there's an assumption that by working with HTML/CSS directly, accessibility comes built in. Just Something to keep in mind when choosing an approach.

japanuspus 1y ago
Did you read the article? The author specifically addresses accessibility in multiple places, including taking extra steps to work around browser bugs [0]. [0]: https://lyra.horse/blog/2025/08/you-dont-need-js/#fn:10 https://lyra.horse/blog/2025/08/you-dont-need-js/#fn:10
rebane2001 1y ago
I think so? I am aware that people who read the blog might base parts of their websites on my examples, so I definitely want to make sure they're accessible as to not cause a negative ripple effect on the web. I don't have a background in accessibility, but I try to do the best I can. I try out what I make with various accessibility tools (e.g. keyboard navigation, screenreaders), and also read up on how things should be handled. For the radio tabs specifically - they are keyboard navigable, work with screenreaders, and follow the tabbing to content practice mentioned in the WAI-ARIA example[0]. [0] https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/ https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-...
- atomicfiredoll 1y ago
  Thanks! Sorry if I came off as brash, time has been tight recently. You've already put a lot of work into a very informative article, and it's appreciated. The outlook is solid. I'd like to find an opportunity to revisit some of my own code with your writing in mind. Part of the reason for mentioning the radio-tabs is because I was working on my own implementation for a personal project a few weeks ago. My goal was specifically using the role="tab"/role="tabpanel" pattern, but my read of the guidance left me feeling like I was trapped with using JS to set those. Since it was timeboxed, I bailed out to augmenting it with JS for and moved on. My hope was maybe somebody on HN with more of a background on accessibility could interject some thoughts here.

righthand 1y ago

I think the hardest part of CSS is the weird specific lingo. I recently had to do some flexbox work, and while it's pretty easy to understand the naming conventions are just screwy. JustifyContent, AlignContent, JustifySelf, AlignSelf, etc. These all have to do with different axis depending on how you set FlexOrientation (column or row). This makes it difficult for Anyone to jump into CSS work. Is this intentional?

futurecat 1y ago

Fantastic post! Learned a ton.

geokon 1y ago

Not a webdev, so I'm curious: Have we reached the point where you can you make credit card payments without JS? (if not, what are the blockers?)

ludicrousdispla 1y ago
I believe you can do that without JS by using an HTML form containing the requisite user input fields.
newscombinatorY 1y ago
I think for such a trivial task as submitting a form with some data (such as CC info), JS was never required to begin with.
chrismorgan 1y ago
Credit card payments on the web are older than JavaScript, and I don’t think that anything even today actually requires JavaScript—all the fancy security things I know of could be done easily enough with additional form submissions and/or meta redirects (alas for multipart/x-mixed-replace, it was never reliable and its removal is almost complete). Unfortunately, PCI DSS makes it expensive now to direct things via your own server, so a typical business will be at the mercy of what their payment gateway provides: and I don’t know if any popular ones will support JavaScript-free operation any more, even though it’s theoretically pretty easy.
- geokon 1y ago
  "makes it expensive now to direct things via your own server" can you expand on this? why expensive..? i figured Visa and company would mandate some JS monstrosity. However ive had some really ancient weird credit card online forms in Asia that i suspect have no JS
  - chrismorgan 1y ago
    The Payment Card Industry has a set of Data Security Standards: if you want to accept cards, you must comply with their rules, or they may ban you. There are different degrees of compliance requirements. If someone else handles everything (e.g. external link or iframe), you get the easiest time: Self-Assessment Questionnaire A. If the data is actually in your DOM but you’re submitting to someone else (by form post or by JS), your burden is a little more, but still fairly small: SAQ A-EP. But if the card number is ever going to touch your server, you can’t use these things, and must go up to SAQ D which is several hundred questions long, and some of the requirements of which may be bothersome, involving things like quarterly penetration testing from approved vendors; and if you have a larger number of transactions, you end up needing mandatory full on-site audits. (In practice, at the lower levels compliance is not typically validated, and I wouldn’t be surprised if less than 1% of e-commerce merchants were actually fully compliant even at SAQ A.)

amai 1y ago

See also https://justfuckingusereact.com/ https://justfuckingusereact.com/

maelito 1y ago

Thanks a lot for this article. As a 10-year experience Web dev, we need this to shake our beliefs. The title is bad, though. Almost didn't read it. CSS will not render maps ;)

timeon 1y ago
> CSS will not render maps ;) It could with CSS+SVG. You still need to control navigation somehow.

mosselman 1y ago

Great to see another CSS > JavaScript enthousiast. To do these things I use Tailwind which makes it easier for me to change and see what is happening. You can do so many things with just CSS. Dropdowns, animated sidebar menus, toggled areas, file-upload areas with resets to previous version or removing an upload, modals with and without backdrops, etc, etc. I hardly use any JavaScript anymore and it is great.

Leftium 1y ago

Amazingly, this interactive effect works without JS: https://veneer.leftium.com/base/s.13E_wsbrKLEsuV-eDaTKl0a967EdpYgcZrXH0Gq_KK3g/list?yay https://veneer.leftium.com/base/s.13E_wsbrKLEsuV-eDaTKl0a967... - Falling confetti animation - Alert with functional close icon - Dismissing alert also dismisses confetti - Tabs also work (but unlike example in TFA, requires page load from server...) - (The page is enhanced with JS; the JS version is smoother and includes fancier confetti)

mediumsmart 1y ago

You never needed JavaScript and this css is arcane and messy Mantra is entertaining. CSS has always been awesome.

draw_down 1y ago
[dead]

thedanbob 1y ago

I didn't realize that nesting is official now, last time I checked it was still a proposal. Nice! CSS has a lot of weirdness but I feel like it's been following the trajectory of Javascript toward becoming decent language. Flexbox and the :has selector, and now nesting, cover a lot of the pain points I've had over the years.

tobyhinloopen 1y ago

I love how some of the examples simply don't work or are partially broken.

rebane2001 1y ago
Which ones? What browser/version are you running?
- tobyhinloopen 1y ago
  Safari
  - rebane2001 1y ago
    What version? I tested my blogpost on Safari and added stuff specifically to accommodate it - the only known broken thing is the color picker, and I mention it in the post.

ChrisRR 1y ago

Arguably most sites don't need javascript or CSS trickery anyway just to show text and images

rossant 1y ago

Unpopular opinion, but I find it wild how much people dislike CSS around here. I learned it over 25 years ago and loved it. I still use it regularly and appreciate the constant evolution of the language. Like every language, it has its quirks, but it gets the job done.

graypegg 1y ago
Same! I can find the syntax to be a bit too vague sometimes (I'll never memorize the weird order of values for the shortcut animation property) but I could say that about a lot of technology I really enjoy. For me, I feel comfortable enough with working around it's quirks to be effective making web UI. That's good enough for me! Saying that, if it just doesn't grok in someone else's head, I can't fault them for that, but my opinion isn't really going to shift... regardless of the superlative-riddled doom-saying.

z3t4 1y ago

I could do this 15 years ago. we're just adding more syntax and featurea so that we can do stuff in new ways and call it the modern way. Whats ironic is that the more featurea that are added the more frameworks are invented to manage it. There are even transpilers!

wildpeaks 1y ago

Some people don't realize how far we've come in 20 years, CSS is so good now I even got rid of the last bit of preprocessing I was still using (CSS Modules, for generating globally-unique classnames at build time) now that I switched to Web Components for both frontend and backend (thanks to JSDOM) given they use already globally-unique tag names.

vegadw 1y ago

Just want to drop in and say I love this site (With the name of Vega, I might be biased, but still <3 ). The entire site's style is great and this page's content is awesome and I'll definitely be linking it to anyone I know doing web-dev stuff in the future. I also love https://lyra.horse/arrupted/ https://lyra.horse/arrupted/ I've made some pretty cool pieces with it in the past, so it was really cool to see a domain I recognize on the front page today!

1vuio0pswjnm7 1y ago

HN changed title Original title chosen by author: "You no longer need Javascript"

rebane2001 1y ago
Original HN title: You no longer need JavaScript: an overview of what makes modern CSS so awesome Changed HN title: Aspects of modern HTML/CSS you may not be familiar with As the author, I don't really have a problem with either title :). Externally, the title is meant to be augmented by the summary (as seen in the original HN title), and I much prefer that over just the title alone by itself. I usually make my titles fun and catchy, and a part of the story I want to tell, while the summary's there to provide a more neutral and accurate overview of the post before people click on it. The post's story doesn't make sense with the changed title, but that's not an issue because if people click on the link they'll see the original title on the website. I don't mind the title of an external link being more descriptive.

nottorp 1y ago

> CSS animations on my 240hz monitor look amazing Please don't waste my battery with animations running at 240 Hz, in CSS or Javascript...

Rapzid 1y ago

Not every site needs JavaScript but many of the ARIA APG patterns absolutely require it to be implemented properly. So yeah you don't need JavaScript in the sense that you never needed it if your site isn't doing things that require it..

rebane2001 1y ago
Could you point out ARIA APG patterns the blogpost and its examples are not hitting due to no JS?
- Rapzid 1y ago
  I'm good. Try Claude research.
  - rebane2001 1y ago
    I do care about accessibility, so seeing comments implying I'm doing something wrong without telling me what's wrong just kind of sucks.

ouraf 1y ago

The second big board with all the radio buttons doesn't work in my phone. I barely started the article and CSS is already causing problems.

rebane2001 1y ago
Which part are you referring to? What browser/version are you using?