Custom properties (CSS variables)
لم يُترجم بعد؛ يُعرض باللغة الإنجليزية
A custom property is a property whose name starts with two dashes, like --brand. It styles nothing by itself: it holds a value, and that value is inherited down the element tree. Follow one small stylesheet: two tokens declared on :root flow from html to every element, var() reads the value each button holds, a .card override recolours one branch, a fallback fills in a missing value, and changing one token restyles the whole page.
5 أسئلة سريعة
اختر إجابة لتعرف السبب. تُحفَظ نتيجتك مع تقدّمك.
01Which declaration sets a custom property?
A custom property's name starts with two dashes. var(--brand) is how you read it, not how you set it; $brand is not CSS.
02The stylesheet has :root { --gap: 8px; } and .card { --gap: 16px; }, and button { padding: var(--gap); }. What padding does a button inside the .card get?
Custom properties are inherited. The card sets its own --gap, so its children inherit 16px. A button outside the card still inherits 8px from html.
03No rule declares --ink. What colour does color: var(--ink, white); give?
An undeclared custom property holds the guaranteed-invalid value, so var() uses the fallback after the comma. Without a fallback, the declaration would act as unset.
04Why can one rule, background: var(--brand);, paint two buttons in different colours?
var() is substituted at computed-value time, element by element. If two elements hold different --brand values, the same rule gives two results.
05A design system keeps its spacing in --gap on :root. You change --gap from 8px to 16px. What changes?
The new value is inherited down the tree, and every var(--gap) is worked out again from it. One edit restyles every rule that reads the token.
المسرد
- Custom property
- A property whose name starts with two dashes, such as --brand. It holds a value for other declarations to read and styles nothing by itself.
- var()
- A function that reads a custom property: var(--brand). The browser replaces it with the value the element holds.
- :root
- A selector that matches the top element of the document. In an HTML page that is the html element.
- Inheritance
- An element taking a property's value from its parent when no rule sets its own. Custom properties are inherited.
- Fallback
- The value after the comma in var(--name, fallback). It is used when the custom property has no value.
- Guaranteed-invalid value
- The value an undeclared custom property holds. var() with no fallback then makes its declaration act as unset.
- Design token
- A named design choice, such as a brand colour or a spacing step, kept in one place (often a custom property on :root) and reused everywhere.
- @property
- A rule that registers a custom property with a type, an initial value and whether it inherits, so the browser can check and animate it.
الملاحظات والمصادر
- A real browser reads the whole stylesheet at once and works out every element's style in one pass. The figure adds the rules and declarations one at a time so you can see what each one does.
- The figure shows the values arriving at :root first and then flowing down. In a real browser both happen in the same pass: inheritance means each element starts from its parent's computed values.
- Before the button rule applies, a button keeps the browser's own default look (a light grey face and dark text). The padding drawn on each button is to scale with the --gap value, not with real screen pixels.
- A custom property is not checked when it is declared: --gap: teal is allowed. The check happens where var() is used. To give one a type, an initial value and smooth animation, register it: @property --gap { syntax: "<length>"; inherits: true; initial-value: 8px; }.
- Save the full page and the ten lines of style.css in one folder and open the page: Buy is tomato, Save is teal, both with white text and 8px of padding.
- W3C: CSS Custom Properties for Cascading Variables Module Level 1
- W3C: CSS Variables, using var() and fallbacks
- W3C: CSS Variables, invalid at computed-value time
- W3C: Selectors Level 4, the :root pseudo-class
- W3C: CSS Color Module Level 4, named colors
- W3C: CSS Properties and Values API Level 1 (@property)
- MDN: Using CSS custom properties (variables)
- MDN: Custom properties (--*)
- MDN: var()
- MDN: :root
- MDN: unset
- MDN: @property
اختبار يتاح بعد الخطوة الأخيرة.