mirror of
https://github.com/gwenhael-le-moine/ledgerrb.git
synced 2025-01-10 05:24:24 +01:00
161 lines
6.8 KiB
Markdown
161 lines
6.8 KiB
Markdown
[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation
|
||
table of contents](TOC.md)
|
||
|
||
# The HTML
|
||
|
||
## Conditional `html` classes
|
||
|
||
A series of IE conditional comments apply the relevant IE-specific classes to
|
||
the `html` tag. This provides one method of specifying CSS fixes for specific
|
||
legacy versions of IE. While you may or may not choose to use this technique in
|
||
your project code, HTML5 Boilerplate's default CSS does not rely on it.
|
||
|
||
When using the conditional classes technique, applying classes to the `html`
|
||
element has several benefits:
|
||
|
||
* It avoids a [file blocking
|
||
issue](http://webforscher.wordpress.com/2010/05/20/ie-6-slowing-down-ie-8/)
|
||
discovered by Stoyan Stefanov and Markus Leptien.
|
||
* It avoids the need for an empty comment that also fixes the above issue.
|
||
* CMSes like WordPress and Drupal use the body class more heavily. This makes
|
||
integrating there a touch simpler.
|
||
* It still validates as HTML5.
|
||
* It uses the same element as Modernizr (and Dojo). That feels nice.
|
||
* It can improve the clarity of code in multi-developer teams.
|
||
|
||
|
||
## The `no-js` class
|
||
|
||
Allows you to more easily explicitly add custom styles when JavaScript is
|
||
disabled (`no-js`) or enabled (`js`). More here: [Avoiding the
|
||
FOUC](http://paulirish.com/2009/avoiding-the-fouc-v3/).
|
||
|
||
|
||
## The order of meta tags, and `<title>`
|
||
|
||
As recommended by [the HTML5
|
||
spec](http://www.whatwg.org/specs/web-apps/current-work/complete/semantics.html#charset)
|
||
(4.2.5.5 Specifying the document's character encoding), add your charset
|
||
declaration early (before any ASCII art ;) to avoid a potential
|
||
[encoding-related security
|
||
issue](http://code.google.com/p/doctype-mirror/wiki/ArticleUtf7) in IE. It
|
||
should come in the first [1024
|
||
bytes](http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset).
|
||
|
||
The charset should also come before the `<title>` tag, due to [potential XSS
|
||
vectors](http://code.google.com/p/doctype-mirror/wiki/ArticleUtf7).
|
||
|
||
The meta tag for compatibility mode [needs to be before all elements except
|
||
title and meta](http://h5bp.com/f "Defining Document Compatibility - MSDN").
|
||
And that same meta tag can only be invoked for Google Chrome Frame if it is
|
||
within the [first 1024
|
||
bytes](http://code.google.com/p/chromium/issues/detail?id=23003).
|
||
|
||
|
||
## X-UA-Compatible
|
||
|
||
This makes sure the latest version of IE is used in versions of IE that contain
|
||
multiple rendering engines. Even if a site visitor is using IE8 or IE9, it's
|
||
possible that they're not using the latest rendering engine their browser
|
||
contains. To fix this, use:
|
||
|
||
```html
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
```
|
||
|
||
The `meta` tag tells the IE rendering engine it should use the latest, or edge,
|
||
version of the IE rendering environment.
|
||
|
||
This `meta` tag ensures that anyone browsing your site in IE is treated to the
|
||
best possible user experience that their browser can offer.
|
||
|
||
This line breaks validation. To avoid this edge case issue it is recommended
|
||
that you **remove this line and use the `.htaccess`** (or other server config)
|
||
to send these headers instead. You also might want to read [Validating:
|
||
X-UA-Compatible](http://groups.google.com/group/html5boilerplate/browse_thread/thread/6d1b6b152aca8ed2).
|
||
|
||
If you are serving your site on a non-standard port, you will need to set this
|
||
header on the server-side. This is because the IE preference option 'Display
|
||
intranet sites in Compatibility View' is checked by default.
|
||
|
||
|
||
## Mobile viewport
|
||
|
||
There are a few different options that you can use with the [`viewport` meta
|
||
tag](https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 "Viewport and
|
||
Media Queries - The Complete Idiot's Guide"). You can find out more in [the
|
||
Apple developer docs](http://j.mp/mobileviewport). HTML5 Boilerplate comes with
|
||
a simple setup that strikes a good balance for general use cases.
|
||
|
||
```html
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
```
|
||
|
||
## Favicons and Touch Icon
|
||
|
||
The shortcut icons should be put in the root directory of your site. HTML5
|
||
Boilerplate comes with a default set of icons (include favicon and one Apple
|
||
Touch Icon) that you can use as a baseline to create your own.
|
||
|
||
Please refer to the more detailed description in the [Extend section](extend.md)
|
||
of these docs.
|
||
|
||
## Modernizr
|
||
|
||
HTML5 Boilerplate uses a custom build of Modernizr.
|
||
|
||
[Modernizr](http://modernizr.com) is a JavaScript library which adds classes to
|
||
the `html` element based on the results of feature test and which ensures that
|
||
all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv).
|
||
This allows you to target parts of your CSS and JavaScript based on the
|
||
features supported by a browser.
|
||
|
||
In general, in order to keep page load times to a minimum, it's best to call
|
||
any JavaScript at the end of the page because if a script is slow to load
|
||
from an external server it may cause the whole page to hang. That said, the
|
||
Modernizr script *needs* to run *before* the browser begins rendering the page,
|
||
so that browsers lacking support for some of the new HTML5 elements are able to
|
||
handle them properly. Therefore the Modernizr script is the only JavaScript
|
||
file synchronously loaded at the top of the document.
|
||
|
||
|
||
## The content area
|
||
|
||
The central part of the boilerplate template is pretty much empty. This is
|
||
intentional, in order to make the boilerplate suitable for both web page and
|
||
web app development.
|
||
|
||
### Google Chrome Frame
|
||
|
||
The main content area of the boilerplate includes a prompt to install Chrome
|
||
Frame (which no longer requires administrative rights) for users of IE 6. If
|
||
you intended to support IE 6, then you should remove the snippet of code.
|
||
|
||
### Google CDN for jQuery
|
||
|
||
The Google CDN version of the jQuery JavaScript library is referenced towards
|
||
the bottom of the page using a protocol-independent path (read more about this
|
||
in the [FAQ](faq.md)). A local fallback of jQuery is included for rare instances
|
||
when the CDN version might not be available, and to facilitate offline
|
||
development.
|
||
|
||
Regardless of which JavaScript library you choose to use, it is well worth the
|
||
time and effort to look up and reference the Google CDN (Content Delivery
|
||
Network) version. Your users may already have this version cached in their
|
||
browsers, and Google's CDN is likely to deliver the asset faster than your
|
||
server.
|
||
|
||
### Google Analytics Tracking Code
|
||
|
||
Finally, an optimized version of the latest Google Analytics tracking code is
|
||
included. Google recommends that this script be placed at the top of the page.
|
||
Factors to consider: if you place this script at the top of the page, you’ll be
|
||
able to count users who don’t fully load the page, and you’ll incur the max
|
||
number of simultaneous connections of the browser.
|
||
|
||
Further information:
|
||
|
||
* [Optimizing the asynchronous Google Analytics
|
||
snippet](http://mathiasbynens.be/notes/async-analytics-snippet).
|
||
* [Tracking Site Activity - Google
|
||
Analytics](http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html).
|