![Page 1: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/1.jpg)
Профессиональный верстальщик. Кто он?
Макишвили Вадим
![Page 2: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/2.jpg)
Кому полезен доклад
1.Для разработчика
2.Для руководителя/заказчика
![Page 3: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/3.jpg)
Немного терминологии
• HTML — язык разметки гипертекста
![Page 4: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/4.jpg)
Немного терминологии
• HTML — язык разметки гипертекста
• Вёрстка — совокупность всех клиентских технологий, необходимых для создания web-страницы
![Page 5: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/5.jpg)
Немного терминологии
• HTML — язык разметки гипертекста
• Вёрстка — совокупность всех клиентских технологий, необходимых для создания web-страницы
Зачем разделять эти термины?
![Page 6: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/6.jpg)
Считается, что
• Вёрстка — это и есть HTML
![Page 7: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/7.jpg)
Считается, что
• Вёрстка — это и есть HTML• HTML — это просто
![Page 8: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/8.jpg)
Я утверждаю
• Вёрстка — это не только HTML
![Page 9: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/9.jpg)
Я утверждаю
• Вёрстка — это не только HTML • Вёрстка — это сложно
![Page 10: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/10.jpg)
В чём же сложность верстки
?
![Page 11: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/11.jpg)
В чём же сложность верстки• Кроссбраузерная?
![Page 12: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/12.jpg)
В чём же сложность верстки• Кроссбраузерная?• Валидная?
![Page 13: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/13.jpg)
В чём же сложность верстки• Кроссбраузерная?• Валидная?• С доступной функциональностью
– без картинок– без стилей– без скриптов
![Page 14: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/14.jpg)
Я утверждаю
Не получится сверстать качественную страницу,не занимаясь версткой
профессионально
![Page 15: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/15.jpg)
Профессионально1. Зарабатывать деньги на жизнь
(от слова профессия)
2. Делать свою работу оч.качественно (от слова профессионализм)
![Page 16: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/16.jpg)
Профессионализм
• Это вовсе не перечень неких предметных знаний
![Page 17: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/17.jpg)
Профессионализм
• Это вовсе не перечень неких предметных знаний
• Это обязательно — владение ключевыми знаниями своей профессии
![Page 18: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/18.jpg)
Рендеринг
“Рендеринг — процесс построения и отображения сцены по ее описанию в базе данных”
Яндекс.Словари: ИнформатикаЭнциклопедический словарь-справочник
![Page 19: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/19.jpg)
Рендеринг
Процесс построения дерева элементови отображения их в окне браузера
![Page 20: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/20.jpg)
Режимы рендеринга
1. Quirks Mode (QM)2. Standard Mode (SM)3. Almost Standard Mode (ASM)
![Page 21: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/21.jpg)
Режимы рендеринга
Почти стандартный режим (ASM)– отличается от SM способом выравнивания картинки в строчном элементе и в ячейке таблицы
– придумка разработчиков Gecko
– MSIE6 в SM выравнивает картинку внутри ячейки не так, как предлагает спецификация
![Page 22: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/22.jpg)
Отличия режимов рендерингаПочти Стандартный Стандартный
![Page 23: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/23.jpg)
Отличия режимов рендеринга
“Images, Tables, and Mysterious Gaps”
http://developer.mozilla.org/...
![Page 24: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/24.jpg)
Отличия режимов рендерингаБоксовая модель
Режимуловок
Стандартныйрежим
![Page 25: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/25.jpg)
Отличия режимов рендерингаБоксовая модель
Но это же нелогично?!
![Page 26: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/26.jpg)
Отличия режимов рендерингаБоксовая модель
«Возьмите любую коробку. Положите в нее что-нибудь меньшее по размеру. И попросите кого-либо измерить размер коробки. Вероятнее всего, человек измерит размер от границы до границы, никто не станет судить о размере коробки по величине его содержимого»
Питер-Пол Кох (Peter-Pol Koch)
![Page 27: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/27.jpg)
Какой выбрать режим?• Можно ли порекомендовать для верстки один режим?
![Page 28: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/28.jpg)
Какой выбрать режим?• Можно ли порекомендовать для верстки один режим?
• Группа верстки Яндекса выбирает SM
![Page 29: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/29.jpg)
Какой выбрать режим?• Можно ли порекомендовать для верстки один режим?
• Почему группа верстки Яндекса выбирает SM– Quirks mode неизменен
![Page 30: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/30.jpg)
Какой выбрать режим?• Можно ли порекомендовать для верстки один режим?
• Почему группа верстки Яндекса выбирает SM– Quirks mode неизменен– Стандарты развиваются
![Page 31: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/31.jpg)
Какой выбрать режим?• Можно ли порекомендовать для верстки один режим?
• Почему группа верстки Яндекса выбирает SM– Quirks mode неизменен– Стандарты развиваются– Мы за прогресс
![Page 32: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/32.jpg)
Как включить определенный режим?
W3C требует: “Web-страница должна начинаться с определения версии HTML”
![Page 33: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/33.jpg)
Как включить определенный режим?
W3C требует: “Web-страница должна начинаться с определения версии HTML”
<!DOCTYPE>
![Page 34: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/34.jpg)
Как включить определенный режим?
W3C требует: “Web-страница должна начинаться с определения версии HTML”
<!DOCTYPE>
Как развитие стандартов заставило нас использовать эту инструкцию?
![Page 35: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/35.jpg)
Как включить определенный режим?
Тодд Фарнер (Todd Farhner) предложил разработчикам браузеров элегантное решение:
Doctype Switching
• DOCTYPE есть ➔ Стандартный режим
![Page 36: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/36.jpg)
Как включить определенный режим?
Тодд Фарнер (Todd Farhner) предложил разработчикам браузеров элегантное решение:
Doctype Switching
• DOCTYPE есть ➔ Стандартный режим• DOCTYPE нет ➔ Режим уловок
![Page 37: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/37.jpg)
Как включить определенный режим?
Поддержка Doctype Switching:• MSIE 5 for Mac
• MSIE 6 for Win
• Opera 7.0
• Mozilla 1.0
• Netscape 7.0
![Page 38: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/38.jpg)
И мы говорим: спасибо тебе, Тодд Фарнер!
![Page 39: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/39.jpg)
Режим уловоквключается
1. <!DOCTYPE> нет или2. <!DOCTYPE> записан неправильно
![Page 40: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/40.jpg)
Стандартный режим включается
1. <!DOCTYPE> есть и2. <!DOCTYPE> записан правильно
![Page 41: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/41.jpg)
Стандартный режим включается
1. <!DOCTYPE> есть и2. <!DOCTYPE> записан правильно
Логичный вывод:Правильный <!DOCTYPE> переключает браузер в стандартный режим рендеринга
![Page 42: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/42.jpg)
Правильные Doctype• Есть фиксированное число инструкций, которые должны выполнять браузеры, чтобы правильно интерпретировать написанный верстальщиком <!DOCTYPE>
• Поэтому есть конечное число доктайпов, которые переключают браузер в стандартный режим рендеринга документа
![Page 43: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/43.jpg)
Правильные Doctype
• Запомнить все доктайпы можно• Но не нужно
![Page 44: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/44.jpg)
Правильные Doctype
• Запомнить все доктайпы можно• Но не нужно
• Запомнить нужно поисковый запрос:
![Page 45: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/45.jpg)
Зачем определять режим?• Мы определились, что верстаем страницу в Стандартном режиме рендеринга
![Page 46: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/46.jpg)
Зачем определять режим?• Мы определились, что верстаем страницу в Стандартном режиме рендеринга
• Мы написали правильный <!DOCTYPE>
![Page 47: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/47.jpg)
Зачем определять режим?• Мы определились, что верстаем страницу в Стандартном режиме рендеринга
• Мы написали правильный <!DOCTYPE>
Чтобы не потерять время — проверьте режим
![Page 48: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/48.jpg)
Как определить режим?
Firefox:
![Page 49: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/49.jpg)
Как определить режим?
MSIE:
![Page 50: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/50.jpg)
Как определить режим?
MSIE:
QM
![Page 51: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/51.jpg)
Как определить режим?
MSIE:
QM SM
![Page 52: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/52.jpg)
Кодировка документа
HTML:
1. В заголовке ответа сервера2. В meta-теге
![Page 53: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/53.jpg)
Кодировка документа
HTML:
1. В заголовке ответа сервера2. В meta-теге
![Page 54: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/54.jpg)
Кодировка документа
HTML:
1. В заголовке ответа сервера2. В meta-теге
Помнить про фактическуюкодировку документа
![Page 55: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/55.jpg)
Кодировка документа
XML / XHTML:
4. XML-пролог
![Page 56: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/56.jpg)
Кодировка документа
XML / XHTML:
4. XML-пролог
• не UTF-8 • не UTF-16
![Page 57: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/57.jpg)
Кодировка документа
XML / XHTML:
4. XML-пролог
• не UTF-8 • не UTF-16• Можно не писать, если документ в
UTF
![Page 58: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/58.jpg)
Кодировка документа
XML / XHTML:
4. XML-пролог
• пролог не является обязательным• W3C рекомендует его использовать
![Page 59: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/59.jpg)
Кодировка документа
XML-пролог не годится:1. MSIE 6 не умеет распознавать
Content-Type=application/xml+xhtml
![Page 60: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/60.jpg)
Кодировка документа
XML-пролог не годится:1. MSIE 6 не умеет распознавать
Content-Type=application/xml+xhtml
2. MSIE 6 переключает рендеринг в QM, если встречает XML-пролог
![Page 61: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/61.jpg)
XML-пролог в IE6
Помнить!MSIE 6 переключается в QM, если перед <!DOCTYPE> встречает любые символы, кроме пробельных
![Page 62: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/62.jpg)
XML-пролог в IE6
Логичный вывод:Если мы хотим верстать по стандартам, мы должны забыть про XML-пролог до тех пор, пока мы не забудем про MSIE 6
![Page 63: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/63.jpg)
Когда применять XML-пролог• Если требуется поддержка MSIE 5, который еще не умеет рендерить документ в стандартном режиме
• Для того, чтобы MSIE 6 переключить в режим уловок
• Чтобы в MSIE 5-6 иметь одинаковые браузерные ошибки
![Page 64: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/64.jpg)
Макет страниц
1. Поток элементов
2. Плавающие элементы
3. Позиционированные элементы
![Page 65: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/65.jpg)
Макет страниц
1. Поток элементов Flow: <table>, position:[static|relative]
2. Плавающие элементы
3. Позиционированные элементы
![Page 66: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/66.jpg)
Макет страниц
1. Поток элементов Flow: <table>, position:[static|relative]
2. Плавающие элементы float: [left|right]
3. Позиционированные элементы
![Page 67: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/67.jpg)
Макет страниц
1. Поток элементов Flow: <table>, position:[static|relative]
2. Плавающие элементы float: [left|right]
3. Позиционированные элементы position: absolute
![Page 68: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/68.jpg)
Макет страниц
Поток элементов — таблицы• самый надежный и древний способ• когда не было полной поддержки CSS• для создания нетривиального графического дизайна
![Page 69: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/69.jpg)
Макет страниц
Поток элементов - таблицы⊕ сверстать макет быстро могут даже
начинающие
⊕ легко верстать как резиновую раскладку,так и с фиксированными размерами
⊕ легко добиться центрирования раскладки как по 0X, так и по 0Y
![Page 70: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/70.jpg)
Макет страниц
Поток элементов - таблицы∅ нет семантики
∅ IE6 – задержка рендеринга страницы (пустая страница, пока не загрузится весь контент)
![Page 71: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/71.jpg)
Макет страниц
Флоуты• Прямое назначение — обтекание элемента текстом
• Раскладка флоутами — выдумка и хитрость верстальщиков сегодняшнего дня
![Page 72: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/72.jpg)
Макет страниц
Флоуты⊕ отделение данных от представления
⊕ выше скорость загрузки данных
⊕ высокая скорость рендеринга загруженнойстраницы
![Page 73: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/73.jpg)
Макет страниц
Флоуты∅ трудно освоить∅ много нюансов поведения флоутов∅ многочисленные баги в IE6∅ грамотный макет невозможен без хитростей
"Семантическая верстка: рецепты" А. Рыбаков
![Page 74: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/74.jpg)
Макет страниц
Позиционирование• Единственная рекомендация W3C• Удобный способ для макета с фиксированными размерами
• "Теория стаканов” Иван Сагалаев
![Page 75: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/75.jpg)
Макет страниц
Позиционирование• Единственная рекомендация W3C• Удобный способ для макета с фиксированными размерами
• "Теория стаканов” Иван Сагалаев
• Невозможно создать зависимости между абсолютно позиционированными элементами
![Page 76: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/76.jpg)
Табличная или блочная вёрстка? Как же правильнее?
![Page 77: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/77.jpg)
Табличная или блочная вёрстка? Как же правильнее?
Это неправильный вопрос!
![Page 78: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/78.jpg)
Презентационная или семантическая вёрстка?
А это правильный вопрос!
![Page 79: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/79.jpg)
Презентационная вёрсткаГлавное — это внешний вид страницы!
![Page 80: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/80.jpg)
Презентационная вёрсткаГлавное — это внешний вид страницы!
• таблицы для создания макета• <div> и <span> для эмуляции списков, параграфов и заголовков
• <font> — классический презентационный тег
![Page 81: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/81.jpg)
Семантическая вёрсткаГлавное — это доступность контента!
![Page 82: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/82.jpg)
Семантическая вёрсткаГлавное — это доступность контента!
• <table> для табличных данных(a la Excel)• <ol>, <ul>, <dl> для перечня чего-либо• <h1> - <h6> для заголовков• <p> для текстовых абзацев• <div> для создания макета и контентных блоков
![Page 83: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/83.jpg)
Если думать о классификации вёрстки, как о презентационной
и семантической,
то вывод однозначен…
![Page 84: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/84.jpg)
Холивора не существует!
Ну в самом деле, хватит уже мусолить эту тему, а?
![Page 85: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/85.jpg)
Ошибки браузера
• В любом современном браузере есть ошибки в движке
• Ошибки, это когда браузер делает что-либо не по W3C-спецификации
![Page 86: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/86.jpg)
Ошибки браузера
1. Ошибки рендеринга элементов
![Page 87: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/87.jpg)
Ошибки браузера
2. Ошибки распознавания стилей•браузер не понимает вообще некие CSS-свойства
![Page 88: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/88.jpg)
Ошибки браузера
2. Ошибки распознавания стилей•браузер не понимает вообще некие CSS-свойства•неправильно интерпретирует CSS-селекторы и CSS-свойства
![Page 89: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/89.jpg)
Ошибки браузера
2. Ошибки распознавания стилей•браузер не понимает вообще некие CSS-свойства•неправильно интерпретирует CSS-селекторы и CSS-свойства
•расширяет требования CSS-спецификации своими собственными решениями
![Page 90: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/90.jpg)
Ошибки браузера
•Количество ошибок в браузере - это очень печальный факт для разработчиков (не для пользователей)
![Page 91: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/91.jpg)
Ошибки браузера
•Количество ошибок в браузере - это очень печальный факт для разработчиков (не для пользователей)
•Но у нас есть повод для радости!Эти ошибки могут друг друга взаимоисключать o_O
![Page 92: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/92.jpg)
Ошибки браузера
Механизм №1Чтобы исправить ошибки отображения, можно использовать ошибки распознавания
![Page 93: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/93.jpg)
Ошибки браузера
Механизм №1Чтобы исправить ошибки отображения, можно использовать ошибки распознавания
![Page 94: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/94.jpg)
Ошибки браузера
Механизм №2Чтобы исправить ошибки отображения, можно использовать ошибки отображения
![Page 95: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/95.jpg)
• Больше всего ошибок в MSIE
• При верстке по стандартам чаще всего проблемы возникают в отображении страниц в MSIE
![Page 96: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/96.jpg)
Хороший верстальщик должен знать типичные ошибки браузеров
и уметь находить обходные пути
![Page 97: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/97.jpg)
Хороший верстальщик должен знать типичные ошибки браузеров
и уметь находить обходные пути
Фильтры и хаки
![Page 98: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/98.jpg)
CSS фильтры и хаки
• Хак– абсолютно и безнадёжно невалидно– понимается одним конкретным браузером
![Page 99: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/99.jpg)
CSS фильтры и хаки
• Фильтр– по сути то же самое– только абсолютно валидное
![Page 100: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/100.jpg)
Профессиональный верстальщик должен писать валидный код
“Валидный код — это как личная гигиена”Харисов В.В.
![Page 101: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/101.jpg)
Conditional comments
Обычно пишут так:
! отрицание <!--[if! IE]>lt меньше чем <!--[if lt IE 7]>lte меньше или равно <!--[if lte IE 7]>gt больше чем <!--[if gt IE 5.0]>gte больше или равно <!--[if gte IE 5.5]>
![Page 102: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/102.jpg)
Conditional comments
Группа вёрстки Яндекса рекомендует:
![Page 103: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/103.jpg)
Conditional comments
Группа вёрстки Яндекса рекомендует:>vi page-ie.css
![Page 104: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/104.jpg)
А теперь пару слов о процессе багфиксинга...
![Page 105: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/105.jpg)
• Кроме часто встречающихся браузерных ошибок, существует огромное количество ошибок редких
• Профессиональный верстальщик должен уметь самостоятельно искать и находить решения
![Page 106: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/106.jpg)
Редкие ошибки1. Ограничение на количество
импортированных стилевых файлов (MSIE 6)
![Page 107: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/107.jpg)
Редкие ошибки1. Ограничение на количество
импортированных стилевых файлов (MSIE 6)
Сколько эта ошибка стоила:• Яндекс.Фотки / Сергей Никитин ~4 часа• Я.Ру / Вадим Макишвили ~2 часа
![Page 108: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/108.jpg)
Редкие ошибки2. Не применяется селектор (IE7)
![Page 109: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/109.jpg)
Редкие ошибки2. Не применяется селектор (IE7)
![Page 110: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/110.jpg)
Редкие ошибки2. Не применяется селектор (IE7)
src= “
![Page 111: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/111.jpg)
Редкие ошибки2. Не применяется селектор (IE7)
src=“ src =“ src = “
![Page 112: Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая](https://reader033.vdocuments.pub/reader033/viewer/2022042406/5f20931124ea6e434c6dfff7/html5/thumbnails/112.jpg)
Резюме•Выбор рендеринга зависит от вашей идеологии
•Кодировке — пристальное внимание
•XML-пролог в SM не применять
•Холивора не существует
•Вёрстка — это вечная борьба с браузерными ошибками
Вёрстка — это не только HTMLКачественная вёрстка — это непросто