Кросбраузерності верстка - що це таке

Ви коли-небудь помічали, що сайт може по різному відображатися в різних браузерах? В цьому і є сенс кросбраузерності верстки.

Що таке кросбраузерності верстка

Кросбраузерності верстка - підхід до розробки html-коду (верстка), який забезпечує коректне відображається у всіх існуючих браузерах

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

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

Кросбраузерності верстка добре знайома тим, хто працював з браузером Internet Explorer 6 - він зіпсував чимало нервів верстальщикам за рахунок своєї унікальності. А унікальність ця виражалася в тому, що цей браузер не підтримує дуже багато правил і стандарти. В результаті виходило так, що зверстаний макет виглядав в Firefox і Opera просто чудово, розвалився в IE6 в абсолютну кашу.

Причини порушення коректного відображення сторінок

Незважаючи на те, що в світі є певні стандарти щодо побудови web-сторінок, розробники постійно впроваджують в браузери підтримку нових технологій і нових правил CSS. Це дозволяє створювати більш динамічні і функціональні сайти, реалізуючи раніше недосяжні можливості. І кожен розробник прагне до того, щоб його браузер підтримував найновіші технології, нові скрипти і нові бібліотеки. В результаті одні користувачі радіють новому браузеру, в якому добре відображаються найбільш просунуті сайти, а інші не можуть зрозуміти, чому відкрилася сторінка відкривається некоректно. Саме тому верстальник повинен написати код, який відображався б в різних браузерах максимально однаково.

Також не варто забувати, що постійно з'являються нові версії браузерів і було б дуже не погано, щоб на нових версіях сайт також коректно працював.

Що потрібно для кросбраузерності верстки - інструменти

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

Неоціненну допомогу надають порівняльних таблиці, що показують розходження в сприйнятті окремих елементів різними браузерами. Тобто, для того щоб виконати кросбраузерності верстку, нам знадобляться:

• Загальні знання про верстку;
• Знання в області особливостей верстки під ті чи інші браузери;
• Кілька браузерів на одному комп'ютері;
• Перевірка в сервісі browsershots.org

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

Окремий фронт робіт потрібно провести з замовником. Йому потрібно пояснити, що в світі web-дизайну немає нічого ідеального, і що деякими моментами доведеться пожертвувати. Завданням команди дизайнерів і програмістів стає створення сайту, який повинен відповідати таким пунктам:

• Максимальна відповідність вихідного макету і побажанням замовника;
• Максимальна коректне відображення у всіх популярних браузерах;

У процесі створення кросбраузерності верстки в коді задається значення атрибутів елементів HTML за замовчуванням, що вже на початковому етапі дозволяє позбутися від некоректного відображення навіть найпростіших макетів майбутніх сайтів. Далі проводиться розстановка тегів з урахуванням сумісності коду в різних браузерах. На цьому етапі верстальщику потрібно буде постійно контролювати коректність відображення сайту, використовуючи для цього браузери всіх версій і поколінь (у всякому разі, потрібен хоча б базовий набір з популярних браузерів останніх років).

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

висновок
Кросбраузерності верстка - це наріжний камінь сучасного web-дизайну. Відмінності в роботі браузерів часто є перешкодою для реалізації тих чи інших можливостей. В результаті ми задовольняємося усередненим, але доведеним до піку досконалості результатом. А сьогодні кросбраузерності верстка доповнилася необхідністю створення адаптивного дизайну. коректно показується не тільки в будь-яких браузерах, але і на будь-яких мобільних пристроях.