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

51–60 of 234 posts

Re: State of CSS

#51

Post by [deleted] »

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.

[deleted]

Re: State of CSS

#52

Post by jahewson »

Timja wrote: post #14
cjblomqvist wrote: post #9

Earlier quoted context omitted.

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.

Don't put the grid on the body:

https://jsfiddle.net/y15qszjp/

Re: State of CSS

#53

Post by jahewson »

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…

Flexbox can do it https://jsfiddle.net/fenys70z/

Re: State of CSS

#54

Post by yakshaving_jgt »

As CSS gets bigger and more needlessly complex, I wonder if people start writing compile-to-CSS languages that aren't just supersets of the status quo.

I could imagine (and I think I am possibly observing) CSS going a similar direction to JavaScript; we might soon see the CoffeeScript of CSS, and then eventually something more sophisticated and well-designed like the Elm of CSS.

CSS — like JavaScript — might become the styling bytecode of the web.

Re: State of CSS

#55

Post by aplummer »

macNchz wrote: post #31
waboremo wrote: post #8

Earlier quoted context omitted.

Good joke, an exec testing in different browsers to ensure the color tint is the right color.

I feel like the more typical reality is an exec looking at the site on some random browser or device, that then has to be in the support matrix, e.g. an enterprise business web app that supports the most recent 2 versions of modern desktop browsers...and the Silk browser for Kindle Fire because that's what's on the CEO's coffee table.

their 6 year old Lenovo with ie10

Re: State of CSS

#56

Post by shadowfoxx »

Timja wrote: post #14
cjblomqvist wrote: post #9

Earlier quoted context omitted.

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.

Hey there, I thought about this for a little bit because I find table layouts more pain than they are worth and the secret sauce that's missing from the examples above is nesting!

Just like Tables have and then - your div's need a similar parent-child relationship to work.

Here's a working fiddle: https://jsfiddle.net/0389jsca/

Re: State of CSS

#58

Post by gherkinnn »

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…

But now I'm on a wide screen and want the lower two containers side-by-side with the top element spanning across the top. You can't do that with tables.

And that request will come.

Re: State of CSS

#59

Post by johnfn »

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…

I don't know if a single addition is enough reason to claim that the entire language has jumped the shark - but I was also wondering how this is different than a variable.

Re: State of CSS

#60

Post by aimor »

The fragment identifier links in the table of contents need to have parenthesis () removed because right now they're not matching the ids in the section headings.
Post reply on HN