Верстка с помощью слоев
Термін "шар" активно використовується в розробці веб-сайтів, але його розшифровка в літературі з веб-дизайну майже не висвітлюється. Давайте розглянемо, що саме має на увазі цей термін.
Початково шари були введені компанією Netscape, додавши підтримку тегу <layer> у свій браузер. Цей тег дозволяв приховувати/показувати вміст, встановлювати позицію відносно вікна браузера, накладати один шар на інший та завантажувати дані вмісту з файлу. Незважаючи на вражаючий набір можливостей, тег <layer> не був включений у специфікацію HTML і залишився розширенням браузера Netscape.
Проте потреба у вказаних можливостях, які б застосовувалися на веб-сайтах, вже настала, і в кінці 1996 року синтаксис для роботи з шарами був розроблений і схвалений у робочому проєкті консорціуму "CSS Positioning (CSS-P)". Головний акцент був зроблений на стилі, за допомогою яких можна керувати виглядом будь-якого елемента, включаючи зміну значень динамічно через JavaScript. На сьогодні розробники популярних браузерів дотримуються специфікацій HTML і CSS, що значно спрощує життя творцям веб-сайтів, знижуючи час на налагодження сайту в різних браузерах.
- Якщо спостерігаються невеликі відмінності в відображенні одного сайту в різних браузерах, то на ці відмінності закривають очі. Просто кажучи, не виправляють. Проте сайт повинен відображатися коректно і без помилок.
- Якщо на сайті є значні відмінності при його показі в одному іншому браузері, то для їх усунення застосовують хаки.
Хак — це набір прийомів, коли певному браузеру "підсовують" код, який розуміється тільки цим браузером, іншими ігнорується.
Хоча хаки працюють, їх варто використовувати обмежено або взагалі обходитися без них. Справа в тому, що хаки знижують універсальність коду і для модифікації параметрів одного елемента доводиться вносити зміни одночасно в різних місцях.
Є інший, перспективний шлях — дотримуватися специфікації CSS. Незважаючи на те, що браузери не в повній мірі самі її підтримують, вони прогресують саме в цьому напрямку. Таким чином, майбутні версії браузерів будуть уніфіковані і однаковий сайт будуть відображати коректно.
Повернемося до шарів. Зрозуміло, що вони безпосередньо пов'язані зі стилями. Оскільки кожний елемент HTML-коду, до якого додаються стилі, може вважатися шаром? Деякою мірою так. Проте це призвело б до плутанини, якби замість "таблиця" або "параграф" ми говорили "шар". Тому домовимося використовувати цей термін тільки для тегів <div>.
Шар — це елемент веб-сторінки, створений за допомогою тегу <div>, до якого застосовується стильове оформлення.
Отже, верстка за допомогою шарів полягає в конструктивному використанні тегів <div> і стилів. При цьому дотримуються наступні принципи.
Розділення вмісту і оформлення
Код HTML повинен містити тільки теги розмітки та теги логічного форматування, а будь-яке оформлення виноситься за межі коду в стилі. Такий підхід дозволяє незалежно керувати виглядом елементів сторінки та її вмістом. Це дозволяє кільком людям працювати над сайтом, кожен виконує свою функцію незалежно від інших. Дизайнер, верстальник та програміст працюють над своїми завданнями автономно, знижуючи час на розробку сайту.
Активне застосування тега <div>
При використанні шарів велике значення приділяється універсальному тегу <div>, який виконує багато функцій. Фактично це основа, на яку "підвішуються" стилі, перетворюючи її то на іграшку, то на звірину. Це взагалі не означає, що використовується тільки цей тег, адже потрібно вставляти малюнки та оформлювати текст. Проте при верстці за допомогою шарів тег <div> є цеглиною верстки, її базовим фундаментом.
Завдяки цьому тегу HTML-код розпадається на ряд чітких блоків, що робить верстку шарами також блочною версткою. Код при цьому стає більш компактним, ніж при табличній верстці, крім того, пошукові системи його краще індексують.
Таблиці використовуються тільки для представлення табличних даних
При верстці шарами, звісно, використовуються таблиці, але тільки у тих випадках, коли вони потрібні, наприклад, для наочного відображення чисел і інших табличних даних. Варіант, коли від таблиць пропонується взагалі відмовитися, є нецільовим і, більше того, шкідливим.
Використання стилів не є обов'язковою характеристикою верстки шарами, і для табличної верстки стилі можуть застосовуватися досить активно. Інше питання, що це стає стандартом де-факто і без стилів тепер не обійтися.
Резюме
Шар — це основний елемент верстки веб-сторінок, при якій активно застосовуються стилі та дотримуються специфікацій HTML і CSS. При такому підході важлива роль відводиться тегу <div>, з яким у більшості людей і асоціюються шари. Деякою мірою це є правильним, тому домовимося в подальшому вживати термін "шар" для тегу <div>, до якого застосовується стилевий ідентифікатор або клас. Таким чином, вираз "шар з ім'ям content" передбачає, що використовується тег <div id="content"> або <div class="content">.
Хоча сучасні браузери більш-менш коректно працюють зі стилями, іноді між ними виникають розбіжності щодо читання одного й того ж коду. У подібних випадках веб-сторінка буде відображатися по-різному в різних браузерах. Щоб цього не сталося, використовують хаки — прийоми, спрямовані на те, щоб кожен браузер отримав свій власний код або стиль. Проте використання хаків при верстці вважається поганим тоном, тому варто користуватися ними лише в крайніх випадках або взагалі обходитися без них.