0:00
[БЕЗ_ЗВУКА] Сегодня
у нас заключительная лекция в рамках темы «Модель отображения»,
и на ней мы будем говорить про гибкие коробки.
Но для начала давайте не будем торопить события и поговорим про разметку.
Многие из вас, я думаю, обратили внимание на то, что в предыдущих домашних
заданиях мы запрещали пользоваться спецификациями Flexbox Grid.
Это было сделано сознательно, чтобы вы попробовали реализовать разметку с
использованием других спецификаций и приемов.
Эти приемы мы сейчас и рассмотрим, немножко, так скажем,
окунемся в прошлое и посмотрим, что было под капотом разметок прошлого.
Так же, как на данной картинке, вы можете увидеть, что было под капотом
реализации самозашнуровывающихся шнурков в фильме «Назад в будущее-2».
В кадре мы видели лишь, как шнурки в нужный момент зашнуровались.
А в реальности это было несколько человек, которые по щелчку дернули за лямочки.
Итак, из чего же состояла разметка прошлого?
Давайте рассмотрим на примере главной «Яндекса».
Здесь я могу выделить три колонки.
Левая, где находится логотип, средняя,
где у нас находится основное содержимое, и правая колонка.
Колонки.
Понятно, как реализовать это?
Таблицами.
Так делали раньше.
Здесь у нас три колонки и три ячейки.
Но на самом деле это не так.
Если вы посмотрите внимательнее, то три ячейки у нас только здесь.
А вот нижняя часть — это же тоже ячейки.
И на самом деле ячеек у нас вертикальных и столбцов уже пять.
Если посмотреть внимательно наверх, то там тоже не одна ячейка, а две.
Правая, где у нас находится баня, и левая, где у нас находятся новости.
Сделать такую разметку с помощью таблиц несложно.
Есть атрибут, который позволяет группировать ячейки colspan.
Но я вас тут немножечко обманываю, и вы, конечно же, видите это.
У нас же есть еще и строки, которые нужно сгруппировать, левая и правая.
Левая и правая колонки должны быть объединены.
За это отвечает атрибут rowspan.
Уже сейчас, глядя на эту разметку, можно понять,
что ее очень неудобно поддерживать.
Например, если мы захотим добавить еще одну ячейку в нижний уровень,
то нам нужно будет менять атрибуты colspan и rowspan в некоторых местах.
Можно также воспользоваться вложенными таблицами,
но тогда мы будем терять согласованность между строками.
Так верстали в начале 2000-х годов.
А потом пришла семантика.
И с помощью семантики верстка данной страницы выглядит еще более забавно.
На самом деле всё поменялось на div, и расставлять элементы стали с помощью CSS.
В чем же тут проблема?
Чтобы ее увидеть, давайте рассмотрим несколько реализаций разметки,
и как они ведут себя в зависимости от содержимого.
Рассмотрим, например, трехколоночную разметку,
где колонки имеют одинаковую ширину.
Эталонная реализация такой разметки с помощью таблиц.
Почему?
Если мы поместим в среднюю колонку картинку, которая по ширине
превышает размеры колонки, то таблица поведет себя максимально корректно.
Крайние колонки немножко подожмутся по ширине,
и средняя колонка вместит полностью картинки.
Если точно такую же разметку реализовать, например,
с помощью плавающих блоков, то мы можем увидеть вот такое поведение.
Правая колонка наползает на картинку, и часть контента мы просто не увидим.
Другой пример — реализация трехколонника с помощью инлайн-блоков.
Здесь мы вообще не видим правой колонки.
А где же она?
А вот она.
Это же инлайн-элементы,
и у нас просто правая колонка перенеслась на другую строчку.
Какие же основные проблемы раскладок с помощью различных CSS-свойств?
Если мы пользуемся плавающей разметкой,
то нам нужно применять всякие хаки типа clearfix.
Не говоря уже о том,
что у нас не всегда разметка ведет себя корректно в зависимости от контента.
Абсолютное позиционирование решает проблемы смежных элементов.
Они могут не накладываться друг на друга.
Но вы никогда не сможете связать элементы друг с другом,
потому что это абсолютное позиционирование и элементы выводятся из потока.
Куча лишней разметки, если мы пользуемся таблицами или свойством display: table.
Оно замусоривает нашу разметку.
Если мы пользуемся инлайн-блоками, то не говоря уже о том,
что эта разметка также ведет себя нестабильно,
нам нужно что-то будет делать с пробелами, которые могут появиться между блоками.
Я думаю, каждый верстальщик хоть раз решал задачу с пробелами между инлайн-блоками.
В данном видео мы рассмотрели разные способы реализации
раскладок и их проблемы.
Олег Семичевразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Мохов Олегразработчик интерфейсов, Яндекс
