Reworked list numbering to use counters and custom variables, with fa…

…llbacks
meyerweb · 43a086e0f829b8c239b15c2fe6b1c6d2a46d4e71 · meyerweb committed Aug 8, 2017 · Aug 8, 2017 · 43a086e
1 parent 37b799d
commit 43a086e0f829b8c239b15c2fe6b1c6d2a46d4e71
diff --git a/01-css-and-documents/index.html b/01-css-and-documents/index.html
@@ -4,6 +4,9 @@
 <meta charset="utf-8" />
 <title>CSS and Documents (Chapter 1)</title>
 <link type="text/css" href="../styles/indices.css" rel="stylesheet">
+<style type="text/css">
+body {--chno: "1";}
+</style>
 </head>
 <body>
 
diff --git a/02-selectors/index.html b/02-selectors/index.html
@@ -4,6 +4,9 @@
 <meta charset="utf-8" />
 <title>Selectors (Chapter 2)</title>
 <link type="text/css" href="../styles/indices.css" rel="stylesheet">
+<style type="text/css">
+body {--chno: "2";}
+</style>
 </head>
 <body>
 
diff --git a/03-specificity-and-the-cascade/index.html b/03-specificity-and-the-cascade/index.html
@@ -4,6 +4,9 @@
 <meta charset="utf-8" />
 <title>Specificity and the Cascade (Chapter 3)</title>
 <link type="text/css" href="../styles/indices.css" rel="stylesheet">
+<style type="text/css">
+body {--chno: "3";}
+</style>
 </head>
 <body>
 
diff --git a/04-values-and-units/index.html b/04-values-and-units/index.html
@@ -4,6 +4,9 @@
 <meta charset="utf-8" />
 <title>Values and Units (Chapter 4)</title>
 <link type="text/css" href="../styles/indices.css" rel="stylesheet">
+<style type="text/css">
+body {--chno: "4";}
+</style>
 </head>
 <body>
 
diff --git a/05-fonts/index.html b/05-fonts/index.html
@@ -4,6 +4,9 @@
 <meta charset="utf-8" />
 <title>Fonts (Chapter 5)</title>
 <link type="text/css" href="../styles/indices.css" rel="stylesheet">
+<style type="text/css">
+body {--chno: "5";}
+</style>
 </head>
 <body>
 
diff --git a/06-text-properties/index.html b/06-text-properties/index.html
@@ -4,6 +4,9 @@
 <meta charset="utf-8" />
 <title>Text Properties (Chapter 6)</title>
 <link type="text/css" href="../styles/indices.css" rel="stylesheet">
+<style type="text/css">
+body {--chno: "6";}
+</style>
 </head>
 <body>
 
diff --git a/07-basic-visual-formatting/index.html b/07-basic-visual-formatting/index.html
@@ -4,6 +4,9 @@
 <meta charset="utf-8" />
 <title>Basic Visual Formatting (Chapter 7)</title>
 <link type="text/css" href="../styles/indices.css" rel="stylesheet">
+<style type="text/css">
+body {--chno: "7";}
+</style>
 </head>
 <body>
 
diff --git a/08-padding-borders-outlines-and-margins/index.html b/08-padding-borders-outlines-and-margins/index.html
@@ -4,6 +4,9 @@
 <meta charset="utf-8" />
 <title>Padding, Borders, Outlines, and Margins (Chapter 8)</title>
 <link type="text/css" href="../styles/indices.css" rel="stylesheet">
+<style type="text/css">
+body {--chno: "8";}
+</style>
 </head>
 <body>
 
diff --git a/09-colors-backgrounds-and-gradients/index.html b/09-colors-backgrounds-and-gradients/index.html
@@ -4,6 +4,9 @@
 <meta charset="utf-8" />
 <title>Colors, Backgrounds, and Gradients (Chapter 9)</title>
 <link type="text/css" href="../styles/indices.css" rel="stylesheet">
+<style type="text/css">
+body {--chno: "9";}
+</style>
 </head>
 <body>
 
diff --git a/10-floating-and-shapes/index.html b/10-floating-and-shapes/index.html
@@ -4,6 +4,9 @@
 <meta charset="utf-8" />
 <title>Floating and Shapes (Chapter 10)</title>
 <link type="text/css" href="../styles/indices.css" rel="stylesheet">
+<style type="text/css">
+body {--chno: "10";}
+</style>
 </head>
 <body>
 
diff --git a/11-positioning/index.html b/11-positioning/index.html
@@ -4,6 +4,9 @@
 <meta charset="utf-8" />
 <title>Positioning (Chapter 11)</title>
 <link type="text/css" href="../styles/indices.css" rel="stylesheet">
+<style type="text/css">
+body {--chno: "11";}
+</style>
 </head>
 <body>
 
diff --git a/12-flexbox/index.html b/12-flexbox/index.html
@@ -4,6 +4,9 @@
 <meta charset="utf-8" />
 <title>Flexible Box Layout (Chapter 12)</title>
 <link href="../styles/indices.css" rel="stylesheet">
+<style type="text/css">
+body {--chno: "12";}
+</style>
 </head>
 <body>
 
diff --git a/13-grid-layout/index.html b/13-grid-layout/index.html
@@ -4,6 +4,9 @@
 <meta charset="utf-8" />
 <title>Grid Layout (Chapter 13)</title>
 <link type="text/css" href="../styles/indices.css" rel="stylesheet">
+<style type="text/css">
+body {--chno: "13";}
+</style>
 </head>
 <body>
 
diff --git a/14-table-layout-in-css/index.html b/14-table-layout-in-css/index.html
@@ -4,6 +4,9 @@
 <meta charset="utf-8" />
 <title>Table Layout in CSS (Chapter 14)</title>
 <link type="text/css" href="../styles/indices.css" rel="stylesheet">
+<style type="text/css">
+body {--chno: "14";}
+</style>
 </head>
 <body>
 
diff --git a/15-lists-and-generated-content/index.html b/15-lists-and-generated-content/index.html
@@ -4,6 +4,9 @@
 <meta charset="utf-8" />
 <title>Lists and Generated Content (Chapter 15)</title>
 <link type="text/css" href="../styles/indices.css" rel="stylesheet">
+<style type="text/css">
+body {--chno: "15";}
+</style>
 </head>
 <body>
 
diff --git a/16-transforms/index.html b/16-transforms/index.html
@@ -4,6 +4,9 @@
 <meta charset="utf-8" />
 <title>Transforms (Chapter 16)</title>
 <link type="text/css" href="../styles/indices.css" rel="stylesheet">
+<style type="text/css">
+body {--chno: "16";}
+</style>
 </head>
 <body>
 
diff --git a/17-transitions/index.html b/17-transitions/index.html
@@ -5,14 +5,7 @@
 <title>Transitions (Chapter 17)</title>
 <link href="../styles/indices.css" type="text/css" rel="stylesheet">
 <style type="text/css">
-ol {counter-reset: figs; list-style: none;}
-li.fig + li.xmp, li.xmp + li.fig {margin-top: 1.5ch;}
-
-li.fig::before {content: counter(figs) ". "; display: inline-block; width: 2ch;}
-li.fig {counter-increment: figs; margin-left: -2ch;}
-
-li.xmp {font-style: italic;
-	padding-left: 1.25em; background: url(../styles/play-icon-round.svg) 0.25em 50% / 0.8em no-repeat;}
+body {--chno: "17";}
 </style>
 </head>
 <body>
diff --git a/18-animations/index.html b/18-animations/index.html
@@ -5,14 +5,7 @@
 <title>Animations (Chapter 18)</title>
 <link type="text/css" href="../styles/indices.css" rel="stylesheet">
 <style type="text/css">
-ol {counter-reset: figs; list-style: none;}
-li.fig + li.xmp, li.xmp + li.fig {margin-top: 1.5ch;}
-
-li.fig::before {content: counter(figs) ". "; display: inline-block; width: 2ch;}
-li.fig {counter-increment: figs; margin-left: -2ch;}
-
-li.xmp {font-style: italic;
-	padding-left: 1.25em; background: url(../styles/play-icon-round.svg) 0.25em 50% / 0.8em no-repeat;}
+body {--chno: "18";}
 </style>
 </head>
 <body>
diff --git a/19-filters-blending-clipping-masking/index.html b/19-filters-blending-clipping-masking/index.html
@@ -4,6 +4,9 @@
 <meta charset="utf-8" />
 <title>Filters, Blending, Clipping, and Masking (Chapter 19)</title>
 <link type="text/css" href="../styles/indices.css" rel="stylesheet">
+<style type="text/css">
+body {--chno: "19";}
+</style>
 </head>
 <body>
 
diff --git a/20-media-dependent-styles/index.html b/20-media-dependent-styles/index.html
@@ -4,6 +4,9 @@
 <meta charset="utf-8" />
 <title>Media-Dependent Styles (Chapter 20)</title>
 <link type="text/css" href="../styles/indices.css" rel="stylesheet">
+<style type="text/css">
+body {--chno: "20";}
+</style>
 </head>
 <body>
 
diff --git a/index.html b/index.html
@@ -19,7 +19,7 @@
 Links to the files used to create the figures in <a href="http://shop.oreilly.com/product/0636920012726.do"><cite>CSS: The Definitive Guide, 4th Edition</cite></a> <small>(O’Reilly Media, 2017)</small>.  Most files are contained in this repository, and the vast majority are HTML and CSS, with the occasional image as needed.  You can download/clone these files <a href="https://github.com/meyerweb/csstdg4figs">from the repository</a> at GitHub.
 </p>
 <p class="note">
-<strong>13 Jul 2017:</strong> these files are still a work in progress.  See <a href="https://github.com/meyerweb/csstdg4figs/blob/master/README.md">the README file</a> for details.
+<strong>8 August 2017:</strong> these files are still a work in progress.  See <a href="https://github.com/meyerweb/csstdg4figs/blob/master/README.md">the README file</a> for details.
 </p>
 
 <h3>Chapters</h3>
diff --git a/styles/indices.css b/styles/indices.css
@@ -51,7 +51,23 @@ main p {font-size: 1.1em;}
 main p.note {border: 2px solid hsl(0,70%,60%); background: hsl(0,10%,90%); mix-blend-mode: luminosity;
 	padding: 1em 0.5em; border-radius: 1ch;}
 ol {list-style: decimal; margin: 0; padding-left: 2.5ch;}
+
+@supports (counter-reset: example) {
+	ol {counter-reset: figs; list-style: none;}
+	ol li:not(.xmp)::before {content: counter(figs) ". ";
+		display: inline-block; width: 6ch; text-align: right; margin: 0 0.67ch 0 -6.67ch;}
+	ol li:not(.xmp) {counter-increment: figs;}
+
+	@supports (--chno: 0) {
+		ol {margin-left: 2ch;}
+		ol li:not(.xmp)::before {content: var(--chno) "-" counter(figs) ". ";}
+	}
+}
+
 ol li {margin-bottom: 0.33ch; padding-left: 0.5ch;}
+li.fig + li.xmp, li.xmp + li.fig {margin-top: 1.5ch;}
+li.xmp {font-style: italic;
+	padding-left: 1.25em; background: url(../styles/play-icon-round.svg) 0.25em 50% / 0.8em no-repeat;}
 
 ol li a[href]::after {color: black; font-style: italic;}
 ol li a[href$="ppt"]::after {content: " (MS Powerpoint document)";}
diff --git a/styles/toc.css b/styles/toc.css
@@ -7,6 +7,10 @@ header h2 {word-spacing: 0;}
 		}
 	}
 }
+@supports (--chno: 0) {
+	ol {list-style: decimal;}
+	ol li:not(.xmp) {margin-left: 0;}
+}
 
 @keyframes slide {
 	from {