Останнім часом на всіх форумах тільки й чути: стандарти, «валідність», CSS-верстка, XHTML. Більш того, не затихають суперечки прихильників двох шкіл вебдизайну: класичної табличної і нової CSS-верстки, про те, що є верстка і що кому здається більш логічним і зручним. Цією статтею я не хотів би почати новий виток цієї «священної війни», більше того її метою навіть не є перепереконання «табличників» до переходу на стандарти. Я хочу лише ознайомити читача з тими незаперечними перевагами, які має CSS-верстка. А вже висновки кожен повинен зробити для себе сам.
Також хочу дати попередній коментар доводам на користь XHTML + CSS, що приводяться нижче. У моєму розумінні CSS-верстка і XHTML – нероздільні поняття, деякі читачі можуть мені відразу ж заперечити, мовляв, верстати «валідно» і семантично вірно можна і в HTML. Але дозвольте, працювати можна і під MS-DOS, адже так? І хто тільки придумав цей незрозумілий GUI? Ще зазначу, що деякі аргументи на користь css-верстки можуть здатися вам знайомими по книгах Дж. Зельдман, Д. Ши та інших авторитетних майстрах вебдизайну, і ви будете цілком праві. Ця стаття є результатом накопиченого практичного та теоретичного досвіду автора. Отже, 15 доводів на користь переходу на XHTML + CSS:
- XHTML є поточним опублікованим стандартом розмітки гіпертексту, який замінив HTML.
- XHTML є більш послідовним, ніж HTML, що знижує ймовірність виникнення помилок.
- Нові браузери «люблять» XHTML (зокрема XHTML 1.0), оскільки він надає додаткові функції, недоступні в HTML і має чіткий синтаксис.
- XHTML є підмножиною мови XML, яка дозволяє вже зараз значно розширити можливості форматування документів, а в майбутньому дозволить повноцінно використовувати все нові, можливо, поки ще не винайдені або незміцнені технології.
- XHTML є частиною родини Web-стандартів (також включає в себе CSS і W3C DOM), що дозволяє контролювати зовнішній вигляд і поведінку сторінки на різних платформах, браузерах та пристроях.
- XHTML відкриває шлях у світ метаданих, що, можна стверджувати з великою часткою ймовірності, дозволить в майбутньому пошуковим машинам більш коректно і точно обробляти дані в XHTML документах (читай сторінках сайту).
- XHTML дозволяє змінювати порядок контенту в документі, що також дає свої переваги при пошуковій оптимізації сайту.
- XHTML підвищує доступність сайту для більшого кола читачів, таких як люди з дефектами зору або координації. Це означає, що на практиці пристрої читання з екрану не будуть збиті з пантелику, побачивши в тілі документа тег
<table>і спробувавши видати його вміст, як якусь табличну інформацію. Також, буде можливість повноцінно і, головне, комфортно користуватися сайтом навіть за відсутності мишки. - XHTML підвищує доступність сайту також для більшого кола user-agent’ів: КПК, мобільні телефони, цифрові проектори та інші пристрої з виходом в інтернет. Це означає, що більше немає необхідності в створенні декількох версій сайту, тому що береться один XHTML-шаблон, до якого за запитом застосовуються різні таблиці стилів.
- XHTML скасовує необхідність створення окремої версії сторінки для друку, оскільки при виведенні документа до друку також є можливість задати окремий стиль. Ця перевага, як і перевага в пункті 6, недоступна табличній розмітці, тому що попереднє форматування створене вже в самому тілі документа.
- XHTML + CSS дозволяє істотно знизити вагу документа. Таким чином, ви істотно знижуєте навантаження на сервера, канали зв’язку і прискорюєте видачу готового документа користувачеві. Це досягається за рахунок того, що XHTML-шаблон не містить елементів розмітки, тому що вони виносяться в CSS-файл. Для більш наочного підтвердження цього аргументу звернемося до прикладу. Зазвичай різниця між XHTML + CSS і HTML + CSS (табличним) шаблонами становить від 300 до 500 відсотків на користь XHTML + CSS, в деяких випадках вона може бути і більше. Уявімо уявний сайт з сумарною відвідуваністю в добу 10000 унікальних відвідувачів. Зверстаємо його спочатку класичним табличним способом. Отримаємо – розмір HTML-шаблону 20 Кб з файлом стилів розміром 5 Кб. Отже, вперше виданий в браузер користувача сайт закешує всі зображення, скрипти винесені в зовнішні файли і файли стилів, тобто CSS-файли. Також в розрахунках приймемо за істину те, що дизайн сайту (CSS-файл) не буде піддаватися зміні протягом року і не зажадає повторного завантаження. Скрипти та зображення можна не взяти до уваги, тому що на кінцевий результат вони не вплинуть. (20 Кб * 10000 * 365 + 5 * 10000) / 1024 = 71 337 Мб або 71,3 Гб трафіку протягом календарного року. Зверстаємо цей же сайт на XHTML + CSS методом CSS-розмітки. На виході XHTML, рівний 5 Кб і CSS – 10 Кб (тут необхідно відзначити, що розмір CSS файлу зазвичай зростає у зв’язку з тим, що всі дані про форматування та візуальному представленні документа виносяться в CSS-файл). Проведемо розрахунок. (5 Кб * 10000 * 365 + 10 * 10000) / 1024 = 17919,9 Мб або 18 Гб трафіку. У даному прикладі економія становить 71,3 Гб – 18 Гб = 53,3 Гб! Коментарі зайві.
- XHTML, за рахунок виносу елементів та інструкцій оформлення документа у зовнішній файл, дозволяє завантажити в браузер користувача контент максимально швидко, а в міру того, як він приступить до його прочитання, продовжить завантажуватися оформлення сайту. Це дозволяє, не чекаючи повного завантаження сторінки, вирішити, чи істотно представлена інформація, або варто покинути сторінку і продовжити пошук інформації на інших сайтах.
- XHTML код більш логічний і простий, тому в ньому набагато легше розібратися HTML-кодеру, який писав код сторінки.
- XHTML дозволяє, маючи один шаблон, підключати до нього безліч стилів, які кардинально змінюють його оформлення без єдиного редагування самого шаблону. Це досягається за рахунок маніпулювання вільною блоковою розміткою вмісту на противагу жорстко заданій табличній.
- XHTML коректно обробляється старими браузерами, що зменшує перешкоди до його використання. А в нових, за рахунок правильної підтримки CSS, можна домогтися неймовірних результатів.
Всі ці причини і стали моїм особистим стимулом до переходу на стандарти w3c і CSS-верстку. Чого і вам, власне, бажаю!
***
Це переклад статті. Оригінал тут