GrAndSE's blog

Переваги блочної верстки

Зараз доволі складно найти новий ресурс, що будується на табличній верстці. Переважає зараз блочна верстка, хоча ще роки два тому серед розробників та верстальників виникало багато питань, що й до чого та навіщо воно потрібне. І ось нещодавно знову розпочався невеличкий холівар з товаришем, а чи є доречним використання табличної верстки.

Особисто я ще на початку своєї роботи з веб-орієнтованими проектами прийшов до висновку, що таблична верстка занадто громіздка та незрозуміла. Тому почав розбиратись з css глибше ніж це було потрібно для таблиць. Справа в тому, що довелось мені зіткнутись на практиці з дуже громіздким проектом і вибриками IE 6, який випередив всю планету і показав як на вигляд сторінки впливає кількість пробілів та табів між тегами: елемент з закругленими кутами починав сипатись, якщо робити відступи на під час верстання. А оскільки я маніакально люблю ставити відступи як в програмному коді так і в html, оскільки мені так набагато зручніше, то неприємне враження залишилось і по цей день.

Одначе після двох років використання блочної верстки, перевіривши на собі десятки рецептів, я можу сказати, що мій тодішній вибір був правильним, особисто для мене

Історія

На початку ери веб, коли браузер Mosaic особливих можливостей прикрашати сторінки не було. Потім почалось змагання Netscape та Internet Explorer. Його результатом і є та ситуація, в якій ми опинились зараз: кожна з двох компаній у своєму прагненні захопити ринкову долю додавала нові можливості. Так і з'явились каскадні таблиці стилів (тобто CSS).

Поряд з компаніями змагались перші веб-майстри, що намагались у повній мірі скористатись можливостями браузерів та розробити щось надзвичайне. Оскільки спочатку жодних розмов про єдиний стандарт та універсальні можливості не було, то вже після того як було створено десятки тисяч веб сторінок, активність набув рух за стандартизацію можливостей які дає CSS.

В 96му році з'явилась перша версія стандарту CSS, яка дозволяла маніпулювати параметрами шрифтів, атрибутами текста, кольорами, властивостями блоків. Цього спочатку було цілком достатньо. Цих можливостей було недостатньо для точного позиціонування елементів.

Пізніше з виходом у 98му році стандарту CSS2 з'явились всі можливості, необхідні для використання блочної верстки: відносне, абсолютне та фіксоване позиціонування. Лише через декілька років рекомендації міжнародного консорціуму знайшли близькі до еталонного втілення в браузерах. Тому приблизно в 2005му році блочна верстка набула популярності.

Зараз в роботі третя редакція технології CSS. В неї будуть включені додаткові можливості для декорування рамок, тексту, трансформації елементів та змінні. Поки-що лише деякі інструкції CSS3 підтримуються браузерами.

Порівняння верстки за допомогою таблиць та блоків (теоретичне)

Хоча основна мета написання цього матеріалу показати на практиці, що таблична верстка поступається блочній (:-)), та впевнений, що нікому не завадить коротенький огляд.

Суть табличної верстки полягає в спробу представити html-сторінку у вигляді вкладених одна в одну таблиць, в комірках яких знаходиться контент.

Переваги:

1. Багато сторінок доволі просто представити у вигляді набору вкладених таблиць, тому можна досить легко швидко створити сторінку.

2. Для простих задач відсутня потреба в глибоких знаннях CSS.

3. В більшості випадків не виникає багато труднощів з виглядом сторінки в різних браузерах (особливо старих версіях).

4. В більшості випадків не потребує закриваючих тегів для комірок та рядків. Хоча можливість до певного моменту робити помилки, без жодних на це вказівок є сумнівною перевагою.

Недоліки:

1. Потребує велику кількість елементів html та глибоку ієрархію.

2. Великі за обсягом та складні сторінки дуже важко розуміти та модифікувати. Зі збільшенням кількості елементів зростає й ймовірність виникнення помилок та складність їх усунення.

3. Цей підхід не такий гнучкий як блочна верстка і для досягнення того ж самого результату може потребувати значно більших зусиль та уваги.

4. Відсутня можливість без значних змін у html кардинально змінювати вигляд сторінки.

Блочний тип верстки веб-сторінок полягає в тому, що функціональні та змістовні блоки огортаються відповідними тегами і їх стилізація та розташування описуються за допомогою CSS. Наприклад, якщо описати структуру статті, то можна виділити таку стрктуру: стаття-> заголовок, дані про час створення та автора, підзаголовки абзаци зі змістом. Таким чином тег, що містить статтю буде включати в себе тег заголовка, тег додаткової інформації, підзаголовки та теги абзаців. Якщо в якості огогартаючих елементи тегів використовуються спеціальні теги HTML, то можна казати про семантичну верстку. Наприклад, заголовки статей огорнені h2, підзаголовки в h3 параграфи в p і т.д. По суті всі недоліки табличного типу верстки є перевагами блочного. Тут і зменшення кількості тегів, і гнучкість, і добра індексованість пошуковими системами, і прозорість коду, і можливість змінювати дизайн без змін в коді (чудовим прикладом слугує Zen Garden). Єдиним серйозним недоліком можу вважати досить погану відповідність до стандартів старих браузерів (мається на увазі Internet Explorer 6, та його старший брат, котрий хоч і зробив декілька кроків у сторону стандартів, однак їх все одно недостатньо, щоб казати про нормальну сумісність). Тому досягти ідентичного результату верстки для всіх браузерів буває досить складно. Однак поступово ситуація йде на краще, тому через декілька років можна буде забути про необхідність сумісності з IE. Та й при достатньому професіональному рівні боротись з вибриками браузерів стає досить легко. Що до необхідності мати достатній рівень знань, закривати всі теги, та думати чи шукати в інтернеті як зробити той чи інший елемент саме таким, то це я віднести до недоліків не можу. Я особисто виступаю за професіоналізм. До того ж це буває досить цікаво.

Замість висновку

На цьому поки-що зупинюсь. Насправді, це лишень думки, які я не зміг собі дозволити не сказати перед тип, як розповісти про деякі практичні досліди в порівнянні табличної та блочної верстки. Так що скоро можна очікувати на продовження. Дякую за увагу.