Css хакі для браузерів
Той, хто займався Web-дизайном. стикався з такою проблемою: коли всі браузери нормально відображають стиль, застосований до сторінці, і тільки один "гадениш" спотворює сторінку. Найчастіше цим "гадениш" стає браузер Internet Explorer. особливо 6-я версія і нижче, якими користуються приблизно 7-8% користувачів Інтернету. Погодьтеся, що це дуже багато, щоб просто так на них забити. Хоча і інші браузери (навіть сучасні) іноді показують сюрпризи. Тому для того, щоб будь-який браузер правильно відображав Вашу сторінку і були придумані CSS хакі.
CSS хак - це спеціальний синтаксис стилю CSS. який розуміє тільки один певний браузер. Причому CSS хакі навіть часто різняться для різних версій одного браузера.
Якщо перевести на українську мову, то буде приблизно так: "Якщо браузер користувача - IE. То підключити таблицю стилів з файлу css / ie.css".
Якщо необхідно вказати конкретну версію браузера, то разом з "IE" необхідно поставити ще й номер версії. Наприклад так:
Як не важко здогадатися, стиль буде застосований тільки для браузерів IE версії 6. Також буває необхідно вказати таблицю стилів для браузерів нижче певної версії. В такому випадку, використовується даний синтаксис:
Даний стиль буде застосований для всіх версій браузерів IE нижче 6-ий версії. Якби замість "lt" поставили "lte", то це б означало нижче або еквівалентно 6-ий версії.
У більшості випадків, даних знань вже достатньо, і треба намагатися, щоб не було потрібно більшого. Однак, існують ситуації, коли дані способи не зовсім розумні. Наприклад, при ситуації, коли у величезній CSS файлі. всього лише 1-2 стилю потребують особливої вигляді для окремих браузерів. Нерозумно в такому випадку створювати окремий величезний файл, який потім підключати через скрипти або через такі умови. Ось тому і були придумані CSS хакі для браузерів, до яких ми зараз і переходимо. І почнемо ми з:
1) Internet Explorer. Даний CSS хак працює для версій IE7 і нижче. Як показує мій досвід, браузер IE8 вже дуже пристойний, тому з ним у мене ще проблем не виникало. А ось для браузерів IE7 і нижче показую хак:
p margin-top: 20px; # Для всіх браузерів
* Margin-top: 30px; # Для браузерів IE7 і нижче.
>
Як бачите перед другим властивістю "margin-top" стоїть символ "*". Це і є CSS хак. Тобто якщо поставити "*" перед ім'ям властивості, то ця властивість буде застосовано тільки для браузерів IE7 і нижче. Висновок: для всіх браузерів "margin-top" буде в значенні "20px", а для браузерів IE7 і нижче в значенні "30px". Якщо потрібно вказати стиль тільки для IE6 і нижче (це часто буває, тому що з IE7 набагато кращі справи і найчастіше правити стиль для цього браузера не потрібно), то існує інший CSS хак:
p margin-top: 20px; # Для всіх браузерів
_margin-top: 30px; # Для браузерів IE6 і нижче.
>
Як не важко помітити, перед другим властивістю стоїть знак "_", який і є CSS хаком для браузерів IE6 і нижче.
2) Mozilla Firefox. Даний CSS хак працює тільки для браузерів Mozilla Firefox. Ось його приклад:
p, x: -moz-any-link margin-top: 30px;
>
В даному прикладі повідомляється, що стиль до селектора "p" буде застосований тільки для браузерів Mozilla Firefox. а всі інші браузери даний стиль проігнорують.
3) Opera. Цей CSS хак використовується для браузерів Opera. Приклад його використання:
* | Html [xmlns * = ""] p margin-top: 30px;
>
Тут я думаю, що також все зрозуміло.
Ось і все, що хотілося написати в цій статті. Однак, ще раз нагадую, що CSS хакі - це погано, дуже часто вони не проходять при перевірці валідності коду, а це вже не є добре. Загалом, намагайтеся їх не використовувати при створенні сайту або використовувати тільки в самому крайньому випадку. А, взагалі, рекомендую Вам ознайомитися з основами CSS. тоді у Вас буде менше проблем, пов'язаних з різним поданням стилів у браузерів.
Запропонуйте цю статтю друзям:
Якщо Вам сподобався сайт, то розмістіть посилання на нього (у себе на сайті, на форумі, в контакті):
Вона виглядає ось так:
Спасибі, вже дописано.
чомусь непоявляеться чому знову разпливчата?
можішь мені його виправити щоб валідний був
Я-то можу, звичайно, але ж Вам потрібно вчитися.
ну я навчився а виь мені покачто виправите на валідний а я подивлюся і запам'ятаю
Ви не навчитеся, якщо я виправлю.
Привіт, Михайло. Підключив таблицю стилів для ІЕ, а в Експлорер все одно відображається основна таблиця стилів. Таблицю помістив в голову документа, перед посиланням на основну таблицю. Що я роблю не так? Дякуємо.
Спасибі, Михайло. Зробив.
Привіт, Михайло. У мене на сторінці 5 фонових зображень (в тезі body), але Експлорер їх не відображає, оскільки не може відобразити більше одного фонового зображення. Який хак потрібно застосувати для того, щоб у всіх Експлорер колір фону був чорним? При цьому таблицю стилів підключати не можна.
Застосуйте люблю хак зі статті вище так, щоб після основного властивості йшло властивість створення чорного фону для експлорера. Не обов'язково робити це в окремій таблиці стилів.
Велике спасибі. Хак спрацював.
Михайло! Дякую за цікаву статтю! Ось ще CSS хакі для браузера IE Можливо, варто їх дописати в вашу статтю для повноти інформації 1) подвійний слеш (//) перед css-властивістю дасть видимість даного властивості тільки браузеру IE будь-якої версії. 2) зірочка (*) або слеш (/) перед css-властивістю дасть видимість даного властивості тільки браузерам IE6 та IE7. 3) Підкреслення (_) або дефіс (-) перед css-властивістю дасть видимість даного властивості тільки браузеру IE6.
У мене сторінки відображаються нормально у всіх браузерах, проблеми з одним браузером OPERA. причому з однієї його версією. Таке відчуття, що сторінка зверстана навиворіт. Пробував застосувати для неї хак * | html [xmlns * = ""], вставляю просто в таблицю стилів, але вона (опера) просто ігнорує його.
Якщо цей не нова версія Opera, то не звертайте уваги.
Схоже відповіді на це питання тут я не дочекаюся .. (((((