Прості, але ефективні поради по крос-браузерної верстці, які повинен знати кожен, верстка

Багато дизайнерів постійно шукають крос-браузерні прийоми, які допомогли б їм вирішувати проблеми сумісності браузерів.

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

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

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

У цій статті я покажу вам деякі крос-браузерні стильові прийоми і трюки, які серйозно спрощують розробку веб-сайтів.

Використовуйте CSS Reset

Давайте погодимося з тим фактом, що веб-браузери за замовчуванням по-різному стилізують елементи HTML. Деякі браузери мають різний підхід до значень таких стилів як margin і padding.

Щоб це виправити, є хороший прийом - додати код CSS reset в початок вашого файлу стилів. Це скине стилі всіх елементів.

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

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

Перевіряйте ваш код HTML і CSS

Доброю практикою перед викладанням сайту в мережу є перевірка HTML і CSS за допомогою валідаторів, так як це допоможе вам виправити деякі дрібні помилки, які можуть принести проблеми в майбутньому.

Ви можете використовувати валідатори HTML і CSS від W3C. Ці валідатори схвалені W3C, але, якщо ви хочете, то можете використовувати будь-які інші, які вам подобаються.

Наступний код буде працювати у всіх версіях IE:

А наступний код призначений для конкретної версії IE:

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

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

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

Розглянемо список Вендорний префіксів:

Як приклад давайте використаємо властивість transition з Вендорний префіксами для певних браузерів:

Очищайте простір після плаваючих елементів

Ми всі знаємо, як зробити елемент плаваючим, вліво або вправо, використовуючи властивість float. За замовчуванням, якщо ви використовуєте тільки один плаваючий елемент спільно з не плаваючим, перший просто розташується збоку від останнього при наявності місця.

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

Подивіться на малюнки нижче:

Мал. 1. Ось, чого ми хочемо досягти.

Мал. 2. Однак ось, що у нас виходить.

Ця проблема може бути вирішена простий очищенням простору після плаваючих елементів за допомогою CSS властивості clear зі значенням both. Це означає, що простір по обидва боки буде очищено.

Управління розміром шрифту

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

Більшість людей використовують пікселі (px) або пункти (pt), які засновані на дозволі екрану. Вони завжди фіксовані.

Завжди тестируйте ваш веб-сайт в декількох браузерах

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

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

Спрощуйте код

Спрощення коду робить всю роботу простою і швидкою. Що я маю на увазі? Одне тільки використання простих елементів при розробці вашого веб-сайту робить задачу браузера з читання вашого коду набагато простіше.

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

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

висновок

Доброю ідеєю є час від часу перечитувати ваш код і перевіряти його на сумісність з різними браузерами.

Переклад статті "Simple Yet Important Cross-Browser Styling Tips Everyone Should Know" був підготовлений дружною командою проекту Сайтобудування від А до Я.