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

11–20 of 234 posts

Re: State of CSS

#11

Post by robin_reala »

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…

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/

Re: State of CSS

#12

Post by [deleted] »

lbotos wrote: post #3

Does anyone else feel like CSS has jumped the shark a bit? https://web.dev/state-of-css-2022/#accent-color Sure it's a "nice to have" but it bloats the spec? Look at the current actual implementation: https://web.dev/accent-color/#guaranteeing-contrast chrome and firefox already tint differently... How is this better than a good ol CSS variable and leaving it up to the designer to manage? Sure http://dowebsitesneedto…

[deleted]

Re: State of CSS

#14

Post by Timja »

cjblomqvist wrote: post #9
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…

Eg grid + vh unit. Look them up and you should find plenty content!

When I try that, the rows do not expand if the content is larger than 33% of the screen height:

https://jsfiddle.net/3hfosn5k/

Scroll down and you will see that the blue color of the bottom row ends and the text overflows it.

But I want what table cells do: Expand if their content is too large to fi.

Re: State of CSS

#15

Post by andrewmcwatters »

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 for some of the most fundamental parts of it.

It would be nice if the spec matured for implementors, too.

Like, could we please get a formal definition of the CSS processing model? The lack of one means that particular events MAY OR MAY NOT exist in user agents.

Those events may exist in large implementations--and when a CSS standard eventually pops up to utilize those vendor specific events, some implementations may not even have them, because they process CSS in an entirely different way!

Re: State of CSS

#16

Post by yakubin »

From recent(-ish) additions, the vh unit and flexbox were enormous help to me when I was designing a photography section for my personal website. From something older, which nonetheless helped and was new to me, were "display: inline-block" and "display: inline-block" (the concept of separated inside and outside display styles in general). Also "box-sizing: border-box", but at this point probably everybody uses it.

Re: State of CSS

#17

Post by Timja »

robin_reala wrote: post #11
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…

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.

Re: State of CSS

#18

Post by Timja »

Semaphor wrote: post #10
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…

CSS Grid.

Easier said than done. See my other replies in this thread.

Re: State of CSS

#19

Post by speakeasyalexa »

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.

Hi friend, if you change the `height` values to `min-height` in that fiddle, I think you get the behavior you're looking for.

Re: State of CSS

#20

Post by martin_a »

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 enough, but I could work very well with media queries so far.

Also this blurs the lines between markup and styling furthermore. Now you are defining IDs/classes in CSS which will make the code harder to debug.

> accent-color

Yeah, this is kind of nice. On the other hand we should not forget where the "this always gets styled by the system" comes from: Accessibility. With accent-color I can now totally easy screw up various kinds of inputs in the name of corporate design.

> Color level 4 and 5 & hwb()

Oh come on, this must be a joke. Color management is VERY hard to do, now we put more of that into CSS. But yes, advertisements can then be delivered with a wide gamut colorspace for more impact. Great.

> inert

What? This is just as bad as highjacking the scrollbar behaviour. Now you can make your website behave modal although there's no modal. Feels like another "right clicks are forbidden"-level when your paragraphs are set to inert and you can't interact with those anymore.

> Viewport units

More units of measurement is totally what CSS was missing. /s

> :has()

The parent selector looks like the only useful thing to me from that list. It will (theoretically) help clearing up the markup mess because you need less containers etc. if you want to style surrounding elements differently depending on their child content.

Post reply on HN