Додавання підтримки елементів html5 в браузери
Нагадаємо, що, коли веб-браузер стикається з невідомим елементом і цей елемент пов'язаний з таблицею стилів CSS, це створює проблеми. Щоб бути більш конкретним, багато старих браузерів сприймати невідомий елемент <header> як вбудований (або рівень тексту) елемент, а не як елемент блоку. Вбудовані елементи, як правило, знаходяться в блоці тексту, наприклад, елементи <strong> і <em> в тексті. Блокові елементи використовують блоковий простір на сторінці і створення нових ліній при додаванні, наприклад, елемент <p> і всі елементи заголовку знаходяться на рівні блоку. Коли браузер звертається до блокового елементу, як вбудованому, результат часто буває хибним. Щоб вирішити цю проблему, ви можете додати рядок коду CSS, щоб змусити нові елементи HTML5 відображатись в якості блоку, а як не вбудовані.
В текстовому редакторі відкрийте таблицю стилів reset.css яка знаходиться в папці HTML5_04lessons. У верхній частині сторінки (після перших двох рядків коментарів), додайте наступний блок коду:
header, section, aside, nav, footer, figure, figcaption {
display:block;
}
Ви перерахували всі селектори, які ви будете використовувати в цьому уроці. При необхідності, ви можете повернутися в цей розділ і додати нові селектори HTML5. Ви вставили ці правила в reset.css замість base.css, таким чином Ви можете використовувати цей файл reset.css для всіх своїх майбутніх сторінок HTML5.
Цей крок має сенс тільки, якщо вам потрібно використовувати старі браузери. Збережіть ваш CSS файл і закрийте його. Перегляньте сторінку в браузері. Якщо використовуєте старий браузер, який відображав помаранчевим кольором область заголовка, то тепер фон повинен бути білим знову, демонструючи, що стиль <header> відображався належним чином.
Якщо ваш браузер як і раніше відображає помаранчевим кольором, як показано в кроці 8 останньої вправи, то швидше за все, ви використовуєте Internet Explorer 6,7 і 8. Ці браузери вимагають трохи більше часу, щоб допомогти їм відображати елементи HTML5. Причина цього в тому, що коли ці браузери стикаються з незнайомими елементами - вони ігнорують його повністю, тому рішення в кроці 1 не працює.
Одне з рішень для додавання підтримки тегів HTML5 в Internet Explorer 6, 7 і 8 поставляється у вигляді бібліотеки Modernizr JavaScript. Бібліотека Modernizr додає підтримку HTML5 для відображення елементів у старих браузерах. JavaScript в бібліотеці призначений для виявлення особливостей в будь-якому браузері, а потім дозволяє вам вибрати стиль по необхідності. Тепер ви будете додати посилання на бібліотеку Modernizr.
Перейдіть на ваш 04_index_work.html. У головній частині вашого HTML, знайдіть посилання на два зовнішніх стилі, а потім додайте наступні рядки:
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="base.css" rel="stylesheet" type="text/css" />
<script src="modernizr-2.0.js" type="text/javascript"></script>
Збережіть файл і протестуйте його з Internet Explorer 6, 7 або 8. В заголовку тепер має відображатися свій оригінальний колір фону, як і передбачалося.
Рис. 5 - В старих браузерах, таких як Internet Explorer 6, при використанні бібліотеки Modernizr JavaScript з'явиться елемент HTML5 <header>.
Це доповнення означає, що ви можете тепер продовжувати використовувати нові елементи HTML5. Є кілька питань для розгляду, хоча, бібліотека Modernizr не є кращим варіантом, бо вона потребує, щоб був увімкнений Javascript, в рідкісних випадках веб-браузер немає підтримки JavaScript, JavaScript може бути вимкнений - в таких випадках, жодний з варіантів нам не підійдуть і сторінка не буде виведена правильно. У переважній більшості браузерів все таки реалізована підтримка JavaScript, і відключають його рідко.
Додавання елементів HTML5 <nav>
Далі ви будете додавати нові елементи секціонування HTML5, розділимо сторінку на логічні розділи, за допомогою нових елементів секціонування <section>, <article>, <aside> і <nav>. Ви почнете, додавши елемент <nav>, так як це найбільш інтуїтивний них.
Знайдіть наступний фрагмент коду в HTML:
<div id="mainnav">
<ul>
<li><a href="index.html">Home
</a></li>
<li><a href="ourcompany.html">Our Company</a></li>
<li><a href="policies.html">Policies and Procedures
</a></li>
<li><a href="doc_repository.html">Document Repository</a></li>
<li><a href="forum.html">News & Events</a></li>
</ul>
</div>
Цей код використовує загальний список на основі навігаційної техніки CSS. Список в цьому коді і невпорядковано вкладені в DIV називається Mainnav. Новий <nav> елемент HTML5 може замінити оригінальний div і ID.
Замініть <div> теги в наступному коді:
<nav>
<ul>
<li><a href="index.html">Home
</a></li>
<li><a href="ourcompany.html">Our Company</a></li>
<li><a href="policies.html">Policies and Procedures
</a></li>
<li><a href="doc_repository.html">Document Repository</a></li>
<li><a href="forum.html">News & Events</a></li>
</nav>
Тепер ви повинні оновити CSS селектор, що використовуються в таблиці стилів. В текстовому редакторі, відкрийте base.css і знайдіть наступний код:
#mainnav {
background-color:#666;
height:40px;
}
Видаліть ID селектор #mainnav і замініть його nav селектором, як описано нижче.
Внесіть такі зміни в код:
nav {
background-color:#666;
height:40px;
}
Стилі підключені до елементу nav, а не до #mainnav ID. Виберіть Файл> Зберегти, щоб зберегти стиль. Перейдіть на вашу HTML сторінку і збережіть. Перегляньте сторінку в браузері і зверніть увагу, що навігація ще не працює належним чином.
Рис. 6 - Ваша навігація вивелася не коректно, оскільки необхідно оновити всі стилі пов'язані з #nav ID.
Навігація вивелась некоректно, тому що є інші стилі, які використовують ID name #mainnav, необхідно оновити їх усіх.
Закрийте браузер і повертайтесь в текстовий редактор.
У вашому base.css, знайдіть правила які відносяться до nav. Вам необхідно оновити три різних селекторів: #mainnav li, #mainnav ul li a і #mainnav ul li a:hover. Ці селектори визивають контекстні селектори в CSS, і вони орієнтовані на конкретні теги в рамках батьківського стилю (в даному випадку, ID #nav). Наприклад, #mainnav li визначає стиль для елементів списку (li) в елементі #nav div.
Внесіть зміни виділені червоним кольором:
nav li {
float:left;
width:170px;
height:40px;
background-color:#CCC;
text-align:center;
border-left:1px black solid;
border-right:1px black solid;
line-height:40px;
}
nav ul li a {
color:#ffffff;
text-decoration:none;
display:block;
}
nav ul li a:hover {
background-color:#666666;
color:#D2CD2F;
}
Виберіть Файл> Зберегти. Перегляньте сторінку в браузері, ваша навігація повинна виглядати, як це було спочатку.
Якщо навігація як і раніше відображається неправильно, спробуйте оновити сторінку в браузері. Деякі браузери утримують в кеші стару сторінку і через те потрібно її перезавантажити.
Рис. 7 - Ваша навігація тепер використовує елемент HTML5 <nav>.