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

Old dogs, new CSS tricks

mxb.dev

Post reply on HN
Print view View original

71–80 of 108 posts

Re: Old dogs, new CSS tricks

#71

Post by JimDabell »

baggy_trough wrote: post #19

If you want to use nesting, for example, you will have to give up Windows < 10 and iOS < 17.2. It's a big ask for some sites.

You don’t.

Safari has supported CSS nesting since v16.5. The specification was updated to remove the earlier requirement to use & though, and support for that was introduced in v17.2. As long as you include the &, you can support everything back to v16.5.

Not sure what you are referring to regarding Windows If you do need to support browsers that don’t understand CSS nesting, use PostCSS or Lightning CSS. They will transcode your nested CSS to older syntax browsers support. Then, when you drop support and remove those browsers from your browserslist, they will stop transcoding it and the CSS you deploy will get smaller. But you’ll have been writing standard nested CSS all along.

Re: Old dogs, new CSS tricks

#72

Post by JimDabell »

AltruisticGapHN wrote: post #3

CSS is becoming too complex. The syntax looks like it wants to be output by some compiler instead of being crafted by hand. Personally I also don't have any pleasure anymore writing CSS these days. Sass and BEM methodology works fantastically well. Naming things isn't that hard, but Tailwind/utility approach is also extremely useful. Those new features, besides container queries is just gibberish. Layer? WTF? The cas…

I’ve got the exact opposite reaction to you: the improvements to CSS are making the CSS I write simpler.

Re: Old dogs, new CSS tricks

#73

Post by JimDabell »

eviks wrote: post #70
JimDabell wrote: post #69

Earlier quoted context omitted.

Security vulnerabilities are found in browsers. Browsers are updated to fix the security vulnerabilities. People upgrade to the latest version to get the security fixes. If a person is using a browser that is years out of date, they are subject to a lot of security vulnerabilities in a piece of software that is constantly exposed to untrusted code. Using an old browser is unsafe. If you encounter people using old bro…

Yours is s PSA for updating browsers, but this doesn't explain breaking backwards compatibility since newer browsers with security updates don't break older CSS features.

> Nevertheless, I left a bit concerned that they hadn't updated their Chrome in 3 years. Software decays much quicker than hardware in a real way, especially with the never ending list of security vulnerabilities found every year. Theres definitely a case to be made that forcing software upgrades is good for the end user too.

It seems very easy to understand the logic here. What part don’t you grasp? Don’t support older versions => this pressures them to upgrade => upgrading is good for their security.

Re: Old dogs, new CSS tricks

#74

Post by CM30 »

bruce511 wrote: post #29

>> But take container queries, for example. They were the number one feature requested by front-end devs for a looong time. So why don’t we use them more, now that they’re finally here? A number of things are in play here. 1) when people ask for something it's because they need it now . The client wants it to look like x. Providing it a year later doesn't mean I'll retro-fit it, I'm working for another client now. 2)…

Yeah, I think the first factor is probably the biggest one here. Devs tend not to rebuild existing sites on a whim, especially not to integrate new technology for the hell of it.

We'll almost certainly see more container queries used on new website/app development projects going forward, but any that started prior to their integration into most browsers are likely going to remain using the old design philosophy with media queries instead.

Re: Old dogs, new CSS tricks

#75

Post by patates »

Cyberdog wrote: post #65
bruce511 wrote: post #29

>> But take container queries, for example. They were the number one feature requested by front-end devs for a looong time. So why don’t we use them more, now that they’re finally here? A number of things are in play here. 1) when people ask for something it's because they need it now . The client wants it to look like x. Providing it a year later doesn't mean I'll retro-fit it, I'm working for another client now. 2)…

Very good take. CSS is at a point of complexity now where you can't really blame anyone for not knowing everything you can do with it or every new feature that's been adopted in the last couple years, especially for full-stackers like me. I know a lot, including more than enough to get my job done, and though I will still learn new things now and then (I didn't know container queries existed before this article and n…

> I just instinctually don't even bother with new (as in 3-4 years old) CSS or JS features most of the time. It's pretty deeply ingrained in me and I suspect many other devs who were around in that time.

I'm also a web dev with nearly 20 years and do exactly this as well. Old versions (or any version of) IE crushed our dreams too many times to feel comfortable delivering anything modern, let alone cutting edge.

Re: Old dogs, new CSS tricks

#76

Post by lenkite »

sir_pepe wrote: post #45

The real problem in my experience is that people who consider themselves to be "real" developers don't care about CSS. I do a ton of code reviews and consulting for companies of all sizes and their JavaScript and TypeScript is almost always at least in a borderline defensible state? But CSS is always one giant file that has been growing since 2002 and is treated as an append-only log of !important. Nobody even tries…

CSS needs a compiler with warnings, dead-code removal, type safety, modularization, standard structuring and "design patterns" - then software engineers will take it seriously.

Re: Old dogs, new CSS tricks

#77

Post by lobsterthief »

patates wrote: post #75
Cyberdog wrote: post #65

Earlier quoted context omitted.

Very good take. CSS is at a point of complexity now where you can't really blame anyone for not knowing everything you can do with it or every new feature that's been adopted in the last couple years, especially for full-stackers like me. I know a lot, including more than enough to get my job done, and though I will still learn new things now and then (I didn't know container queries existed before this article and n…

> I just instinctually don't even bother with new (as in 3-4 years old) CSS or JS features most of the time. It's pretty deeply ingrained in me and I suspect many other devs who were around in that time. I'm also a web dev with nearly 20 years and do exactly this as well. Old versions (or any version of) IE crushed our dreams too many times to feel comfortable delivering anything modern, let alone cutting edge.

Same here (>20 years at this point)—I just know how to do nearly everything with existing CSS features, or else I’m already using a framework like MUI that eliminates a lot of the issues the new CSS features aim to solve. For example, the unique class names and low specificity offered by MUI negates the need for the new container functionality.

I’ve definitely used :has() though to replace the need for certain CSS combinators—for example, being able to style a label that wraps a checkbox based on the checkbox being checked, rather than relying on the next-sibling combinator while placing the label after the checkbox input. That’s pretty cool and solves some limitations that existed previously.

Re: Old dogs, new CSS tricks

#78

Post by Unai »

paavohtl wrote: post #51

The answer in my team's case is browser support and especially Safari on iOS. Our UI is quite complex and demanding regarding functionality, visual presentation and accessibility and would benefit greatly from most of these features, especially subgrid and container queries (and anchor positioning, but that feature doesn't exist outside of the latest version of Chrome). Even though MDN lists most of these features as…

I've read a few articles like this in the last few days and I don't understand why everyone is ignoring the elephant in the room. It's 2024 and Safari is still not evergreen.

When people say Safari is the new Internet Explorer, replies always mention how Safari just adopted such and such bleeding edge CSS feature (while ignoring much older features, though), but the truth is many Apple users won't see those features for years, until their devices break.

Apple is stopping both users and developers from enjoying these very same new features they so happily announce. The web is stuck in time, waiting for enough people to update their devices. Just like in the age of Internet Explorer. At least back then people had the option of installing a different browser. So maybe Safari and the apple ecosystem is actually worse than IE and Windows used to be.

Re: Old dogs, new CSS tricks

#79

Post by Guidii »

nemomarx wrote: post #20
parhamn wrote: post #18

Earlier quoted context omitted.

I'm a bit torn on this when it comes to browsers. We recently had a user email us that our app stopped working for them. After we dug into it it was because their Chromebook was last updated in 2021 and didn't have Object.hasOwn (which a third-party library uses) and it's not even included in most common polyfills either. We fixed it, because I hate these sorts of compatibility issues. Nevertheless, I left a bit conc…

I think you can expect that for a Chromebook, but a different type of laptop might not support modern Chrome? I remember that Steam uses enough chromium nowadays that they had to drop support for Windows 7 early. Chrome doesn't have quite as long a support window for older OSes as the OSes do for security updates.

Is that true? Windows 7 OS updates ended in 2020, while Chrome continued to update until M109 in 2023[1].

[1] https://support.google.com/chrome/thread/185534985/sunsettin....

Re: Old dogs, new CSS tricks

#80

Post by Chris_Newton »

patates wrote: post #75
Cyberdog wrote: post #65

Earlier quoted context omitted.

Very good take. CSS is at a point of complexity now where you can't really blame anyone for not knowing everything you can do with it or every new feature that's been adopted in the last couple years, especially for full-stackers like me. I know a lot, including more than enough to get my job done, and though I will still learn new things now and then (I didn't know container queries existed before this article and n…

> I just instinctually don't even bother with new (as in 3-4 years old) CSS or JS features most of the time. It's pretty deeply ingrained in me and I suspect many other devs who were around in that time. I'm also a web dev with nearly 20 years and do exactly this as well. Old versions (or any version of) IE crushed our dreams too many times to feel comfortable delivering anything modern, let alone cutting edge.

As a developer of a similar vintage, I can relate to this mindset, but I think we should be careful about it. We learned in an era when differences in browser behaviour were a big deal and new versions of browsers sometimes came along years apart. But those days are long gone — even Safari now gets several updates each year — and we should let the habits they created go with them.

Should we be cautious about relying on non-standard features or trusting the perma-beta culture that Google never seems to have grown out of? Of course. But there have been many recent developments that are useful and already widely supported, and not using those when they provide a good solution to an immediate problem seems counterproductive.

Post reply on HN