…This implies no device-specific markup, or anything which requires control over fonts or colors. – WWW Project
The user/browser specifies initial preferences and hands the remaining influence over to the document [authors]. – Håkon Lie
Media-Query Changes @media (min-width: 30em) { html { $columns: 6; /* scope only */ --columns: 6; /* 30em+ in browsers! */ } }
html { --brand-color: hsl(330, 100%, 45%); --action: var(--brand-color); } a { color: var(--action); }
grid-template 'header header header' auto 'nav main aside' 1fr 'nav footer aside' auto / fit-content(20%) minmax(0, 1fr) 20em
<div style="--index: {{ loop.index }};"> [style*='--index'] { animation-delay: calc(var(--index) * 50ms); }
<div style="--ease: var(--in-out-back);"> [style*='--ease'] { --in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); --out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); --in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
Using Vue <section class="sprite-demo" :style="{ '--src': show.sprite.src, '--columns': show.sprite.columns, '--rows': show.sprite.rows, }">...</section>
<div v-for="action in show.actions" :key="action.name" :data-action="action.name" :style="{ '--row': action.row, }" />
My Related Articles… More CSS Charts, with Grid & Custom Properties CSS Custom Properties in the Cascade Using Custom Property “Stacks” to Tame the Cascade