- From: Nate Bennett via GitHub <noreply@w3.org>
- Date: Sun, 08 Mar 2026 20:36:57 +0000
- To: public-css-archive@w3.org
## Practical implementation
👎
```css
.msg { display: none; }
@media (prefers-lang: en) { .msg[lang="en"] { display: inline; } }
@media (prefers-lang: ar) { .msg[lang="ar"] { display: inline; } }
@media (prefers-lang: de) { .msg[lang="de"] { display: inline; } }
@media (prefers-lang: es) { .msg[lang="es"] { display: inline; } }
@media (prefers-lang: fr) { .msg[lang="fr"] { display: inline; } }
@media (prefers-lang: it) { .msg[lang="it"] { display: inline; } }
@media (prefers-lang: nl) { .msg[lang="nl"] { display: inline; } }
@media (prefers-lang: pt) { .msg[lang="pt"] { display: inline; } }
@media (prefers-lang: ru) { .msg[lang="ru"] { display: inline; } }
@media (prefers-lang: uk) { .msg[lang="uk"] { display: inline; } }
@media (prefers-lang: ja) { .msg[lang="ja"] { display: inline; } }
@media (prefers-lang: ko) { .msg[lang="ko"] { display: inline; } }
@media (prefers-lang: zh) { .msg[lang="zh"] { display: inline; } }
@media (prefers-lang: hi) { .msg[lang="hi"] { display: inline; } }
@media (prefers-lang: bn) { .msg[lang="bn"] { display: inline; } }
@media (prefers-lang: tr) { .msg[lang="tr"] { display: inline; } }
@media (prefers-lang: pl) { .msg[lang="pl"] { display: inline; } }
@media (prefers-lang: sv) { .msg[lang="sv"] { display: inline; } }
@media (prefers-lang: da) { .msg[lang="da"] { display: inline; } }
@media (prefers-lang: fi) { .msg[lang="fi"] { display: inline; } }
@media (prefers-lang: el) { .msg[lang="el"] { display: inline; } }
@media (prefers-lang: cs) { .msg[lang="cs"] { display: inline; } }
@media (prefers-lang: fa) { .msg[lang="fa"] { display: inline; } }
@media (prefers-lang: th) { .msg[lang="th"] { display: inline; } }
@media (prefers-lang: ca) { .msg[lang="ca"] { display: inline; } }
```
### Other syntax ideas to avoid the above mess
👍
```css
/* option A: new pseudo-class */
:user-lang(fr) .msg[lang="fr"] { display: inline; }
/* option B: functional, matches user pref not document */
:prefers-lang(fr) .msg[lang="fr"] { display: inline; }
```
More natural composition:
```css
.msg { display: none; }
:prefers-lang(en) .msg[lang="en"],
:prefers-lang(ar) .msg[lang="ar"],
:prefers-lang(de) .msg[lang="de"],
:prefers-lang(fr) .msg[lang="fr"] { display: inline; }
```
```css
:lang(user) .msg[lang="en"] { /* matches if user prefers en */ }
```
--
GitHub Notification of comment by Evoke4350
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13615#issuecomment-4019969504 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Sunday, 8 March 2026 20:36:59 UTC