Hacker News Reader

Comment by dmix | Hacker News Reader

TIL about CSS Container Queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Contain...

That technique of using a style tag to set a CSS var (--horizontal) then using @container tags to shift the UI is really cool.

    <div class="c-newspaper__item" style="--horizontal: true;">
        <article class="c-card"></article>
    </div>

    .c-newspaper__item {
        container-type: inline-size;
        container-name: card;
    }

    @container card (min-width: 300px) and style(--horizontal: true) {
        .c-card {
            display: flex;
            gap: 1rem;
        }
    }

Also, as someone who learned CSS in the early 2000s, seeing grid layouts with `grid-template-columns:` etc make life so much easier. Web devs have it easier these days.

View on HN

Note that while container queries are available in modern browsers' most recent versions, it is still very fresh, with broad support landing in September, and Firefox support just last month: https://caniuse.com/css-container-queries

If you use them, you'll need to show outdated browser warnings for basically all browsers older than September 2022. Your site will be horrifically broken without container query support.

I'm investigating if we want to even do that at my job. That's a pretty steep cost.

You should consider using a polyfill

Polyfills can be quite expensive on a client device depending on their complexity, so they’re not some kind of free lunch.

Expensive in a few ways. Deferring styles to execution time means users on slow networks or devices will have an absolutely brutal load experience.

This might all be an acceptable trade off depending on one's user base, of course!

I don’t think there is a generally accepted implemented one.

They’d also be pretty expensive on the client

I especially liked the fact that you can use the size of the container element to calculate the size of the children. This is super useful when you want to make sure your text takes the full width of the container regardless of the screen. No need for breakpoints!

    <head>
    ...
      <style>
        .example {
          container-type: inline-size;
        }
    
        @container (min-width: 200px) {
          h1 {
            font-size: 15cqw;
            font-family: monospace;
          }
        }
      </style>
    </head>

    <body>
      <div class="example">
        <h1>hello world</h1>
      </div>
    </body>

the last line makes me laugh.. while it's true grid layouts make things so much easier then back in the 2000s, web dev today is still just as hard, but for different reasons.

I'll take anything over the days of float: left;

float: left is still useful, of course, just for what it was intended rather than what it was abused for.

float: left taught me to never skimp on understanding the things you're using to try do the things your doing!

> web dev today is still just as hard, but for different reasons

As someone who did webdev back in the 2000s and still does it now, I do not agree with this at all. Webdev is easy now. Especially with the development of simpler build systems (esbuild, vite, etc) in the couple of years.

Or maybe you have just gotten better after doing it for 20+ years? I can't imagine anything being easier than plain HTML and CSS

> I can't imagine anything being easier than plain HTML and CSS

Well you can still make websites with plain HTML and CSS today, and the layout modes (and other niceties like border-radius) that are available today so are much nicer than the ones that were available 20 years AND they work the same in every browser!

20 years ago you were cobbling together layout with tables and floats (you didn't even have `display: inline-block`). And people still wanted vaguely responsive layouts even though there weren't any media queries yet. Plus there were 3-4 major browser engines that you needed to test with, and there were often major differences in both feature support, bugs and layout between them. For example you had to deal with the fact that IE used what is now known as `box-sizing: border-box` while other browsers used `box-sizing: content-box`, and the fact that browsers didn't even parse HTML consistently you could easily end up with different node tree in different browsers.

>they work the same in every browser!

That's because there's only one (alright, two) browsers.

There are 3. Safari is distinct from Chrome these days (even though they are derived from a common base). The fact that you consider them the same is evidence of what I'm saying: that differences in rendering between browsers tend to be minimal these days :)

Plain HTML and CSS are tedious.

Combine that with the fact that loops and objects don’t have fantastic support, if any, and it’s no wonder everyone and their mother has tried their hand at a templating framework. (WebComponents exist, but fall into a lot of the same traps; I didn’t like what I saw in the MDN tutorial.)

If you're using a JS build system then your webdev sucks already

Web dev has gotten more complex with more complex requirements, but not linearly - its easier to build more complicated products on the web, and as this article shows the primitives we have are much more powerful.

If you want to build something you build back in the 2000s, its so much easier than it was back then.

That reminds me one of the rules of cycling: "it never gets easier, you just go faster"

Web dev is way easier now, if all you're trying to do is the same stuff we tried to do in the early 2000s. All the stuff that makes it harder is because we can do some much more now.

Not having to use ridiculous hacks and workarounds to make website look pixel perfect on Internet Explorer 6 or 10 browsers makes web development easier. RIP IE, we'll hardly miss you.

Why do this instead of

    <div class="c-newspaper__item display-flex gap-1rem">
        <article class="c-card"></article>
    </div>

    .display-flex {
      display: flex;
    }
    
    .gap-1rem {
      gap: 1rem;
    }

You can use CSS classes like booleans but sometimes its nice to have actual boolean variables, used on the actual HTML element in your component, when designing the logic of your application. Even if it's more verbose.

> That technique of using a style tag to set a CSS var (--horizontal) then using @container tags to shift the UI is really cool

That sounds like using a feature for the sake of using a feature. Couldn't the same be done with a class on the container?

Reply on news.ycombinator.com