Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая

Профессиональный верстальщик. Кто он?

Макишвили Вадим

Кому полезен доклад

1.Для разработчика

2.Для руководителя/заказчика

Немного терминологии

• HTML — язык разметки гипертекста



• Вёрстка — совокупность всех клиентских технологий, необходимых для создания web-страницы



• Вёрстка — совокупность всех клиентских технологий, необходимых для создания web-страницы

Зачем разделять эти термины?

Считается, что

• Вёрстка — это и есть HTML

Считается, что

• Вёрстка — это и есть HTML• HTML — это просто

Я утверждаю

• Вёрстка — это не только HTML


• Вёрстка — это не только HTML • Вёрстка — это сложно

В чём же сложность верстки

?

В чём же сложность верстки• Кроссбраузерная?

В чём же сложность верстки• Кроссбраузерная?• Валидная?

В чём же сложность верстки• Кроссбраузерная?• Валидная?• С доступной функциональностью

– без картинок– без стилей– без скриптов


Не получится сверстать качественную страницу,не занимаясь версткой

профессионально

Профессионально1. Зарабатывать деньги на жизнь

(от слова профессия)

2. Делать свою работу оч.качественно (от слова профессионализм)

Профессионализм

• Это вовсе не перечень неких предметных знаний

Профессионализм

• Это вовсе не перечень неких предметных знаний

• Это обязательно — владение ключевыми знаниями своей профессии

Рендеринг

“Рендеринг — процесс построения и отображения сцены по ее описанию в базе данных”

Яндекс.Словари: ИнформатикаЭнциклопедический словарь-справочник

Рендеринг

Процесс построения дерева элементови отображения их в окне браузера

Режимы рендеринга

1. Quirks Mode (QM)2. Standard Mode (SM)3. Almost Standard Mode (ASM)

Режимы рендеринга

Почти стандартный режим (ASM)– отличается от SM способом выравнивания картинки в строчном элементе и в ячейке таблицы

– придумка разработчиков Gecko

– MSIE6 в SM выравнивает картинку внутри ячейки не так, как предлагает спецификация

Отличия режимов рендерингаПочти Стандартный Стандартный

Отличия режимов рендеринга

“Images, Tables, and Mysterious Gaps”

http://developer.mozilla.org/...

http://developer.mozilla.org/en/docs/Images%252C_Tables%252C_and_Mysterious_Gaps




Отличия режимов рендерингаБоксовая модель

Режимуловок

Стандартныйрежим


Но это же нелогично?!


«Возьмите любую коробку. Положите в нее что-нибудь меньшее по размеру. И попросите кого-либо измерить размер коробки. Вероятнее всего, человек измерит размер от границы до границы, никто не станет судить о размере коробки по величине его содержимого»

Питер-Пол Кох (Peter-Pol Koch)

Какой выбрать режим?• Можно ли порекомендовать для верстки один режим?


• Группа верстки Яндекса выбирает SM


• Почему группа верстки Яндекса выбирает SM– Quirks mode неизменен


• Почему группа верстки Яндекса выбирает SM– Quirks mode неизменен– Стандарты развиваются


• Почему группа верстки Яндекса выбирает SM– Quirks mode неизменен– Стандарты развиваются– Мы за прогресс

Как включить определенный режим?

W3C требует: “Web-страница должна начинаться с определения версии HTML”



<!DOCTYPE>



<!DOCTYPE>

Как развитие стандартов заставило нас использовать эту инструкцию?


Тодд Фарнер (Todd Farhner) предложил разработчикам браузеров элегантное решение:

Doctype Switching

• DOCTYPE есть ➔ Стандартный режим


Тодд Фарнер (Todd Farhner) предложил разработчикам браузеров элегантное решение:

Doctype Switching

• DOCTYPE есть ➔ Стандартный режим• DOCTYPE нет ➔ Режим уловок


Поддержка Doctype Switching:• MSIE 5 for Mac

• MSIE 6 for Win

• Opera 7.0

• Mozilla 1.0

• Netscape 7.0

И мы говорим: спасибо тебе, Тодд Фарнер!

Режим уловоквключается

1. <!DOCTYPE> нет или2. <!DOCTYPE> записан неправильно

Стандартный режим включается

1. <!DOCTYPE> есть и2. <!DOCTYPE> записан правильно

Стандартный режим включается

1. <!DOCTYPE> есть и2. <!DOCTYPE> записан правильно

Логичный вывод:Правильный <!DOCTYPE> переключает браузер в стандартный режим рендеринга

Правильные Doctype• Есть фиксированное число инструкций, которые должны выполнять браузеры, чтобы правильно интерпретировать написанный верстальщиком <!DOCTYPE>

• Поэтому есть конечное число доктайпов, которые переключают браузер в стандартный режим рендеринга документа

Правильные Doctype

• Запомнить все доктайпы можно• Но не нужно

Правильные Doctype

• Запомнить все доктайпы можно• Но не нужно

• Запомнить нужно поисковый запрос:

Зачем определять режим?• Мы определились, что верстаем страницу в Стандартном режиме рендеринга


• Мы написали правильный <!DOCTYPE>


• Мы написали правильный <!DOCTYPE>

Чтобы не потерять время — проверьте режим

Как определить режим?

Firefox:


MSIE:


MSIE:

QM


MSIE:

QM SM

Кодировка документа

HTML:

1. В заголовке ответа сервера2. В meta-теге


HTML:



HTML:


Помнить про фактическуюкодировку документа


XML / XHTML:

4. XML-пролог


XML / XHTML:

4. XML-пролог

• не UTF-8 • не UTF-16


XML / XHTML:

4. XML-пролог

• не UTF-8 • не UTF-16• Можно не писать, если документ в

UTF


XML / XHTML:

4. XML-пролог

• пролог не является обязательным• W3C рекомендует его использовать


XML-пролог не годится:1. MSIE 6 не умеет распознавать

Content-Type=application/xml+xhtml


XML-пролог не годится:1. MSIE 6 не умеет распознавать

Content-Type=application/xml+xhtml

2. MSIE 6 переключает рендеринг в QM, если встречает XML-пролог

XML-пролог в IE6

Помнить!MSIE 6 переключается в QM, если перед <!DOCTYPE> встречает любые символы, кроме пробельных

XML-пролог в IE6

Логичный вывод:Если мы хотим верстать по стандартам, мы должны забыть про XML-пролог до тех пор, пока мы не забудем про MSIE 6

Когда применять XML-пролог• Если требуется поддержка MSIE 5, который еще не умеет рендерить документ в стандартном режиме

• Для того, чтобы MSIE 6 переключить в режим уловок

• Чтобы в MSIE 5-6 иметь одинаковые браузерные ошибки

Макет страниц

1. Поток элементов

2. Плавающие элементы

3. Позиционированные элементы


1. Поток элементов Flow: <table>, position:[static|relative]

2. Плавающие элементы




2. Плавающие элементы float: [left|right]




2. Плавающие элементы float: [left|right]

3. Позиционированные элементы position: absolute


Поток элементов — таблицы• самый надежный и древний способ• когда не было полной поддержки CSS• для создания нетривиального графического дизайна


Поток элементов - таблицы⊕ сверстать макет быстро могут даже

начинающие

⊕ легко верстать как резиновую раскладку,так и с фиксированными размерами

⊕ легко добиться центрирования раскладки как по 0X, так и по 0Y


Поток элементов - таблицы∅ нет семантики

∅ IE6 – задержка рендеринга страницы (пустая страница, пока не загрузится весь контент)


Флоуты• Прямое назначение — обтекание элемента текстом

• Раскладка флоутами — выдумка и хитрость верстальщиков сегодняшнего дня


Флоуты⊕ отделение данных от представления

⊕ выше скорость загрузки данных

⊕ высокая скорость рендеринга загруженнойстраницы


Флоуты∅ трудно освоить∅ много нюансов поведения флоутов∅ многочисленные баги в IE6∅ грамотный макет невозможен без хитростей

"Семантическая верстка: рецепты" А. Рыбаков

http://pcmag.ru/solutions/detail.php?ID=11032&phrase_id=414376

http://pcmag.ru/solutions/detail.php?ID=11032&phrase_id=414376


Позиционирование• Единственная рекомендация W3C• Удобный способ для макета с фиксированными размерами

• "Теория стаканов” Иван Сагалаев

http://softwaremaniacs.org/blog/category/web/primer/

http://softwaremaniacs.org/blog/category/web/primer/


Позиционирование• Единственная рекомендация W3C• Удобный способ для макета с фиксированными размерами

• "Теория стаканов” Иван Сагалаев

• Невозможно создать зависимости между абсолютно позиционированными элементами

http://www.yandex.ru/cgi-bin/hidereferer?url=http://softwaremaniacs.org/blog/category/web/primer/

http://www.yandex.ru/cgi-bin/hidereferer?url=http://softwaremaniacs.org/blog/category/web/primer/

Табличная или блочная вёрстка? Как же правильнее?

Табличная или блочная вёрстка? Как же правильнее?

Это неправильный вопрос!

Презентационная или семантическая вёрстка?

А это правильный вопрос!

Презентационная вёрсткаГлавное — это внешний вид страницы!

Презентационная вёрсткаГлавное — это внешний вид страницы!

• таблицы для создания макета• <div> и <span> для эмуляции списков, параграфов и заголовков

• <font> — классический презентационный тег

Семантическая вёрсткаГлавное — это доступность контента!

Семантическая вёрсткаГлавное — это доступность контента!

• <table> для табличных данных(a la Excel)• <ol>, <ul>, <dl> для перечня чего-либо• <h1> - <h6> для заголовков• <p> для текстовых абзацев• <div> для создания макета и контентных блоков

Если думать о классификации вёрстки, как о презентационной

и семантической,

то вывод однозначен…

Холивора не существует!

Ну в самом деле, хватит уже мусолить эту тему, а?

Ошибки браузера

• В любом современном браузере есть ошибки в движке

• Ошибки, это когда браузер делает что-либо не по W3C-спецификации


1. Ошибки рендеринга элементов


2. Ошибки распознавания стилей•браузер не понимает вообще некие CSS-свойства


2. Ошибки распознавания стилей•браузер не понимает вообще некие CSS-свойства•неправильно интерпретирует CSS-селекторы и CSS-свойства


2. Ошибки распознавания стилей•браузер не понимает вообще некие CSS-свойства•неправильно интерпретирует CSS-селекторы и CSS-свойства

•расширяет требования CSS-спецификации своими собственными решениями


•Количество ошибок в браузере - это очень печальный факт для разработчиков (не для пользователей)


•Количество ошибок в браузере - это очень печальный факт для разработчиков (не для пользователей)

•Но у нас есть повод для радости!Эти ошибки могут друг друга взаимоисключать o_O


Механизм №1Чтобы исправить ошибки отображения, можно использовать ошибки распознавания


Механизм №1Чтобы исправить ошибки отображения, можно использовать ошибки распознавания


Механизм №2Чтобы исправить ошибки отображения, можно использовать ошибки отображения

• Больше всего ошибок в MSIE

• При верстке по стандартам чаще всего проблемы возникают в отображении страниц в MSIE

Хороший верстальщик должен знать типичные ошибки браузеров

и уметь находить обходные пути

Хороший верстальщик должен знать типичные ошибки браузеров

и уметь находить обходные пути

Фильтры и хаки

CSS фильтры и хаки

• Хак– абсолютно и безнадёжно невалидно– понимается одним конкретным браузером

CSS фильтры и хаки

• Фильтр– по сути то же самое– только абсолютно валидное

Профессиональный верстальщик должен писать валидный код

“Валидный код — это как личная гигиена”Харисов В.В.

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]>


Группа вёрстки Яндекса рекомендует:


Группа вёрстки Яндекса рекомендует:>vi page-ie.css

А теперь пару слов о процессе багфиксинга...

• Кроме часто встречающихся браузерных ошибок, существует огромное количество ошибок редких

• Профессиональный верстальщик должен уметь самостоятельно искать и находить решения

Редкие ошибки1. Ограничение на количество

импортированных стилевых файлов (MSIE 6)

Редкие ошибки1. Ограничение на количество

импортированных стилевых файлов (MSIE 6)

Сколько эта ошибка стоила:• Яндекс.Фотки / Сергей Никитин ~4 часа• Я.Ру / Вадим Макишвили ~2 часа

Редкие ошибки2. Не применяется селектор (IE7)



src= “


src=“ src =“ src = “

Резюме•Выбор рендеринга зависит от вашей идеологии

•Кодировке — пристальное внимание

•XML-пролог в SM не применять

•Холивора не существует

•Вёрстка — это вечная борьба с браузерными ошибками

Вёрстка — это не только HTMLКачественная вёрстка — это непросто

Вадим Макишвили[email protected]

mailto:[email protected]

mailto:[email protected]

Documents

Профессиональный верстальщик Кто онcache-ash02.cdn.yandex.net/download.yandex.ru/company/...Отличия режимов рендеринга Боксовая