Css хакі для браузерів

Відео: Браузер Vivaldi від творців Opera

Той, хто займався Web-дизайном, стикався з такою проблемою: коли всі браузери нормально відображають стиль, застосований до сторінці, і тільки один "гадениш" спотворює сторінку. Найчастіше цим "гадениш" стає браузер Internet Explorer, особливо 6-я версія і нижче, якими користуються приблизно 7-8% користувачів Інтернету. Погодьтеся, що це дуже багато, щоб просто так на них забити. Хоча і інші браузери (навіть сучасні) іноді показують сюрпризи. Тому для того, щоб будь-який браузер правильно відображав Вашу сторінку і були придумані CSS хакі.

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

Однак, перш ніж перейти до CSS Хакама, хочеться розповісти про інший спосіб поділу стилів, який більш кращий: з використанням PHP або jаvascript, в яких ми можемо визначити тип і версію браузера, і вже, відповідно до цього, підключати відповідний файл стилів. Даний спосіб розглядати не будемо, так як для того щоб зрозуміти його, необхідно мати мінімальний набір знань з цих мов.

Ще один спосіб пов`язаний з тим, що головним "дезертиром", як правило, є IE. Тому для нього придуманий окремий спосіб, навіть без використання скриптів. Полягає він в умовних коментарі в голові документа (всередині тега ). Працює він лише для браузерів IE, але, як правило, з ними і бувають проблеми, тому даний спосіб можна зустріти дуже часто. Виглядає він таким чином:

Відео: Кому потрібні флекси - HTML Шорти

Якщо перевести на російську мову, то буде приблизно так: "Якщо браузер користувача - IE, то підключити таблицю стилів з файлу css / ie.css".

Якщо необхідно вказати конкретну версію браузера, то разом з "IE"Необхідно поставити ще й номер версії. Наприклад так:

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

Даний стиль буде застосований для всіх версій браузерів IE нижче 6-ий версії. Якби замість "lt"Поставили"lte", То це б означало нижче або еквівалентно 6-ий версії.

У більшості випадків, даних знань вже достатньо, і треба намагатися, щоб не було потрібно більшого. Однак, існують ситуації, коли дані способи не зовсім розумні. Наприклад, при ситуації, коли у величезній CSS файлі, всього лише 1-2 стилю потребують особливої ​​вигляді для окремих браузерів. Нерозумно в такому випадку створювати окремий величезний файл, який потім підключати через скрипти або через такі умови. Ось тому і були придумані CSS хакі для браузерів, до яких ми зараз і переходимо. І почнемо ми з:

1) Internet Explorer. даний CSS хак працює для версій IE7 і нижче. Як показує мій досвід, браузер IE8 вже дуже пристойний, тому з ним у мене ще проблем не виникало. А ось для браузерів IE7 і нижче показую хак:

Як бачите перед другим властивістю "margin-top"Варто символ"*". Це і є CSS хак. Тобто якщо поставити "*" перед ім`ям властивості, то ця властивість буде застосовано тільки для браузерів IE7 і нижче. Висновок: для всіх браузерів "margin-top"Буде в значенні"20px", А для браузерів IE7 і нижче у значенні "30px". Якщо потрібно вказати стиль тільки для IE6 і нижче (Це часто буває, тому що з IE7 набагато краще справи йдуть і найчастіше правити стиль для цього браузера не потрібно), то існує інший CSS хак:

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

2) Mozilla Firefox. даний CSS хак працює тільки для браузерів Mozilla Firefox. Ось його приклад:

В даному прикладі повідомляється, що стиль до селектора "p"Буде застосований тільки для браузерів Mozilla Firefox, а всі інші браузери даний стиль проігнорують.

3) Opera. цей CSS хак використовується для браузерів Opera. Приклад його використання:

Тут я думаю, що також все зрозуміло.

Відео: CSSO - стискаємо CSS | Роман Дворний (Avito)

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