Кросбраузерність верстки сайту: що це таке, як перевірити, як забезпечити

1. кросбраузерність верстки
2. Як забезпечити кроссбраузерность сайту
3. Вендорний префікси
4. універсальність елементів
5. Як перевірити кроссбраузерность сайту
6. Як впливає на відвідуваність сайту

Тематичний трафік - альтернативний підхід в просуванні бізнесу

Кросбраузерність - здатність веб-ресурсу підлаштовуватися під кілька браузерів і коректно відображатися в них.

Більше відео на нашому каналі - вивчайте інтернет-маркетинг з SEMANTICA

Наприклад, ви зробили сайт для вашого інтернет-магазину. Ви розробили красивий дизайн, який приємний для очей. Але на ваш сайт користувачі заходять через різні браузери. Хтось взагалі використовує смартфон. І якщо ви не перевірили кроссбраузерность ресурсу, може статися, що в деяких браузерах сайт буде відображатися погано.

Можуть з'їжджати елементи, можуть не відображатися картинки, стануть непривабливими шрифти. Людина не буде користуватися таким сервісом. Він піде шукати далі.

Завдання розробника сайту - зробити його так, щоб незалежно від браузера і пристрої ресурс відображався правильно.

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

Між браузерами йде конкуренція. Раніше кожен намагався додати виняткові фішки і опції. Це призвело до того, що стандарти HTML перестали дотримуватися, і кожен браузер по-своєму відображав сторінки.

Netscape Navigator вибув з гонки, віддавши монополію Internet Explorer. Через майже одночасно почали набирати обертів проекти Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) і Safari (WebKit), розділивши ринок між собою і змусивши спільноту задуматися над питанні кросбраузерності своїх сайтів.

правильна верстка сайту викликає довіру у користувачів. Вони з зручністю зможуть користуватися ресурсом. Лояльність аудиторії - важливий показник.

Розробити кросбраузерності верстку - окреме питання при роботі над великим проектом. При виконанні цієї умови найчастіше задіюються CSS і HTML правила, іноді доповнюються невеликим JavaScript (jQuery) кодом.

Виконується аналіз цільових платформ, з яких найбільш ймовірно і часто приходить клієнт на сайт, увага концентрується на найбільш популярних браузерах і дозволах екранів. Для цих цілей можна використовувати Яндекс Метрика, Google Analytics і інші сервіси збору даних про відвідувачів.

На сьогоднішній день виробники браузерів почали активно займатися своєчасної підтримкою стандартів World Wibe Web, HTML 5 і CSS 3, що безсумнівно позначилося на якості відображення сторінок. Однак, в деяких властивостях каскадних таблиць і трактуванні коду, навіть зараз на різних движках зустрічаються суттєві розбіжності, які необхідно виправляти вручну.

Як забезпечити кроссбраузерность сайту

Використання CSS hacks

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

Вендорний префікси

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

Кожен браузер має власні властивості з Вендорний префіксом, так, наприклад елемент border-radius в Mozilla Firefox представлений властивістю -moz-border-radius, а в Chrome і Safari -webkit-border-radius. Такі властивості змінюють поведінку елемента тільки в певному браузері, і ігноруються іншими платформами.

універсальність елементів

Робіть упор на універсальні елементи - ті, які однаково працюють в більшості браузерів. Робота тільки з ними зробить код коротким, чистим і зрозумілим.

Перевірити підтримку правил можна на безкоштовному сервісі caniuse.com. У наочному поданні у вигляді таблиць можна уточнити, починаючи з якої версії той чи інший тег введений в підтримку кожним движком, і чи можна його застосовувати

Як перевірити кроссбраузерность сайту

Ви верстали сайт. Врахували поради. Настав час його перевірити. Перший спосіб - встановити на віртуальну машину всілякі браузери, відкрити свій сайт в кожному і подивитися.

Так само є спеціальні сервіси перевірки сайту на кроссбраузерность.

• browsershots.org
  Перевага: Дозволяє отримувати скріншоти з великої кількості різних версій двигунів.
  Недолік: Довге очікування.

• crossbrowsertesting.com
• browserstack.com
  Перевага: Потужні засоби для глибокого аналізу веб-ресурсу в режимі онлайн.
  Недолік: Платне використання більшості функцій.

Як впливає на відвідуваність сайту

Існує негласна статистика, яка говорить про те, що Яндекс Браузер і Chrome користуються популярністю молоді, а Opera і Mozilla віддають переваги вже працюють люди. Уявіть, що ви створили сайт зі скейтбордингу для молоді, а його оформлення з тріском провалюється в Chrome. Шрифти не завантажуються, відступи з'являються зовсім не там, де вони повинні бути - справжня катастрофа маркетингу, втрата цільової аудиторії.

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

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

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

Так само в блозі у нас є стаття про адаптивну верстку.