Skip to content

Commit

Permalink
Update warnings on query pages
Browse files Browse the repository at this point in the history
  • Loading branch information
mirisuzanne committed Sep 19, 2022
1 parent 149fa9a commit 8dcce31
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 26 deletions.
2 changes: 1 addition & 1 deletion src/resources/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,6 @@ Chromium/Blink:
- [Chromium release notes](https://blog.chromium.org/)
- [Chrome platform status](https://chromestatus.com/features)
- [Chrome release schedule](https://chromiumdash.appspot.com/schedule)
- [Chrome release notes](https://chromereleases.googleblog.com/)
- [Chrome release notes](https://developer.chrome.com/)
- [Edge platform status](https://developer.microsoft.com/en-us/microsoft-edge/status/)
- [Edge release notes](https://docs.microsoft.com/en-us/deployedge/microsoft-edge-relnote-stable-channel)
5 changes: 3 additions & 2 deletions src/rwd/query/query.11tydata.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ warn: |
Much of the related content on this site
is out-of-date,
since any changes are being made in the
[Editor's Draft](https://drafts.csswg.org/css-contain-3/)
and published
[Working Draft](https://www.w3.org/TR/css-contain-3/).
See my article
[_Use the Right Container Query Syntax_](https://www.oddbird.net/2022/08/18/cq-syntax/)
for the latest updates.
46 changes: 23 additions & 23 deletions src/rwd/query/style-cases.md
Original file line number Diff line number Diff line change
@@ -1,58 +1,58 @@
---
title: Use-Cases for Style Queries
created: 2022-08-09T17:17:31-06:00
warn: false
eleventyNavigation:
key: query-style-cases
title: Use-Cases for Style Queries
parent: container-queries
---

Browsers are preparing to ship
[size-based container queries](https://caniuse.com/css-container-queries)
and related
[container query units](https://caniuse.com/css-container-query-units).
However,
implementors have continued to raise questions
about the utility of
[style queries](https://drafts.csswg.org/css-contain-3/#style-container).

{% note %}
When people talk about container queries,
they are often referring specifically to '_size queries_' --
which allow us to query and respond to
the computed size of an ancestor container.
Browsers have already started to ship
[size-based container queries](https://caniuse.com/css-container-queries)
and related
[container query units](https://caniuse.com/css-container-query-units).

_Style queries_ allow us to also respond
in a similar way
to the computed values of any property
on an ancestor container --
such as the container
`background-color`, or `font-weight`.
{% endnote %}

While it's fine for browsers to ship
size queries without style queries,
we need to ensure that the syntax we ship
makes sense with all the planned future additions --
including at least `style` and likely `state` queries.

However,
implementors have continued to raise questions
about the utility of
[style queries](https://drafts.csswg.org/css-contain-3/#style-container).
There has been
[significant discussion](https://github.com/w3c/csswg-drafts/issues/7066)
around this.
around this,
with many requests
that we show in more detail
the expected use-cases for style queries,
along with potential alternative solutions.

{% note %}
Chrome has started to implement
a prototype of _style queries_,
which may soon give us a better testing ground
for exploring use-cases.
Chrome & Edge Canary (v107+)
support style queries for custom properties
behind the 'Experimental Web Platform Features' flag.
To test the feature:

- Download either Canary browser.
- Navigate to `about://flags/#enable-experimental-web-platform-features`.
- Set it to `Enabled`.
- Restart the browser.

I put together a basic
[button theme demo on code pen](https://codepen.io/miriamsuzanne/pen/abGBNNx).
{% endnote %}

{% note %}
Several of the demos below
Several of the use cases below
come from other sources:

- Una Kravet,
Expand Down

0 comments on commit 8dcce31

Please sign in to comment.