Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

State of CSS

web.dev

Post reply on HN
Print view View original

21–30 of 234 posts

Re: State of CSS

#21

Post by krono »

The majority of items mentioned in the article are still in the earliest stages of the standardisation process and haven't even had their specifications finalised yet (see overview at https://www.w3.org/Style/CSS/current-work).

Having access to these cool new features so early on is nice, of course, but be ready and willing to deal with possible breaking changes or even future removal.

Here's a recent example of once such breaking API change in the `:has()` selector spec being discussed on the Firefox tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=418039#c44. It will be interesting to see how the other browsers that have already released the outdated implementation to production deal with this.

Re: State of CSS

#22

Post by perardi »

I personally cannot wait for container queries to be fully supported. And I’m pleasantly surprised it’s landed in the new version of Safari.

If only for some presentational aspect of an internal design system I’m building, it’s a dream come true.

Re: State of CSS

#23

Post by flupe »

Timja wrote: post #6

I think I don't need the 2022 version, but the 2021 version. Or even the 2012 version, lol! I still prefer to use tables to layout my websites. Question: Say I want a layout that has a top row, a middle row and a bottom row. Each row gets 33% of the screen space. Unless the content does not fit. Then the row should expand to the content. Here is the table version: https://jsfiddle.net/vg2ey8r9/ How do you do that wit…

Absolutely perplexed by the other answers that think CSS grid is a hammer for every nail. In your example without a table, you can just drop `display grid` and set `div {min-height: 33vh}`.

Re: State of CSS

#24

Post by nicoburns »

andrewmcwatters wrote: post #15

CSS keeps getting larger and larger which I think on its face is actually fine, since all of the standards are extended modules. So if you think about it that way, as an implementor you can choose which standards you want to incorporate and have total coverage for particular parts of the spec. But the state of CSS for implementors is still abysmal, in my opinion, and I'd like to see more of the spec formally defined…

As someone who's recently been working on an implementation of CSS Grid, and reading through a lot of CSS specs, I completely agree. There's a lot that isn't in the specs. The CSS Grid one isn't even that bad, but the spec for "flow layout" (block and inline) looks like a complete mess.

An HTML5 moment for CSS would be very welcome.

Re: State of CSS

#25

Post by jacobsimon »

martin_a wrote: post #20

I find most of this useless/overcomplicated. > Cascade layers Feels like we only need this because cascading works less and less well once you start to include multiple frameworks or pieces thereof. At some point people find themselves in a jungle of !important. If you keep the cascade small and clean, you'll most likely not need that. > Container queries Probably the designs I have to implement are not complicated e…

Container queries is a big deal in my opinion! This has always been an obstacle for designing responsive components - they only respond to the size of the screen so designing them for use in different places in your app is difficult.

But the implementation they’ve chosen with named containers is not my favorite. I’d prefer one that is simply based on the parent component or the closest component with a container attribute set; this would work better alongside tools like Tailwind and CSS-in-JS.

Edit: Nvm after reading more, it looks like the container name is optional and the default behavior is what I described - excellent!

Re: State of CSS

#26

Post by sroussey »

perardi wrote: post #22

I personally cannot wait for container queries to be fully supported. And I’m pleasantly surprised it’s landed in the new version of Safari. If only for some presentational aspect of an internal design system I’m building, it’s a dream come true.

It’s not just in Safari, but also Chrome. So an up to date mobile OS will have it.

I think only Firefox is without.

Re: State of CSS

#27

Post by butz »

Sure, as standalone new CSS features look very useful, but when you start combining everything into one stylesheet it might quickly become hardly readable spaghetti code.

Re: State of CSS

#29

Post by Octoth0rpe »

martin_a wrote: post #20

I find most of this useless/overcomplicated. > Cascade layers Feels like we only need this because cascading works less and less well once you start to include multiple frameworks or pieces thereof. At some point people find themselves in a jungle of !important. If you keep the cascade small and clean, you'll most likely not need that. > Container queries Probably the designs I have to implement are not complicated e…

> [re: layers] If you keep the cascade small and clean, you'll most likely not need that.

Many of us are not in that state due to piles of tech debt. One of my work projects is modernizing a 20ish year old, 300 page php app, and the css tech debt is awful. We're all looking forward to layers for some sanity.

(strong agree on your other points)

Re: State of CSS

#30

Post by nicoburns »

Timja wrote: post #17
robin_reala wrote: post #11

Earlier quoted context omitted.

CSS Grid. It’s a mostly simple spec that allows for what you’re asking for and a whole bunch more (including different grids for different screen sizes, which tables definitely don’t do). Probably start with https://css-tricks.com/snippets/css/complete-guide-grid/

Are you sure? Have you tried? When I try, I don't get the nice behavior of tables, but a stiff layout that does not adapt to its content. Instead the content overflows the rows: https://jsfiddle.net/3hfosn5k/ The nice thing about tables is that I know the table cells will always surround their content. Nothing will flow out of the cells.

Grid tracks (rows and columns) can be content sized. You just have to set the dimensions to something other than a concrete size (you have used `33vh` here). See the auto, min-content, max-content and fit-content values for height/width (https://developer.mozilla.org/en-US/docs/Web/CSS/height). You can get close to table-like behaviour by setting the height to `fit-content(33vh)`. There is also a minmax function which allows you to set minimums and maximums and have it content size between that.

One of the nice things about grid is that you can size the tracks on the parent element, and all you have to do on the children is specify which rows/columns they span. It works much better when you want to do the sort of things you use rowspan and colspan for with tables.

EDIT: Setting height: 100% was also preventing the grid from expanding. Try this JSFiddle https://jsfiddle.net/c3m2194b/

Post reply on HN