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

31–40 of 108 posts

Re: Old dogs, new CSS tricks

#31

Post by eviks »

parhamn wrote: post #18
rafark wrote: post #13

> I can’t use [feature X], I need to support [old browser]. And that’s not necessarily a bad thing. As I commented a few days ago, nowadays devs don’t seem to care too much about backwards compatibility. I like to hold onto my devices longer than most people and it’s a bit frustrating to see that most sites nowadays expect you to be in the latest and greatest. It didn’t use to be like this.

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…

> Software decays much quicker than hardware in a real way, especially with the never ending list of security vulnerabilities found every year.

What's the connection to security vulns? How does that impact devs not using "a separate stylesheet to support everyone." or ignoring "progressive enhancement"?

Or what's the vulnerability explanation of hasOwn?

It seems it mostly decays quicker on some webby platforms that culturally don't care much about backwards compatibility

Re: Old dogs, new CSS tricks

#32

Post by panzerboiler »

chrismorgan wrote: post #28
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…

Just a remark on that specific case: Object.hasOwn landed in Chrome 93 in August 2021, and came last to Safari 15.4 in March 2022. My general advice is: never depend¹ on features less than two years old, avoid depending on features less than three years old, and treat two-and-a-half-year-old Safari as a bigger deal than one-and-a-half-year-old any other browser, because of how Safari major versions are tied to major…

On my 2012 macbookpro I am forced to use chrome or orion since safari is stuck on 15.X. On my 2015 iMac I can still use the current version of safari, but probably not safari 18 when it will come out. So, for now, the cut-off is 10 years. Pretty good I would say.

Re: Old dogs, new CSS tricks

#34

Post by cthor »

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…

Just because you don't understand it yet doesn't mean it isn't useful.

An ideal version of CSS would remove the need for SASS, BEM, and any non-thematic framework. That we have to use those right now is a problem to be fixed.

Re: Old dogs, new CSS tricks

#35

Post by atoav »

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 still remember a site where I really would have needed the :has selector, but I have written a workaround in JS and now I would rather so the whole thing new than fix that tiny aspect.

I will however definitely rely on the has: selector next time I encounter that situation (it had to do with markdown output putting img tags inside paragraphs, so I needed css that treats a paragraph that has a img inside differently than other paragraphs).

Re: Old dogs, new CSS tricks

#36

Post by noduerme »

bobthepanda wrote: post #25
noduerme wrote: post #15

Earlier quoted context omitted.

I haven't needed to do CSS grids for awhile, but couldn't this have already been done with `display:contents` ?

TIL about display:contents. I’ll have to check it out but it sounds like it does: https://bengammon.co.uk/css-grid-and-display-contents/ Subgrid lets you do it for anything more involved or deeper though.

I think subgrid might give you a freer hand. Because if I remember correctly, the trouble with display:contents is that no other styles you put on that element will affect elements within it. This means shifting all styles down a node, which can be a real pain and have knock-on effects.

Re: Old dogs, new CSS tricks

#37

Post by skolind »

Great article! CSS doesn’t get enough attention - not outside of Tailwind, which I don’t think is the way to go, but that’s another story.

:has() and :is() are awesome.

One issue I’ve had with any of the newer CSS features is that, most of the people I work with don’t know what they do, because nobody use them. So, I have to explain myself in each pull request - but I guess that’s ok, because then people learn.

Re: Old dogs, new CSS tricks

#38

Post by bryanrasmussen »

culi wrote: post #14
willio58 wrote: post #5

Earlier quoted context omitted.

I’m unsure if you have specific feedback or just a general misunderstanding of the point of additions like layer to the spec. At the end of the day these are all more tools in our toolbelt. If you want you can keep writing CSS the same way you always have.

> At the end of the day these are all more tools in our toolbelt. If you want you can keep writing CSS the same way you always have. I don't really stand by GP's comment but I also don't think their concern can be dismissed this easily. We generally write CSS as teams. You'll have to read as much CSS as you'll have to write. Ideally you actually read more than you write so you can reuse existing rules and follow esta…

it's sort of weird, there have been multiple comments where people have responded as if they write CSS all by themselves and there are no colleagues to worry about, and that they also think this is an industry-wide standard!

on edit: just to note I'm generally the old guy who is pushing for people to use 'new' stuff like clamp, min, and max functions and lab color profiles, to no effect.

Re: Old dogs, new CSS tricks

#39

Post by nine_k »

eviks wrote: post #31
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…

> Software decays much quicker than hardware in a real way, especially with the never ending list of security vulnerabilities found every year. What's the connection to security vulns? How does that impact devs not using "a separate stylesheet to support everyone." or ignoring "progressive enhancement"? Or what's the vulnerability explanation of hasOwn? It seems it mostly decays quicker on some webby platforms that c…

Is there a Chrome LTS channel?

Firefox has an LTS version which can be a baseline for features, but which receives security updates at the very least.

I don't know about, say, Chrome 80 line that would receive security fixes but not new features. I also think that would be against Google's interests to have such an LTS line, it would decrease the moat between it an other browsers.

Re: Old dogs, new CSS tricks

#40

Post by michaelnny »

skolind wrote: post #37

Great article! CSS doesn’t get enough attention - not outside of Tailwind, which I don’t think is the way to go, but that’s another story. :has() and :is() are awesome. One issue I’ve had with any of the newer CSS features is that, most of the people I work with don’t know what they do, because nobody use them. So, I have to explain myself in each pull request - but I guess that’s ok, because then people learn.

Agreed, I still prefer to write my own CSS than using tools like Tailwind.
Post reply on HN