Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 312 lines (252 sloc) 11.276 kb
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
1 <!doctype html>
2
3 <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
4 <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
5 <!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
6 <!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
7 <!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
8 <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
9 <head>
10 <meta charset="utf-8">
11
12 <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
13 Remove this if you use the .htaccess -->
14 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
15
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
16 <title>Boilerplate Test Suite</title>
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
17 <meta name="description" content="">
18 <meta name="author" content="">
19
20 <!-- Mobile viewport optimized: j.mp/bplateviewport -->
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
21 <meta name="viewport" content="width=device-width, initial-scale=1.0">
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
22
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
23 <!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
24 <link rel="shortcut icon" href="/favicon.ico">
25 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
26
27
28 <!-- CSS : implied media="all" -->
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
29 <link rel="stylesheet" href="../css/style.css?v=2">
30 <link rel="stylesheet" href="hack2.css">
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
31
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
32 <!-- Uncomment if you are specifically targeting less enabled mobile browsers
33 <link rel="stylesheet" media="handheld" href="../css/handheld.css?v=2"> -->
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
34
35 <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
fbc29b3 @paulirish Update Modernizr to v1.6
paulirish authored
36 <script src="../js/libs/modernizr-1.6.min.js"></script>
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
37
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
38 </head>
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
39
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
40 <body>
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
41
42 <div id="container">
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
43
44
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
45 <header>
107e463 @paulirish Revert "edited some styles and moved boilerplate css nav to top"
paulirish authored
46 <br /><br /><h1>HTML5 Boilerplate CSS Hack Sheet</h1><br /><br />
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
47 </header>
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
48
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
49
50 <div id="main" style="display:block;">
51 <dl>
52 <dt>Hack 01 - Set default color</dt>
53 <dd>
2ada12e @paulirish update content and disable accordion for testsuite page.
paulirish authored
54 HTML5 Boilerplate suggests the default color looks better when set to #444 instead of #000.<br />
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
55 <span style="color:black;">Web font default color</span>
56 </dd>
57
58 <dt>Hack 02 - Vertical Scroll Bar</dt>
59 <dd>
2ada12e @paulirish update content and disable accordion for testsuite page.
paulirish authored
60 Click <a href="#" id="shorten">contract</a> | <a href="#" id="expand">expand</a> to see how Boilerplate forces a scrollbar in non-IE.
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
61 </dd>
62
2ada12e @paulirish update content and disable accordion for testsuite page.
paulirish authored
63 <dt>Hack 03 - Accessible focus style</dt>
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
64 <dd>
2ada12e @paulirish update content and disable accordion for testsuite page.
paulirish authored
65 Remove dotted outline around 'a' element on hover and on focus in certain browsers
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
66 <br /><br />
107e463 @paulirish Revert "edited some styles and moved boilerplate css nav to top"
paulirish authored
67 <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
68 <br /><br />
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
69 <a href="#" class="preventDefault">Click me</a>
70 </dd>
71
72 <dt>Hack 04 - Pre Wrapping</dt>
73 <dd>
2ada12e @paulirish update content and disable accordion for testsuite page.
paulirish authored
74 Default <code>pre</code> doesn't wrap text. Boilerplate forces <code>pre</code> to wrap text.
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
75 <br /><br />
107e463 @paulirish Revert "edited some styles and moved boilerplate css nav to top"
paulirish authored
76 <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
77 <br /><br />
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
78 with wrapping:<br /><br />
17104e5 @paulirish tighten up testsuite for usability.
paulirish authored
79 <div style="height:115px;">
80 <div class="wrapper">
81 <pre>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</pre>
82 </div>
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
83 </div><br />
84 without wrapping:<br /><br />
85 <div class="wrapper">
86 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
87 </div>
88 </dd>
89
2ada12e @paulirish update content and disable accordion for testsuite page.
paulirish authored
90 <dt>Hack 05 - Remove default textarea scrollbar in IE</dt>
91 <dd>
2acb0c8 @paulirish test suite cleanup. happy toggle links.
paulirish authored
92 IE shows a disabled scrollbar on empty <code>textarea</code>.<br><br>
107e463 @paulirish Revert "edited some styles and moved boilerplate css nav to top"
paulirish authored
93 <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
94 <br /><br />
95 <form>
96 <textarea></textarea>
97 </form>
98 </dd>
99
100 <dt>Hack 06 - IE6,7 legend margin</dt>
101 <dd>
2ada12e @paulirish update content and disable accordion for testsuite page.
paulirish authored
102 Left align form legend to the inner text in IE 6,7.<br /><br />
107e463 @paulirish Revert "edited some styles and moved boilerplate css nav to top"
paulirish authored
103 <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
104 <br /><br />
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
105 <form>
106 <fieldset>
2ada12e @paulirish update content and disable accordion for testsuite page.
paulirish authored
107 <legend>Information:</legend><br />
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
108 Name: <input type="text" size="30" /><br />
109 Email: <input type="text" size="30" /><br />
110 Date of birth: <input type="text" size="10" />
111 </fieldset>
112 </form>
113 </dd>
114
115 <dt>Hack 07 - Vertically align checkboxes, radios, text inputs with their label</dt>
116 <dd>
107e463 @paulirish Revert "edited some styles and moved boilerplate css nav to top"
paulirish authored
117 <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
118 <br /><br />
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
119 <input type="radio" /> Option A <br /><br />
120 <input type="checkbox" /> Item B <br /><br />
121 Name: <input type="text" />
122 </dd>
123
124 <dt>Hack 08 - Hand cursor on clickable input elements</dt>
125 <dd>
107e463 @paulirish Revert "edited some styles and moved boilerplate css nav to top"
paulirish authored
126 <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
127 <br /><br />
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
128 Input with type submit <input type="submit" value="submit" />
129 </dd>
130
131
132 <dt>Hack 09 - Webkit browsers form elements margin</dt>
133 <dd>
2ada12e @paulirish update content and disable accordion for testsuite page.
paulirish authored
134 Webkit browsers add a 2px margin outside the chrome of form elements.<br /><br />
107e463 @paulirish Revert "edited some styles and moved boilerplate css nav to top"
paulirish authored
135 <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
136 <br /><br />
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
137 <form>
138 <input type="submit" value="submit" /><br /><br />
139 <button type="button">Click Me!</button><br /><br />
140 <select><option>Default</option></select>
141 </form>
142 </dd>
143
144 <dt>Hack 10 - Make buttons width rendered correctly</dt>
145 <dd>
2ada12e @paulirish update content and disable accordion for testsuite page.
paulirish authored
146 IE adds extra padding to <code>button</code>. This fixes the issue. <br /><br />
107e463 @paulirish Revert "edited some styles and moved boilerplate css nav to top"
paulirish authored
147 <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
148 <br /><br />
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
149 <form>
150 <button type="button">Click Me!</button>
151 <button type="button">This is a really long button</button>
152 </form>
153 </dd>
154
155 <dt>Hack 11 - Bicubic resizing for non-native sized IMG</dt>
156 <dd>
157 IE7 hack to reduce distortion caused by image resizing <br /><br />
107e463 @paulirish Revert "edited some styles and moved boilerplate css nav to top"
paulirish authored
158 <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
159 <br /><br />
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
160 <img src="../apple-touch-icon.png" width="27" /><br />
161 <img src="../apple-touch-icon.png" width="57" /><br />
162 <img src="../apple-touch-icon.png" width="157" /><br />
163 </dd>
164
165 <dt>Hack 12 - Hide visually</dt>
166 <dd>
2ada12e @paulirish update content and disable accordion for testsuite page.
paulirish authored
167 Hide elements visually, but have it available for screen readers.
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
168 <br /><br />
107e463 @paulirish Revert "edited some styles and moved boilerplate css nav to top"
paulirish authored
169 <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
170 <br /><br />
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
171 <div class="visuallyhidden">showing</div>
172 </dd>
173
174 <dt>Hack 13 - Image text replacement</dt>
175 <dd>
2ada12e @paulirish update content and disable accordion for testsuite page.
paulirish authored
176 Replace text with images.
107e463 @paulirish Revert "edited some styles and moved boilerplate css nav to top"
paulirish authored
177 <br /><br />
178 <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
179 <br /><br />
180
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
181 <div class="ir" style="background:url('../apple-touch-icon.png'); width:57px; height:57px;">Apple Touch Icon</div>
182
183 </dd>
184
2ada12e @paulirish update content and disable accordion for testsuite page.
paulirish authored
185 <dt>Hack 14 - Clear Floats</dt>
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
186 <dd>
2ada12e @paulirish update content and disable accordion for testsuite page.
paulirish authored
187 Clear Floated elements without extra markup.
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
188 <br /><br />
107e463 @paulirish Revert "edited some styles and moved boilerplate css nav to top"
paulirish authored
189 <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
190 <br /><br />
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
191 <div id="clear-demo" class="clearfix">
2ada12e @paulirish update content and disable accordion for testsuite page.
paulirish authored
192 <div id="clear-demo-l">text floated left</div><div id="clear-demo-r">text floated right</div>
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
193 </div>
2ada12e @paulirish update content and disable accordion for testsuite page.
paulirish authored
194 <div id="clear-demo-b">unfloated text</div>
b676101 @paulirish move over pngfix test to the new test suite page.
paulirish authored
195 </dd>
196
197
198 <dt>Hack 15 - PNG fix</dt>
199 <dd>fix pngs for correct display in IE6
200 <br /> <br />
201
202 <div style="position:relative">
203
204 <!-- wassup gradient. -->
22b8ab5 @paulirish use the unminified jQuery in dev because the build script fixes that for...
paulirish authored
205 <div style="position:absolute; height: 40px; background-color: #444444; background-image: -moz-linear-gradient(top, #444444, #999999); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); ">
b676101 @paulirish move over pngfix test to the new test suite page.
paulirish authored
206
207
22b8ab5 @paulirish use the unminified jQuery in dev because the build script fixes that for...
paulirish authored
208 <div class="png_bg" style="border:1px solid #ddd; width:100px; padding:10px 10px 10px 50px; display:inline-block; background:url(test_tubes.png) no-repeat 5px center;">
b676101 @paulirish move over pngfix test to the new test suite page.
paulirish authored
209 <img src="internet_explorer.png" alt="IE is so awesome" />
210 </div>
211 </div>
212
213 </dd>
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
214 </dl>
215 </div>
216 <footer>
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
217
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
218 </footer>
219 </div> <!--! end of #container -->
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
220
221
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
222 <!-- Javascript at the bottom for fast page loading -->
223
224 <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
11aec5b @jbueza Updated jQuery 1.4.2 to 1.4.4 in all occurrences of the project.
jbueza authored
225 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
226 <script>!window.jQuery && document.write(unescape('%3Cscript src="../js/libs/jquery-1.4.4.js"%3E%3C/script%3E'))</script>
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
227
228
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
229 <script>
230 $('#expand').click(function() {
17104e5 @paulirish tighten up testsuite for usability.
paulirish authored
231 $('#container').css('height','auto').css('overflow','');
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
232 return false;
233 });
234
235 $('#shorten').click(function() {
17104e5 @paulirish tighten up testsuite for usability.
paulirish authored
236 $('#container').css('height','300px').css('overflow','hidden');
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
237 return false;
238 });
239
240 $('#atag').click(function() {
241 return false;
242 });
243
107e463 @paulirish Revert "edited some styles and moved boilerplate css nav to top"
paulirish authored
244 $('.show').click(function(){
2acb0c8 @paulirish test suite cleanup. happy toggle links.
paulirish authored
245 $('.show').addClass('current')
246 $('.hide').removeClass('current');
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
247 showStyle();
248 return false;
249 });
250 $('.hide').click(function(){
2acb0c8 @paulirish test suite cleanup. happy toggle links.
paulirish authored
251 $('.hide').addClass('current')
252 $('.show').removeClass('current');
17104e5 @paulirish tighten up testsuite for usability.
paulirish authored
253 // freeze the size of each tests so the page doesnt jump.
254 $('dd').each(function(){
255 $(this).height( $(this).height() );
256 });
257
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
258 hideStyle();
259 return false;
260 });
261
262 var linkTags = $('link');
263 function hideStyle() {
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
264 // tee hee
265 $('link[href*=style.css]').attr('media','braille');
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
266 }
267 function showStyle() {
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
268 $('link[href*=style.css]').attr('media','all');
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
269 }
270
271 $('.preventDefault').click(function() {
272 return false;
273 });
2acb0c8 @paulirish test suite cleanup. happy toggle links.
paulirish authored
274
275 $(function(){
276 $('.show').addClass('current');
277 })
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
278 </script>
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
279
280
281 <!-- scripts concatenated and minified via ant build script-->
282 <script src="../js/plugins.js"></script>
283 <script src="../js/script.js"></script>
284 <!-- end concatenated and minified scripts-->
285
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
286
287 <!--[if lt IE 7 ]>
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
288 <script src="../js/libs/dd_belatedpng.js"></script>
289 <script> DD_belatedPNG.fix('img, .png_bg'); //fix any <img> or .png_bg background-images </script>
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
290 <![endif]-->
291
292 <!-- yui profiler and profileviewer - remove for production -->
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
293 <script src="../js/profiling/yahoo-profiling.min.js"></script>
294 <script src="../js/profiling/config.js"></script>
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
295 <!-- end profiling code -->
296
297
298 <!-- asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet
299 change the UA-XXXXX-X to be your site's ID -->
300 <script>
301 var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
302 (function(d, t) {
303 var g = d.createElement(t),
304 s = d.getElementsByTagName(t)[0];
305 g.async = true;
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
306 g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
e10e662 @shichuan tests page for a visual view of boilerplate normalization.
shichuan authored
307 s.parentNode.insertBefore(g, s);
308 })(document, 'script');
309 </script>
310
bc08925 @paulirish update demo files to use latest boilerplate markup.
paulirish authored
311 </body>
312 </html>
Something went wrong with that request. Please try again.