Live data from Hacker News

CSS Container Queries in Web Components

mxb.dev

41–50 of 78 posts

Re: CSS Container Queries in Web Components

#41
post #2

I've picked up css after ~5 years and I can't believe how far it's come. Flexbox, grid, `clamp()`, content queries, etc. It's a complete different experience now compared to the days of css hacks.

I've been really impressed with the simplicity of

    display: flex
    gap: 10px
No more having to deal with :first-() :last-() selectors to remove margins

Re: CSS Container Queries in Web Components

#42
post #2

I've picked up css after ~5 years and I can't believe how far it's come. Flexbox, grid, `clamp()`, content queries, etc. It's a complete different experience now compared to the days of css hacks.

I've been really impressed with the simplicity of display: flex gap: 10px No more having to deal with :first-() :last-() selectors to remove margins

gap only applies to the inner contents tho - so still need to (potentially) handle outer margins. still, css grid is wonderful...just waiting for sub grids so i can do away with some hacky js height calculation i still need to do.

Re: CSS Container Queries in Web Components

#43
post #2

I've picked up css after ~5 years and I can't believe how far it's come. Flexbox, grid, `clamp()`, content queries, etc. It's a complete different experience now compared to the days of css hacks.

Styling still sucks though. I mean for displaying tables, not layout.

> not layout

email would like a word.

Re: CSS Container Queries in Web Components

#44
post #26

Earlier quoted context omitted.

Every time I hear someone complain about CSS I just know they've never used it in the IE6/7 days. Good lord, the amount of hacks, shims, fallbacks, polyfill, obscure stuff you had to do to make it work in IE6, IE7, and my absolute favourite(!) the IE7 compatibility mode which was like IE6 but not quite! Ever since the wide adoption of stuff like flexbox and grid I haven't dared to complain about not getting stuff to…

I had been trying to get into Tailwind CSS in recent projects but noticed some of the Bootstrap functionality I tend to like was missing out of the box so with Bootstrap 5 coming out last week I switched gears to start using that for a new project. The project itself is an update to an older one that was originally built with Bootstrap 2. For the old one, when I go to print the somewhat detailed tables I'm using show…

I’ve been there. The truth is that css media print doesn’t work with anything complex. After spending a week at it back in January, it felt very much like IE6 whac-a-mole. Long story short, I ended up fixing it in python using rst2pdf. Brilliant library.

Re: CSS Container Queries in Web Components

#45

Earlier quoted context omitted.

I've been really impressed with the simplicity of display: flex gap: 10px No more having to deal with :first-() :last-() selectors to remove margins

gap only applies to the inner contents tho - so still need to (potentially) handle outer margins. still, css grid is wonderful...just waiting for sub grids so i can do away with some hacky js height calculation i still need to do.

Yea, I should've clarified I meant not having to deal with margins for children elements. Thankfully with gap, I rarely have to worry about parent container's margins

Re: CSS Container Queries in Web Components

#46
post #2

I've picked up css after ~5 years and I can't believe how far it's come. Flexbox, grid, `clamp()`, content queries, etc. It's a complete different experience now compared to the days of css hacks.

Every time I hear someone complain about CSS I just know they've never used it in the IE6/7 days. Good lord, the amount of hacks, shims, fallbacks, polyfill, obscure stuff you had to do to make it work in IE6, IE7, and my absolute favourite(!) the IE7 compatibility mode which was like IE6 but not quite! Ever since the wide adoption of stuff like flexbox and grid I haven't dared to complain about not getting stuff to…

I've seen things you people wouldn't believe. Clearfix classes assigned to every element. I watched rounded rectangles built in Photoshop, sliced and exported to PNGs, then aligned with tables and a prayer. All those hacks will be lost in time, like tears in rain. Time to design.

Re: CSS Container Queries in Web Components

#47
post #2

I've picked up css after ~5 years and I can't believe how far it's come. Flexbox, grid, `clamp()`, content queries, etc. It's a complete different experience now compared to the days of css hacks.

Every time I hear someone complain about CSS I just know they've never used it in the IE6/7 days. Good lord, the amount of hacks, shims, fallbacks, polyfill, obscure stuff you had to do to make it work in IE6, IE7, and my absolute favourite(!) the IE7 compatibility mode which was like IE6 but not quite! Ever since the wide adoption of stuff like flexbox and grid I haven't dared to complain about not getting stuff to…

Just to give the less grizzled devs among us an idea how much better things are today: 14-ish years ago we all wanted rounded corners, but there was no border-radius (or at least we couldn't use it because IE). So it seemed like the web was full of rounded corner tutorials, and all of them involved jumping through a bunch of hoops. This thread reminded me of this parody of rounded-corners called "How to Make Square Corners with CSS" containing their coveted 84 step process to beautiful square corners in CSS:

http://web.archive.org/web/20071014004940/http://www.drivl.c...

Re: CSS Container Queries in Web Components

#48
post #2

I've picked up css after ~5 years and I can't believe how far it's come. Flexbox, grid, `clamp()`, content queries, etc. It's a complete different experience now compared to the days of css hacks.

Every time I hear someone complain about CSS I just know they've never used it in the IE6/7 days. Good lord, the amount of hacks, shims, fallbacks, polyfill, obscure stuff you had to do to make it work in IE6, IE7, and my absolute favourite(!) the IE7 compatibility mode which was like IE6 but not quite! Ever since the wide adoption of stuff like flexbox and grid I haven't dared to complain about not getting stuff to…

My favorite obscure thing: you sometimes had to add the zoom:1 CSS declaration so the element would "have layout", Whatever that meant, so it behaved the way you wanted.

You also had the various filter: progid:DX… declarations to make things that came with other browsers work on IE using DirectX directives. This would, by the way, break the CSS syntax because of the colon in the value, but fortunately parsers of other browsers would recover at the right place.

You could also run arbitrary JS in this filter property, too. I don't know how this would have worked with CSPs today.

To add to the confusion, the filter property has since been repurposed, and the modern one is NOT related to the older, IE one.

One of the biggest issues at the time was the non-standard box model that IE used and there was no way to tell other browsers to use this box model, nor to tell IE to use the standard box model.

Now both can be used in any browser with box-sizing:border-box (the IE box model) or box-sizing: content-box (the default standard box model). I guess browsers needed to implement border-box for the quirks mode anyway.

Conveniently, IE would happily load specific stylesheets declared in "conditional comments" so it could be possible to fix some things. Or you could use weird syntax like prefixing property names by a star, that the IE CSS parser would not mind but the other browsers ignore. Each version of IE had its specific quirks in its CSS parser so it was possible to target one version or another. Which is fortunate, because the rendering engine behaved very differently from version to version.

Re: CSS Container Queries in Web Components

#49
post #4

I keep having mixed feelings about web components... Why can't we have templates, custom elements and scoped CSS without JS?

If I remember correctly some WHATWG members are trying to settle on a syntax for declarative shadow DOM[1]. I personally wouldn’t hold my breath for it though, I don’t know how enthusiastic the rest of WHATWG is about this. In the meantime I would look for technology which applies server side rendering to your web components. 1: https://web.dev/declarative-shadow-dom/

> I personally wouldn’t hold my breath for it though, I don’t know how enthusiastic the rest of WHATWG is about this.

DSD is already shipping in Chrome 90 and Edge 91. I suspect that will put pressure on others to either adopt or continue with the standardization process until it addresses their outstanding concerns.

Re: CSS Container Queries in Web Components

#50
post #19

Does anyone know if React will be able to interop with this? Certainly there are solutions to letting a React component re-render based on its own width, even as that might change over time. But I imagine there would be performance improvements to let CSS container queries handle all styling for a component, rather than needing to go back into JS land every time. And because said CSS would be scoped, it would make CS…

If I remember correctly, React web component support is limited. But Preact explicitly supports them, as well as many other JSX libraries.
Post reply on HN