Last file added

meyerweb · meyerweb · commit a5747a6cc229 · 2017-10-23T16:56:48.000-04:00
diff --git a/17-transitions/index.html b/17-transitions/index.html
@@ -17,16 +17,14 @@ <h2>Chapter 17</h2>
 
 <main>
 
-<p class="note">This index contains editing notes for the <acronym title="Quality Control">QC</acronym> phase of production.  If the book has been published and you still see this note, please pull a fresh copy of the repository from GitHub.</p>
-
 <h3>Figures &amp; Code Examples</h3>
 
 <ol>
 <li class="xmp"><a href="cardflip.html">200 millisecond card flip</a></li>
 <li class="fig"><a href="dd_menu.html">Transition initial, midtransition, and final state</a></li>
 
 <li class="xmp"><a href="contenteditable.html">contenteditable</a></li>
-<li class="fig"><a href="http://estelle.github.io/csstdg4/transitions/valid_invalid_focus.html">The input's appearance in the valid, invalid, and focused states</a> (TK 404)</li>
+<li class="fig"><a href="http://estelle.github.io/csstdg4/transitions/valid_invalid_focus.html">The input's appearance in the valid, invalid, and focused states</a></li>
 <li class="xmp"><a href="dd_menu_badUX.html">Very slow navigation transition</a></li>
 <li class="xmp"><a href="transitionend.html">transitionEnd event</a></li>
 <li class="xmp"><a href="transition_duration.html">different transition duration on revert</a></li>
diff --git a/17-transitions/valid_invalid_focus.html b/17-transitions/valid_invalid_focus.html
@@ -0,0 +1,51 @@
+
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+head, style {display: block; }
+[contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
+style:first-of-type {visibility:hidden;}
+#editme {background-color: #dedede;padding: 20px; font-size: 1.1em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace; max-height: 180px; overflow: scroll; }
+ul {list-style-type: none;}
+li {margin: 1em; margin: 10px 100px;}
+input {
+  border: 3px solid;
+  box-shadow: none;
+  outline: none;
+	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+	font-size: 2em;
+	padding: 10px;
+	box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
+	
+}
+</style>
+<style contenteditable id="editme">/* Matches some of the time, only when valid. */
+input:valid {
+	border-color: green;
+}
+/* matches  some of the time, when the prior selector does NOT match. */
+input:invalid {
+	border-color: red;
+}
+/* matches  some of the time, whether the input is valid or invalid */
+input:focus {
+	border-color: yellow;
+}</style>
+<title>Valid, Invalid, Focus</title>
+</head>
+<body>
+<ul>
+<li>
+<input type="text" pattern="valid" value="valid">
+</li>
+<li>
+<input type="text" pattern="valid" value="invalid">
+</li>
+<li>
+<input type="text" pattern="valid" value="autofocus" autofocus>
+</li>
+</ul>
+</body>
+</html>
+
diff --git a/index.html b/index.html
@@ -19,7 +19,7 @@ <h2>CSS: The Definitive Guide, 4th Edition</h2>
 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>23 October 2017:</strong> these files are <em>very</em> near complete—basically just missing one file and a small bit of touch-up.
+<strong>23 October 2017:</strong> these files are <em>very</em> near complete—just missing a small bit of touch-up.
 </p>
 
 <h3>Chapters</h3>
