Підключення css для окремих браузерів

Як відомо, не всі браузери однаково сприймають файли стилів css. В основному, проблеми виникають зі старими версіями мелкософтовского творіння Internet Explorer (7 версія і нижче). До речі, якщо проблема виникає в сучасних браузерах (на зразок Opera, Mozilla Firefox, Chrome), то я настійно рекомендую переглянути верстку сторінки.

Так ось. Проблема з браузерами є. І я знаю як мінімум три способи вирішення цієї проблеми.

Спосіб 1й. найправильніший

Стилі для браузерів, які некоректно розуміють ваш css, пишуться в окремому файлі. Зазвичай цим браузером, як я вже говорив, є Internet Explorer. і файліки такі називаються fix-ie.css

Рішення для Drupal 6

Далі в блоці файлу page.tpl.php пишеться наступний код:

Міняємо імяТеми на реальне назву своєї теми - і коли ви відкриєте Internet Explorer версії 7 і нижче - це фото буде додано до загального набір файлів стилів, і навіть закешіруется, якщо кешування включено.

За версію браузера, до якої буде підключений файл стилів, відповідає ось цей рядок:

Тут lte означає LESS THEN or EQUAL (тобто - менше або дорівнює). Так само існують:

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

Рішення для Drupal 7

У сьомому друпалі для додавання стилів була розроблена спеціальна функція (писати в template.php):

Спосіб 2й. Чи не найправильніший, але для невеликих рішень можна

Використовувати так звані хакі. Тобто стилі, які буде розуміти тільки певні браузери. приклад:

У всіх браузерах, крім IE 6 і 7, фон буде білий. А в IE 6 і 7 - чорний. Ще приклад:

Ці стилі зрозуміє тільки IE 7 версії:

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

Подивитися список інших хаков можна тут

Спосіб 3й. Дивний, але взагалі можна

Він мені прийшов в голову тільки в момент написання статті. Стилі адже можна додавати і за допомогою скриптів :) Наприклад, напишемо скрипт, який буде для IE 7 міняти колір фону на чорний:

  • Читабельність стилів знижується
  • Якщо у користувача відключені скрипти (а у користувачів старих IE це не така вже й рідкість) - стилі не підключаться
  • При невисокій швидкості з'єднання з Інтернетом сайт на очах у користувача буде "стрибати", застосовуючи зміни від підвантаженими скриптів

Ви можете вибрати будь-який з варіантів в залежності від ваших потреб. Особисто я майже завжди використовую перший варіант. Але якщо мені треба для IE додати або перекрити пару стилів - сенсу створювати файл я не бачу. У такій ситуації дійсно простіше використовувати хакі.

Може допоможе кому-небудь.

використовував 1 спосіб для drupal7 і дуже довго не міг зрозуміти чому працює тільки наполовину, тобто для прикладу в style.css у мене такий код:

звичайно ie 8 і нижче це не можуть зрозуміти, тому я скористався 1 способом і в fix-ie написав:

але виникла проблема накладання однієї css на іншу, і мій IE8 став брати з style.css розмір border 40px, а з fix-ie.css колір для нього #fff
проблему вирішив додаванням в template.php рядки для НЕ ie браузерів і приведення коду до такого виду:

звичайно залишається створити no-ie.css і перемістити туди з style.css всі описи, які дублюються в fix-ie.css

а можна піти по дугому шляху і щоб використовувати не 3 ЦСС а 2 - просто замінити в template.php no-ie.css на style.css, але тоді не забудьте прибрати з info файлу теми рядок stylesheets [all] [] = style. css

Схожі статті