Skip to content
This repository was archived by the owner on Feb 16, 2023. It is now read-only.
This repository was archived by the owner on Feb 16, 2023. It is now read-only.

Proposal for a slightly different syntax and function #3

Open
@ausi

Description

@ausi

In #2 (comment) I posted an idea about a different syntax. It looks like:

.child:container(min-width: 150px) {
    color: red;
}

And the nearest qualified ancestor is selected as the container to run the query against by the browser.

As I put more thoughts into this I got an idea of how the implementation issue (jumping between compute style and layout) could possibly be solved.

If I’m right the browser computes the styles by traversing the DOM tree from top to bottom. In this process it could already calculate and store the width if it knows that it doesn’t depend on its descendants. If it then reaches an element with a container query rule it already knows what the right container is – it’s the nearest ancestor for which it was able to calculate a width – and which width it has. So it should be possible to resolve the container queries without doing the layout process.

It may be that I’m totally wrong with my assumptions about browser internals, but it would be great if it is implementable this way.

If someone is interested in this idea I also wrote a prolyfill and a blog post about this version of container queries.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions