Archives

20 Snippets You should be using from Html5 Boilerplate

2010-09-02 17:00
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 8217;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 8217;t want to start using html5 boilerplate as your base template. Html 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 8217;t required. 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. 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. 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. jQuery loading fallback A vast majority of sites these...
Read More...