positioned elements provide the context #16
Comments
|
Hi @scottkellum, thanks for the suggestion. I don't think I've seen this idea or an implementation that works like this before so it seems like you've discovered something useful :D I'm not sure of the use cases or demos, or if this is related to element queries or a slightly different kind of query, but I have some brainstorms about prototyping it so we could play around with it. Do you have any implementations of this already? One thing I'm not 100% sure how I'll do is resolve which element is the containing block for a given element, I'm not sure if this exists somewhere JS can check already, or if we'd have to describe logic like this. Would this explain what you're looking for, if it worked? <!DOCTYPE html>
<body>
<sometimes-container>
<absolute-child></absolute-child>
</sometimes-container>
</body>* {
box-sizing-border-box;
}
body {
margin: 0;
}
sometimes-container {
display: block;
margin: 100px;
padding: 100px;
border: 5px dotted red;
}
absolute-child {
position: absolute;
display: block;
width: 50px;
height: 50px;
top: 0;
left: 0;
border: 5px dotted green;
}
@media (min-width: 800px) {
sometimes-container {
position: relative;
}
}
/* when the containing block of <absolute-child> is 700px+ wide */
/* custom vanilla CSS (must parse yourself) */
@--containing-block absolute-child and (min-width: 700px) {
:--self {
background: green;
}
}
/* off-label browser-supported CSS (parser-free client-side) */
@supports (--containing-block(absolute-child and (min-width: 700px))) {
[--self] {
background: green;
}
}
/*
In this stylesheet, the <absolute-child> would have a green background when the browser was
700px -> 800px wide when the containing block would be the <body> tag. But once the media
query kicks in, the containing block becomes <sometimes-container>. The containing block
query would be active again when the browser was 900px+ wide when <sometimes-container>
is wide enough.
*/I bet I could write a CSS parser plugin that would extract any Since this feature can only be supported at runtime I think instead of parsing the media queries myself, to prototype it I'd re-use Then in cases where all media queries came back true, we can populate a You could also work with CSS rules like this client-side in browsers today the Would having a custom prototype like this make it easier to explore and build use cases for a feature like this? |
|
I was thinking of it a little differently. Rather than an extension of what you have in your spec, it could be something like this: <div>
<h1>hello world!</h1>
</div>div {
position: relative;
}
@element (min-width: 500px) {
div:self {
background: blue;
padding: 3rem; /* ignored */
}
h1 {
float: left;
width: 50%;
}
}
Additionally, I have mostly been thinking about this in the context of writing a spec for Typetura. Introducing a new property called flow: h1 {
flow: h1 width 1200px ease-out;
}
@keyframes h1 {
0% {
font-size: 1rem;
color: #000;
}
100% {
font-size: 5rem;
color: blue;
}
} |
|
Also I’m happy to have a video chat about this as I know it’s sometimes hard to talk through conceptual ideas in threads. And then bring notes back to the thread. |
Element queries (and other element logic) should only be relative to the nearest positioned element. This gives authors more control over what the context is. It also slightly reduces, but not eliminates, issues of shifting contexts causing styling thrashing.
This is particularly useful for a few different scenarios:
inlineandinline-blockelements that might not return a reliable width to be queried.The text was updated successfully, but these errors were encountered: