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

11–20 of 108 posts

Re: Old dogs, new CSS tricks

#11

Post by ervine »

nolongerthere wrote: post #2

This article is interesting but when we’re talking about design elements I think it’s always a good idea to include some actual demos or examples showing the final result and not just the “code”. I might also not be the target audience but I still don’t understand what container queries are or what old paradigm they’re replacing. The author does a good job explaining the difference between border-radius and the old w…

Old paradigm (media queries): You make layout changes based on the width / height of the viewport (browser).

New paradigm (container queries): You make layout changes based on the width / height of the containing element.

This lets you layout a component so that it looks good in any sized container. Picture a component that might be in the main section or in the sidebar - you can now just style directly based on width of the container instead of having to know the total width of sidebar + main section and do the calculation using viewport width.

Re: Old dogs, new CSS tricks

#12

Post by kevindamm »

ervine wrote: post #11
nolongerthere wrote: post #2

This article is interesting but when we’re talking about design elements I think it’s always a good idea to include some actual demos or examples showing the final result and not just the “code”. I might also not be the target audience but I still don’t understand what container queries are or what old paradigm they’re replacing. The author does a good job explaining the difference between border-radius and the old w…

Old paradigm (media queries): You make layout changes based on the width / height of the viewport (browser). New paradigm (container queries): You make layout changes based on the width / height of the containing element. This lets you layout a component so that it looks good in any sized container. Picture a component that might be in the main section or in the sidebar - you can now just style directly based on widt…

Agreed, but to add to this:

media queries are still useful, and since a media query may hide/remove entire containers in the view then the remaining containers may have widths that are no longer a simple proportion of the viewport width (or other property being selected for).

So container queries can also enhance styles with media queries, not just replace them.

Re: Old dogs, new CSS tricks

#13

Post by rafark »

> 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.

Re: Old dogs, new CSS tricks

#14

Post by culi »

willio58 wrote: post #5
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’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 established patterns

Anyone writing CSS for a day-job, an OS project, or even just following a tutorial will have to at least familiarize themselves with these concepts

Re: Old dogs, new CSS tricks

#15

Post by noduerme »

bobthepanda wrote: post #10
kerkeslager wrote: post #7

> Quick question: how many of these have you actively used in production? > Container Queries I haven't used this, but it looks super useful. > Style Queries Eh, I'm sure this is useful for situations that don't come up very often. > CSS Layers Ugh, I'm not going to use this overly-complex silliness, and I'm not looking forward to debugging this when other people use this. > Subgrid Again, overly complex. Grid could…

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` ?

Re: Old dogs, new CSS tricks

#16

Post by spartanatreyu »

> Quick question: how many of these have you actively used in production?

> Container Queries

They aren't useful yet because:

1. Using them requires a wrapper element which can dirty up the HTML

2. While we were waiting for container queries to arrive, we also got new rules that made fluid layouts easier to implement which handle a chunk of container queries use cases.

Container queries will become more useful when elements can query their own size, rather than their size inside a designated parent.

> Style Queries

A solution in search of a problem. Current selectors are acceptable for most current use cases. May be useful for customizable widget/dashboard style layouts.

> CSS Layers

Nice, but they currently place too many demands on the developer to understand what layers currently exist. These will become more useful as browser dev tools make debugging them easier to reduce the burden on the developer to keep the layers in their mind while coding/debugging.

> Subgrid

Very useful when you need things aligned, especially in things like card layouts. The only thing holding this back is developers who are too reliant on 3rd party framework/libraries, e.g. bootstrap developers relying on grid column classes and tailwind developers building things with margin/padding everywhere. This will take time for developers to shift to, but those developer who limit themselves inside their own framework/library bubbles may never use them.

> Native Selector Nesting

Very nice quality-of-life improvement.

> Anchor Positioning

Only supported by one browser. I have no idea why this was even in the article to begin with. But it will completely remove the need for some JS placement/layout logic that keeps getting reimplemented all the time with pop-ups (pave the desire paths and all that). It also has the potential to make margin notes easier.

> :has, :is, :where

:has is super powerful as a parent selector

:where is great for simplifying repetitive css

> Logical Properties

If you maintain the discipline required to use these aliases over {top/left/down/right}, or if you have a linter to remind you, all of a sudden you're now able to support RTL languages without needing to spend time and money to make a different site for them.

> Scroll-Linked Animations > View Transitions

Both will be abused by marketers and "designers" who don't understand accessibility, but both will also greatly simplify micro-interactions on proper websites that aren't trying to be a "marketing experience".

Re: Old dogs, new CSS tricks

#17

Post by npn »

This is a bad article.

> And while support for Container Queries is green in all modern browsers, people still seem reluctant to go all-in, fearing they could break something as fundamental as site layout in older browsers.

Don't you know there are still a fuck ton of people that are still using the old iOS versions with their old phones? I have plenty of them, and they are long term supporters that I just can't shut them off.

There are new css features that are almost harmless and do not affect the usability, some css features on the other hand...

Re: Old dogs, new CSS tricks

#18

Post by parhamn »

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 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.

Re: Old dogs, new CSS tricks

#20

Post by nemomarx »

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…

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.
Post reply on HN