В тази статия ще разгледаме какви са префиксите на браузъра, причините за появата им и как да ги използвате в CSS.
Какво представляват префиксите?
Уеб разработчик, който започва да усвоява теоретичните основи на CSS и използвайки тези знания на практика, може да срещне проблеми при разглеждане на примери от реалния свят. Това може да му причини липса на разбиране за случващото се и да обезкуражи по-нататъшното желание да изучава тази технология.
Например, когато разглеждате стиловете на уебсайт, уеб програмист може да срещне свойства, които съдържат някои неясни думи отпред: -webkit-, -moz-, -ms- и т.н.
* (-webkit-box-оразмеряване: border-box; -moz-box-оразмеряване: border-box; оразмеряване на кутия: border-box;)
Какво е това? Всъщност всичко е просто, тези неясни думи са префикси на следните браузъри:
- -webkit-: браузъри Chrome, Safari, Opera;
- -moz-: браузър Mozilla Firefox;
- -ms-: Браузър на Internet Explorer.
По този начин, ако името на свойството е с префикс, това означава, че това свойство е реализирано и ще се използва изключително в посочения браузър. Всички останали браузъри ще игнорират това свойство. за тях този префикс е неизвестен.
Причини за появата на префикси?
Имаше много причини за появата на префикси:
- За включване в браузъра на експериментални CSS свойства, които все още не са одобрени от стандарта. Така производителите на браузъри тестват и правят предложения, преди да одобрят CSS свойствата в стандарта.
- За решаване на проблеми с крос-браузъра.
- За да създадете свои собствени свойства, които не са част от стандарта CSS, но след известно време могат да се появят в него.
Когато експерименталното свойство е одобрено в стандарта и премине тестване в браузъра, префиксът обикновено се премахва от него.
Как да използвате префикси?
Разгледайте следния код като пример:
* (-webkit-box-оразмеряване: border-box; -moz-box-оразмеряване: border-box; оразмеряване на кутия: border-box;)
Този код използва CSS свойства, които променят алгоритъма за изчисляване на ширината и височината за всички елементи на уеб страница. Първото CSS свойство -webkit-box-оразмеряване със стойност на border-box е предназначено за браузъри, които използват webkit (Safari) или мигащ двигател (Chrome, Opera, Yandex.Browser). Второто свойство на CSS -moz-box-оразмеряване със стойност на border-box е предназначено за браузъри, използващи двигателя Gecko (Mozilla Firefox). Последната CSS собственост е предназначена за браузъри, в които това свойство вече е тествано и внедрено в съответствие със стандарта.
Когато използвате префикси за CSS свойства, не забравяйте, че те трябва да бъдат поставени пред свойството CSS без префикс. Защо това е толкова важно? Това е важно, защото ако веднъж оригиналното свойство (без префикс) се реализира в браузъра, то то ще бъде използвано (тъй като е последното), а не неговата експериментална версия.
Например: прилагане на свойство CSS към всички елементи на уеб страница във версия Google Chrome 40.
Фигурата по-горе показва, че оригиналното свойство за оразмеряване на кутията вече е вградено в този браузър и поради факта, че е последното, браузърът го използва вместо горното свойство -webkit-box-оразмеряване.
Как да проверите поддръжката за конкретен имот в браузър?
Сайт, на който можете да проверите дали тази собственост е реализиран или не в конкретен браузър, може да бъде връзката по-долу. Освен това сайтът показва процента на потребителите, които използват тази версия на браузъра.
Уебсайт "Мога ли да използвам ..."Например: проверете как се преобразува свойството трансформация в браузъри.
На уебсайта на CanIUse браузърите са маркирани в различни цветове, в зависимост от състоянието, в което се намира поддръжката за определени свойства или тагове:
- Червеният правоъгълник е браузър, в който тази собственост не е реализирана;
- Зелен правоъгълник с тире в горния десен ъгъл е браузър, в който това свойство се използва чрез префикс;
- Светлозелен правоъгълник е браузър, в който това свойство е частично внедрено;
- Зеленият правоъгълник е браузърът, в който това свойство се реализира в съответствие със стандарта.
Както знаете, не всички браузъри третират файловете за стил css по един и същи начин. По принцип възникват проблеми със стари версии за създаване на малки мащаби Интернет изследовател (Версия 7 и по-долу). Между другото, ако проблемът се появи в съвременните браузъри (като Opera, Mozilla Firefox, Chrome), тогава аз силно препоръчвам преразглеждане на оформлението на страницата.
Така че тук. Има проблем с браузърите. И знам поне три начина за решаване на този проблем.
1-ви метод. Най-правилното
Стиловете за браузърите, които не разбират правилно вашия css, се записват в отделен файл. Обикновено този браузър, както казах, е Интернет изследовател, и тези файлове се извикват fix-ie.css
... ... ...
промяна теми за именакъм истинското име на вашата тема - и когато отворите Интернет изследовател версия 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. Полифили
Техническите несъответствия на остарели браузъри за отзивчив уеб дизайн могат да бъдат коригирани с помощта на polyfill. Това е част от JavaScript кода, който "запълва" специфична функционална празнина между остарял браузър и функция. Има редица полифили, които могат да се използват за предоставяне на поддръжка на браузъра за функции на HTML5.
По-долу са изброени няколко полифила, предназначени за справяне с проблемите на уеб браузъра, посочени в параграф 3:
- respo.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 или като файл в правилния формат вътре в условните коментари в раздела
(не забравяйте да включите един от javaScript е необходим за Selectivizr):
За всеки проект трябва да прецените дали тези допълнителни скриптове са наистина необходими, тъй като могат да доведат до проблеми с производителността. Повечето полифилми са компактни, но всеки допълнително зареден скрипт е допълнителна HTTP заявка. Това може да забави зареждането на страниците.
8. Дефиниране на функции с помощта на Modernizr
JavaScript Modernizr библиотека ще ви помогне да проверите съвместимостта на крос-браузъра на сайта: дали определена функция HTML5 или CSS3 се поддържа в различни браузъри. Ако функцията не е достъпна, може да се зареди алтернативен CSS или JavaScript код.
Идеята е директно да се определи функционалността на браузъра, а не да се опитвате да инсталирате конкретна версия на него. И въз основа на това извличайте неговата функционалност, което е по-малко ефективен и надежден начин.
Струва си да се отбележи, че Modernizr не добавя липсващи функции към браузъра. Следователно, ще трябва да предоставите код от резервен CSS или polyfill.
Първо трябва да изтеглите напълно функционален монтаж. По-късно, когато сте готови да се развивате, можете да създадете потребителски монтаж със специфични функции, които тествате. Всичко, което трябва да направите, е да добавите клас .no-js в HTML маркера на сайта и да включите скрипта Modernizr в секцията за глава след всеки CSS файл:
Modernizr демонстрация
Това е упражнение на Modernizr.
Класът .no-js се използва за проверка дали JavaScript е активиран в браузъра на потребителя. Ако е активиран, Modernizr ще замени .no-js с .js клас. Тестова функция Modernizr анализира дали определена функция се поддържа в браузъра и генерира поредица от класове, които се добавят към HTML елемента. Google Chrome 47.0.2526.111 например ще върне следните класове на обекти.
Понастоящем Modernizr е достъпен като глобален обект, който може да бъде извикан заедно с името на функцията, за да се провери дали съществува. Тя връща булева стойност ( вярно или невярно).
Нека разгледаме два прости примера за CSS и JavaScript.
Пример за решаване на проблеми с CSS за браузъра в CSS: проверка на SVG поддръжка и предоставяне на PNG като резервен
В момента съществува тенденция към все по-активно използване на SVG ( Мащабируема векторна графика), но тази графика не се поддържа в IE8 и по-долу. Ако SVG се поддържа в браузър, Modernizr генерира CSS class.svg. Ако SVG не е наличен, инструментът добавя клас .no-svg към HTML. Използвайки CSS по-долу, браузърите с активиран SVG ще използват обикновения клас .logo, докато браузърите, които не са SVG, ще използват .no-svg правила:
Лого (фон-изображение: url ("logo.svg"); ширина: 164px; височина: 49px;) .no-svg .logo (background-image: url ("/logo.png"); ширина: 164px; височина: 49px)
Пример с JavaScript: дефиниране на радиус на границата и добавяне на подходящи CSS класове
Закръгляването на ъглите на рамката не се поддържа в IE8 и по-долу. Можем да създадем различни CSS класове, които се използват в зависимост от наличието на границата-радиус функция:
// Клас за браузъра с функцията border-radius .round-border (border-radius: 5px;) // Class за браузъра без функция border-radius .black-border (border: 3px solid # 000000;)
Сега можете да използвате JavaScript, за да запазите целевия идентификатор като променлива и след това да добавите CSS класове чрез условието:
var element \u003d document.getElementById ("TestID"); if (Modernizr.borderradius) (element.className \u003d "кръгли граници";) else (element.className \u003d "черни граници";)
заключение
Когато става въпрос за отзивчив уеб дизайн в наследени браузъри, няма универсално решение. Важно е да се анализира аудиторията на ресурса, за да се добие представа за реалния брой потребители на браузъра. След това трябва да тествате старателно сайта, за да установите потенциални проблеми с браузъра.
Публикувано: 06/07/2011
Още веднъж ще опиша хакове за различните браузъри добре познати и 100 500 пъти описани по-рано.
Ето определението за хак от уебсайта на Влад Мергевич htmlbook.ru: „Хакът е набор от техники, насочени към определяне стила на определен елемент за един браузър, който би бил различен от стила за други браузъри.“
На първо място се интересувах от текущите работни решения, затова проверих всички примери в най-новите, с изключение на IE, версии на браузъра (Opera 11, Firefox 4, Chrome 13, Safari 5, IE 8).
Интернет изследовател
Най-"различен" от другите браузъри. Освен това всяка версия е "различна" по свой начин. Ние обаче приемаме реалността такава, каквато е. Но реалността е, че има достатъчно хакове за различни версии на 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: звездичка пред името на селектора. Например:
# пример (
цвят: зелен;
* цвят: червен;
}
Chrome и Safari
Хак за браузъри, базирани на двигателя на уебкита - Chrome и Safari:
@media екран и (-webkit-min-device-pixel ratio: 0) (
# пример (
цвят: червен;
}
}
Firefox
@ -moz-document url-prefix () () (
# пример (
цвят: червен;
}
}
опера
Няма универсални хакове за Opera! Да, разбира се, можете да намерите хакове за Opera в мрежата, но, уви, тази информация е малко остаряла. Някога имаше хак, но излезе цялото нещо:
@media всички и (минимална ширина: 0px) (
}
Хм, ако има хакове за всички браузъри, но не и за Opera, логичното заключение е: първо трябва да компенсирате Opera, а след това да полирате оформлението за други браузъри. Как гледате на това?
UPD 08/09/11: Последните репортажи от фронтовете: в Хабре имаше хак за Операта. Ето едно:
@media all и (-webkit-min-device-pixel ratio: 10000),
не всички и (-webkit-min-device-pixel ratio: 0) (
# пример (цвят: червен;)
}
Силно препоръчвам обаче да не го използвате. Ще дам като аргумент коментара на Вадим Макеев (известен още като Пепелсби): „Тези хакове се основават на непълна или погрешна поддръжка за Media Queries и могат да се прекъснат с всяка незначителна актуализация на браузъра, която ще коригира или допълни поддръжката. Не се стреляйте в крака, не използвайте потенциално опасни хакове.“, Което всъщност се случи с първия хак за операта, споменат в тази статия.
Въз основа на това ние все още вярваме, че най-добрият хак за браузъра Opera е компетентно, валидно оформление.
