Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS Container Queries in Web Components

mxb.dev

Post reply on HN
Print view View original

31–40 of 78 posts

Re: CSS Container Queries in Web Components

#31

Post by jimmont »

incrudible wrote: post #9
jopsen wrote: post #4

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

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 comment applied to specifically?

Re: CSS Container Queries in Web Components

#32

Post by qbasic_forever »

jrochkind1 wrote: post #13
jopsen wrote: post #4

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

I am not very familiar with the technology. Under current standards, is it possible to choose to write a web component that does not have any JS, it just uses CSS to take advantage of these things?

No, a web component by definition must be a class that inherits from a HTMLElement base class and implement some basic rendering functions. In addition you must make the browser aware of the component by calling a CustomElementRegistry.define function with your class and the desired component name. So at a minimum there's about 5-10 lines of boilerplate JS necessary to define and register a basic component.

Re: CSS Container Queries in Web Components

#33

Post by qbasic_forever »

jopsen wrote: post #4

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

There's no generic HTML import function yet. Right now you can only have a page pull in javascript (through a script tag or ES module import) or CSS files, but critically not component HTML files. So it's hard to have a component defined by HTML and CSS that can be shared and imported in other pages. There's no "grab this HTML page and give me the DOM to insert/clone/use how I please" in pure HTML. The closest thing is iframe but it's not really a general component tool. For better or worse JS is currently the way to share logic and fragments between HTML pages. There was a working group looking at HTML imports but I think it all got spun down.

Re: CSS Container Queries in Web Components

#34

Post by qbasic_forever »

victor106 wrote: post #11
tuxie_ wrote: 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?

I really liked this zine by Julia Evans: https://jvns.ca/blog/2020/11/22/new-zine--hell-yes--css-/ It helped me get over the hump of realizing most modern CSS is a very simple and clear subset of all CSS. I.e. don't get bogged down in legacy or browser specific quirks and eccentricities--stick with modern conventions like flexbox, grid, etc.

Re: CSS Container Queries in Web Components

#35

Post by inshadows »

tuxie_ wrote: 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.

Re: CSS Container Queries in Web Components

#36

Post by runarberg »

jimmont wrote: post #29
runarberg wrote: post #15

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/

Why server side rendering? Content that needs rendering just put in the tree and target a slot. My perception was this is the best practice. I haven't used the lit included intl translation and am curious if and how these concerns work.

Doesn’t that still require JavaScript?

As I understand it (and I might not; I don’t have servers to do SSR) people want SSR for two reasons. a) To allow users that don’t have JavaScript for some reason to at get good UX, and b) to prevent the styles from kicking in after the initial render. There are ways to author your components in a way that fixes (b), but I’m not aware of any technique other then SSR that will fix (a).

Re: CSS Container Queries in Web Components

#37

Post by username91 »

deanclatworthy wrote: post #8
FriedrichN wrote: post #3

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!

position:relative on everything if you wanted it to be visible. var undefined; Fun times.

Re: CSS Container Queries in Web Components

#38

Post by [deleted] »

dqv wrote: post #7
______- wrote: post #5

> Each of these books is a custom element, or “web component”. I always wondered about custom 'web components'. Is it safe to do something like this? --> red{color:red} I should be red It works in latest Firefox. It feels weird being able to create arbitrary custom elements like that!

IIRC that's a Firefox quirk and doesn't work in every browser.

[deleted]

Re: CSS Container Queries in Web Components

#39

Post by lolinder »

______- wrote: post #10
dqv wrote: post #7

Earlier quoted context omitted.

IIRC that's a Firefox quirk and doesn't work in every browser.

Do you know what the quirk is called? Is there a blogpost detailing this strange method? Is there any mention of it in the web standards sites?

I don't believe it's a quirk. Browsers are supposed treat tags they don't recognize basically the same as a (or some other reasonable default presentation). It's intentionally designed that way for forward compatibility. We rely on this behavior when we provide some content inside an tag for browsers that don't support it.

Re: CSS Container Queries in Web Components

#40

Post by runarberg »

inshadows wrote: post #35
tuxie_ wrote: 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.

Agreed, and to make matters worse if you mess with the display property on any of the table components (, , , , etc.), or position them anything other then static, you loose the accessibility layout. Meaning that you must explicitly set the role (e.g. , , etc.) or else with assistive technology wont be able to navigate the table intuitively.
Post reply on HN