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

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

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

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

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

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

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

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

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

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

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

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

• Вёрстка — совокупность всех клиентских технологий, необходимых для создания 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/...

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

Режимуловок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE>

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

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

<!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:

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

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

HTML:

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

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

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

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. Плавающие элементы

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

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

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

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

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

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

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

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

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

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

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

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

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

начинающие

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• таблицы для создания макета• <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]>

Conditional comments

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

Conditional comments

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

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

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

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

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

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

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

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

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

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

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

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

src= “

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

src=“ src =“ src = “

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

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

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

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

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

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

Вадим Макишвилиmakishvili@yandex-team.ru