Skip to content

Updated typed arithmetic demo support notes #400

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dipikabh merged 2 commits into from
Oct 19, 2026
Merged

Updated typed arithmetic demo support notes #400

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c3b7970
Updated typed arithmetic demo support notes
chrisdavidmills Oct 7, 2026
96bb5b9
replace support info with feature detection.
chrisdavidmills Oct 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions css-typed-arithmetic/animated-story-circle/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Animated story circle</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="support-info">
<div class="info">
The rotation of each colored story section is calculated based on its
<code>sibling-index()</code> multiplied by a ratio of the width of the
<code>&lt;body&gt;</code> element and <code>1200px</code>. At the time of
writing, this works in Chromium 140+ and Safari 26+.
<code>&lt;body&gt;</code> element and <code>1200px</code>.
</div>
<div class="story-circle">
<p><strong>Hello there!</strong></p>
Expand Down
24 changes: 18 additions & 6 deletions css-typed-arithmetic/animated-story-circle/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
9 changes: 4 additions & 5 deletions css-typed-arithmetic/different-type-variations/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS typed arithmetic demo</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="support-info">
<div class="info">
The paragraph <code>background-color</code> and
<code>font-size</code> should change depending on the viewport width, as
<code>font-size</code> change depending on the viewport width, as
expressed in pixels in the <code>--viewport-in-pixels</code> custom
property. At the time of writing, this works in Chromium 140+ and Safari
26+.
property.
</div>
<p>Hello there!</p>
</body>
Expand Down
23 changes: 18 additions & 5 deletions css-typed-arithmetic/different-type-variations/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
4 changes: 2 additions & 2 deletions css-typed-arithmetic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
Expand Down Expand Up @@ -29,7 +29,7 @@ <h2>More information</h2>
<ul>
<li>
<a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units/Using_typed_arithmetic"
href="https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Values_and_units/Using_typed_arithmetic"

@dipikabh dipikabh Oct 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks!

>Using CSS typed arithmetic</a
>
</li>
Expand Down
6 changes: 3 additions & 3 deletions css-typed-arithmetic/responsive-background-opacity/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
Expand All @@ -14,9 +14,9 @@ <h1>Prose of the century</h1>
pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
at ultricies tellus laoreet sit amet.
</p>
<div class="support-info">
<div class="info">
The opacity of the background image decreases as the viewport width
decreases. At the time of writing, this works in Chromium 140+.
decreases.
</div>
</div>
</body>
Expand Down
31 changes: 23 additions & 8 deletions css-typed-arithmetic/responsive-background-opacity/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
:root {
font-family: sans-serif;
--width-percentage: calc((100vw / 2000px));
--width-percentage: calc(100vw / 2000px);
}

.wrapper {
Expand All @@ -10,22 +10,37 @@
}

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)))
),
url("https://mdn.github.io/shared-assets/images/examples/colorful-heart.png")
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;
}
}
Loading