Работа со скриптами. Урок 04. Placeholder + html5shiv

Чтобы увидеть как будет выглядеть сайт в старых версиях Internet Explorer, нужно открыть его в Internet Explorer10, нажать клавишу F12, которая активирует панель инструментов для разработчиков.
В панели инструментов разработчика выбираем пункт «Browser mode: IE10». Теперь можно  выбрать нужную версию IE и перезагрузить страницу, чтобы увидеть как в ней отображается сайт.

В Internet Explorer 9 и ниже вокруг картинок появляется синяя рамка. Исправляется стилем

img {

border: 0;
outline: 0;
}

И ещё в IE не отображается placeholder - это заполнитель формы, подсказывающий, что туда вводить.
Последнее лечится скриптом.
Вводим в  Google jquery placeholder и первая ссылка приводит нас на сайт https://github.com/mathiasbynens/jquery-placeholder Скачиваем. Кстати, для скачивания можно использовать ссылку с гитхаба

Скачиваем скрипт командой

$ bower i https://github.com/mathiasbynens/jquery-placeholder.git

Подключаем в index.html

<script src="bower_components/jquery-placeholder/jquery.placeholder.min.js"></script>

В custom.js добавляем команду

$('input, textarea').placeholder();

Если нужна стилизация placeholder, код в custom.js выглядит так:

$('input, textarea').placeholder({ 

customClass: 'my-placeholder' 

}); 

Затем в css указываем стили для класса my-placeholder

html5shiv

Если мы испoльзуем современные теги header, footer, article, section, они не поддерживаются старыми IE. 

Выручает скрипт  html5shiv https://github.com/aFarkas/html5shiv

Скачиваем

$ bower i https://github.com/aFarkas/html5shiv.git

Подключаем

<!--[if lt IE 9]>
 <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

</head>

Подключаем преде закрывающим </head>, так как скрипт необходим для загрузки html кода.

Условие [if lt IE 9] означает "все версии IE младше 9" 

Про условия можно почитать здесь: http://htmlbook.ru/samlayout/internet-explorer/uslovnye-kommentarii