У цій статті ми розглянемо, що таке префікси браузерів, причини їх появи і як їх використовувати в CSS.
Що таке префікси?
Веб-розробник початківець вивчати теоретичні основи CSS і використовує дані знання на практиці може зіткнутися з проблемами при розгляді реальних прикладів. Це може викликати у нього нерозуміння того, що відбувається і відбити подальше бажання вивчати цю технологію.
Наприклад, при розгляді стилів якогось сайту веб-розробник може зіткнутися з властивостями, що містять попереду деякі незрозумілі слова: -webkit-, -moz-, -ms- і ін.
* (-Webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;)
Що ж це таке? Насправді все просто, ці незрозумілі слова є префіксами наступних браузерів:
- -webkit-: браузери Chrome, Safari, Opera;
- -moz-: браузер Mozilla Firefox;
- -ms-: браузер Internet Explorer.
Таким чином, якщо перед назвою властивості варто деякий префікс, то це означає, що дана властивість реалізовано і буде застосовуватися виключно в зазначеному браузері. Всі інші браузери дане властивість ігноруватимуть, тому що для них цей префікс невідомий.
Причини появи префіксів?
Причин для появи префіксів було досить багато:
- Для включення в браузер експериментальних властивостей CSS, які стандартом ще не затверджені. Таким чином, виробники браузерів виробляють тестування і вносять пропозиції перед затвердженням властивостей CSS в стандарті.
- Для вирішення проблем з кросбраузерністю.
- Для створення власних властивостей, які не входять до стандарт CSS, але можливо з'являться в ньому через деякий час.
Коли експериментальне властивість затверджено в стандарті і пройшло тестування в браузері, у нього зазвичай забирається префікс.
Як використовувати префікси?
Розглянемо в якості прикладу наступний код:
* (-Webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;)
Даний код застосовує властивості CSS, які змінюють алгоритм розрахунку ширини і висоти для всіх елементів веб-сторінки. Перше CSS властивість -webkit-box-sizing зі значенням border-box призначене для браузерів, що використовують движок webkit (Safari) або blink (Chrome, Opera, яндекс.браузер). Друге CSS властивість -moz-box-sizing зі значенням border-box призначене для браузерів, що використовують движок Gecko (Mozilla Firefox). Останнє CSS властивість призначене для браузерів, в яких ця властивість вже протестовано і впроваджено відповідно до стандарту.
При використанні префіксів для властивостей CSS, необхідно пам'ятати, що вони мають розташовувати до властивості CSS без префікса. Чому це так важливо? Це важливо тому, що якщо колись в браузері буде реалізовано оригінальне властивість (без префікса), то буде використовуватися саме воно (тому що воно розташовується останнім), а не його експериментальна версія.
Наприклад: застосування властивості CSS до всіх елементів веб-сторінки в браузері Google Chrome версії 40.
На малюнку вище видно, що оригінальне властивість box-sizing вже впроваджено в цей браузер, і через те, що воно розташовується останнім, браузер використовує іменного його, а не вищенаведене властивість -webkit-box-sizing.
Як перевірити підтримку певного властивості в браузері?
Сайт, на якому можна перевірити реалізовано дане властивість чи ні в конкретному браузері можна за посиланням наведеної нижче. Крім цього на сайті показується кількість користувачів у відсотках, які користуються цією версією браузера.
Сайт "Can I Use ..."Наприклад: перевіримо, як реалізовано властивість transform в браузерах.
На сайті "CanIUse" браузери відзначаються різними кольорами, залежно від того в якому стані знаходиться підтримка певних властивостей або тегів:
- Червоний прямокутник - браузер, в якому дане властивість не реалізовано;
- Зелений прямокутник з дефісом, розташованим у правому верхньому кутку - браузер, в якому ця властивість використовується через префікс;
- Світло-зелений прямокутник - браузер, в якому ця властивість реалізовано частково;
- Зелений прямокутник - браузер, в якому ця властивість реалізовано відповідно до стандарту.
Як відомо, не всі браузери однаково сприймають файли стилів css. В основному, проблеми виникають зі старими версіями мелкософтовского творіння Internet Explorer (7 версія і нижче). До речі, якщо проблема виникає в сучасних браузерах (на зразок Opera, Mozilla Firefox, Chrome), то я наполегливо рекомендую переглянути верстку сторінки.
Так ось. Проблема з браузерами є. І я знаю як мінімум три способи вирішення цієї проблеми.
Спосіб 1й. найправильніший
Стилі для браузерів, які некоректно розуміють ваш css, пишуться в окремому файлі. Зазвичай цим браузером, як я вже говорив, є Internet Explorer, І файліки такі називаються fix-ie.css
... ... ...
міняємо імяТемина реальне назву своєї теми - і коли ви відкриєте Internet Explorer версії 7 і нижче - це фото буде додано до загального набір файлів стилів, і навіть закешіруется, якщо кешування включено.
За версію браузера, до якої буде підключений файл стилів, відповідає ось цей рядок:
где 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"; head.appendChild(link); }
Единственный известный на данный момент способ написать стили только для 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"; head.appendChild(link); }
Единственное что вам тут нужно поменять это в 10 строчке путь до вашего файла стилей.
Спасибо всем за внимание, рады для вас стараться. Повторимся, что мы ждем ваших комментариев, предложений по улучшению и т.д.
6.5KКроссбраузерность — это способность сайта корректно отображаться в различных браузерах. Ресурс должен работать одинаково во всех версиях обозревателей.
Особенно это важно в эпоху адаптивного веб-дизайна, когда на первый план выходит способность front-end адаптироваться к широкому диапазону различных устройств и при этом обеспечивать оптимальное качество просмотра.
Раньше дизайнер создавал макет дизайна в Photoshop , который затем переносился в HTML и CSS . На сегодняшний день технологические изменения заставляют переосмыслить эту концепцию. Мы больше не можем предсказать, какой браузер, разрешение или устройство будут использоваться для просмотра сайта. Ушли в прошлое те времена, когда большинство компьютеров использовало фиксированное разрешение 1024 на 768 пикселей, и можно было разрабатывать сайты со статическими размерами.
Современные браузеры полностью поддерживают HTML5 и CSS3 . Но один и тот же код HTML / CSS / JavaScript в старых браузерах интерпретируется по-разному, что приводит к «кроссбраузерной несовместимости » сайта. Особенно это касается старых версий Internet Explorer .
В данной статье мы рассмотрим текущую статистику по просмотрам веб-страниц, приведем перечень средств, которые помогают решать различные проблемы совместимости.
1. Текущая ситуация
Общемировая статистика за 2015 год показывает, что топ-14 используемых разрешений экрана находятся в диапазоне от 1920 на 1080 до 320 на 480 пикселей.
Хотя Windows 7 (31,20% ) до сих пор удерживает большую долю рынка, мобильные платформы начинают заменять традиционные, стационарные.
Взглянув на статистику за 2015 год по используемым браузерам, мы видим, что первое место принадлежит Chrome (все версии — 44,87% ), второе место — Firefox (все версии — 10,37% ), третье Internet Explorer 11 (6,84% ).
Ускоренные темпы выпуска новых версий Google Chrome и Firefox позволяют более эффективно разрабатывать проекты для этих платформ. Немного другая картина складывается для «плохого парня » Internet Explorer , потому что в Сети до сих пор можно найти его старые версии. А это приводит к возникновению проблем с кроссбраузерностью сайта.
Корпорация Microsoft остановила поддержку IE6 8 апреля 2014 года. И с 2016 года будет поддерживаться и получать обновления только самая последняя версия Internet Explorer . Это фактически означает, что в начале 2016 года была полностью прекращена поддержка IE7 и IE8 , независимо от операционной системы. IE9 будет поддерживаться только в Windows Vista , IE10 — только в Windows Server 2012 , IE11 — в Windows 7 и Windows 8.1 :
Как следствие, нужно прекратить разработку под IE6 и, а также под IE7 . Чтобы обосновать эту стратегию, можно привести несколько примеров решений известных компаний: Google прекратила поддержку IE8 в ноябре 2012 года, а IE9 — в октябре 2013 года.
Github больше не поддерживает IE 7 и 8 . Кроме этого часть функционала Twitter не работает в IE8 . И, наконец, популярный фреймворк не будет поддерживать IE8 , начиная с 4 версии .
Тем не менее, статистика использования может варьироваться в зависимости от региона: 6,11% пользователей в Китае в 2015 году по-прежнему просматривали страницы через IE8 . Если принять во внимание, что в Китае было около 724400000 интернет-пользователей, можно понять, что в этом году примерно 44200000 китайцев продолжают использовать IE8 .
Поэтому региональные рынки, специфические клиенты и требования отрасли могут существенно отличаться. Особенно это касается корпоративных и правительственных учреждений.
2. Проанализируйте свою аудиторию
Основной принцип здесь такой: чем выше требуемая кроссбраузерность, тем больше времени потребуется на разработку, что приводит к увеличению стоимости проекта. Чтобы принять взвешенное, экономически обоснованное решение, нужно задать себе следующие вопросы:
- Какова ваша целевая аудитория?
- На какой географический регион нужно настроить таргетинг?
- Какие браузеры и устройства используют ваши посетители?
- Существуют ли в компании или отрасли технические факторы, которые заставляют вас поддерживать конкретные версии старых браузеров?
- Каковы с точки зрения электронной коммерции коэффициенты конверсии и рентабельности различных групп пользователей по версиям браузеров?
Ответив на эти вопросы с помощью статистических данных, например, из Google Analytics , можно получить объективную картину.
3. Проблемы в устаревших браузерах и различные подходы к разработке
Адаптивный веб-дизайн во многом зависит от медиа-запросов, с помощью которых изменяется CSS
для различных разрешений экрана. Кроме этого современные сайты характеризуются использованием семантических элементов HTML5
(например,
Это подводит нас к следующим техническим сложностям при реализации CSS кроссбраузерности:
- Медиа-запросы CSS3
- Семантические элементы HTML5 : не поддерживается в IE6 , 7 и 8 ;
- Селекторы CSS3 : не поддерживается в IE6 . Только частично поддерживаются в IE7 и 8 ;
- Единицы REM : не поддерживается в IE6 , 7 и 8 . Только частично поддерживаются в IE9 и 10 ;
- Лимит количества правил CSS : IE9 и ниже поддерживают только 4095 CSS-селекторов . Правила после 4095-ого селектора не применяются.
Указанные выше ошибки будут иметь наибольшее влияние на стратегию, применяемую при реализации адаптивного дизайна.
Существуют две основных стратегии разработки: постепенное упрощение и прогрессивное улучшение .
Прогрессивное улучшение — основано на принципе, предполагающем начало разработки с общего знаменателя, с минимальных технических требований и уровня опыта взаимодействия пользователя, предлагаемого сайтом. Посетители, заходящие на сайт через последние версии браузеров и устройств, будут обслуживаться прогрессивно расширяемой версией сайта со всеми новейшими функциями.
С другой стороны, пользователям старых браузеров и медленного интернет-соединения будет предлагаться графически усеченная, но все еще функциональная версия сайта.
Подобный подход при реализации кроссбраузерности предполагает начало разработки с простой версии, к которой затем добавляются более сложные элементы. Старые браузеры смогут отображать сайт с базовым уровнем опыта взаимодействия. А новые функции HTML / CSS / JavaScript будут доступны в браузерах, которые могут реально их использовать.
В противоположность этому, постепенное упрощение обеспечивает полнофункциональный уровень UX в современных браузерах. А затем постепенно уменьшает его сложность для старых браузеров за счет графики, но, не касаясь функционала. Идея заключается в том, чтобы начать разработку с новейших веб-стандартов, а затем попытаться минимизировать проблемы, связанные со старыми браузерами.
Какой подход выберете вы, зависит от личных предпочтений и условий проекта:
- Прогрессивное улучшение обеспечивает большую стабильность, так как вы можете постепенно добавлять новые функции для современных браузеров. Но оно требует более тщательного планирования;
- Некоторые разработчики утверждают, что нет смысла поддерживать устаревшие браузеры и должны использоваться новейшие технологии. Поддержка современных браузеров дает намного лучший опыт взаимодействия;
- Существует мнение, что прогрессивное улучшение мертво, так как множество JavaScript-приложений не работают надлежащим образом при этом подходе;
- Веб-доступность для общественных учреждений может быть определена в юридических требованиях конкретных территориальных образований, и это может повлечь необходимость применения особого подхода.
Учитывая появление таких инструментов для определения функций, как Modernizr , лично я склоняюсь к использованию постепенного упрощения и черного списка браузеров при разработке совместимых сайтов.
4. Тестирование, тестирование, тестирование…
Чтобы как можно скорее обнаружить потенциальные проблемы кроссбраузерности JavaScript , нужно в процессе разработки тестировать сайт в различных браузерах и разрешениях. Существуют различные программные эмуляторы, которые могут нам помочь:
- Browserstack — это коммерческий сервис, который предоставляет доступ к тестовой среде, в которой можно проверить свой проект более чем на 700 стационарных браузерах и мобильных устройствах с помощью виртуальной машины в облаке;
- Microsoft Virtual Machines — если вы работаете в Linux, у вас не будет доступа к Internet Explorer . Решение может заключаться в том, чтобы загрузить образы виртуальных машин для IE6 в IE11 , которые затем могут использоваться в сочетании с Oracle VM Virtualbox или Vagrant для локального тестирования;
- Различные разрешения экрана для конкретного браузера можно быстро протестировать с помощью онлайн-сервиса Screenfly . С использованием плагинов для браузеров, таких как Window Resizer для Google Chrome , или непосредственно в разделе инструментов для разработчиков Chrome и Firefox .
5. Normalize.css и CSS Autoprefixer
Обычно я начинаю новые проекты со сброса CSS с помощью Normalize.css , который обеспечивает лучшую кроссбраузерность при определении стилей HTML-элементов , используемых по умолчанию, вплоть до Internet Explorer 8 . Normalize.css сохраняет нужные стили элементов, нормализует их внешний вид и исправляет ряд ошибок и несоответствий в различных браузерах.
Кроме этого многие устаревшие браузеры не могут интерпретировать неизвестные элементы HTML и свойства CSS . Когда браузер встречает фрагмент HTML или CSS , который он не понимает, то игнорирует его и продолжает процесс отображения. Многие приложения используют вендорные префиксы, чтобы добавить новые, экспериментальные или нестандартные функции CSS до их реализации в спецификации:
// Webkit-браузеры, такие как Chrome и Safari -webkit- // Firefox -moz- // Internet Explorer -ms- // Opera -o-
Проблема заключается в том, что префиксы неудобны в использовании и с ними связано много ошибок. Поэтому я использую плагин CSS Autoprefixer в сочетании с Grunt .
Обычные правила CSS будут обработаны с помощью плагина и к ним будут добавлены префиксы на основе базы данных «Can I Use «. Рекомендуется задать в конфигурации версии браузеров, которые нужно поддерживать, например:
options: { browsers: ["last 2 versions", "ie >= 8", "Firefox >= 12", "iOS >= 7", "Android >= 4"] }
В качестве примера рассмотрим следующий класс CSS :
Example { background-image: linear-gradient(top left, #4676dd, #00345b); display: flex; transition: 1s all; }
С помощью CSS Autoprefixer он преобразуется в:
Example { background-image: -webkit-linear-gradient(top left, #4676dd, #00345b); background-image: -moz-linear-gradient(top left, #4676dd, #00345b); background-image: linear-gradient(top left, #4676dd, #00345b); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-transition: 1s all; -moz-transition: 1s all; transition: 1s all; }
6. Условные комментарии
Если нужно создать резервный CSS или включить кроссбраузерность JavaScript для ранних версий Internet Explorer , то можете использовать условные комментарии . Они поддерживаются в Internet Explorer 5-9 , они используют синтаксис комментариев HTML в сочетании с логическими значениями. В зависимости от логического значения (true или false ) код внутри тегов комментариев будет выводиться или скрываться в соответствующих версиях браузера:
КОД, ЯКИЙ БУДЕ ВИКОНУВАТИСЯ // если Internet Explorer // если НЕ Internet Explorer // если Internet Explorer 7 // если НЕ Internet Explorer 7 // если Internet Explorer 9 или НИЖЕ // если Internet Explorer 7 или ВЫШЕ // если Internet Explorer 6 ИЛИ 7 // если ВЫШЕ Internet Explorer 6 НО НИЖЕ 9
Код автоматически скрывается во всех браузерах, не поддерживающих условные комментарии. Наглядным примером того, как условные комментарии могут быть эффективно использованы на практике, является HTML5 Boilerplate , который добавляет специфические классы CSS для устаревших версий Internet Explorer :
7. Поліфілли
Технічні невідповідності застарілих браузерів для адаптивного веб-дизайну можна виправити за допомогою поліфілла. Він являє собою фрагмент JavaScript коду, який «заповнює» специфічний функціональний розрив між застарілим браузером і функцією. Існує цілий ряд поліфіллов, які можуть бути використані для забезпечення підтримки браузером функцій HTML5.
Нижче наведено кілька поліфіллов, призначених для усунення проблем кросбраузерності сайту, зазначених в пункті 3:
- respond.js - реалізує медіа-запити CSS3 для Internet Explorer 6 - 8;
- html5shiv дозволяє використання семантичних елементів HTML5 в Internet Explorer 6 - 8;
- selectivzr - емулює селектори і псевдокласи CSS3 в Internet Explorer 6 - 8. Для повної підтримки потрібно або Mootools 1.3, або NWMatcher 1.2.3. Часткова підтримка доступна за допомогою JQuery 1.3 / 1.4;
- REM-unit-polyfill - визначає, чи підтримує браузер одиниці rem, і забезпечує запасний варіант. Працює з IE8 і нижче.
Для використання зазначених поліфіллов, їх потрібно додати з CDN або у вигляді файлу в коректному форматі всередині умовних коментарів в розділі
(Не забудьте включити одну з необхідних для Selectivizr бібліотек JavaScript):
Для кожного проекту необхідно оцінити, чи дійсно необхідні ці додаткові скрипти, оскільки вони можуть привести до проблем з продуктивністю. Більшість поліфіллов компактні, але кожен додатково завантажується скрипт являє собою додатковий HTTP-запит. Це може уповільнити завантаження сторінки.
8. Визначення функцій за допомогою Modernizr
Бібліотека Modernizr, написана на JavaScript, допоможе перевірити кроссбраузерность сайту: чи підтримується в різних браузерах конкретна функція HTML5 або CSS3. Якщо функція не доступна, то може бути завантажений альтернативний CSS або JavaScript-код.
Ідея полягає в тому, щоб безпосередньо визначати функціональні можливості браузера, а не намагатися встановити його конкретну версію. І на підставі цього виводити його функціональні можливості, що є менш ефективним і надійним способом.
Варто відзначити, що Modernizr Не додає відсутні функції в браузер. Тому вам потрібно буде надати код з резервного CSS або поліфілла.
Для початку необхідно завантажити повнофункціональну збірку. Пізніше, коли ви будете готові до розробки, можна створити призначену для користувача збірку зі специфічними функціями, які ви тестируете. Все, що потрібно зробити, це додати клас .no-js в HTML-тег сайту і включити скрипт Modernizr в розділі head після будь-якого CSS-файлу:
Modernizr Demo
This is a Modernizr exercise.
Клас .no-js використовується, щоб перевірити, чи включений JavaScript в браузері користувача. Якщо він включений, Modernizr замінить .no-js класом .js. Функція тестування Modernizr аналізує, чи підтримується в браузері конкретна функція і генерує ряд класів, які додаються в HTML-елемент. Google Chrome 47.0.2526.111, наприклад, буде повертати наступні класи об'єктів.
В даний час Modernizr доступний в якості глобального об'єкта, який можна викликати в поєднанні з назвою функції, щоб перевірити чи існує вона. Він повертає логічне значення ( true або false).
Розглянемо два простих прикладу CSS і JavaScript.
Приклад вирішення проблем CSS кросбраузерності: перевірка підтримки SVG і надання в якості резервного варіанта PNG
В даний час спостерігається тенденція до все більш активного використання SVG ( Scalable Vector Graphics), Але ця графіка не підтримується в IE8 і нижче. Якщо SVG підтримується в браузері, Modernizr генерує CSS-класс.svg. Якщо SVG не доступний, інструмент додає в HTML класс.no-svg. За допомогою наведеного нижче CSS браузери з підтримкою SVG будуть використовувати звичайний клас .logo, в той час як браузери, які не підтримують SVG - правила .no-svg:
Logo (background-image: url ( "logo.svg"); width: 164px; height: 49px;) .no-svg .logo (background-image: url ( "/logo.png"); width: 164px; height: 49px;)
Приклад JavaScript: визначення border-radius і додавання відповідних класів CSS
Округлення кутів рамки не підтримується в IE8 і нижче. Ми можемо створювати різні CSS-класи, які застосовуються в залежності від наявності функції border-radius:
// Клас для браузера з функцією border-radius .round-borders (border-radius: 5px;) // Клас для браузера без функції border-radius .black-borders (border: 3px solid # 000000;)
Тепер можна використовувати JavaScript, щоб зберегти цільової ідентифікатор в якості змінної, а потім через умова додати класи CSS:
var element \u003d document.getElementById ( "TestID"); if (Modernizr.borderradius) (element.className \u003d "round-borders";) else (element.className \u003d "black-borders";)
висновок
Коли мова йде про адаптивний веб-дизайні в застарілих браузерах, не існує якогось універсального рішення. Важливо проаналізувати аудиторію ресурсу, щоб отримати уявлення про реальну чисельність користувачів браузерів. Потім потрібно ретельно протестувати сайт, щоб виявити потенційні проблеми кросбраузерності.
Published: 07.06.2011
Опишу ще раз всім відомі і 100500 раз описані раніше хакі для різних браузерів.
Наведу визначення хака з сайту Влада Мержевіч htmlbook.ru: «Хаком називається набір прийомів, спрямованих на те, щоб для одного браузера задати стиль певного елемента, який би відрізнявся від стилю для інших браузерів.»
Перш за все мене цікавили актуальні працюють рішення, тому все приклади я перевіряв в найостанніших, крім IE, версіях браузерів (Opera 11, Firefox 4, Chrome 13, Safari 5, IE 8).
Internet Explorer
Самий «несхожий» на інші браузер. Причому, кожна версія «не схожа» по-своєму. Втім, приймемо дійсність, як вона є. А действтіельность така, що хаков для різних версій IE при верстці необхідна достатня кількість, щоб помістити їх в окремий файл і завантажувати тільки для цього сімейства браузерів. Для цього в секції
HTML-документа напишемо коментар, який вміє розпізнавати Internet Explorer.
Як умова можна використовувати такі ключові слова:
- IE - будь-яка версія браузера Internet Explorer;
- IE 7 - Internet Explorer 7;
- IE 8 - Internet Explorer 8;
- IE 9 - Internet Explorer 9;
- lt - номер версії браузера менше зазначеної;
- gt - номер версії більше зазначеної;
- lte - номер версії менше або дорівнює зазначеній;
- gte - номер версії браузера більше або дорівнює зазначеній.
Мабуть, окремо відзначу ще хак для IE 7: зірочка перед ім'ям селектора. наприклад:
#example (
color: green;
* Color: red;
}
Chrome і Safari
Хак для браузерів на основі движка webkit - Chrome і Safari:
@media screen and (-webkit-min-device-pixel-ratio: 0) (
#example (
color: red;
}
}
Firefox
@ -Moz-document url-prefix () (
#example (
color: red;
}
}
Opera
Для Опери універсальних хаков немає! Так, звичайно, в мережі можна знайти хакі для Опери, але, на жаль, ця інфорацію трохи застаріла. Був колись хак, та весь вийшов:
@media all and (min-width: 0px) (
}
Хм, якщо для всіх браузерів хакі є, а для Опери - немає, напрошується логічний висновок: спочатку треба верстати під Оперу, а потім шліфувати верстку для інших браузерів. Як ви на це дивитеся?
UPD 09.08.11: Останні зведення з фронтів: на Хабре знайшовся хак для Опери. Ось такий:
@media all and (-webkit-min-device-pixel-ratio: 10000),
not all and (-webkit-min-device-pixel-ratio: 0) (
#example (color: red;)
}
Однак же, вкрай не рекомендую його використовувати. Наведу як аргумент коментар Вадима Макєєва (aka Pepelsbey): "Ці хакі засновані на неповної або помилкової підтримки Media Queries і можуть зламатися з будь-яким мінорним оновленням браузера, яке виправить або доповнить підтримку. Не стріляйте собі в ногу, не використовуйте потенційно небезпечні хакі". Що, власне, і сталося з першим хаком для Опери, згаданому в цій статті.
Виходячи з цього, як і раніше вважаємо, що найкращий хак для браузера Opera - грамотна, валідна верстка.
