Live data from Hacker News

CSS Container Queries in Web Components

mxb.dev

61–70 of 78 posts

Re: CSS Container Queries in Web Components

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

making tables a css grid is not an option?

Re: CSS Container Queries in Web Components

#62

Earlier quoted context omitted.

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.

[deleted]

Re: CSS Container Queries in Web Components

#63
post #60

Earlier quoted context omitted.

Thanks, I wasn't aware of this disparity. I handwrite my CSS, been doing it for 21 years now. If I was to use Bootstrap or Tailwind, I'd likely use @extend and @include to compose my own classes. A long time ago, I read an article that stated, with authority, that Bootstrap was being misused. That class names like "font-weight-light mt-4 text-white" should instead have been replaced with "subtitle" with CSS: .subtitl…

I thought this when I first encountered Bootstrap, and it is still my opinion today. I think class names should convey intent and meaning, not the look. I'm glad someone wrote on this. People seem to like bootstrap, but it seems with bootstrap, not only you have to master CSS, but also bootstrap, while without it you only need to master CSS. I'm also used to hand write CSS and I'm a bit at loss when I need to use suc…

There is a site called maintainable css that resonated with myself regarding CSS naming and approach. https://maintainablecss.com/

Re: CSS Container Queries in Web Components

#64
post #31

Earlier quoted context omitted.

https://en.wikipedia.org/wiki/Inner-platform_effect

that's arguable, the encapsulation web components affords is built into the system and simply being exposed by way of this bucket of technologies When compared with React and similar solutions doing the same and similar thing(s) it runs circles around them... or am I misunderstanding the comment and is the position asserted that container queries (not web components) are the effect? What is the inner-platform effect…

> What is the inner-platform effect comment applied to specifically?

Adding more flexibility to CSS/HTML without requiring Javascript would eventually turn CSS and HTML into to the equivalent of a general purpose programming language, which we already have in the form of Javascript.

Re: CSS Container Queries in Web Components

#65
post #47

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…

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 C…

want a drop shadow on a div? no problem, just wrap it in 8 other divs and give each of them a different background for the sides and corners

Re: CSS Container Queries in Web Components

#66

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…

Ah you young ones only supporting IE6. I still have trauma from supporting IE5!

that's nothing, back in my day we had to manually carve the website layout into clay tablets

Re: CSS Container Queries in Web Components

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

What are some good resources to learn modern css?

kevin powell on youtube makes good videos, it's how i finally jumped into flexbox and grid a while back. I think for something like CSS videos really are a good medium for teaching

Re: CSS Container Queries in Web Components

#69
post #67

Earlier quoted context omitted.

making tables a css grid is not an option?

not if it's a really long table, grid fails at 1000ish rows in chrome

tbf, if you have a 1000 row table in html - you might have other problems.

Re: CSS Container Queries in Web Components

#70
post #67

Earlier quoted context omitted.

not if it's a really long table, grid fails at 1000ish rows in chrome

tbf, if you have a 1000 row table in html - you might have other problems.

agreed. To be fair in my case it was a 500+-row table that i was trying to split into 2 rows each on small screens. Still arguably way more than reasonable, but this was a situation where it's legacy code and I could only change the html/css. I ended up doing each row as it's own flex, which is slightly annoying since it can't adapt to the contents being displayed, and I had to just stipulate widths for each column, but I guess it's not hard to see why dynamically calculating the widths would be a bit laggy.

Firefox handled arbitrarily big grids like a champ though

Post reply on HN