library-mirrors/normalize.css
1
0
Fork 0
mirror of https://github.com/necolas/normalize.css.git synced 2024-12-25 15:14:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Demo HTML: Whitespace cleanup. Validation cleanup (remove strike element, valid input values, SVG shape.) Close #32

Browse Source
This commit is contained in:
Nicolas Gallagher 2011-08-30 11:31:57 +01:00
parent aec1395765
commit 54aa1506bc
1 changed files with 55 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
demo.html
View File

@ -11,9 +11,9 @@
#boxsize input, #boxsize input,
#boxsize select, #boxsize select,
#boxsize textarea { #boxsize textarea {
width:200px; width: 200px;
padding:5px; padding: 5px;
border:1px solid #333; border: 1px solid #333;
} }
</style> </style>
</head> </head>
@ -31,7 +31,7 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<h1>Heading 1</h1> <h1>Heading 1</h1>
<h2>Heading 2</h2> <h2>Heading 2</h2>
<h3>Heading 3</h3> <h3>Heading 3</h3>
@ -40,9 +40,9 @@
<h6>Heading 6</h6> <h6>Heading 6</h6>
<p hidden>This should be hidden in all browsers, apart from IE6</p> <p hidden>This should be hidden in all browsers, apart from IE6</p>
<section> <section>
<h1>Section Heading 1</h1> <h1>Section Heading 1</h1>
<article> <article>
<h4>Article Heading 2</h4> <h4>Article Heading 2</h4>
<address>Address: somewhere, world</address> <address>Address: somewhere, world</address>
@ -50,7 +50,7 @@
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
</article> </article>
</section> </section>
<h1>Text-level semantics</h1> <h1>Text-level semantics</h1>
<p> <p>
@ -72,16 +72,15 @@
The <samp>samp element</samp> example<br> The <samp>samp element</samp> example<br>
The <small>small element</small> example<br> The <small>small element</small> example<br>
The <span>span element</span> example<br> The <span>span element</span> example<br>
The <strike>strike element</strike> example<br>
The <strong>strong element</strong> example<br> The <strong>strong element</strong> example<br>
The <sub>sub element</sub> example<br> The <sub>sub element</sub> example<br>
The <sup>sup element</sup> example<br> The <sup>sup element</sup> example<br>
The <var>var element</var> example<br> The <var>var element</var> example<br>
The <u>u element</u> example The <u>u element</u> example
</p> </p>
<h1>Embedded content</h1> <h1>Embedded content</h1>
<h3>audio</h3> <h3>audio</h3>
<audio controls></audio> <audio controls></audio>
@ -93,8 +92,10 @@
<a href="#"><img src="http://placekitten.com/100/100" alt=""></a> <a href="#"><img src="http://placekitten.com/100/100" alt=""></a>
<h3>svg</h3> <h3>svg</h3>
<svg style="width:100px; height:100px;"><circle cx="100" cy="100" r="100" fill="#ff0000"></svg> <svg width="100px" height="100px">
<circle cx="100" cy="100" r="100" fill="#ff0000" />
</svg>
<h3>video</h3> <h3>video</h3>
@ -102,11 +103,11 @@
<video></video> <video></video>
<h1>Grouping content</h1> <h1>Grouping content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
<h3>pre</h3> <h3>pre</h3>
<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</pre> <pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</pre>
<pre><code>&lt;html> <pre><code>&lt;html>
@ -116,17 +117,17 @@
&lt;div class="main"> &lt;div> &lt;div class="main"> &lt;div>
&lt;/body> &lt;/body>
&lt;/html></code></pre> &lt;/html></code></pre>
<h3>blockquote</h3> <h3>blockquote</h3>
<blockquote> <blockquote>
<p>Some sort of famous witty quote marked up with a &lt;blockquote> and a child &lt;p> element.</p> <p>Some sort of famous witty quote marked up with a &lt;blockquote> and a child &lt;p> element.</p>
</blockquote> </blockquote>
<blockquote>Even better philosophical quote marked up with just a &lt;blockquote> element.</blockquote> <blockquote>Even better philosophical quote marked up with just a &lt;blockquote> element.</blockquote>
<h3>ordered list</h3> <h3>ordered list</h3>
<ol> <ol>
<li>list item 1</li> <li>list item 1</li>
<li>list item 1 <li>list item 1
@ -145,9 +146,9 @@
<li>list item 1</li> <li>list item 1</li>
<li>list item 1</li> <li>list item 1</li>
</ol> </ol>
<h3>unordered list</h3> <h3>unordered list</h3>
<ul> <ul>
<li>list item 1</li> <li>list item 1</li>
<li>list item 1 <li>list item 1
@ -166,9 +167,9 @@
<li>list item 1</li> <li>list item 1</li>
<li>list item 1</li> <li>list item 1</li>
</ul> </ul>
<h3>description list</h3> <h3>description list</h3>
<dl> <dl>
<dt>Description name</dt> <dt>Description name</dt>
<dd>Description value</dd> <dd>Description value</dd>
@ -179,7 +180,7 @@
<dt>Description name</dt> <dt>Description name</dt>
<dd>Description value</dd> <dd>Description value</dd>
</dl> </dl>
<h3>figure</h3> <h3>figure</h3>
<figure> <figure>
@ -188,8 +189,8 @@
</figure> </figure>
<h1>Tabular data</h1> <h1>Tabular data</h1>
<table summary="Jimi Hendrix albums"> <table>
<caption>Jimi Hendrix - albums</caption> <caption>Jimi Hendrix - albums</caption>
<thead> <thead>
<tr> <tr>
@ -228,9 +229,9 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h1>Forms</h1> <h1>Forms</h1>
<form> <form>
<fieldset> <fieldset>
<legend>Inputs as descendents of labels (form legend)</legend> <legend>Inputs as descendents of labels (form legend)</legend>
@ -241,36 +242,36 @@
<p><label>URL input <input type="url" placeholder="http://"></label></p> <p><label>URL input <input type="url" placeholder="http://"></label></p>
<p><label>Password input <input type="password" value="password"></label></p> <p><label>Password input <input type="password" value="password"></label></p>
<p><label>File input <input type="file"></label></p> <p><label>File input <input type="file"></label></p>
<p><label>Radio input <input type="radio" name="rad"></label></p> <p><label>Radio input <input type="radio" name="rad"></label></p>
<p><label>Checkbox input <input type="checkbox"></label></p> <p><label>Checkbox input <input type="checkbox"></label></p>
<p><label><input type="radio" name="rad"> Radio input</label></p> <p><label><input type="radio" name="rad"> Radio input</label></p>
<p><label><input type="checkbox"> Checkbox input</label></p> <p><label><input type="checkbox"> Checkbox input</label></p>
<p><label>Select field <select><option>Option 01</option><option>Option 02</option></select></label></p> <p><label>Select field <select><option>Option 01</option><option>Option 02</option></select></label></p>
<p><label>Textarea <textarea cols="30" rows="5" >Textarea text</textarea></label></p> <p><label>Textarea <textarea cols="30" rows="5" >Textarea text</textarea></label></p>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Inputs as siblings of labels</legend> <legend>Inputs as siblings of labels</legend>
<p><label for="ic">Color input</label> <input type="color" id="ic" value="color"></p> <p><label for="ic">Color input</label> <input type="color" id="ic" value="#000000"></p>
<p><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></p> <p><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></p>
<p><label for="ir">Range input</label> <input type="range" id="ir" value="range"></p> <p><label for="ir">Range input</label> <input type="range" id="ir" value="10"></p>
<p><label for="idd">Date input</label> <input type="date" id="idd" value="date"></p> <p><label for="idd">Date input</label> <input type="date" id="idd" value="1970-01-01"></p>
<p><label for="idm">Month input</label> <input type="month" id="idm" value="month"></p> <p><label for="idm">Month input</label> <input type="month" id="idm" value="1970-01"></p>
<p><label for="idw">Week input</label> <input type="week" id="idw" value="week"></p> <p><label for="idw">Week input</label> <input type="week" id="idw" value="1970-W01"></p>
<p><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="datetime"></p> <p><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="1970-01-01T00:00:00Z"></p>
<p><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="datetime-local"></p> <p><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="1970-01-01T00:00"></p>
<p><label for="irb">Radio input</label> <input type="radio" id="irb" name="rad"></p> <p><label for="irb">Radio input</label> <input type="radio" id="irb" name="rad"></p>
<p><label for="icb">Checkbox input</label> <input type="checkbox" id="icb"></p> <p><label for="icb">Checkbox input</label> <input type="checkbox" id="icb"></p>
<p><input type="radio" id="irb2" name="rad"> <label for="irb2">Radio input</label></p> <p><input type="radio" id="irb2" name="rad"> <label for="irb2">Radio input</label></p>
<p><input type="checkbox" id="icb2"> <label for="icb2">Checkbox input</label></p> <p><input type="checkbox" id="icb2"> <label for="icb2">Checkbox input</label></p>
<p><label for="s">Select field</label> <select id="s"><option>Option 01</option><option>Option 02</option></select></p> <p><label for="s">Select field</label> <select id="s"><option>Option 01</option><option>Option 02</option></select></p>
<p><label for="t">Textarea</label> <textarea id="t" cols="30" rows="5" >Textarea text</textarea></p> <p><label for="t">Textarea</label> <textarea id="t" cols="30" rows="5" >Textarea text</textarea></p>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Clickable inputs and buttons</legend> <legend>Clickable inputs and buttons</legend>
<p><input type="image" src="http://placekitten.com/90/24" alt="Image (input)"></p> <p><input type="image" src="http://placekitten.com/90/24" alt="Image (input)"></p>
@ -282,30 +283,30 @@
<p><button type="button">Button (button)</button></p> <p><button type="button">Button (button)</button></p>
<p><button type="submit">Submit (button)</button></p> <p><button type="submit">Submit (button)</button></p>
</fieldset> </fieldset>
<fieldset id="boxsize"> <fieldset id="boxsize">
<legend>box-sizing tests</legend> <legend>box-sizing tests</legend>
<div><input type="text" value="text"></div> <div><input type="text" value="text"></div>
<div><input type="email" value="email"></div> <div><input type="email" value="email"></div>
<div><input type="search" value="search"></div> <div><input type="search" value="search"></div>
<div><input type="url" value="http://"></div> <div><input type="url" value="http://example.com"></div>
<div><input type="password" value="password"></div> <div><input type="password" value="password"></div>
<div><input type="color" value="color"></div> <div><input type="color" value="#000000"></div>
<div><input type="number" value="number"></div> <div><input type="number" value="5"></div>
<div><input type="range" value="range"></div> <div><input type="range" value="10"></div>
<div><input type="date" value="date"></div> <div><input type="date" value="1970-01-01"></div>
<div><input type="month" value="month"></div> <div><input type="month" value="1970-01"></div>
<div><input type="week" value="week"></div> <div><input type="week" value="1970-W01"></div>
<div><input type="datetime" value="datetime"></div> <div><input type="datetime" value="1970-01-01T00:00:00Z"></div>
<div><input type="datetime-local" value="datetime-local"></div> <div><input type="datetime-local" value="1970-01-01T00:00"></div>
<div><input type="radio"></div> <div><input type="radio"></div>
<div><input type="checkbox"></div> <div><input type="checkbox"></div>
<div><select><option>Option 01</option><option>Option 02</option></select></div> <div><select><option>Option 01</option><option>Option 02</option></select></div>
<div><textarea cols="30" rows="5" >Textarea text</textarea></div> <div><textarea cols="30" rows="5" >Textarea text</textarea></div>
<div><input type="image" src="http://placekitten.com/90/24" alt="Image (input)"></div> <div><input type="image" src="http://placekitten.com/90/24" alt="Image (input)"></div>
<div><input type="reset" value="Reset (input)"></div> <div><input type="reset" value="Reset (input)"></div>
<div><input type="button" value="Button (input)"></div> <div><input type="button" value="Button (input)"></div>