,

[HTML & CSS General] html5-boilerplate を読む

公開日: 2014/10/20
更新日: 2018/11/07

memo.

html5-boilerplate を確認してみます。
どんどん更新されるので、下記のバージョンでリンクを張っておきます。

全般的にこちらを参考にさせて頂きました。

head

lt-ie* class がないですね。

<!doctype html>
<html class="no-js" lang="">

Initializr には、こんな形で残っています。

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

IE=edge で viewport も指定。

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

favicon.ico や apple-touch-icon の記載はなし。

        <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->

こちらを参考にするかな。

<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- IE 10+ "Metro" Tiles - 144x144 pixels in size -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">
<!-- Touch Icons - iOS and Android 2.1+ 152x152 pixels in size. -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 96x96 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">

h5bp では、tileicon を browserconfig.xml というファイルで指定しているよう。

normalize.css と modernizr.js

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>

modernizr.js をキチンと活用すべきなんだろうな。

body

IE7以下でアップグレードコメントを表示。

        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

jQuery を fallback

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.1.min.js"><\/script>')</script>

ちなみに Bootstrap の fallback はどうやるのか思い浮かばず調べると、なかなか難しいですね。

plugins.js の内容は、Console API まわりのエラーが IE で出ないように対応しているものと理解しています。
JavaScript 開発をバリバリしているわけではないので自信ないですが、こういったケースの対策かな。

        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

Google Analytics コード。

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->

補遺