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

41–50 of 108 posts

Re: Old dogs, new CSS tricks

#41

Post by swagasaurus-rex »

michaelnny wrote: post #40
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.

For specific components, I use explicit CSS, but for layout I use the tailwind shorthand (flex, flex-row, mb-7) and just add those to my CSS as I go so I don't need tailwind as a dependency. It's the best of both worlds.

Re: Old dogs, new CSS tricks

#42

Post by yurishimo »

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…

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.

I suspect that many people who use old Safari versions are either used to sites being broken, or they use Chrome and don't care. I wish we had more data to verify those assumptions.

Re: Old dogs, new CSS tricks

#43

Post by yurishimo »

noduerme wrote: post #15
bobthepanda wrote: post #10

Earlier quoted context omitted.

i actually came up with a thing where subgrid would be useful, since subgrid lets you denote that a child wants to use the same grid as the parent. if you wanted to use grid template areas, and you had something that looked like Title There isn't a great way to make the adhere to the grid template areas, because without subgrids only direct children (the ul) have coordinate attributes.

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.

Re: Old dogs, new CSS tricks

#44

Post by yurishimo »

eviks wrote: post #33
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.

why wouldn't this work? > You’d need a separate stylesheet to support everyone.

In theory it can, but when you work with 20 other devs all working on the same codebase, tracking those changes can become burdensome.

Are we going to add an entirely new testing suite and workflow tools to save 5 lines of legacy CSS in favor of the new version? Probably not in a lot of teams.

You also need to write and maintain code to conditionally load that fallback stylesheet and hope your users aren't using some weird user agent hacks (looking at you instagram in-app browser).

All of these problems can be solved, but obviously nobody wants to because the juice is not worth the squeeze. This is not our first rodeo. I'm gonna wait another 18-24 months and then start using most of the features released this year. It's fine.

Re: Old dogs, new CSS tricks

#45

Post by sir_pepe »

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 to fix their CSS because nobody can imagine the concept of "well written CSS". It's like JavaScript in the early 2000s, where the language has (in the minds of developers) to be worked around with stuff like tailwind.

Re: Old dogs, new CSS tricks

#46

Post by g15jv2dp »

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…

[dead]

Re: Old dogs, new CSS tricks

#47

Post by graftak »

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 scoping has been fixed for ages already by css modules, styled components, or/and (native) support for nested css declarations. If those all fail there’s namespace conventions like BEM.

If your css is a mess in 2024 (2016 really) it is all on the developer and not the language.

Re: Old dogs, new CSS tricks

#49

Post by gonzo41 »

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…

You are not wrong. But my god, the tech debt in any slightly older web app's CSS is bonkers. Even with really well thought out templates you still end up with ~5000 line css files that have all sorts of state and magic in them. And like all tech debt, it's a triage.

What I'd really like is more intellisense for css so I could take a css file and get sensible code complete and class suggestions for elements.

Re: Old dogs, new CSS tricks

#50

Post by holoduke »

If one wants to replicate exact similar behavior in a webapp conpared to a native app we need the scroll/view animation to be available in all browsers. Right now animation is only possible with js and results in jittery animations.
Post reply on HN