Таблична верстка блоками
Не дивлячись на те, що сьогодні існують два напрямки верстки сторінок: табличні та блокові, не думаю, що між прихильниками цих двох гілок існують взаємне нерозуміння. Упевнений, будь-який веб-працівник бачить очевидні плюси, які дає верстка блоками, але в той же час багато хто стикається з труднощами, які при цьому виникають і, оцінюючи запропоновані рішення, цілком обґрунтовано залишаються прихильниками старої школи – просто, тому що так виявляється зручніше .
Ключове питання
Що ж заважає блоковій верстці переможно крокувати планетою? Існує безліч перешкод. Але, мабуть, особняком серед них стоїть проблема, де-не-де порівнянна навіть не більше не менше як з пошукомГрааля. Вузьке місце – створення горизонтальних блоків однакової висоти, тобто. реалізація тієї самої табличної сутності, яка часом необхідна при верстці сайту, наприклад, у випадку класичного 3-х колонкового макета:
Хочу запропонувати простий, але, в той же час, непопулярний підхід до вирішення даної проблеми, а саме будувати каркас сайту, відмовившись від табличних тегів, але зберігши табличну модель:
Відповідно до стандартів CSS, щоб перетворити цей набір дивів на таблицю, достатньо вказати у класах відповідні відображення: display:table; , display:table-row; та display:table-cell; .
Але я не випадково назвав такий підхід непопулярним. «Табличники» побачать у прийомі лише непотрібне «винахід велосипеда», затяті ж поборникиnu skoolвважають цей шлях ідеологічно невірним, тим більше, що на перший погляд здається, що він веде в глухий кут, браузери від Microsoft display: table; не підтримували, і найближчим часом підтримувати не планує, а отже є можливість відмовитися від табличних шаблонів і цієїситуацією злочин не користуватися.
З багатьма запереченнями можна погодитися, проте не можна не помітити і очевидні плюси «табличного» підходу, головними серед яких я бачу:
- поділ змісту від подання;
- можливість верстати «табличні» макети будь-якої складності;
- Проста реалізація.
Пункт «проста реалізація», мабуть, викличе найбільші сумніви, з «правильними браузерами» все зрозуміло, але чи дійсно просте рішення для Internet Explorer? Існує.
Наприклад, розглянемо таку конструкцію:
Щоб розмістити блоки горизонтально, вирівнявши у своїй їх висоту, тобто. зімітувати табличну поведінку в IE, достатньо визначити стильові класи вказати ширину для колонок і все. Приклад 1 ілюструє цю техніку (Увага! Працює тільки в режимі зворотної сумісності – Quirks Mode) для варіанта, коли трьом колонкам задана ширина 200px.
Розглянемо більш «життєве» завдання: припустимо, каркас має бути розтягнутий по ширині на 100%, ширина першої колонки – 200px, третьої – 30%, друга ж нехай займає вільний простір. Рішення для IE може виглядати так (доповнимо стильовий лист):
Прийом із застосуванням лише одного див-контейнера працюватиме і в браузерах з підтримкою display:table; Однак для семантичної відповідності табличної моделі, нижче, я наведу приклад загального рішення для конструкції з двома контейнерами.
Не слід очікувати, що цей шлях, як і будь-який інший, буде усіяний трояндами, є звичайно і нюанси (наприклад, ефект зісковзування вниз блоків в IE, для яких не знаходиться місця по ширині сторінки), проте всі відомі мені труднощі можна розв'язати . Тут я вказав лише загальний напрям, запропонувавідею, а далі, як кажуть, ви вже самі.
Коментарі
Тільки нещодавно дізнався, що трюк з height:0 - це один із способів виставлення значення true Microsoft'овської властивості hasLayout.
Не бачу тут відділення змісту від уявлення, оскільки структура наведеного вище html коду з дивами повторює структуру нормальної таблиці, тільки замість
>>навіщо давати дивам "табличні" display коли можна просто використовувати самі таблиці?
Тема статті, а також той факт, що при назві класів, для зручності сприйняття, я використовував табличні імена, можливо заважають абстрагуватися.
Ключовий момент тут – відокремлення змісту від уявлення. Наведений у статті набір дивів не повторює «структуру нормальної таблиці», це – звичайна деревоподібна структура, вона просто асоціюється з таблицею (оскільки в html використання табличних тегів перетворює цю конструкцію на таблицю). Важливо розуміти, що не в протиставленні дивів табличним тегам, а досягненні потрібного рівня абстракції. Тобто. приклади в статті повинні сприйматися не як «диви замість таблиць», а як «диви як таблиці» (адже вони можуть і відображатися і «як щось ще» на відміну від табличних тегів). Відображаючи «дивний» шаблон «таблично», ви не темніте душею, часто ви просто відображаєте його ще й «у стовпчик» та «по діагоналі», або маєте таку можливість.