Status: Intent to Ship in Gecko
Syntax
--brand: oklch(58% 0.2 265);
background: alpha(from var(--brand) / 35%);Demo
background: alpha(from var(--brand) / 35%);Links
Status: Intent to Ship in Gecko
Syntax
opacity: progress(5, 0, 10);
/* Use calc() only when converting the ratio into a unit */
width: calc(progress(700px, 320px, 1200px) * 100%);Demo
opacity: progress(520, 0, 1000);
/* if you need a percentage width */
width: calc(progress(520, 0, 1000) * 100%);Links
Status: Intent to Ship in Gecko; TC39 proposal
Syntax
const { user, posts } = await Promise.allKeyed({
user: fetchUser(),
posts: fetchPosts(),
});Demo
const data = await Promise.allKeyed({
user: fetchUser(),
posts: fetchPosts(),
settings: fetchSettings(),
});
// {
"user": "Wes #1",
"posts": 13,
"settings": "light"
}Links
Status: Intent to Prototype in Chromium
Syntax
<camera></camera>
<microphone></microphone>Demo
<camera id="camera"></camera>
<video id="preview" autoplay playsinline></video>
<script>
camera.addEventListener("track", () => {
preview.srcObject = new MediaStream([camera.track]);
});
</script>Links
Status: Intent to Ship in Gecko
Syntax
.card {
background: attr(data-color type(<color>), hotpink);
width: attr(data-width px, 240px);
}Demo
<div class="card" data-color="seagreen" data-width="280"></div>
.card {
background: attr(data-color type(<color>), hotpink);
width: attr(data-width px, 240px);
}Links
Status: Intent to Ship in Gecko for Firefox 154
Syntax
.item {
width: calc(sibling-index() * 40px);
background: hsl(
calc(360deg / sibling-count() * sibling-index()) 70% 55%
);
}Demo
.dot {
--angle: calc(360deg / sibling-count() * sibling-index());
rotate: var(--angle);
translate: 0 -90px;
background: hsl(
calc(360deg / sibling-count() * sibling-index()) 70% 55%
);
}Links
Status: Intent to Prototype in Chromium
Syntax
.outer {
max-content-sizing: shrink-to-fit;
text-wrap: balance;
width: fit-content;
max-width: 320px;
}
.inner {
width: fit-content;
}Demo
<div class="outer">
<div class="inner">
Lorem ipsum dolor sit amet...
</div>
</div>
.outer {
max-content-sizing: shrink-to-fit;
text-wrap: balance;
width: fit-content;
max-width: 320px;
}
.inner {
width: fit-content;
}Links
Status: Intent to Prototype in Gecko
Syntax
.button {
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
.heading {
text-box: trim-both cap alphabetic;
}Demo
text-box: normal;text-box-trim: trim-start;text-box-trim: trim-end;text-box: trim-both cap alphabetic;text-box: trim-both ex text;.label {
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
/* shorthand */
.label {
text-box: trim-both cap alphabetic;
}Links