Initial commit

meyerweb · Dec 21, 2014 · ca7c3fe · ca7c3fe
commit ca7c3fe
Show file tree

Hide file tree

Showing 913 changed files with 27,313 additions and 0 deletions.
diff --git a/DOM-display.html b/DOM-display.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  "http://www.w3.org/TR/REC-html40/loose.dtd"><html><head><title>HTML 4.01: Attributes</title><style type="text/css"><!--body {padding-top: 19px;}table.leaf {border: 1px solid #C0C0D0; border-width: 2px 2px 4px 6px; margin: 0; padding: 0; border-collapse: separate; border-spacing: 0 1px; width: 100%;}table.leaf td, table.leaf th {font-size: 12px; padding: 0; vertical-align: top; background-color: #E8E8E8;}table.leaf th {font-weight: normal; padding: 0 2px; background-color: #D0D0E0;}--></style><script type="text/javascript"><!--// Special thanks to Martina Kosloff for giving me the idea to do this//  to Marcio Galli for writing the DevEdge examples I adapted//  and to Bob Clary for helping me make the whole thing work//function GetElementsWithClassName(elementName,className) {	var allElements = document.getElementsByTagName(elementName);	var elemColl = new Array();	for (i = 0; i< allElements.length; i++) {		if (allElements[i].className == className) {			elemColl[elemColl.length] = allElements[i];		}	}	return elemColl;}function MaKo() {// named for Martina Kosloff, who had the idea to present the tab in this way// "Nice shark... pretty shark..."  -- Londo Mollari, 'Babylon 5'//	var n;	var tableColl = GetElementsWithClassName('table','leaf');	for (n = 0; n < tableColl.length; n++) {		tableColl[n].style.display = 'none';	}}function leafTurn(leafName,leafType) {	var myLeaf = document.getElementById(leafName);	var myArrow = document.getElementById(leafName+'Turn');	if (myLeaf.style.display == 'none') {		myLeaf.style.display = leafType;	} else {		myLeaf.style.display = 'none';	}//	alert(leafName + ": " + myLeaf.style.display);}//--></script></head><body onLoad="MaKo();"><a href="javascript:" onclick="leafTurn('test1','block'); return false">test1</a><a href="javascript:" onclick="leafTurn('test2','table'); return false">test2</a><hr><table class="leaf" id="test1"><tr><td>test 1 -- block</td></tr></table><hr><table class="leaf" id="test2"><tr><td>test 2 -- table</td></tr></table></body></html>

diff --git a/almost-standards-quirk.html b/almost-standards-quirk.html
@@ -0,0 +1 @@
+<html><head><title>almost-standards test</title><style type="text/css"><!--td {width: 100px; background: red; padding: 0;}td#zero img {height: 10px; width: 50px;}td#one img {width: 100px; height: 20px;}td#two img {width: 100px; height: 100px;}--></style></head><body id="www-meyerweb-com" class="css"><p>If both the images in the following table cell have red above or below them, then the page is in "strict" mode.  If neither does, then the page is in "quirks" mode.  If the first has no red above or below but the second does, then the page is in "almost standards" mode.</p><table><tr><td id="zero"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"></td></tr><tr><td id="zero"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br></td></tr></table><p>The following table has two cells: one cell with <code>br</code>-separated images, and another cell with a single image.  If no red is visible around or between these images, the page is using the "quirks"-style line layout.  If red appears, it's using "strict"-style layout.  IE/* acts as per "quirks" layout in Mozilla.</p><table><tr><td id="one"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br></td><td id="two"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"></td></tr></table><ul><li><a href="almost-standards.html">almost-standards</a></li><li><a href="almost-standards-quirk.html">almost-standards-quirk</a></li><li><a href="almost-standards-strict.html">almost-standards-strict</a></li></ul></body></html>

diff --git a/almost-standards-strict.html b/almost-standards-strict.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"			"http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>almost-standards test</title><style type="text/css"><!--td {width: 100px; background: red; padding: 0;}td#zero img {height: 10px; width: 50px;}td#one img {width: 100px; height: 20px;}td#two img {width: 100px; height: 100px;}--></style></head><body id="www-meyerweb-com" class="css"><p>If both the images in the following table cell have red above or below them, then the page is in "strict" mode.  If neither does, then the page is in "quirks" mode.  If the first has no red above or below but the second does, then the page is in "almost standards" mode.</p><table><tr><td id="zero"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"></td></tr><tr><td id="zero"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br></td></tr></table><p>The following table has two cells: one cell with <code>br</code>-separated images, and another cell with a single image.  If no red is visible around or between these images, the page is using the "quirks"-style line layout.  If red appears, it's using "strict"-style layout.  IE/* acts as per "quirks" layout in Mozilla.</p><table><tr><td id="one"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br></td><td id="two"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"></td></tr></table><ul><li><a href="almost-standards.html">almost-standards</a></li><li><a href="almost-standards-quirk.html">almost-standards-quirk</a></li><li><a href="almost-standards-strict.html">almost-standards-strict</a></li></ul></body></html>

diff --git a/almost-standards.html b/almost-standards.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"			"http://www.w3.org/TR/REC-html4/loose.dtd"><html><head><title>almost-standards test</title><style type="text/css"><!--td {width: 100px; background: red; padding: 0;}td#zero img {height: 10px; width: 50px;}td#one img {width: 100px; height: 20px;}td#two img {width: 100px; height: 100px;}--></style></head><body id="www-meyerweb-com" class="css"><p>If both the images in the following table cell have red above or below them, then the page is in "strict" mode.  If neither does, then the page is in "quirks" mode.  If the first has no red above or below but the second does, then the page is in "almost standards" mode.</p><table><tr><td id="zero"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"></td></tr><tr><td id="zero"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br></td></tr></table><p>The following table has two cells: one cell with <code>br</code>-separated images, and another cell with a single image.  If no red is visible around or between these images, the page is using the "quirks"-style line layout.  If red appears, it's using "strict"-style layout.  IE/* acts as per "quirks" layout in Mozilla.</p><table><tr><td id="one"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br></td><td id="two"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"></td></tr></table><ul><li><a href="almost-standards.html">almost-standards</a></li><li><a href="almost-standards-quirk.html">almost-standards-quirk</a></li><li><a href="almost-standards-strict.html">almost-standards-strict</a></li></ul></body></html>

diff --git a/alt-style-1.css b/alt-style-1.css
diff --git a/alt-style-2.css b/alt-style-2.css
diff --git a/alt-style-2.html b/alt-style-2.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>Alternate Stylesheets</title><link rel="alternate stylesheet" href="alt-style-1.css" type="text/css" title="Grape World"><link rel="alternate stylesheet" href="alt-style-2.css" type="text/css" title="On Fire!"><link rel="alternate stylesheet" href="alt-style-3.css" type="text/css" title="kaleidoscope"></head><body id="www-meyerweb-com" class="css"><h1>Alternate Stylesheets, Part 2</h1><p>Once you've picked one of the alternate stylesheets for this page, go back to the <a href="alt-style.html"><strong>first page</strong></a>, which links in the same alternate stylesheets.  Notice that it starts out with the default stylesheet instead of the alternate that was picked for this page.  Even worse, when you come back here odds are you'll be back to the default styles.  This is why Javascript-and-cookie-based style pickers are gaining in popularity.</p><ul><li><a href="http://www.meyerweb.com/">meyerweb home page</a><li><a href="http://www.webreview.com/style/">Style Sheets Reference Guide</a><li><a href="http://www.w3.org/">W3C</a></ul><p>Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><!--#include virtual="/inc/extra.html" --><!--#include virtual="/eric/redesignwatch/latest.html" --><!--#include virtual="/inc/page-end.html" --></body></html>

diff --git a/alt-style-3.css b/alt-style-3.css
diff --git a/alt-style.html b/alt-style.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>Alternate Stylesheets</title><link rel="alternate stylesheet" href="alt-style-1.css" type="text/css" title="Grape World"><link rel="alternate stylesheet" href="alt-style-2.css" type="text/css" title="On Fire!"><link rel="alternate stylesheet" href="alt-style-3.css" type="text/css" title="kaleidoscope"></head><body id="www-meyerweb-com" class="css"><h1>Alternate Stylesheets</h1><p>Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><h3>How to Choose an Alternate Stylesheet</h3><p>This varies by browser.  At the moment, only Netscape Navigator 6 supports this natively, so the directions are for that browser.  They're pretty simple:</p><ol><li>Select the "View" menu.<li>Select the "Use Stylesheet" submenu<li>Select the stylesheet you wish to apply to this document.</ol><p>Note that the titles shown in the "Choose Stylesheet" submenu are specified in the <code>title</code> attribute of the <code>LINK</code> element.  Please feel free to examin the source of this document for further information.</p><p>For the sake of completeness, I'll include some links which will get different styles in each alternate stylesheet:</p><ul><li><a href="http://www.meyerweb.com/">meyerweb home page</a><li><a href="http://www.webreview.com/style/">Style Sheets Reference Guide</a><li><a href="http://www.w3.org/">W3C</a></ul><p>Once you've picked one of the alternate stylesheets for this page, go to the <a href="alt-style-2.html"><strong>next page</strong></a>, which links in the same alternate stylesheets.  Notice that it starts out with the default stylesheet instead of the alternate that was picked for this page.  Even worse, when you come back here odds are you'll be back to the default styles.  This is why Javascript-and-cookie-based style pickers are gaining in popularity.</p><!--#include virtual="/inc/extra.html" --><!--#include virtual="/eric/redesignwatch/latest.html" --><!--#include virtual="/inc/page-end.html" --></body></html>

diff --git a/alt-title-tooltips.html b/alt-title-tooltips.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head>	<title>Alt/Title testing</title></head><body id="www-meyerweb-com" class="css"><p>Image with neither <code>title</code> nor <code>alt</code>: <img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"></p><p>Image with <code>title</code> but not <code>alt</code>: <img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg" title="testing the title attribute"></p><p>Image with <code>alt</code> but not <code>title</code>: <img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg" alt="testing the alt attribute"></p><p>Image with both <code>title</code> and <code>alt</code>: <img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg" title="testing the title attribute" alt="testing the alt attribute"></p></body></html>

diff --git a/author-reader-useragent.css b/author-reader-useragent.css
@@ -0,0 +1,3 @@
+#meyerweb-eric-css-tests li.reader {background: red;
+	background: repeating-linear-gradient(-45deg,red,red 1em,yellow 1em,yellow 2em);}
+#meyerweb-eric-css-tests li.reader.important {background: green !important;}
diff --git a/author-reader-useragent.html b/author-reader-useragent.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<title>Author versus user (reader) styles</title>
+<style type="text/css" id="tests">
+ol li {margin: 1em 0; width: 50%;}
+ol li p {padding: 0.5em;}
+ol li:hover p {background: rgba(255,255,255,0.85); width: 90%;}
+#meyerweb-eric-css-tests li.author {background: green;}
+#meyerweb-eric-css-tests li.author.important {background: red !important;
+	background: repeating-linear-gradient(-45deg,red,red 1em,yellow 1em,yellow 2em) !important;}
+.author.reader {border-left: 3em solid green;}
+</style>
+<link rel="stylesheet" type="text/css" href="c/style-insert-tests.css">
+</head>
+<body id="meyerweb-eric-css-tests">
+
+<p class="note">
+Note that <em>the following test <strong>will be invalid</strong></em> unless you have <a href="author-reader-useragent.css">a user (reader) style sheet</a> enabled with the following rules:
+</p>
+<pre>
+#meyerweb-eric-css-tests li.reader {background: red;
+	background: repeating-linear-gradient(-45deg,red,red 1em,yellow 1em,yellow 2em);}
+#meyerweb-eric-css-tests li.reader.important {background: green !important;}
+</pre>
+
+<hr>
+
+<ol>
+<li class="l01"><p>A user-agent paragraph.</p></li>
+<li class="author reader"><p>Author-reader conflict.</p></li>
+<li class="author reader important"><p>Important author-reader conflict.</p></li>
+</ol>
+
+</body>
+</html>
diff --git a/background-size-specificity.html b/background-size-specificity.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>background-size specificity</title>
+<link rel="stylesheet" href="c/style-insert-tests.css" type="text/css">
+<style type="text/css" media="all" id="tests" contenteditable>
+div {height: 300px; width: 600px; border: 1px solid silver; margin: 3em 0;}
+div b {padding: 0 0.25em; font-weight: normal;
+	position: relative; top: -1.15em; border: 1px dotted silver; border-bottom: 0;}
+
+#d1 {
+	background: url(i/yinyang.png) top left no-repeat;
+	-webkit-background-size: cover;
+	-moz-background-size: cover;
+	-o-background-size: cover;
+	background-size: cover;
+	}
+#d2 {
+	-webkit-background-size: cover;
+	-moz-background-size: cover;
+	-o-background-size: cover;
+	background-size: cover;
+	background: url(i/yinyang.png) top left no-repeat;
+	}
+</style>
+</head>
+<body>
+
+<div id="d1"><b>d1: shorthand, then background-size</b></div>
+<div id="d2"><b>d2: background-size, then shorthand</b></div>
+
+</body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><html><head><title>HTML 4.01: Attributes</title><style type="text/css"><!--body {padding-top: 19px;}table.leaf {border: 1px solid #C0C0D0; border-width: 2px 2px 4px 6px; margin: 0; padding: 0; border-collapse: separate; border-spacing: 0 1px; width: 100%;}table.leaf td, table.leaf th {font-size: 12px; padding: 0; vertical-align: top; background-color: #E8E8E8;}table.leaf th {font-weight: normal; padding: 0 2px; background-color: #D0D0E0;}--></style><script type="text/javascript"><!--// Special thanks to Martina Kosloff for giving me the idea to do this// to Marcio Galli for writing the DevEdge examples I adapted// and to Bob Clary for helping me make the whole thing work//function GetElementsWithClassName(elementName,className) { var allElements = document.getElementsByTagName(elementName); var elemColl = new Array(); for (i = 0; i< allElements.length; i++) { if (allElements[i].className == className) { elemColl[elemColl.length] = allElements[i]; } } return elemColl;}function MaKo() {// named for Martina Kosloff, who had the idea to present the tab in this way// "Nice shark... pretty shark..." -- Londo Mollari, 'Babylon 5'// var n; var tableColl = GetElementsWithClassName('table','leaf'); for (n = 0; n < tableColl.length; n++) { tableColl[n].style.display = 'none'; }}function leafTurn(leafName,leafType) { var myLeaf = document.getElementById(leafName); var myArrow = document.getElementById(leafName+'Turn'); if (myLeaf.style.display == 'none') { myLeaf.style.display = leafType; } else { myLeaf.style.display = 'none'; }// alert(leafName + ": " + myLeaf.style.display);}//--></script></head><body onLoad="MaKo();"><a href="javascript:" onclick="leafTurn('test1','block'); return false">test1</a><a href="javascript:" onclick="leafTurn('test2','table'); return false">test2</a><hr><table class="leaf" id="test1"><tr><td>test 1 -- block</td></tr></table><hr><table class="leaf" id="test2"><tr><td>test 2 -- table</td></tr></table></body></html>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<html><head><title>almost-standards test</title><style type="text/css"><!--td {width: 100px; background: red; padding: 0;}td#zero img {height: 10px; width: 50px;}td#one img {width: 100px; height: 20px;}td#two img {width: 100px; height: 100px;}--></style></head><body id="www-meyerweb-com" class="css"><p>If both the images in the following table cell have red above or below them, then the page is in "strict" mode. If neither does, then the page is in "quirks" mode. If the first has no red above or below but the second does, then the page is in "almost standards" mode.</p><table><tr><td id="zero"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"></td></tr><tr><td id="zero"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br></td></tr></table><p>The following table has two cells: one cell with <code>br</code>-separated images, and another cell with a single image. If no red is visible around or between these images, the page is using the "quirks"-style line layout. If red appears, it's using "strict"-style layout. IE/* acts as per "quirks" layout in Mozilla.</p><table><tr><td id="one"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"><br></td><td id="two"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"></td></tr></table><ul><li><a href="almost-standards.html">almost-standards</a></li><li><a href="almost-standards-quirk.html">almost-standards-quirk</a></li><li><a href="almost-standards-strict.html">almost-standards-strict</a></li></ul></body></html>
Expand Down