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?
CSS Container Queries in Web Components
11–20 of 78 posts
Re: CSS Container Queries in Web Components
#12I'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 was explaining to a much younger colleague the hoops we used to have to jump through to get rounded corners and drop shadows. He honestly thought I was lying when I told him it involved exporting sliced-up images from Fireworks and placing them in tables.
Now it's two lines of CSS.
Re: CSS Container Queries in Web Components
#13I 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?
Re: CSS Container Queries in Web Components
#14> 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!
Short answer: No. There is no guarantee that a future HTML spec will include a standard element which will affect yours. For your element to be a legal custom element it must include a hyphen (e.g. ).
Longer answer: What you did here is a simple CSS selector using a tag matcher. Each tag with the name "red" will be matched and styles applied. If you want some custom script applied when this kind of element is created, attached, destroyed, etc. you must create a class for it and register it to the custom element registry[1]:
window.customElements.define(
"my-red",
class extends HTMLElement {
// ...
},
)
class MyRed extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow();
const style = document.createElement("style");
const slot = document.createElement("slot");
style.textContent = ":host { color: red; }"
shadowRoot.append(style, slot);
}
}
2: https://developer.mozilla.org/en-US/docs/Web/API/Element/att...
Re: CSS Container Queries in Web Components
#15I 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.
Re: CSS Container Queries in Web Components
#16> 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!
Yes, that is safe. It was introduced in 2014. I believe it should work in most browsers. (Rough testing shows it working for me in Firefox, Chrome, Safari).
Re: CSS Container Queries in Web Components
#17> 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!
Short answer: No. There is no guarantee that a future HTML spec will include a standard element which will affect yours. For your element to be a legal custom element it must include a hyphen (e.g. ). Longer answer: What you did here is a simple CSS selector using a tag matcher. Each tag with the name "red" will be matched and styles applied. If you want some custom script applied when this kind of element is created…
Thanks for clarifying
Re: CSS Container Queries in Web Components
#18> 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!
Yes, that is safe. It was introduced in 2014. I believe it should work in most browsers. (Rough testing shows it working for me in Firefox, Chrome, Safari).
Is there some page/article/reference to that method that you know of?
Re: CSS Container Queries in Web Components
#19Does 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 CSS-in-JS possible without needing to add auto-generated prefixes etc. You'd perhaps need your React component (not each component instance) to maintain a template for itself, which might be tricky.
Re: CSS Container Queries in Web Components
#20Earlier quoted context omitted.
Yes, that is safe. It was introduced in 2014. I believe it should work in most browsers. (Rough testing shows it working for me in Firefox, Chrome, Safari).
Is there some page/article/reference to that method that you know of?
Custom Elements [0][1] is the specification that came after the implementation was already gaining use.
[0] https://www.w3.org/TR/custom-elements/
[1] https://html.spec.whatwg.org/multipage/scripting.html#custom...