w3c / w3c/csswg-drafts

[css-variables] Example 5 might not represent best practices

Open
#7,130 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

i18n-needs-resolution
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

(See Example 5)
https://www.w3.org/TR/css-variables-1/#defining-variables

A real-world example of custom property usage is easily separating out strings from where they’re used, to aid in maintenance of internationalization:

:root,
:root:lang(en) {--external-link: "external link";}
:root:lang(de) {--external-link: "externer Link";}

a[href^="http"]::after {content: " (" var(--external-link) ")"}

The variable declarations can even be kept in a separate file, to make maintaining the translations simpler.

This is perhaps questionable advice? On the one hand, if one has static strings in one's style sheet, using a variable and the :lang selector might be useful as a way of localizing the strings without repetition. On the other hand, there is some complexity to language matching here and it's probably not a best practice to have strings embedded in this way anyway. Our (I18N's) comment here might be "we wish you'd picked another example"

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with Example 5 in the linked CSS Variables specification, especially the custom-property and :lang usage. Review the language-matching and internationalization concerns raised in the issue. Done means the example guidance has been resolved and the specification text reflects the agreed decision.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
documentation, internationalization
Issue type
Documentation
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.