Skip to content

Commit 76b6787

Browse files
committed
[css-env-1][editorial] Add media queries to meta text-scale explainer
1 parent c075cef commit 76b6787

File tree

1 file changed

+27
-0
lines changed

1 file changed

+27
-0
lines changed

css-env-1/explainers/meta-text-scale.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,33 @@ That means:
143143

144144
We expect `scale` to become best practice for authors to use on all new website designs, just as they use the viewport meta tag. It allows authors to continue to use font-relative units like `rem` and `em` like they normally would and mostly avoid using `env(preferred-text-scale)`.
145145

146+
> [!NOTE]
147+
> It has been pointed out that these two approaches
148+
> **currently behave identically** on mobile,
149+
> though there is a theoretical difference in the specification:
150+
>
151+
> **1. The Meta Tag Approach**
152+
> ```html
153+
> <meta name="text-scale" content="scale" />
154+
> ```
155+
>
156+
> **2. The CSS Approach**
157+
> ```css
158+
> :root {
159+
> font-size: calc(env(preferred-text-size) * 16px);
160+
> text-size-adjust: none;
161+
> }
162+
> ```
163+
>
164+
> **Theoretical Difference:**
165+
> * **With `<meta>`:** (r)em-based media queries **will include** the OS-level font setting.
166+
> * **With `:root`:** (r)em-based media queries **will NOT include** the OS-level font setting.
167+
>
168+
> *The difference is theoretical because the `env` spec says
169+
> [`env()` works in media queries](https://drafts.csswg.org/css-env-1/#valdef-env-preferred-text-scale:~:text=Because%20environment%20variables%20don%E2%80%99t%20depend%20on%20the%20value),
170+
> but no browser supports that as of 2025.
171+
> Consequently, there is no difference.*
172+
146173
### Comparison of `legacy` and `scale`
147174
148175
This comparison table summarises our proposal. **`legacy`** describes current behavior. **`scale`** represents a simple way for sites to obey the OS-level text settings.

0 commit comments

Comments
 (0)