4 ms·

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

by dmix 4y ago

TIL about CSS Container Queries https://developer.mozilla.org/en-US/docs/Web/CSS/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.

winkywooster 4y ago
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.
- motoxpro 4y ago
  I'll take anything over the days of float: left;
  - oneeyedpigeon 4y ago
    float: left is still useful, of course, just for what it was intended rather than what it was abused for.
    - johndunne 4y ago
      float: left taught me to never skimp on understanding the things you're using to try do the things your doing!
- nicoburns 4y ago
  > 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.
  - bigfoot675 4y ago
    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
    - nicoburns 4y ago
      > 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.
      - Dalewyn 4y ago
        >they work the same in every browser! That's because there's only one (alright, two) browsers.
        nicoburns 4y ago
        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 :)
- madeofpalk 4y ago
  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.
- notatoad 4y ago
  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.
lelandfe 4y ago
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 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.
- ecuaflo 4y ago
  You should consider using a polyfill
  - bobthepanda 4y ago
    Polyfills can be quite expensive on a client device depending on their complexity, so they’re not some kind of free lunch.
    - lelandfe 4y ago
      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!
  - no_wizard 4y ago
    I don’t think there is a generally accepted implemented one. They’d also be pretty expensive on the client
butz 4y ago
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.
yoavm 4y ago
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>
MuffinFlavored 4y ago
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; }
- dmix 4y ago
  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.
698969 4y ago
> 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?

by dmix 4y ago

winkywooster 4y ago

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.

motoxpro 4y ago
I'll take anything over the days of float: left;
- oneeyedpigeon 4y ago
  float: left is still useful, of course, just for what it was intended rather than what it was abused for.
  - johndunne 4y ago
    float: left taught me to never skimp on understanding the things you're using to try do the things your doing!
nicoburns 4y ago
> 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.
- bigfoot675 4y ago
  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
  - nicoburns 4y ago
    > 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.
    - Dalewyn 4y ago
      >they work the same in every browser! That's because there's only one (alright, two) browsers.
      - nicoburns 4y ago
        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 :)
madeofpalk 4y ago
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.
notatoad 4y ago
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.

lelandfe 4y ago

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

ecuaflo 4y ago
You should consider using a polyfill
- bobthepanda 4y ago
  Polyfills can be quite expensive on a client device depending on their complexity, so they’re not some kind of free lunch.
  - lelandfe 4y ago
    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!
- no_wizard 4y ago
  I don’t think there is a generally accepted implemented one. They’d also be pretty expensive on the client

butz 4y ago

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.

yoavm 4y ago

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>

MuffinFlavored 4y ago

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; }

dmix 4y ago
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.

698969 4y ago

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