Кросбраузерності верстка html і css

Серед усього розмаїття існуючих на даний момент браузерів таких як Opera, Safari, Internet Explorer, Google Chrome, Mozila Firefox і, звичайно ж браузер Аміго, який має здатність мимовільно встановлюватися на комп'ютери, варто тільки подивитися на посилання. І у кожного з браузерів є велика кількість версій, що виходять одна за одною. Тому кожна нова версія кожного браузера має свої власні особливості. І для коректної роботи сайту в кожному з них необхідно використовувати кросбраузерності верстку.

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

Самим «веселим» з браузерів, звичайно ж є браузер Internet Explorer, хоча при всьому при цьому більшість користувачів до сих пір використовують цей браузер. Так якщо сайт попередньо перевірявся на Chrome, а потім його відкривають в Explorer, і, о, жах. Блоки переплутані, кнопки меню наїжджають один на одного, картинки відображаються некоректно, в загальному, повний хаос.

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

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

Причини проблем з відображенням сайту.

Тепер давайте розберемо, чому відбуваються такі неприємності зі сприйняттям коду в різних браузерах.
  1. Верстка не відповідає деяким стандартам HTML.
  2. / Strong> Постійно оновлюються і з'являються нові бібліотеки і правила CSS. Вони прекрасно відтворюються оновленими версіями браузерів, але можуть некоректно відображатися старими версіями.
  3. Internet Explorer. Найдивніший браузер, який не розуміє половину всіх правил і тому постійно придумуються нові хакі, щоб обійти ці проблему IE.
  4. Значення атрибутів за замовчуванням. В кожному браузері це значення може бути різним. Атрибути - це кольори елементів, шрифти, їх розмір. Все це повинно бути описано в таблиці стилів, в іншому випадку браузер буде самостійно проставляти значення, зазначені у свех з них за замовчуванням. Тому в кожному з них сайт будуть відображатися по різному.
Щоб це навчиться обходити ці проблеми, для початку, як Ти вже з'ясували необхідна практика, а для полегшення початкового етапу вивчення кросбраузерності верстки я підготували для Вас кілька порад.

Рада 1. Вирішити проблему атрибутів досить просто, хоча може трохи нудновато. Для цього просто потрібно прописати все кожен з атрибутів в таблиці стилів. Таким чином браузерам не доведеться вставляти значення за своїм бажанням.

Порада 2. Встановити всі популярні браузери на свій робочий комп'ютер, а також всі версії браузера Internet Explorer. Так як встановити відразу декілька версій на один комп'ютер без особливих танців з бубном непросто, то можна встановити Internet Explorer Tester. Ця програма дає можливість перевіряти сайт відразу ж на декількох версіях браузера.

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

Рада 4. Використовуйте плагіни, що дозволяє швидше знаходити помилки коду для кожного з браузерів. Як приклад можна потестувати ці плагіни:
  1. Для Chrome на сайті getfirebug.com
  2. Для Opera на офіційному сайті Opera
  3. Для Mozila на сайті addons mozila
  4. Для IE на оф. сайті Microsoft

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

Вивчайте кросбраузерності верстку і спасибі за увагу.