State of CSS • Hacker News Board

Re: State of CSS

#91

Post by nwienert » Fri, Oct 21, 2022, 5:48 PM UTC

arrow7000 wrote: post #74

reaperducer wrote: post #49

Earlier quoted context omitted.

I'm always excited by newer features to CSS that make older JS-only methods obsolete. I wonder if it's just about how some people's brains are wired. I grok CSS. I won't claim to know everything about it, but I'd say I'm 90% proficient and prefer it to JavaScript. But I think this is because JavaScript somehow never fully made sense to me. I can read it and figure out what it's doing, but it was never intuitive to me…

No. If you have to write styling in JS I can guarantee that it will be far more brittle, less performant, and way more susceptible to FOUCs, reflows, jank, and potentially deadlocks of conflicting resizing elements than the equivalent in CSS.

Or you can author styles in JS and have them compiled to CSS. Then it's actually less brittle (fully typed), no fuoc, jank or deadlocks.

https://vanilla-extract.style

https://tamagui.dev

Re: State of CSS

#92

Post by swyx » Fri, Oct 21, 2022, 5:52 PM UTC

ChrisArchitect wrote: post #34

Just fyi: This is from May (and was posted a number of times then) What might be more interesting if it's your area is the currently running State of CSS Survey https://stateofcss.com

yea this is by far the more time sensitive thing and should be upvoted for visibility

Re: State of CSS

#93

Post by aeharding » Fri, Oct 21, 2022, 5:52 PM UTC

So excited for colors outside of sRGB! I make good use of display-p3, currently only supported in Safari, on https://ppg.report.

Re: State of CSS

#94

Post by DrewADesign » Fri, Oct 21, 2022, 5:57 PM UTC

waboremo wrote: post #8

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…

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

I mean, I get what you're saying, but for a company with critical branding needs, they will absolutely be concerned by this. In many instances they might even notice themselves. Sure, your average software company CEO won't care, but if you're in the food and bev business, or a design firm, or a game developer, the execs are keenly aware that micromanaging their public image is essential. That's why they spend millions of dollars for logo redesigns, or in a more extreme case, spend a huge chunk of change to make their own sliiiightly different version of Helvetica like Target did.

Re: State of CSS

#95

Post by soulofmischief » Fri, Oct 21, 2022, 5:58 PM UTC

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 write complex web apps and hit the limits of CSS every day. My apps are written in a way that allows easy changing of themes and `accent-color` particularly can greatly simplify my theme management system.

I'm super excited for some of these additions. Perhaps they are meant for designer-developers such as myself and not for the casual CSS developer who doesn't already reach for existing advanced features.

Re: State of CSS

#96

Post by wwweston » Fri, Oct 21, 2022, 6:00 PM UTC

jjcm wrote: post #78

Interesting to see a lot of negative responses here. I'm quite excited for a large amount of these items. @container queries are going to help a ton in making components more reusable - components that react to their own size rather than the browser size have been needed for a long time, and currently the only way to really do it is with the javascript observer api, which comes with huge performance tradeoffs. Color-…

AFAICT a lot of the negativity comes from developers who want to work at a component UI Kit level you can find in native dev but don't find libs/kits that accommodate this well.

I don't think this is a failure of CSS -- I think CSS has turned out to be brilliant with some blind spots and part of the most spectacularly flexible UI layer that's ever been created. But it works at a lower level and leaks easily and that plus some cultural factors has generally pulled people towards a below-component development focus lots of devs would rather have abstracted away.

Container queries are one of several things that can move the dev culture more towards component level.

Re: State of CSS

#97

Post by LukeLambert » Fri, Oct 21, 2022, 6:08 PM UTC

dheera wrote: post #76

Yet 15 years later, I still can't specify a width and aspect ratio for an div without some unintuitive nested div hell.

  div {
    width: 640px;
    aspect-ratio: 16 / 9;
  }

Re: State of CSS

#98

Post by rglover » Fri, Oct 21, 2022, 6:14 PM UTC

Some nice surprises in here (love the idea of @scope and @nest). It's a total mind blow how far along CSS has come from the stone age IE6 days.

Re: State of CSS

#99

Post by Frotag » Fri, Oct 21, 2022, 6:16 PM UTC

nicoburns wrote: post #30

Timja wrote: post #17

Earlier quoted context omitted.

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 wh…

> One of the nice things about grid is that you can size the tracks on the parent element

Yep, it's nice to have an alternative to flex (where children determine their own size with flex-grow / flex-shrink / flex-basis).

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

This is an issue I've run into a lot. Well the opposite, when I want overflowing grid cells to gain a scroll bar instead of expanding the parent. Turns out this is only doable if the grid element has an explicitly defined height, which means hard-coding a height like `height: 50vh` or ensuring every ancestor of the grid has `height: 100%` defined, which is pretty gross.

https://jsfiddle.net/36k1079x/

Re: State of CSS

#100

Post by jandrese » Fri, Oct 21, 2022, 6:22 PM UTC

jjcm wrote: post #78

Interesting to see a lot of negative responses here. I'm quite excited for a large amount of these items. @container queries are going to help a ton in making components more reusable - components that react to their own size rather than the browser size have been needed for a long time, and currently the only way to really do it is with the javascript observer api, which comes with huge performance tradeoffs. Color-…

I'm only negative that some of these, especially flexbox/grid, weren't in the standard from the start. Especially after the committee crapped on HTML tables so hard. Viewport units are another part of the standard that's about 24 years overdue at this point.