Total Followers 132,503
I recently, as many web designers and developers will have, became aware of a fantastic resource put together by web developer, Paul Irish, and Divya Manian. Html5 Boilerplate, as they have named it, is a powerful starting off point for any website or web application. As Paul Irish describes it; “It’s essentially a good starting template of html and css and a folder structure that works., but baked into it is years of best practices from front-end development professionals.”
It is absolutely packed full of fantastic snippets of code that are still very much worth using even if you don’t want to start using html5 boilerplate as your base template.
We will start off by checking out some of the html snippets used in the resource. All of these are snippets of code that may not necessarily be only html, but will definitely be placed in your html files if used.
Favicon and Apple icons
The favicon is pretty much normality these day. the interesting bit here is the apple-touch-icon which is used if you save a bookmark to your home screen on an apple touch device such as an iPad or iPhone. Interestingly enough, android also supports its usage. As far as I can tell, the apple-touch-icon size is 60px by 60px. As the comment says, if your icons are in the root of your domain, these links aren’t required.
<!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references --> <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
Faster page load hack
This empty conditional comment hack is used to basically increase performance of your site. When conditional comments are used on your site, for example, for an ie6 conditional stylesheet, it will block further downloads until the css files are fully downloaded, hence increasing load time. To solve this issue, an empty conditional comment, like below, is used before any css is loaded in the document, and the problem will be solved! For further reading, check out this article.
<!--[if IE]><![endif]-->
X-UA-Compatible
Internet Explorer has many rendering engines ready for use. What this line of code basically does is force IE to use the most up to date rendering engine that it has available, so that your pages will render as well as possible. It then goes on to talk about Chrome Frame. Chrome Frame is a plugin for IE6, 7, and 8 which brings all the rendering, and js power of Google Chrome to IE. If the user has it installed, we render our site using it. For more information on Chrome Frame, and how you can even prompt users without it to install it, check here.
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Conditional body tag
This snippet is a Paul Irish original, and allows you to target IE browsers specifically without having to add in an extra http request with another separate stylesheet. Basically, depending on the IE browser that the user is using, a class is added to the body tag. If the user is not using IE, then a classless body tag is used. This allows you to target specific browsers in your css without having to use css hacks, or further stylesheets. For further reading, check out the original article on this.
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> <!--[if IE 7 ]> <body class="ie7"> <![endif]--> <!--[if IE 8 ]> <body class="ie8"> <![endif]--> <!--[if IE 9 ]> <body class="ie9"> <![endif<]--> <!--[if (gt IE 9)|!(IE)]><!--> <!--<![endif]-->
jQuery loading fallback
A vast majority of sites these days make use of the jQuery JavaScript library. A vast majority also make use of Google’s hosted version of the library for faster loading speed’s, and better cross site caching. However, what if there is ever a problem and jQuery is not loaded from Google? Well here is your backup. What it basically does is check if jQuery is loaded from Google. If not, then we load it locally from our own version of jQuery.
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>
Optimised Google Analytics
Google Analytics is a very popular tool for tracking your website’s user behaviour, and visits. This is simply an optimised version of Google’s asynchronous tracking snippet. To learn what has been optimised, and why it is faster than Google’s own version, read the article here.
<!-- asynchronous google analytics
change the UA-XXXXX-X to be your site's ID -->
<script>
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = '//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>
Moving on into Css, this is where the vast majority of awesome snippets care to be found. Don’t be put off by some of the one-liners; they are just as useful and awesome as some of the larger snippets to be found.
Html5 ready reset
Plenty of you will have used Eric Meyer’s css reset before now. It is included in many frameworks and so on, like 960.gs. This is a revamped version of that reset, that brings it into the present with full support for html5. It sets all the new structural tags as block level, and resets all their default styling as expected.
/* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark html5doctor.com/html-5-reset-stylesheet/*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article, aside, figure, footer, header,
hgroup, nav, section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
/* END RESET CSS */
Font normalisation
To get rid of rendering inconsistencies that can occur between browsers and OS’s when rendering fonts in pixels, this snippet allows you to size your fonts in such a way that the size and line-height will remain consistent across these platforms for your website. You will basically be setting your font sizes via percentages that can be found here.
/*
fonts.css from the YUI Library: developer.yahoo.com/yui/
Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages
*/
body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; }
table { font-size:inherit; font:100%; }
select, input, textarea { font:99% sans-serif; }
Webkit font smoothing
This is anti-aliasing for webkit browsers, sadly only in Mac OSX. It basically makes your text render better, and make it more readable, without all the text thinning hacks that we have seen in the past. For further reading check out Tim Van Damme’s article on this.
/* maxvoltar.com/archive/-webkit-font-smoothing */
html { -webkit-font-smoothing: antialiased; }
Force scrollbar
Sometimes, pages can be shorter than the browser view-port, and when you load a page on the same site that has longer content and uses a scrollbar, content can jump side to side. By forcing a scrollbar no matter the height of our content, we stop this small, but annoying issue.
html { overflow-y: scroll; }
Formatting quoted code
This snippet simply makes the text wrap when it reaches the walls of its container, in this case, the pre tag, whilst still preserving line breaks and white space cross browser. To read up on this, have a look at this article.
pre {
padding: 15px;
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}
Aligning Labels
Alignment of labels with their relevant inputs can be a horrible task to achieve in older browsers. This snippets solves that for us by making it consistent across browsers!
/* align checkboxes, radios, text inputs with their label */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
Clickable inputs
For some reason, most browsers don’t apply a pointer cursor to some clickable input’s by default to let the user now that this item is clickable, so we solve this by doing it ourselves.
/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }
Screenreader access
This snippet basically gives us the best of both worlds, allowing the best usability when it comes to link outlines for both screenreaders tabbing through links, and mouse users. To learn more, read this article.
a:hover, a:active { outline: none; }
a, a:active, a:visited { color:#607890; }
a:hover { color:#036; }
IE7 image resizing
Ie7 by default uses an image resizing algorithm that means that scaled down images can look far from awesome. To solve this, we simply enable a much better resizing algorithm that is available in Ie7 that produces results similar to what you’d expect from most image editing software. To read more about this, and similar solutions for Ie6, read this insightful article by the Flickr developers.
/* bicubic resizing for non-native sized IMG:
code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }
Print styles
Any decent site should be print ready, as even though we live in a technology driven time, people still like to have a hard copy of some information. This snippet firstly uses a css media declaration, allowing you to include this in your main stylesheet, and not having to place another link in the head of your document. This benefits load time, as even when the page inst being printed, a browser will always download that extra css file, generating an extra http request. The snippet then goes on to include some useful print styles such as printing our link urls, and so on.
/*
* print styles
* inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
*/
@media print {
* { background: transparent !important; color: #444 !important; text-shadow: none; }
a, a:visited { color: #444 !important; text-decoration: underline; }
a:after { content: " (" attr(href) ")"; }
abbr:after { content: " (" attr(title) ")"; } .ir a:after { content: ""; } /* Don't show links for images */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } img { page-break-inside: avoid; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
}
Device orientation
These are just two css media queries you may want to use for your website development. With lots of smart-phones, and tablets being able to orientate their screens from landscape to portrait, you may want to include different styles for each. This is how you would go about achieving this.
@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}
@media all and (orientation:landscape) {
/* Style adjustments for landscape mode goes here */
}
One thing that html5 boilerplate does come with that other starting point templates generally don’t is server sided files. Check out these awesome .htaccess snippets that can easily improve your site.
X-UA-Compatible Server sided
This is the same as the html version mentioned above, forcing the latest rendering engine in IE, and Chrome Frame if it exists. The benefit of including this in your .htaccess file is that it saves you having to declare this in the head of each and every html document you produce.
<IfModule mod_headers.c>
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
IfModule>
IfModule>
Gzip compression
Gzip compression allows us to drastically reduce out file sizes. This .htaccess snippet does the gzipping for us.
# gzip compression.
<IfModule mod_deflate.c>
# html, xml, css, and js:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript text/javascript application/javascript application/json
# webfonts and svg:
<FilesMatch "\.(ttf|otf|eot|svg)$" >
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
Expiry date for cache filetypes
When we cache our files on the user’s machine, we may want to specify how long they remain there, depending on how often we change them ourselves. This snippet provides basic times for common file types, some of which you may wish to change for your own site.
# these are pretty far-future expires headers # they assume you control versioning with cachebusting query params like # <script src="application.js?20100608"> # additionally, consider that outdated proxies may miscache # www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/ # if you don't use filenames to version, lower the css and js to something like # "access plus 1 week" or so <IfModule mod_expires.c> Header set cache-control: public ExpiresActive on # Perhaps better to whitelist expires rules? Perhaps. ExpiresDefault "access plus 1 month" # cache.manifest needs re-reqeusts in FF 3.6 (thx Remy ~Introducing HTML5) ExpiresByType text/cache-manifest "access plus 0 seconds" # your document html ExpiresByType text/html "access" # rss feed ExpiresByType application/rss+xml "access plus 1 hour" # favicon (cannot be renamed) ExpiresByType image/vnd.microsoft.icon "access plus 1 week" # media: images, video, audio ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" # webfonts ExpiresByType font/ttf "access plus 1 month" ExpiresByType font/woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" # css and javascript ExpiresByType text/css "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" </IfModule> # Since we're sending far-future expires, we don't need ETags for # static content. # developer.yahoo.com/performance/rules.html #etags FileETag None
I strongly suggest you go check out Html5 Boilerplate. It is a fantastic resource that houses all of these snippets and more, that I am sure you will find useful.
Get The Only Freelancer crash course you will ever need to read!
Matt is an 18 year old web designer from Scotland, UK. He loves creating beautiful websites across different platforms. High on his things to learn fully are Jquery and php. He is extremely excited by css3 and html5 and can't wait to see them rolled out fully. To learn more about Matt, follow him @QwibbleDesigns, or check out his portfolio.
Friday, April 27th, 2012 16:47
Many developers forget about the HTML tag when it comes to styling their app, but styling the HTML tag can be one of the most important.
Saturday, April 14th, 2012 12:01
Good article. I use HTML5 Boilerplate but as a reference.
Saturday, April 7th, 2012 20:03
Nice article, lots of useful code.
Wednesday, February 8th, 2012 14:10
Nice article! But You have bug in code:
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
IfModule>
IfModule>
Should be:
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
Thanks,
Monday, January 30th, 2012 17:47
Thank you very much.
Spent so much time searching & trying many solutions to remove extra padding when printing to thermal printer in google chrome & internet explorer.
@page { margin: 0.1in; }
worked for me :)
Monday, January 9th, 2012 18:24
Great resource, thanks for sharing.
One thing I found with Force Scrollbar was with Google maps – I’ve just been adding a G map to a page and it broke the ‘scroll’ setting. I guess google have some proprietary styling finding itself into my page. So I just added an !important declaration to the selector and all is fine:
html { overflow-y: scroll !important;}
Monday, December 19th, 2011 23:28
Great article, although they have updated the html5 boilerplate a wee bit, so it would be best to get the code snippets from over their website just to stay current.
I have used this to develop a few html5 wordpress themes and am looking to start from scratch with some e-com platform templates as well. Kudos to the boilerplate team for putting their valuable knowledge in to the public domain.
Thursday, November 17th, 2011 22:53
Very informative, can’t wait to use these goodies.
Tuesday, October 18th, 2011 11:11
Nice list, but it’s worth noting that the X-UA-Compatible meta tag does not validate. I don’t get why though! I guess if you want your code to be 100% validated you’ll have to put that in your htaccess file.
Friday, September 30th, 2011 21:24
html{overflow-y:scroll} breaks jQuery datepicker by default.
Wednesday, May 18th, 2011 16:58
If your using PIE (http://css3pie.com) to render round corners etc in IE6/7/8 I’d not use
as it works fine with IE7, but caused elements to disappear on screen in IE8
To sort the problems I replaced it with
Wednesday, May 18th, 2011 17:00
thats (got stripped out of previous post)…
replace:
meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″
with
meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″
Monday, March 7th, 2011 11:30
the author just set a model reminding me to make a thorough development
Monday, March 7th, 2011 00:22
Hi!
The bolierplate’s site is far from having a valid HTML or CSS. I assume that the site’s code is based on the boilerplate code itself. Does that mean that if we build upon this code we will have a tons of errors in the validators?
Saturday, January 29th, 2011 01:56
These are many great code snippets. These will be very helpful.
Wednesday, January 12th, 2011 00:11
Please do NOT advocate setting text-rendering. It’s not recommended and has been removed from the boilerplate.
Wednesday, November 17th, 2010 15:37
Hi Matthew
this is a very useful and clear breakdown of HTML5 boilerplate – most websites do not need all the snippets and I prefer to cherry-pick. So your guide is very handy! I think also for dropping into old/legacy website templates built in WordPress and Joomla it is better to just put the very useful stuff as it doesn’t risk introducing errors as much to the template.
Notice from your twitter you are also in Glasgow. :)
Sunday, November 14th, 2010 19:21
Also, it’s possible to use “apple-touch-icon-precomposed” to get the icon without the gloss effect.
Sunday, November 14th, 2010 19:18
Apple iOS icons are 57×57. You should be using 114×114 now to support the new retina displays. In iOS 4, non-retina iPhones/Touches and iPads will downsize your 114px icon to 57px and 72px respectively.
Friday, October 1st, 2010 11:21
Amazing list, I learned a ton!
Sunday, September 26th, 2010 22:13
A lot of good stuff here, and something for everyone that can be put to use right away.
Thursday, September 16th, 2010 14:13
Hey, there are a few really good hints.
I gonna use it in my upcoming projects.
Tuesday, September 14th, 2010 17:59
Sorry. Posted comment without a solution. Here it is..
if (typeof jQuery == ‘undefined’)
{
document.write(unescape(“%3Cscript src=’js/jquery-1.3.2.min.js’ type=’text/javascript’%3E%3C/script%3E”));
}
Tuesday, September 14th, 2010 17:56
CDN fallback doesn’t work!
!window.jQuery && document.write(”)
Wednesday, September 8th, 2010 13:34
Great tips! I already use the HTML 5 reset and print reset. Tweeted.
Tuesday, September 7th, 2010 20:11
Hey Matthew, thanks for taking the time to write and post this up. really useful resource.
Tuesday, September 7th, 2010 10:23
The webkit font smoothing css has been removed from boilerplate I believe due to the fact that is makes certain fonts (such as monospace) too thin to read.
Thursday, October 7th, 2010 00:10
Even regular fonts looked worse on my machine. Even in Chrome.
And from the look of the home page it hasn’t been removed
Tuesday, September 7th, 2010 10:16
Great write up, many little tips and tricks in there that i didn’t know.
Thanks!
Tuesday, September 7th, 2010 00:03
Good breakdown of the code.
In regards to the empty conditional statement, it seems that if instead of using conditional statements on BODY tag, they’re used on HTML tag, that empty one becomes unnecessary.
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
In that discussion it’s also pointed out that you could use more granular classes for the BODY tag, i.e. instead of class=”ie6″ and class=”ie7″ for example, it would be class=”ie ie7 lte9 lte8 lte7″ and class=”ie ie8 lte9 lte8″ and so on.
Personally this seems a bit much, but I like the idea of a bit more detail in the classes, I think I would go with the following solution
<!–[if lt IE 7]> <html class="ie ie6"> <![endif]–>
<!–[if IE 7]> <html class="ie ie7"> <![endif]–>
<!–[if IE 8]> <html class="ie ie8"> <![endif]–>
<!–[if IE 9]> <html class="ie ie9"> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–> <html> <!–<![endif]–>
(hopefully the above code comes out okay :))
Monday, September 6th, 2010 23:59
Change this:
<IfModule mod_headers.c>
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
IfModule>
IfModule>
To:
<IfModule mod_headers.c>
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
</IfModule>
</IfModule>
Monday, September 6th, 2010 23:51
You should fix this code:
[CODE]
BrowserMatch MSIE ie
Header set X-UA-Compatible “IE=Edge,chrome=1″ env=ie
IfModule>
IfModule>[/CODE]
to:
[CODE]
BrowserMatch MSIE ie
Header set X-UA-Compatible “IE=Edge,chrome=1″ env=ie
[/CODE]
Monday, September 6th, 2010 06:57
Really nice roundup. I really like the HTML5 reset. Thanks.
Monday, September 6th, 2010 00:06
I’ll have to check out HTML5 Boilerplate to see what may be useful in it, but I think that programmers shouldn’t be lead astray by thinking life is easier when one adds a massive layer of complication to what is already going on in a browser. KISS – is a good acronym, and policy to follow.
I suggest always learning how these self acclaimed silver bullets work, but code your website yourself, from scratch. Especially when you are starting out. Then if you feel the need you are far better prepared to add in another’s code, if you still desire it.
The truth is, anyone who has been programing for some time has their own boiler plate of sorts that they use on every website. The difference is the coder knows it inside and out which makes it easier to track down bugs.
Sunday, September 5th, 2010 21:57
The original http://html5boilerplate.com/ credits the authors of the snippets, but these links have been removed from most snippets you’ve copied. :-(
Sunday, September 5th, 2010 11:36
Nice post. I too have checked Html Boiler Plate a couple of days ago and found the details of commenting, very helpful. And very nice to see you spend your time on this and explaning a bit more on each.
The best way is to use HTML Boiler Plate along than using code snippets seperately.
Saturday, September 4th, 2010 13:01
I was just diving into Html5 Boilerplate, thank you for your article and these additional explanations!
Saturday, September 4th, 2010 06:11
This line: !window.jQuery && document.write(”)
Breaks my layout somehow, I can see the closing parenthesis before the last closing script when I see the page in the browser.
Saturday, September 4th, 2010 23:58
Nevermind, I’t was a problem with a file. now it’s working.
Friday, September 3rd, 2010 21:17
Great post. I strongly recommend to use the entire boilerplate as the base for your projects and when finished delete the parts not in use. It works very well (fantastic browser support, f.e.) and saves a lot of time. The boilerplate really rocks and it will become common standard for the use of HTML5…
Friday, September 3rd, 2010 12:18
Great article Matt, been testing the water with this Boilerplate lately and still wasn’t sure whether to go ahead and start adopting it.
But a break down of the main plus points has really helped.
Friday, September 3rd, 2010 11:26
Thank Matthew – I was thinking of doing the same thing as all the above but you beat me to it and have saved me some time too!
David
Friday, September 3rd, 2010 09:08
I get “unterminated string literal” för this line:
!window.jQuery && document.write(”)
Is that ok?
Monday, September 6th, 2010 20:01
I’ve the same porblem. The correct line is:
!window.jQuery && document.write(unescape(“%3Cscript src=’your_local_path’ type=’text/javascript’%3E%3C/script%3E”))
Friday, September 3rd, 2010 01:22
Excellent snippet list here!
Surprisingly I just tweeted the force scrollbar part a while ago
html { overflow-y: scroll; }
I really dislike the effect it can have on a page/site when a srollbar is not shown. That page jumping is really nasty.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Martin
Friday, September 3rd, 2010 01:22
Excellent snippet list here!
Surprisingly I just tweeted the force scrollbar part a while ago
html { overflow-y: scroll; }
I really dislike the effect it can have on a page/site when a srollbar is not shown. That page jumping is really nasty.
Terry
Tuesday, September 14th, 2010 17:59
Sorry. Posted comment without a solution. Here it is..
if (typeof jQuery == ‘undefined’)
{
document.write(unescape(“%3Cscript src=’js/jquery-1.3.2.min.js’ type=’text/javascript’%3E%3C/script%3E”));
}
Agobox
Friday, September 3rd, 2010 13:39
Very nice work on snippets.
AfterDarkMike
Friday, September 30th, 2011 21:24
html{overflow-y:scroll} breaks jQuery datepicker by default.
Ian
Monday, January 9th, 2012 18:24
Great resource, thanks for sharing.
One thing I found with Force Scrollbar was with Google maps – I’ve just been adding a G map to a page and it broke the ‘scroll’ setting. I guess google have some proprietary styling finding itself into my page. So I just added an !important declaration to the selector and all is fine:
html { overflow-y: scroll !important;}
Alex Flueras
Monday, September 6th, 2010 06:57
Really nice roundup. I really like the HTML5 reset. Thanks.
David Nemes
Saturday, April 14th, 2012 12:01
Good article. I use HTML5 Boilerplate but as a reference.
bedrijf
Friday, April 27th, 2012 16:47
Many developers forget about the HTML tag when it comes to styling their app, but styling the HTML tag can be one of the most important.
Wylie
Saturday, April 7th, 2012 20:03
Nice article, lots of useful code.
Jonah brown
Monday, September 6th, 2010 23:51
You should fix this code:
[CODE]
BrowserMatch MSIE ie
Header set X-UA-Compatible “IE=Edge,chrome=1″ env=ie
IfModule>
IfModule>[/CODE]
to:
[CODE]
BrowserMatch MSIE ie
Header set X-UA-Compatible “IE=Edge,chrome=1″ env=ie
[/CODE]
Jonah Brown
Monday, September 6th, 2010 23:59
Change this:
<IfModule mod_headers.c>
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
IfModule>
IfModule>
To:
<IfModule mod_headers.c>
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
</IfModule>
</IfModule>
Phil
Tuesday, September 7th, 2010 10:23
The webkit font smoothing css has been removed from boilerplate I believe due to the fact that is makes certain fonts (such as monospace) too thin to read.
Cipa
Thursday, October 7th, 2010 00:10
Even regular fonts looked worse on my machine. Even in Chrome.
And from the look of the home page it hasn’t been removed
Ilia
Tuesday, September 7th, 2010 00:03
Good breakdown of the code.
In regards to the empty conditional statement, it seems that if instead of using conditional statements on BODY tag, they’re used on HTML tag, that empty one becomes unnecessary.
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
In that discussion it’s also pointed out that you could use more granular classes for the BODY tag, i.e. instead of class=”ie6″ and class=”ie7″ for example, it would be class=”ie ie7 lte9 lte8 lte7″ and class=”ie ie8 lte9 lte8″ and so on.
Personally this seems a bit much, but I like the idea of a bit more detail in the classes, I think I would go with the following solution
<!–[if lt IE 7]> <html class="ie ie6"> <![endif]–>
<!–[if IE 7]> <html class="ie ie7"> <![endif]–>
<!–[if IE 8]> <html class="ie ie8"> <![endif]–>
<!–[if IE 9]> <html class="ie ie9"> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–> <html> <!–<![endif]–>
(hopefully the above code comes out okay :))
geoff
Tuesday, September 7th, 2010 20:11
Hey Matthew, thanks for taking the time to write and post this up. really useful resource.
Nathaniel
Monday, September 6th, 2010 00:06
I’ll have to check out HTML5 Boilerplate to see what may be useful in it, but I think that programmers shouldn’t be lead astray by thinking life is easier when one adds a massive layer of complication to what is already going on in a browser. KISS – is a good acronym, and policy to follow.
I suggest always learning how these self acclaimed silver bullets work, but code your website yourself, from scratch. Especially when you are starting out. Then if you feel the need you are far better prepared to add in another’s code, if you still desire it.
The truth is, anyone who has been programing for some time has their own boiler plate of sorts that they use on every website. The difference is the coder knows it inside and out which makes it easier to track down bugs.
John Macpherson
Tuesday, September 7th, 2010 10:16
Great write up, many little tips and tricks in there that i didn’t know.
Thanks!
cooljaz124
Sunday, September 5th, 2010 11:36
Nice post. I too have checked Html Boiler Plate a couple of days ago and found the details of commenting, very helpful. And very nice to see you spend your time on this and explaning a bit more on each.
The best way is to use HTML Boiler Plate along than using code snippets seperately.
Thierry Koblentz
Sunday, September 5th, 2010 21:57
The original http://html5boilerplate.com/ credits the authors of the snippets, but these links have been removed from most snippets you’ve copied. :-(
Freizeitler
Friday, September 3rd, 2010 21:17
Great post. I strongly recommend to use the entire boilerplate as the base for your projects and when finished delete the parts not in use. It works very well (fantastic browser support, f.e.) and saves a lot of time. The boilerplate really rocks and it will become common standard for the use of HTML5…
Alan
Friday, September 3rd, 2010 12:18
Great article Matt, been testing the water with this Boilerplate lately and still wasn’t sure whether to go ahead and start adopting it.
But a break down of the main plus points has really helped.
David
Friday, September 3rd, 2010 11:26
Thank Matthew – I was thinking of doing the same thing as all the above but you beat me to it and have saved me some time too!
David
Johan
Friday, September 3rd, 2010 09:08
I get “unterminated string literal” för this line:
!window.jQuery && document.write(”)
Is that ok?
Emerge
Monday, September 6th, 2010 20:01
I’ve the same porblem. The correct line is:
!window.jQuery && document.write(unescape(“%3Cscript src=’your_local_path’ type=’text/javascript’%3E%3C/script%3E”))
Daniel
Saturday, September 4th, 2010 06:11
This line: !window.jQuery && document.write(”)
Breaks my layout somehow, I can see the closing parenthesis before the last closing script when I see the page in the browser.
Daniel
Saturday, September 4th, 2010 23:58
Nevermind, I’t was a problem with a file. now it’s working.
Gopalb
Saturday, September 4th, 2010 09:23
Very nice article…..
Mexicali
Sunday, September 5th, 2010 13:21
Thanks, very usefull post guys.
Maicon Sobczak
Wednesday, September 8th, 2010 13:34
Great tips! I already use the HTML 5 reset and print reset. Tweeted.
Maxime
Saturday, September 4th, 2010 13:01
I was just diving into Html5 Boilerplate, thank you for your article and these additional explanations!
Terry
Tuesday, September 14th, 2010 17:56
CDN fallback doesn’t work!
!window.jQuery && document.write(”)
Anon.
Wednesday, January 12th, 2011 00:11
Please do NOT advocate setting text-rendering. It’s not recommended and has been removed from the boilerplate.
Johnny
Monday, March 7th, 2011 11:30
the author just set a model reminding me to make a thorough development
Codeforest
Thursday, September 9th, 2010 21:30
Really great tips taken from Boilerplate. Thanks
Brett Widmann
Saturday, January 29th, 2011 01:56
These are many great code snippets. These will be very helpful.
andy nightingale
Wednesday, May 18th, 2011 16:58
If your using PIE (http://css3pie.com) to render round corners etc in IE6/7/8 I’d not use
as it works fine with IE7, but caused elements to disappear on screen in IE8
To sort the problems I replaced it with
andy nightingale
Wednesday, May 18th, 2011 17:00
thats (got stripped out of previous post)…
replace:
meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″
with
meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″
henk
Wednesday, February 8th, 2012 14:10
Nice article! But You have bug in code:
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
IfModule>
IfModule>
Should be:
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
Thanks,
Joey
Tuesday, January 31st, 2012 20:26
Nice article, boilerplate is a great resource
Charlie
Monday, January 30th, 2012 17:47
Thank you very much.
Spent so much time searching & trying many solutions to remove extra padding when printing to thermal printer in google chrome & internet explorer.
@page { margin: 0.1in; }
worked for me :)
coilevi
Monday, March 7th, 2011 00:22
Hi!
The bolierplate’s site is far from having a valid HTML or CSS. I assume that the site’s code is based on the boilerplate code itself. Does that mean that if we build upon this code we will have a tons of errors in the validators?
Kevin
Friday, September 24th, 2010 06:28
This is awesome!
Andreas Becker
Thursday, September 16th, 2010 14:13
Hey, there are a few really good hints.
I gonna use it in my upcoming projects.
Luke
Wednesday, November 17th, 2010 15:37
Hi Matthew
this is a very useful and clear breakdown of HTML5 boilerplate – most websites do not need all the snippets and I prefer to cherry-pick. So your guide is very handy! I think also for dropping into old/legacy website templates built in WordPress and Joomla it is better to just put the very useful stuff as it doesn’t risk introducing errors as much to the template.
Notice from your twitter you are also in Glasgow. :)
Bob Ramen
Sunday, September 26th, 2010 22:13
A lot of good stuff here, and something for everyone that can be put to use right away.
Matt
Friday, October 1st, 2010 11:21
Amazing list, I learned a ton!
Nate
Sunday, November 14th, 2010 19:21
Also, it’s possible to use “apple-touch-icon-precomposed” to get the icon without the gloss effect.
Nate
Sunday, November 14th, 2010 19:18
Apple iOS icons are 57×57. You should be using 114×114 now to support the new retina displays. In iOS 4, non-retina iPhones/Touches and iPads will downsize your 114px icon to 57px and 72px respectively.
MadRukus
Sunday, September 12th, 2010 21:37
Thanks for the tips and screen cast link above
Brad
Thursday, November 17th, 2011 22:53
Very informative, can’t wait to use these goodies.
Phil
Monday, December 19th, 2011 23:28
Great article, although they have updated the html5 boilerplate a wee bit, so it would be best to get the code snippets from over their website just to stay current.
I have used this to develop a few html5 wordpress themes and am looking to start from scratch with some e-com platform templates as well. Kudos to the boilerplate team for putting their valuable knowledge in to the public domain.
Marlou
Tuesday, October 18th, 2011 11:11
Nice list, but it’s worth noting that the X-UA-Compatible meta tag does not validate. I don’t get why though! I guess if you want your code to be 100% validated you’ll have to put that in your htaccess file.