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

121–130 of 234 posts

Re: State of CSS

#121

Post by asiachick »

naillo wrote: post #89
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 guess all these additions are incentivized by google etc loving the fact that it makes the moat to make competing browsers wider and wider. Imagine trying to make a new browser from scratch in 2022 and supporting the 20+ years of bloat like this (not to mention future plans).

Did you even bother to look which browser implemented the features first? Will you update your priors based on what you find?

Re: State of CSS

#122

Post by runarberg »

laundermaf wrote: post #103
Semaphor wrote: post #7

Earlier quoted context omitted.

Actual nesting is on the way [0], but for now you can already use :is() [1] in many cases. [0]: https://blog.openreplay.com/modern-css-selectors/ [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/:is

:is() exclusively reduces nesting if your nest produces a single rule, which is the least common situation and is generally dealt with by just duplicating the selector rather than nesting.

:is also has tighter specificity then a nested selector. which is a footgun for sure. However you can use :where instead, which is basically just :is without this footgun.

Re: State of CSS

#124

Post by naillo »

asiachick wrote: post #121
naillo wrote: post #89

Earlier quoted context omitted.

I guess all these additions are incentivized by google etc loving the fact that it makes the moat to make competing browsers wider and wider. Imagine trying to make a new browser from scratch in 2022 and supporting the 20+ years of bloat like this (not to mention future plans).

Did you even bother to look which browser implemented the features first? Will you update your priors based on what you find?

I'm talking about the growth of features in general. Calm down no need to be so aggressive.

Re: State of CSS

#125

Post by duxup »

seydor wrote: post #113
duxup wrote: post #108

Earlier quoted context omitted.

Tables were terrible. But there is the middle ground of flexbox... honestly flexbox seems to work in nearly everything I use.

flex is ok, and actually fills a need, but can it be used to make e.g. a chat layout? i don't agree btw. grid is voodoo declarations that is worse than tables. pretty much need to stackoverflow to do anything

>but can it be used to make e.g. a chat layout?

I don't see why not.

Re: State of CSS

#126

Post by runarberg »

Vinnl wrote: post #47
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 was not possible to use a CSS variable to change the highlight colour of a checkbox, as far as I'm aware. You can use a CSS variable to set the accent-color, though. (The workaround was creating a fake element that looked like a checkbox that overlapped the actual checkbox.)

> The workaround was creating a fake element that looked like a checkbox that overlapped the actual checkbox

There is also a newer workaround by styling the input element it self by using appearance: none. You can do some clever stuff with the :checked selector, multiple backgrounds, clip-paths, masks, etc.

Re: State of CSS

#127

Post by squeaky-clean »

jahewson wrote: post #53
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/

Add

  display: flex;
  align-items: center;
  margin: 1px;
To `.container div` to get the vertical centering in the OP comment and the slight border. https://jsfiddle.net/g4qv2dr6/1/

The border still kind of looks better on the table one, it's like the flexbox border is not the same size vertically and horizontally.

Once you add enough text that they need to re-shape, they both behave differently. I kind of like the look of the flexbox one better though.

Table https://jsfiddle.net/gs73eyd5/1/

Flexbox https://jsfiddle.net/g4qv2dr6/2/

Also they both break pretty badly if you put some content so long that would require an automatic line-break (make sure you scroll to the right to see) With flexbox the content overflows outside of the container, but it preserves the sizing of the other elements. Table expands the whole container but in doing so ruins the other two rows.

https://jsfiddle.net/ysu7fgk1/ vs https://jsfiddle.net/q6dcph0x/

Re: State of CSS

#128

Post by activitypea »

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.

All of which is preferable to an ever-growing spec whose pace makes it impossible for a newcomer to enter the browser space.

Re: State of CSS

#129

Post by nicoburns »

Frotag wrote: post #99
nicoburns wrote: post #30

Earlier quoted context omitted.

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

Having `height: 100%` (or `flex: 1` or grid equivalent) on every ancestor is just what you have to do for CSS (it applies to all layout modes, not just grid). My way to make this less painful is generally to remove any extraneous divs and try to keep the trees as shallow as possible.

Re: State of CSS

#130

Post by purplerabbit »

toastercat wrote: post #2

Great overview. I'm always excited by newer features to CSS that make older JS-only methods obsolete. I've also grown CSS-tooling fatigued after using SASS and PostCSS plugins for years. I've recently gone back to only using vanilla CSS on personal projects and while there are niceties I do miss (nesting) it's refreshing not having to deal with config files or waiting for stuff to compile.

Serious question: how do you refactor code when using nesting? In my experience it makes styles impossible to audit.
Post reply on HN