From c3b79704e230229fefd27c57fcb934e72ec94075 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Wed, 7 Oct 2026 11:24:38 +0100 Subject: [PATCH 1/2] Updated typed arithmetic demo support notes --- css-typed-arithmetic/animated-story-circle/index.html | 6 +++--- css-typed-arithmetic/different-type-variations/index.html | 5 ++--- .../responsive-background-opacity/index.html | 4 ++-- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/css-typed-arithmetic/animated-story-circle/index.html b/css-typed-arithmetic/animated-story-circle/index.html index ce678373..6596a7d1 100644 --- a/css-typed-arithmetic/animated-story-circle/index.html +++ b/css-typed-arithmetic/animated-story-circle/index.html @@ -1,4 +1,4 @@ - + @@ -9,8 +9,8 @@
The rotation of each colored story section is calculated based on its sibling-index() multiplied by a ratio of the width of the - <body> element and 1200px. At the time of - writing, this works in Chromium 140+ and Safari 26+. + <body> element and 1200px. This works in + Chromium 140+, Firefox 158+, and Safari 26+.

Hello there!

diff --git a/css-typed-arithmetic/different-type-variations/index.html b/css-typed-arithmetic/different-type-variations/index.html index 2ef5a8c2..39be2c2f 100644 --- a/css-typed-arithmetic/different-type-variations/index.html +++ b/css-typed-arithmetic/different-type-variations/index.html @@ -1,4 +1,4 @@ - + @@ -10,8 +10,7 @@ The paragraph background-color and font-size should change depending on the viewport width, as expressed in pixels in the --viewport-in-pixels custom - property. At the time of writing, this works in Chromium 140+ and Safari - 26+. + property. This works in Chromium 140+, Firefox 158+, and Safari 26+.

Hello there!

diff --git a/css-typed-arithmetic/responsive-background-opacity/index.html b/css-typed-arithmetic/responsive-background-opacity/index.html index c28f5ec4..14a884fa 100644 --- a/css-typed-arithmetic/responsive-background-opacity/index.html +++ b/css-typed-arithmetic/responsive-background-opacity/index.html @@ -1,4 +1,4 @@ - + @@ -16,7 +16,7 @@

Prose of the century

The opacity of the background image decreases as the viewport width - decreases. At the time of writing, this works in Chromium 140+. + decreases. This works in Chromium 140+ and Firefox 158+.
From 96bb5b985f3fe7e160128df0f1370e202a6c2414 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Thu, 15 Oct 2026 09:05:06 +0100 Subject: [PATCH 2/2] replace support info with feature detection. --- .../animated-story-circle/index.html | 5 ++- .../animated-story-circle/style.css | 24 ++++++++++---- .../different-type-variations/index.html | 6 ++-- .../different-type-variations/style.css | 23 +++++++++++--- css-typed-arithmetic/index.html | 4 +-- .../responsive-background-opacity/index.html | 4 +-- .../responsive-background-opacity/style.css | 31 ++++++++++++++----- 7 files changed, 68 insertions(+), 29 deletions(-) diff --git a/css-typed-arithmetic/animated-story-circle/index.html b/css-typed-arithmetic/animated-story-circle/index.html index 6596a7d1..9bd8255c 100644 --- a/css-typed-arithmetic/animated-story-circle/index.html +++ b/css-typed-arithmetic/animated-story-circle/index.html @@ -6,11 +6,10 @@ -
+
The rotation of each colored story section is calculated based on its sibling-index() multiplied by a ratio of the width of the - <body> element and 1200px. This works in - Chromium 140+, Firefox 158+, and Safari 26+. + <body> element and 1200px.

Hello there!

diff --git a/css-typed-arithmetic/animated-story-circle/style.css b/css-typed-arithmetic/animated-story-circle/style.css index 2958f42b..5379fd50 100644 --- a/css-typed-arithmetic/animated-story-circle/style.css +++ b/css-typed-arithmetic/animated-story-circle/style.css @@ -36,14 +36,26 @@ p { rotate: calc(var(--angle) * 1deg); } -/* Support information */ +/* information */ -.support-info { - padding: 5px; - background-color: yellow; - border: 1px solid black; +.info { position: absolute; top: 5px; left: 5px; - right: 5px; + line-height: 1.5; +} + +/* feature detection */ + +@supports not (opacity: calc((100cqw / 1200px) - 0.33333)) { + body::before { + content: "Your browser does not support typed arithmetic."; + background-color: wheat; + text-align: center; + padding: 1rem 0; + + z-index: 1; + position: fixed; + inset: 40% 0 auto; + } } diff --git a/css-typed-arithmetic/different-type-variations/index.html b/css-typed-arithmetic/different-type-variations/index.html index 39be2c2f..b9150a4d 100644 --- a/css-typed-arithmetic/different-type-variations/index.html +++ b/css-typed-arithmetic/different-type-variations/index.html @@ -6,11 +6,11 @@ -
+
The paragraph background-color and - font-size should change depending on the viewport width, as + font-size change depending on the viewport width, as expressed in pixels in the --viewport-in-pixels custom - property. This works in Chromium 140+, Firefox 158+, and Safari 26+. + property.

Hello there!

diff --git a/css-typed-arithmetic/different-type-variations/style.css b/css-typed-arithmetic/different-type-variations/style.css index ffc8759b..39d27afe 100644 --- a/css-typed-arithmetic/different-type-variations/style.css +++ b/css-typed-arithmetic/different-type-variations/style.css @@ -12,10 +12,23 @@ p { ); } -/* Support information */ +/* information */ -.support-info { - padding: 5px; - background-color: yellow; - border: 1px solid black; +.info { + line-height: 1.5; +} + +/* feature detection */ + +@supports not (opacity: calc(100vw / 2000px)) { + body::before { + content: "Your browser does not support typed arithmetic."; + background-color: wheat; + text-align: center; + padding: 1rem 0; + + z-index: 1; + position: fixed; + inset: 40% 0 auto; + } } diff --git a/css-typed-arithmetic/index.html b/css-typed-arithmetic/index.html index edf3eef6..c7fc955c 100644 --- a/css-typed-arithmetic/index.html +++ b/css-typed-arithmetic/index.html @@ -1,4 +1,4 @@ - + @@ -29,7 +29,7 @@

More information

  • Using CSS typed arithmetic
    • diff --git a/css-typed-arithmetic/responsive-background-opacity/index.html b/css-typed-arithmetic/responsive-background-opacity/index.html index 14a884fa..5c4c6011 100644 --- a/css-typed-arithmetic/responsive-background-opacity/index.html +++ b/css-typed-arithmetic/responsive-background-opacity/index.html @@ -14,9 +14,9 @@

    Prose of the century

    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet.

    -
    +
    The opacity of the background image decreases as the viewport width - decreases. This works in Chromium 140+ and Firefox 158+. + decreases.
    diff --git a/css-typed-arithmetic/responsive-background-opacity/style.css b/css-typed-arithmetic/responsive-background-opacity/style.css index c0130c52..9879a416 100644 --- a/css-typed-arithmetic/responsive-background-opacity/style.css +++ b/css-typed-arithmetic/responsive-background-opacity/style.css @@ -1,6 +1,6 @@ :root { font-family: sans-serif; - --width-percentage: calc((100vw / 2000px)); + --width-percentage: calc(100vw / 2000px); } .wrapper { @@ -10,7 +10,8 @@ } body { - background: linear-gradient( + background: + linear-gradient( rgb(255 255 255 / calc(1 - var(--width-percentage))), rgb(255 255 255 / calc(1 - var(--width-percentage))) ), @@ -18,14 +19,28 @@ body { no-repeat top 50px right 50px; } -p { +p, +.info { line-height: 1.5; } -/* Support information */ +/* information */ -.support-info { - padding: 5px; - background-color: yellow; - border: 1px solid black; +.info { + font-weight: bold; +} + +/* feature detection */ + +@supports not (opacity: calc(100vw / 2000px)) { + body::before { + content: "Your browser does not support typed arithmetic."; + background-color: wheat; + text-align: center; + padding: 1rem 0; + + z-index: 1; + position: fixed; + inset: 40% 0 auto; + } }