Для кожного гарного верстальника в якийсь момент часу постає питання кроссбраузерності. Що таке кросбраузерність? Ця властивість сайту або дизайну сайту відображатиметься одного в різних барузерах. Справа в тому, що при створенні браузерів розробники не сильно замислюються про стандартизацію, це породжує різне уявлення одного і того ж сайту в їхній продукції. Створення кросбраузерної верстки/сайту та дозволяє подолати цю різницю.
Для цієї мети в CSS мові були придумані так звані хакі (чити), які дозволяють застосовувати групу властивостей тільки під один браузер або кілька, наприклад, тільки Opera або Chrome/Safari.
У цій статті представлені можливі робочі варіанти для останніх версій браузерів, усі хакі були перевірені на останніх версіяна час 10.05.2015. Якщо вам допомогла ця стаття або у вас залишилися питання, запитуйте в коментарях та оцінюйте її, це може спонукати нас розширити кількість хаків для різних браузерів, а також додати приклади використання для кожного.
Якщо хак написаний прямо в таблиці, значить для його використання потрібно скопіювати його в CSS файл і адаптувати під ваш стиль, інакше на місці назви посилання з детальним описомяк зробити хак.
| + | - | - | - | - | |
| - | + | - | - | - | |
| - | - | + | - | - | |
|
_::-moz-svg-foreign-content, :root .class () |
- | - | - | + | - |
|
html/**/body .class, x:-moz-any-link, x:default (color: #F00 ;) |
- | - | - | - | + |
| - | + | + | + | - | |
|
@supports (-webkit-appearance:none) ( /* тут ваші стилі у звичайному вигляді */ ) |
- | + | + | - | - |
Найпростіший і добре дієвий варіант, створити окремий .css файл для всіх версій IE і підключати його на ряду з головним, але особливим чином.
Умовні коментарі працюють лише в IE під Windows, для інших браузерів вони є звичайними коментарями, тому їх можна безболісно використовувати. Синтаксис такий (у файлі .php або .html, куди підключаємо файл стилів додаємо такі рядки):
де styles.css - файл, який відповідатиме за стилі тільки для IE.
Єдиний відомий на Наразіспосіб написати стилі тільки для Google Chrome, використовуючи при цьому JavaScript. При цьому не потрібно знати JS, достатньо взяти приклад звідси та адаптувати його під свої потреби.
Суть полягає в тому, що ми перевіряємо, яким браузером користується відвідувач сайту і якщо це Google Chrome, підключаємо для нього додатковий файлстилів, у якому потрібні властивості, які можуть перекриватися в основному файлі стилів, виділяємо !important.
розділ, додаємо такі рядки, всередині тега ):
var isChrome = !!window.chrome && !!window.chrome.webstore; if (isChrome) ( var $ = document; var cssId = "myCss"; var head = $.getElementsByTagName("head"); var link = $.createElement("link"); link.id = cssId; link.rel = "stylesheet"; link.type = "text/css"; link.href = "/css/template.css"; //шлях до файлу стилів тільки для Chrome link.media = "all"; );
Єдиний відомий на даний момент спосіб написати стилі тільки для Opera, використовуючи JavaScript. При цьому не потрібно знати JS, достатньо взяти приклад звідси та адаптувати його під свої потреби.
Суть полягає в тому, що ми перевіряємо, яким браузером користується відвідувач сайту і якщо це Opera, то підключаємо для нього додатковий файл стилів, в якому потрібні властивості, які можуть перекриватися в основному файлі стилів, виділяємо !important.
Синтаксис такий (у файлі .php або .html, куди підключаємо файл стилів, тобто в розділ, додаємо такі рядки, всередині тега):
var isOpera = !!window.opera || /opera|opr/i.test(navigator.userAgent); if (isOpera) ( var $ = document; var cssId = "myCss"; var head = $.getElementsByTagName("head"); var link = $.createElement("link"); link.id = cssId; link.rel = "stylesheet"; link.type = "text/css"; link.href = "/css/template.css"; //шлях до файлу стилів тільки для Opera link.media = "all"; );
Єдине, що вам тут потрібно змінити це в 10 рядку шлях до вашого файлу стилів.
Дякуємо всім за увагу, раді вам намагатися. Повторимося, що ми чекаємо на ваші коментарі, пропозиції щодо поліпшення і т.д.
При використанні семантичної верстки кожен розробник обов'язково зіткнеться з проблемами кросбраузерності, для вирішення яких у більшості випадків доводиться використовувати так звані хаки. Зазвичай під цим терміном мається на увазі особливий спосіб написання селекторів або правил, який розуміється лише конкретним браузером. Однак сумісність із CSS у більшості браузерів вже досягла рівня, при якому слід обмежувати використання хаків.
Як правило, основним джерелом проблем буває Internet Explorer. Різноманітність помилок у реалізації CSS браузерах Microsoftдивує навіть найдосвідченіших верстальників. У зв'язку з цим виникають ситуації, коли потрібно використовувати додаткові чи альтернативні правила для IE. Саме в таких випадках рекомендується застосовувати хаки. Якщо вам раптом знадобилися альтернативні правила, скажімо, тільки для Firefox, то рекомендується переглянути ваш код, і в 99% випадків ви знайдете більше елегантне рішення.
Найбільш популярним хаком на сьогодні залишається так званий "star html hack":
#element ( position:relative; /* Основне правило для всіх браузерів */ ) * HTML #element ( position:static; /* Перевизначення правила для IE молодше сьомої версії */ )
У валідних HTML- та XHMTL-документах селектор HTMLзавжди грає роль кореневого елемента, а BODY - нащадка першого рівня, але не другого чи більше високого рівня. Таким чином, теоретично селектор * HTML не повинен застосовуватися до жодного елементу. Але на практиці IE п'ятих і шостих версій через помилку в власному движкуінтерпретують даний селектор як HTML і застосовують вказані правила. Оскільки решта сучасні браузериселектор «*HTML» ігнорують, цей прийом можна використовувати в корисливих цілях. Це корисно, але чи правильно?
Незважаючи на те, що даний хак коректний з точки зору стандарту CSS, є низка негативних нюансів.
Як приборкати Internet Explorer, не використовуючи хакі?
Альтернативний вихідУ надрах Microsoft Developer Network є краще рішення - . Ця технологіяпідтримується в Internet Explorer, починаючи з п'ятої версії, тим самим охоплюючи всі браузери, що нас цікавлять. Нижче наведено приклад елегантного використання умовних коментарів:
Звичайне підключення CSS-файлів, проте побачать другий рядок, а отже і підвантажать css-файл лише браузери сімейства Internet Explorer. Відбувається це завдяки умові, закладеній у умовному коментарі- if IE. Ця умоваозначає "якщо Internet Explorer" і Explorer'и версії п'ять і вище (включаючи свіжий сьомий) прочитають код, що знаходиться всередині коментаря та інтерпретують його.
Таким чином, всі наші хакі можна винести в окремий файл:
style.css:
#element ( position:relative; /* Основне правило для всіх браузерів */ )
#element ( position:static; /* Перевизначення правила для IE всіх версій */ )
Тепер ми не використовуємо хакі в основному аркуші стилів; домоглися того, що альтернативне правило було застосоване до всіх Explorer'ів, включаючи сьомий; а також позбавили користувачів альтернативних браузеріввід завантаження надлишкового коду. При цьому ми зберегли наш (X)HTML і CSS валідним, тому що такий умовний коментар не розпізнається ніким іншим, крім IE, включаючи навіть валідатор від W3C.
Умовні коментарі гнучкіші, ніж здається на одному прикладі. Ви можете охопити не тільки всі Explorer'и, але і всі його версії нижче або вище за певну або конкретну його версію; а також підвантажити код, який інтерпретуватимуть усі браузери, крім Internet Explorer. На жаль, це вже тема для окремої статті і з цими можливостями читачеві слід ознайомитись самостійно.
position: relative
- The IE/Win Disappearing List-Background Bug
- IE6 Border Chaos
Це правило також часто застосовується для спонтанних блоків. Тих, що не падають або неправильно відображаються, а саме зникають. Особливо грішить Internet Explorer 5.0.
height: 1%
- The IE6 Three Pixel Text-Jog
- The IE Escaping Floats Bug
- IE and italics (будьте обережні з 5.0, використовуйте екранування)
- IE/Win Unscrollable Content Bug
- IE/Win Guillotine Bug
Застосовується також для кліарингу елементів. Задається контейнеру, що містить float'и.
display: inline
- Floats, Margins and IE
- The IE Doubled Float-Margin Bug
display: inline-block
- Quirky Percentages in IE6's Visual Formatting Model
- Аналог height: 1% для IE 7.
І ще пара порад:
По-перше, використовуйте дані правила по можливості тільки для IE. Причому для різних версійрішення може відрізнятися (частіше це стосується height: 1% та zoom: 1).
По-друге, зіткнувшись з небажаною поведінкою Explorer'а, якому немає документованого пояснення (або вам просто ліньки його шукати) - спробуйте послідовно застосувати до проблемного елемента всі правила, що впливають на властивість hasLayout. Псолодовий метод перебору дуже часто використовується в нашій професії.
Будь-хто, хто займався Web-дизайном, стикався з такою проблемою: коли всі браузери нормально відображають стиль, застосований до сторінки, і тільки один "гаденя" спотворює сторінку. Найчастіше цим "гаденям" стає браузер Internet Explorer, особливо 6-а версія і нижче, якими користуються приблизно 7-8% користувачів Інтернету. Погодьтеся, що це дуже багато, щоб просто так забити на них. Хоча інші браузери (навіть сучасні) іноді показують сюрпризи. Тому для того, щоб будь-який браузер правильно відображав Вашу сторінку та були придумані CSS хакі.
CSS хак - це спеціальний синтаксисстилю, який розуміє лише один певний браузер. Причому CSS хакі часто розрізняються для різних версій одного браузера.
Однак, перш ніж перейти до CSS хакам , хочеться розповісти про інший спосіб поділу стилів, який кращий: з використанням PHPабо JavaScript , в яких ми можемо визначити тип і версію браузера, і вже відповідно підключати відповідний файл стилів. Даний спосіб розглядати не будемо, тому що для того, щоб зрозуміти його, необхідно мати мінімальний набір знань з цих мов.
Ще один спосіб пов'язаний з тим, що головним "дезертиром", як правило, є IE. Тому для нього придумано окремий спосіб, навіть без використання скриптів. Полягає він в умовних коментарях у голові документа (всередині тега). Працює він тільки для браузерів IE, але, як правило, з ними і бувають проблеми, тому даний спосібможна зустріти дуже часто. Виглядає він таким чином:
Якщо перекласти на російську мову, то буде приблизно так: "Якщо браузер користувача - 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: 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 p (
margin-top: 30px;
}
Тут я думаю, що також все зрозуміло.
Ось і все, що хотілося написати у цій статті. Однак, ще раз нагадую, що CSS хакі - це погано, дуже часто вони не проходять при перевірці валідності коду, а це вже не добре. Загалом, намагайтеся їх не використовувати або використовувати тільки в самому крайньому випадку. А, взагалі, рекомендую Вам ознайомитися з , тоді у Вас буде менше проблем, пов'язаних із різним уявленням стилів у браузерів.
В Internet Explorer 7 (IE7) у порівнянні з попередньою версієюбуло виправлено велика кількістьпомилок. Однак з'явилися нові помилки, які також вимагають написання окремого кодупід цю версію браузера. Далі представлені хакі для сьомої версії Internet Explorer.
Використання!У сьомій версії було виправлено помилку з !important , але з'явилася нова. Якщо після властивості через пробіл додати знак окликуі будь-який набір символів, то стильова властивість буде коректно сприйнято замість ігнорування. Зазвичай застосовують запис !ie і всі браузери крім IE6 та IE7 пропускають такий стиль. Зауважте, що хак призводить до невалідного коду CSS.
Хакі .hack ( background: orange; /* Помаранчевий колір */ background: green !ie; /* Зелений колір */ padding: 10px; color: #fff; ) euismod tincidunt.
У цьому прикладі IE6 і IE7 колір фону блоку покаже зеленим, решта браузерів — помаранчевим.
Використання!!importantІнша проблема пов'язана з !important у тому, що IE7 дозволяє в записі неприпустимі символи. Конструкцію !!important всі браузери проігнорують, але IE6 та IE7 сприймає її як коректну. Використання такого запису призводить до невалідного CSS.
XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8+ Cr Op Sa Fx
Хакі .hack ( background: orange; /* Помаранчевий колір */ background: green !!important; /* Зелений колір */ color: #fff; padding: 10px; ) Lorem ipsum dolor sit amet nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
У цьому прикладі в браузері IE6 та IE7 колір фону блоку буде зеленим, в решті браузерів — помаранчевим.
Зірочка перед ім'ям селектораДодавання символу зірочки (*) перед ім'ям стильової властивості суперечить специфікації CSS, але розуміється браузером Internet Explorer до версії 7.0 включно. Відповідно, властивості із зірочкою попереду працюватимуть лише в цьому сімействі браузерів.
XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8+ Cr Op Sa Fx
Хакі .hack ( background: orange; /* Помаранчевий колір (для всіх браузерів) */ *background: green; /* Зелений колір (для браузера IE7 і нижче) */ color: #fff; padding: 10px; ) Lorem ipsum dolor sit amet...
У цьому прикладі зелений колірфону блоку буде встановлено лише для браузера Internet Explorer версії 7.0 та нижче. В інших браузерах колір фону буде помаранчевим.
Конструкція *:first-child+htmlКонструкція *:first-child+html, що додається перед ім'ям селектора, працює тільки для браузера Internet Explorer 7. Плюс у тому, що вона відповідає специфікації CSS.
XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8+ Cr Op Sa Fx
Хакі *:first-child+html .hack ( background: green; /* Зелений колір */ ) .hack ( background: orange; /* Помаранчевий колір */ color: #fff; padding: 10px; ) Lorem ipsum dolor sit amet ...
У цьому прикладі зелений колір фону блоку буде встановлений тільки для IE7. В інших браузерах колір фону буде помаранчевим.
При використанні семантичної верстки кожен розробник обов'язково зіткнеться з проблемами кросбраузерності, для вирішення яких у більшості випадків доводиться використовувати так звані хаки. Зазвичай під цим терміном мається на увазі особливий спосіб написання селекторів або правил, який розуміється лише конкретним браузером. Однак сумісність із CSS у більшості браузерів вже досягла рівня, при якому слід обмежувати використання хаків.
Як правило, основним джерелом проблем буває Internet Explorer. Різноманітність помилок у реалізації CSS у браузерах Microsoft дивує навіть найдосвідченіших верстальників. У зв'язку з цим виникають ситуації, коли потрібно використовувати додаткові чи альтернативні правила для IE. Саме в таких випадках рекомендується застосовувати хаки. Якщо вам раптом знадобилися альтернативні правила, скажімо, тільки для Firefox, то рекомендується переглянути ваш код, і в 99% випадків ви знайдете більш елегантне рішення.
CSS-хакі для браузера Opera*|html .style ( background: #F00; ) html:first-child .style ( background: #F00; ) CSS-хакі для браузера FireFox@-moz-document url-prefix() ( .style (background: #F00;) ) CSS-хакі для браузера Internet Explorer 6.0 і нижче .style ( _background: #F00; ) * html .style ( background: #F00; ) CSS-хакі для браузера Internet Explorer 7.0 *+html .style ( background: #F00; ) html>body .style ( *background: #F00; ) CSS-хакі для браузера Safari body:last-child:not(:root:root) .style ( background: #F00; ) html body:last-child .style ( background: #F00; )Для Internet Explorer існує альтернативне рішення- conditional comments (умовні коментарі). Ця технологія підтримується в Internet Explorer, починаючи з п'ятої версії, тим самим охоплюючи всі браузери, що нас цікавлять. Нижче наведено приклад використання умовних коментарів:
Першим рядком йде звичайне підключення CSS-файлів, проте другий рядок, побачать, а отже і підвантажать css-файл лише браузери сімейства Internet Explorer. Відбувається це завдяки умові, закладеній в умовному коментарі – if IE. Ця умова означає «якщо Internet Explorer» та Explorer'и версії п'ять і вище прочитають код, що знаходиться всередині коментаря та інтерпретують його.
Таким чином, всі наші хакі можна винести в окремий файл.
І ще раз дозволю собі повторитись. Час IE6 добігає кінця, і на сьогоднішній день практично всі сучасні браузери відображають валідний кодцілком адекватно. Тому, у разі виникнення проблем із відображенням сторінки в якомусь браузері, перш ніж вдаватися до хаків, перегляньте заново свій код, поекспериментуйте, пошукайте інформацію в інтернеті, і швидше за все непотрібних хаків можна буде уникнути, досягнувши таким чином абсолютної валідності вашого коду.
