|
Как заставить все браузеры правильно отрисовывать разметку
|
|
| IUMag |
Дата: Суббота, 02.10.2010, 06:39 | Сообщение # 1 |
FUбанда
| Награды: | 40 | |
| Репутация: | 3372 | |
| Статус: | Оффлайн | |
|
Элементы HTML 5, которые используются в нашем примере:
header
footer
nav
article
hgroup
Только чтение названий элементов указывает на их назначение. Для этого их и придумали!
<div> во всех ваших без табличных дизайнах, и начать использовать для заголовков “<header>”, а для футеров “<footer>”. <hgroup>. Он определяет группу заголовочных элементов(<h1>- <h6>), таким образом вы, например, можете группировать название поста блога и подзаголовок вместе. Нужно полагать данный элемент не заголовком страницы, а заголовком текущей секции.
Шаг 1: HTML
Представим наиболее часто используемый шаблон - 2 колонки с заголовком и футером:
Такой шаблон обычно сопровождается водопадом элементов <div> (или <table>). Но в HTML 5 можно создавать код страницы вполне естественно.
Code <!DOCTYPE html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <html> <head> <title><!-- Ваш заголовок --></title> </head> <body> <header> <!-- ... --> </header> <nav> <!-- ... --> </nav> <div id="main"> <!-- ... --> </div> <footer> <!-- ... --> </footer> </body> </html>
И для завершения нужно добавить несколько простых сообщений в элемент “main”:
Code <article>
<hgroup>
<h2>Title</h2>
<h3>Subtitle</h3>
</hgroup>
<!-- --->
</p>
</article>
Шаг 2: CSS
<div> позиционирование элементов выполняется просто — мы знаем, как они обрабатываются каждым браузером, поэтому очень просто написать CSS код для них. Однако, это только частный случай, так как каждый браузер применяет к странице таблицу стилей по умолчанию. Даже если Вы ничего не указали, существует CSS, который работает каждый раз при загрузке страницы в Firefox или IE. Например, стиль, который используется для <div> в файле по умолчанию “html.css”, который используется Firefox:
Code html, div, map, dt, isindex, form {
display: block;
}
Но что происходит, когда браузер находит элемент, который не может распознать? Определенного ответа на данный вопрос нет. Такой элемент может остаться без стиля вообще, может использоваться стиль по умолчанию, а может вообще не выводится на экран. Таким образом, нам нужно быть полностью уверенными, что любой из наших новых элементов будет иметь стиль CSS:
Code /* Примечание: Делаем элементы HTML 5 блочными для придания целостности стилю */
header, nav, article, footer, address {
display: block;
}
Теперь мы можем обращаться с этими элементами как с <div>.
Проблема Теперь давайте взглянем на наш шаблон. Код собран в единое целое и протестирован в нескольких браузерах. Так шаблон выглядит в Safari 4:
Однако в Internet Explorer 6 вид будет таким:
Что не так на рисунке? Однозначная установка display: block; в CSS указывает браузеры на наши намерения в отношении элемента. К сожалению, IE игнорирует элементы, которые не может распознать, независимо от CSS. Наш контент смещается влево в родительском контейнере, как будто элементов HTML 5 не существует. Каким-то образом нам нужно заставить IE выводить неизвестные элементы и задавать для них соответствующие стили.
Шаг 3: JavaScript К счастью, существует способ заставить IE распознавать новые элементы с помощью простого кода JavaScript. Просто используется вызов document.createElement()для каждого нового не распознанного элемента. Обычно вызов данного метода используется для вставки элемента непосредственно в ответвление DOM; другими словами, в существующий контейнер внутри тэга <body>. Вы также может использовать его для фиксирования неизвестного элемента. Однако, этот трюк работает при вызове document.createElement() в тэге<head> без ссылок на содержащий элемент!
Code document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
После добавления JavaScript в наш пример, взглянем на него снова в Internet Explorer:
Отлично. Internet Explorer 6 теперь изображает код HTML 5 также, как и Safari 4.
Заключение Многие дизайнеры ожидают полноценной поддержки HTML 5 в большинстве браузеров. Мы можем начинать использовать HTML 5 уже сегодня - одна строчка в CSS и одная строчка кода в JavaScript на элемент.
Пока всем. Увидемся через 2 недели
|
|
| ВэйДлин |
Дата: Воскресенье, 10.10.2010, 10:28 | Сообщение # 2 |
| Сообщений: | 505 | |
| Награды: | 59 | |
| Репутация: | 521 | |
| Статус: | Оффлайн | |
|
оО Мелко
|
|
| James23 |
Дата: Воскресенье, 10.10.2010, 11:53 | Сообщение # 3 |
| Сообщений: | 350 | |
| Награды: | 48 | |
| Репутация: | 291 | |
| Статус: | Оффлайн | |
|
только у меня страница криво показывается?
|
|
| ШеВ) |
Дата: Воскресенье, 10.10.2010, 11:55 | Сообщение # 4 |
| Награды: | 112 | |
| Репутация: | 2642 | |
| Статус: | Оффлайн | |
|
James23, и у меня криво
|
|
| Lex@ |
Дата: Воскресенье, 10.10.2010, 11:56 | Сообщение # 5 |
Отпуск окончен, пора работать.
| Сообщений: | 1237 | |
| Награды: | 75 | |
| Статус: | Оффлайн | |
|
Исправил.
|
|
| Julike |
Дата: Воскресенье, 10.10.2010, 12:09 | Сообщение # 6 |
| Сообщений: | 3447 | |
| Награды: | 91 | |
| Репутация: | 1383 | |
| Статус: | Оффлайн | |
|
Щикарно. HTML5 вообще рульная вещь.
|
|
| Drooke |
Дата: Воскресенье, 10.10.2010, 13:54 | Сообщение # 7 |
| Сообщений: | 564 | |
| Награды: | 102 | |
| Репутация: | 1920 | |
| Статус: | Оффлайн | |
|
Технология движется вперед и работать становится легче и приятней 
|
|
| -Grigor- |
Дата: Воскресенье, 10.10.2010, 18:19 | Сообщение # 8 |
|
HTML5 и CSS3 лучше всех,особенно CSS3,с помощью последнего уже можно делать анимацию без js
|
|
| 212th |
Дата: Воскресенье, 10.10.2010, 22:37 | Сообщение # 9 |
| Сообщений: | 1988 | |
| Награды: | 65 | |
| Репутация: | 3534 | |
| Статус: | Оффлайн | |
|
Quote (Julike) Щикарно. HTML5 вообще рульная вещь.
Quote (-Grigor-) HTML5 и CSS3 лучше всех,особенно CSS3,с помощью последнего уже можно делать анимацию без js
да, всё стремится к совершенству 
|
|
| [hAcK] |
Дата: Понедельник, 25.10.2010, 18:16 | Сообщение # 10 |
| Сообщений: | 428 | |
| Награды: | 16 | |
| Статус: | Оффлайн | |
|
|
|
