There are scalable units, like vw and vh etc that are 1% of the browser's viewport, vw is like innerWidth / 100. So something like:
h1 {
font-size: 10vw;
}This means 10vw is going to be 50px when the browser is 500px wide, and 100px when the browser is 1000px wide for example. Using scalable units by themselves can sometimes lead to things being too-big or too-small, so some people use them with @media queries to 'switch them off' to some other unit at a certain size.
| .home-popup:--has(test-24) { | |
| padding: 1em 2em .75em; | |
| } | |
| .home-popup test-24 ~ * { | |
| display: none; | |
| } | |
| @--reset test-24; |
| function html(string = '') { | |
| return document.implementation | |
| .createHTMLDocument() | |
| .createRange() | |
| .createContextualFragment(string) | |
| } | |
| /* | |
| A JavaScript function that takes a string of HTML syntax, parses it as HTML and returns a Document Fragment containing all parsed nodes. |
| function evaluateTemplate(template = '', html = '') { | |
| const tag = Object.assign( | |
| document.createElement('shadow-dom'), | |
| {innerHTML: html} | |
| ) | |
| tag.attachShadow({mode: 'open'}) | |
| tag.shadowRoot.innerHTML = template | |
| // Replace <slot> with contents (flatten) |
| @--custom-at-rule with prelude { | |
| custom-type:--custom-pseudo-class(with args) /--custom-combinator/ ::--custom-pseudo-element { | |
| --custom-property: --custom-ident --custom-function(1--custom-unit) !--custom-annotation; | |
| } | |
| } |
| legal css custom property values { | |
| --percentage: 25%; | |
| --number: 37; | |
| --length: 12em; | |
| --time: 75ms; | |
| --function: foo(); | |
| --nested-function: foo(bar()); | |
| --parentheses: ( ); | |
| --braces: { }; | |
| --brackets: [ ]; |
| :root { | |
| --palette: { | |
| "blue": "#06f", | |
| "font": ["Comic Sans MS", "Papyrus"] | |
| }; | |
| font-family: --json(var(--palette).font[1]); | |
| color: --color(--json(var(--palette).blue)); | |
| } |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Star Rating Element</title> | |
| <script type=module> | |
| import StarRating from './star-rating-element.js' | |
| customElements.define('star-rating', StarRating) | |
| </script> |
| <script type=module> | |
| class WordCarousel extends HTMLElement { | |
| constructor() { | |
| super() | |
| this.carousel | |
| this.active = false | |
| } | |
| static get observedAttributes() { |
| export default function html(taggedTemplateString = [''], ...expressions) { | |
| const nodes = [] | |
| const functions = new Map | |
| const strings = typeof taggedTemplateString === 'string' | |
| ? [taggedTemplateString] | |
| : taggedTemplateString | |
| function stringifyObject(object = '') { | |
| // Null | |
| if (object === null) { |