Appreciated: root and var ()
Custom property name is a two hyphens ( - beginning attributes), such as --foo. After you define you can use var() variable references.
css
1 :root { 2 --view-height: 0; 3 }
In :rootdefine a custom attribute selector means they can act on all the elements of a global document. :rootIs a CSS pseudo-class, it matches the root element of the document - <html>elements. It is similar to html the selector, but has a higher priority.
You can access documents anywhere in the :root values of custom attributes:
1 div { 2 height: calc(var(--view-height) - 10px); 3 }
You can also include a fallback values in CSS variables. E.g:
1 div { 2 height: var(--view-height, 100px); 3 }
If no custom property, which is used instead of the backoff value.
The use of JavaScript to change CSS custom properties
1 const vh = document.documentElement.clientHeight; 2 document.documentElement.style.setProperty('--view-height', vh+'px');
Reference Links: https://www.html.cn/archives/9598