Some notes about the HTML5 boilerplate

Recently in the study of the template of HTML5 boilerplate, as clues can be organized to learn some of the front-end best practice, better than in the vast number of documents in the sea ... AHA haha ...

What is the start of IE probing and No-js class?

Modernizer detected that the browser enabled JS will be replaced by the. JS No-js, so that in the CSS can be disabled JS or JS-enabled browser to add additional rules, like this

{    /**/}

is a kind of workaround that has no if-else CSS. The same is true of other lt-ie* classes.

See also: What is the purpose of the HTML "No-js" class?

<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >

Used to let IE use the highest available version of the mode, e.g. IE8 with IE8 mode, IE9 with IE9 mode. See what's the difference if <meta http-equiv= "x-ua-compatible" content= "Ie=edge" > exists or not?

The old version of the HTML5 boilerplate also bring chrome=1 this value, is to let Google Chrome frame this plugin of IE can use Chrome features and JS engine, but this plugin has retired, so the new version of the HTML5 Boilerplate also removed this value.

Note that this code will not be able to provide the validation, of course, can justly ignore it ah hahaha. If you really care, you can use. htaccess, refer to this discussion, or directly in the server code to send this header (such as the port is not 80 and want to be compatible with IE).

About Favicon

Web App settings icon for iOS to be placed from Safari to desktop: Configuring Web Applications

About Favicon, it is generally best to use ICO (some older browsers do not support png= =), there are some tease than the browser (e.g.360) only willing to use the site root directory Favicon.ico (not even the port), these points to note.

Reference:

• Adding a favicon to a static HTML page
• [Rack Station] Why is the Web site's root record best favicon.ico and robots.txt exist?

Where's CharSet put?

In order to prevent the use of improper encoding to attack (ie will guess with utf-7), be sure to declare charset, and to be placed in the HTML file of the first 1024byte (Reference HTML5 Standard), preferably placed in front of the title (refer to Google Dcotype)

Viewport

Width=device-width, initial-scale=1 generally get better results in mobile browsers (especially when responsive design is available). No, usually the mobile browser will be based on the size of the computer screen drawing, the opening of the Web page is like a PC version of the thumbnail ... ）

This primer slides fine.

Normalize.css

Note now maintained normalize.cssv3 to IE only support to ie8,ie6~7 need to be no longer maintained NORMALIZE.CSSV1 (but want to use HTML5 will not consider to take care of these low-version ie 2333)

The source code comment is also a good material to learn the compatibility of each browser.

Main.css

It comes with a bunch of helper classes and some opinionated default values (e.g. the default text color is set to #222 rather than the glare of pure black), and a bunch of print formats are set and the hidden styles are set.

Modernizr

A very famous JS library to deal with the new features and compatibility of the browser, slightly complicated, refer to the official website can

Plugins.js

Used to put a variety of plugins (including jquery plugins). There is a piece of code is used to prevent some tease than browser without console cause error, after running this kind of browser will be more than a windows.console, inside the various methods (e.g. Window.console.log) are empty functions, so the call will not have any effect but will not be an error.

How to use HTML5 boilerplate and bootstrap at the same time

You can use INITIALIZR

Reference: is Bootstrap a complement or an alternative to HTML5 boilerplate or viceversa?

Why do you use//make an agreement when referencing an outbound file?

In order for the browser to load different files with different protocols (https/http), there will be no annoying hints to run out, refer to the Protocol-relative URL

Webpagetest

When digging through official documents and related links, I stumbled upon this good thing: webpagetest, you can detect the performance and network IO of multiple browsers (including some mobile browsers) in different locations, so you can do profiling for browsers that don't have developer tools.

Google Doctype

Some Web development tips collection, the original address has been hung, but Google code on the image: Google doctype image

Some notes about the HTML5 boilerplate