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

51–60 of 108 posts

Re: Old dogs, new CSS tricks

#51

Post by paavohtl »

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 "baseline" supported, the reality is that a small but still meaningful share of our users are using old iOS devices – especially iPads – and they can't or won't update their operating system to update Safari. Our oldest supported browser is Safari 14 because of Flexbox gap support.

None of the other platforms are a problem, as basically everyone else is using an automatically updating evergreen browser.

Re: Old dogs, new CSS tricks

#52

Post by noduerme »

atoav wrote: post #35
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 diffe…

Does :has function as a parent selector? That's probably the only thing I ever really wanted from CSS and I assumed it would never happen because of the (back propagating) implications for the order the DOM is rendered in.

Re: Old dogs, new CSS tricks

#53

Post by Flimm »

For me personally, it's because I've been burned too many times by blog posts announcing that "feature X is here!", when in reality, it's only here in Chrome or behind a feature flag, or the exciting parts haven't been implemented yet. Even this blog post falls into the same trap. There isn't good cross-browser support for view transitions or anchor positioning, and yet they're listed as here now.

Re: Old dogs, new CSS tricks

#54

Post by 6510 »

yurishimo wrote: post #42
chrismorgan wrote: post #28

Earlier quoted context omitted.

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…

Yes, macOS makes it possible to install newer Safari versions on older versions of the OS. However, if you are the type that doesn't update your major OS version regularly, you probably don't check for random software updates anyway, because Apple still shows the Safari updates in the same place as general OS updates. From the settings app, it's the same little red update dot regardless of what the update actually is…

One cant update an iphone if there is insufficient free storage, they may have very limited storage and there is no good way to manually move photos and videos to windows over usb or from icloud. People then end up deleting media one by one by hand while taking new pictures and making new videos. It can take a very long time. Most pictures are/feel more valuable than the update.

Re: Old dogs, new CSS tricks

#55

Post by richrichardsson »

yurishimo wrote: post #43
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` ?

`display: contents` has a11y concerns in a lot of scenarios. The `ul` will be hidden from a screenreader and it will be read as `h1, li, li, li...` etc. It's a neat hack, but it's still a hack.

After having seen a11y written about 100x times in Svelte warnings, it's finally dawned on me that it means accessibility, which is somewhat ironic that I had no idea what it meant all those times before.

Re: Old dogs, new CSS tricks

#56

Post by 6510 »

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…

Often I only use CSS if I have no choice. I really do try to fix it but I still cant imagine "well written CSS". I look at the 2000 lines of necessities and know some of it isn't even used and other things could be simpler. The process consumes lots of time without much to show for it or worse.

Re: Old dogs, new CSS tricks

#57

Post by yurishimo »

richrichardsson wrote: post #55
yurishimo wrote: post #43

Earlier quoted context omitted.

`display: contents` has a11y concerns in a lot of scenarios. The `ul` will be hidden from a screenreader and it will be read as `h1, li, li, li...` etc. It's a neat hack, but it's still a hack.

After having seen a11y written about 100x times in Svelte warnings, it's finally dawned on me that it means accessibility, which is somewhat ironic that I had no idea what it meant all those times before.

Please don't take this the wrong way, but can I ask how you personally find answers to similar solutions when they come up in your work/personal life?

The first thing I do when I see an acronym or word I don't understand is go to Google and type `what is a11y webdev` or whatever. I think you get the idea.

This has been a part of my life for almost 2 decades now so I'm curious how others handle the situation! What made you wait so long to find the answer? Did you eventually search for it, or did you finally read some document that spelled it out explicitly?

Again, genuinely curious! I assume many people operate like I do and there is a line between explaining too little and too much. Understanding how others approach these problems hopefully will help me improve my own communication in the long run.

Re: Old dogs, new CSS tricks

#58

Post by yurishimo »

6510 wrote: post #54
yurishimo wrote: post #42

Earlier quoted context omitted.

Yes, macOS makes it possible to install newer Safari versions on older versions of the OS. However, if you are the type that doesn't update your major OS version regularly, you probably don't check for random software updates anyway, because Apple still shows the Safari updates in the same place as general OS updates. From the settings app, it's the same little red update dot regardless of what the update actually is…

One cant update an iphone if there is insufficient free storage, they may have very limited storage and there is no good way to manually move photos and videos to windows over usb or from icloud. People then end up deleting media one by one by hand while taking new pictures and making new videos. It can take a very long time. Most pictures are/feel more valuable than the update.

Totally. The phone problem I think is unavoidable for a large enough organization. At a certain size of company, with enough users, you just have to accept that your tech stack will lag behind for a few years, OR, you're going to spend an extraordinary amount of dev time building backwards compatibility for less capable devices.

I find it silly how some people tack on "just ship a fallback stylesheet" as a legitimate answer (not accusing you) because we all know that it's never that simple.

Re: Old dogs, new CSS tricks

#59

Post by atoav »

noduerme wrote: post #52
atoav wrote: post #35

Earlier quoted context omitted.

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

Does :has function as a parent selector? That's probably the only thing I ever really wanted from CSS and I assumed it would never happen because of the (back propagating) implications for the order the DOM is rendered in.

Yes, because that was truly a gap in waht could be selected.

Here is a blog post outlining what can be done using :has https://webkit.org/blog/13096/css-has-pseudo-class/

Re: Old dogs, new CSS tricks

#60

Post by 6510 »

I dunno sir, do you just assume everyone knows what these list items are? I would link them to their appropriate mdn article. I think non of the readers know everything about all of the items.

This should be one of those articles one can click around in for considerable time.

Having to select and search made me wonder at what point in time we lost the ability to click on the bullet to select the list item text? Does anyone remember that feature?

Post reply on HN