În acest articol vom analiza care sunt prefixurile browserului, motivele apariției lor și cum să le utilizăm în CSS.
Ce sunt prefixele?
Un dezvoltator web care începe să învețe elementele de bază teoretice ale CSS și care folosește aceste cunoștințe în practică poate avea probleme atunci când privești exemple din lumea reală. Acest lucru poate provoca o neînțelegere a ceea ce se întâmplă și descurajează dorința suplimentară de a studia această tehnologie.
De exemplu, atunci când se ia în considerare stilurile unui site web, un dezvoltator web poate întâlni proprietăți care conțin câteva cuvinte obscure în față: -webkit-, -moz-, -ms-, etc.
* (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;)
Ce este asta? De fapt, totul este simplu, aceste cuvinte obscure sunt prefixe ale următoarelor browsere:
- -webkit-: browsere Chrome, Safari, Opera;
- -moz-: browserul Mozilla Firefox;
- -ms-: browser-ul Internet Explorer.
Astfel, dacă numele proprietății este prefixat, aceasta înseamnă că această proprietate este implementată și va fi utilizată exclusiv în browserul specificat. Toate celelalte browsere vor ignora această proprietate. pentru ei, acest prefix nu este cunoscut.
Motive pentru apariția prefixelor?
Au existat o mulțime de motive pentru apariția prefixelor:
- Pentru includerea în browser a proprietăților CSS experimentale care nu sunt încă aprobate de standard. Astfel, producătorii de browser testează și fac sugestii înainte de a aproba proprietățile CSS în standard.
- Pentru a rezolva problemele cu browserul.
- Pentru a crea propriile proprietăți care nu fac parte din standardul CSS, dar pot apărea în el după un timp.
Când o proprietate experimentală este aprobată în standard și a trecut testarea în browser, prefixul este de obicei eliminat din acesta.
Cum se utilizează prefixele?
Considerați următorul cod ca exemplu:
* (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;)
Acest cod utilizează proprietăți CSS care schimbă algoritmul pentru calcularea lățimii și înălțimii pentru toate elementele unei pagini web. Prima proprietate CSS -webkit-box-dimensionare cu valoare de border-box este destinată browserelor care folosesc webkit (Safari) sau motorul clipit (Chrome, Opera, Yandex.Browser). A doua proprietate CSS -moz-box-dimensionare cu o valoare de border-box este destinată browserelor care folosesc motorul Gecko (Mozilla Firefox). Ultima proprietate CSS este destinată browserelor în care această proprietate a fost deja testată și implementată în conformitate cu standardul.
Când utilizați prefixuri pentru proprietățile CSS, nu uitați că acestea trebuie plasate înaintea proprietății CSS fără un prefix. De ce este atât de important? Acest lucru este important pentru că, odată ce proprietatea originală (fără prefix) este implementată în browser, aceasta va fi utilizată (deoarece este ultima), și nu versiunea sa experimentală.
De exemplu: aplicarea unei proprietăți CSS la toate elementele unei pagini web din versiunea Google Chrome 40.
Figura de mai sus arată că proprietatea originală de dimensionare a cutiei este deja încorporată în acest browser, iar datorită faptului că este ultima, browserul o folosește în locul proprietății de mai sus -webkit-box-sizing.
Cum să verificați asistența pentru o anumită proprietate într-un browser?
Un site pe care puteți verifica dacă această proprietate este implementată sau nu într-un anumit browser poate fi linkul de mai jos. În plus, site-ul arată procentul de utilizatori care utilizează această versiune a browserului.
Site-ul web "Pot folosi ..."De exemplu: verificați cum este implementată proprietatea de transformare în browsere.
Pe site-ul CanIUse, browserele sunt marcate în culori diferite, în funcție de starea în care se află suportul pentru anumite proprietăți sau etichete:
- Dreptunghiul roșu este un browser în care această proprietate nu este implementată;
- Un dreptunghi verde cu cratima în colțul din dreapta sus este un browser în care această proprietate este folosită printr-un prefix;
- Un dreptunghi verde deschis este un browser în care această proprietate este parțial implementată;
- Dreptunghiul verde este browserul în care este implementată această proprietate în conformitate cu standardul.
După cum știți, nu toate browserele tratează fișierele în stil css la fel. Practic, apar probleme cu versiunile vechi de creație la scară mică Internet Explorer (Versiunea 7 și mai jos). Apropo, dacă problema apare în browserele moderne (cum ar fi Opera, Mozilla Firefox, Chrome), atunci eu recomand foarte mult revizuiți aspectul paginii.
Deci, aici. Există o problemă cu browserele. Și știu cel puțin trei moduri de a rezolva această problemă.
1. metoda. Cel mai corect
Stilurile pentru browsere care nu înțeleg corect css-ul dvs. sunt scrise într-un fișier separat. De obicei, acest browser, așa cum am spus, este Internet Explorer, iar aceste fișiere sunt apelate fix-ie.css
... ... ...
schimbare teme de numela numele real al subiectului dvs. și când vă deschideți Internet Explorer versiunea 7 și mai jos - acest fișier va fi adăugat la setul general de fișiere de stil, și chiar în memorie în cache dacă este activat caching-ul.
Această linie este responsabilă pentru versiunea browserului la care va fi conectată fișa de stil:
где 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 ) код внутри тегов комментариев будет выводиться или скрываться в соответствующих версиях браузера:
COD PENTRU A SE REALIZA // если 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. Polyfills
Incoerențele tehnice ale browserelor învechite pentru proiectarea web receptivă pot fi corectate folosind polifilare. Este o bucată de cod JavaScript care „umple” un gol funcțional specific între un browser învechit și o funcție. Există o serie de polifilare care pot fi utilizate pentru a oferi suport browser pentru funcțiile HTML5.
Mai jos, sunt prezentate câteva polifilii concepute pentru a rezolva problemele cu privire la browser-ul site-ului, menționate la paragraful 3:
- respond.js - instrumente interogări media CSS3 pentru Internet Explorer 6 - 8;
- html5shiv permite utilizarea elementelor semantice HTML5 în Internet Explorer 6-8;
- selectivzr - emulează selectori CSS3 și pseudo-clase în Internet Explorer 6 - 8. Sprijinul complet necesită fie Mootools 1.3, fie NWMatcher 1.2.3. Suport parțial este disponibil cu jQuery 1.3 / 1.4;
- REM-unit-polyfill - Determină dacă browserul acceptă unități rem și furnizează un efect de rezervă. Funcționează cu IE8 și mai jos.
Pentru a utiliza aceste polifilare, acestea trebuie adăugate de pe CDN sau ca fișier în formatul corect în interiorul comentariilor condiționate din secțiune
(nu uitați să includeți unul dintre javaScript este necesar pentru Selectivizr):
Pentru fiecare proiect, trebuie să evaluați dacă aceste scripturi suplimentare sunt cu adevărat necesare, deoarece pot duce la probleme de performanță. Majoritatea polifrenelor sunt compacte, dar fiecare script încărcat suplimentar este o solicitare HTTP suplimentară. Aceasta poate încetini încărcarea paginii.
8. Definirea funcțiilor utilizând Modernizr
Biblioteca Modernizr JavaScript vă va ajuta să verificați compatibilitatea cross-browser-ului site-ului: dacă o anumită funcție HTML5 sau CSS3 este acceptată în diferite browsere. Dacă funcția nu este disponibilă, poate fi încărcat alternative CSS sau cod JavaScript.
Ideea este să determinați direct funcționalitatea browserului și să nu încercați să instalați o versiune specifică a acestuia. Și pe această bază, derivați funcționalitatea acesteia, care este un mod mai puțin eficient și mai fiabil.
Este demn de remarcat faptul că Modernizr nu adaugă funcții lipsă în browser. Prin urmare, va trebui să furnizați codul de la CSS sau de la polifill.
Mai întâi trebuie să descărcați un ansamblu complet funcțional. Mai târziu, când sunteți gata de dezvoltare, puteți crea montaj personalizat cu caracteristici specifice pe care le testați. Tot ce trebuie să faceți este să adăugați clasa .no-js la eticheta HTML a site-ului și să includeți scriptul Modernizr în secțiunea de cap, după orice fișier CSS:
Modernizr demo
Acesta este un exercițiu Modernizr.
Clasa .no-js este utilizată pentru a verifica dacă JavaScript este activat în browserul utilizatorului. Dacă este activat, Modernizr va înlocui .no-js cu clasa .js. Funcția de test Modernizr analizează dacă o anumită funcție este acceptată în browser și generează o serie de clase care sunt adăugate la elementul HTML. Google Chrome 47.0.2526.111, de exemplu, va returna următoarele clase de obiecte.
Modernizr este disponibil în prezent ca obiect global care poate fi apelat împreună cu numele funcției pentru a verifica dacă există. Se returnează o valoare booleană ( adevărat sau fals).
Să ne uităm la două exemple simple de CSS și JavaScript.
Exemplu de soluționare a problemelor CSS cu browser-ul încrucișat: verificarea suportului SVG și furnizarea PNG ca o defalcare
În prezent, există o tendință către utilizarea tot mai activă a SVG ( Grafică vectorială scalabilă), dar acest grafic nu este acceptat în IE8 și mai jos. Dacă SVG este acceptat într-un browser, Modernizr generează un CSS class.svg. Dacă SVG nu este disponibil, instrumentul adaugă clasa .no-svg la HTML. Folosind CSS de mai jos, browserele SVG vor folosi clasa .logo obișnuită, în timp ce browserele non-SVG vor folosi reguli .no-svg:
Logo (imagine de fundal: url ("logo.svg"); lățime: 164px; înălțime: 49px;) .no-svg .logo (fundal-imagine: url ("/logo.png"); lățime: 164px; înălțime: 49px;)
Exemplu JavaScript: definirea razei de frontieră și adăugarea de clase CSS adecvate
Rotunjirea colțurilor cadrului nu este acceptată în IE8 și mai jos. Putem crea diferite clase CSS care sunt utilizate în funcție de prezența funcției de frontieră:
// Clasa pentru browser-ul cu funcția border-radius .round-border (border-radius: 5px;) // Clasa pentru browser fără funcția de border-raza .black-borders (border: 3px solid # 000000;)
Acum puteți utiliza JavaScript pentru a salva identificatorul țintă ca o variabilă, apoi adăugați clase CSS prin condiția:
var element \u003d document.getElementById ("TestID"); if (Modernizr.borderradius) (element.className \u003d "round-edge";) else (element.className \u003d "negru-hotare";)
concluzie
Când vine vorba de un design web receptiv în browserele vechi, nu există o soluție universală. Este important să analizați publicul resursei pentru a vă face o idee despre numărul real de utilizatori ai browserului. Apoi, trebuie să testați în profunzime site-ul pentru a identifica potențialele probleme cross-browser.
Publicat: 06/07/2011
Voi descrie încă o dată hack-urile pentru diferitele browsere bine cunoscute și de 100.500 de ori descrise anterior.
Iată definiția unui hack de pe site-ul lui Vlad Mergevich, htmlbook.ru: „Un hack este un set de tehnici menite să stabilească stilul unui anumit element pentru un browser care ar fi diferit de stilul pentru alte browsere.”
În primul rând, am fost interesat de soluțiile actuale de lucru, așa că am verificat toate exemplele din cele mai recente versiuni, cu excepția IE, versiunile browserului (Opera 11, Firefox 4, Chrome 13, Safari 5, IE 8).
Internet Explorer
Cel mai „diferit” de celelalte browsere. Mai mult, fiecare versiune este „diferită” în felul său. Cu toate acestea, acceptăm realitatea așa cum este. Însă realitatea este că există suficiente hacks pentru diferite versiuni de IE atunci când aspectul este plasat într-un fișier separat și încărcat doar pentru această familie de browser. Pentru aceasta, în secțiune
Document HTML, scrie un comentariu care poate recunoaște Internet Explorer.
Ca condiție pot fi utilizate următoarele cuvinte cheie:
- IE - orice versiune de Internet Explorer;
- IE 7 - Internet Explorer 7;
- IE 8 - Internet Explorer 8
- IE 9 - Internet Explorer 9;
- lt - numărul versiunii browserului mai mic decât cel specificat;
- gt - numărul versiunii este mai mare decât cel specificat;
- lte - numărul versiunii este mai mic sau egal cu cel specificat;
- gte - numărul versiunii browserului este mai mare sau egal cu cel specificat.
Poate că voi menționa separat un hack pentru IE 7: un asterisc în fața numelui selectorului. De exemplu:
#exemplu (
culoare: verde;
* culoare: roșu;
}
Chrome și Safari
Hack pentru browsere bazate pe motorul webkit - Chrome și Safari:
Ecran @media și (-webkit-min-dispozitiv-pixel-raport: 0) (
#exemplu (
culoare: roșu;
}
}
Firefox
@ -moz-document url-prefix () () ()
#exemplu (
culoare: roșu;
}
}
operă
Nu există hacks universale pentru Opera! Da, desigur, puteți găsi accesorii pentru Opera în rețea, dar, din păcate, aceste informații sunt puțin depășite. A fost odată un hack, dar totul a ieșit:
@media all și (min-lățime: 0px) (
}
Hmm, dacă există hacks pentru toate browserele, dar nu și pentru Opera, concluzia logică este: mai întâi trebuie să compensați Opera, apoi lăsați aspectul pentru alte browsere. Cum o privești?
UPD 08/09/11: Ultimele rapoarte de pe fronturi: pe Habré a existat un hack pentru Opera. Iată unul:
@media all și (-webkit-min-device-pixel-ratio: 10000),
nu toate și (-webkit-min-device-pixel-ratio: 0) (
# exemplu (culoare: roșu;)
}
Cu toate acestea, vă recomand cu mare drag să nu-l utilizați. Voi da drept argument comentariul lui Vadim Makeev (numit Pepelsbey): "Aceste hacks se bazează pe un suport incomplet sau eronat pentru interogări media și se pot rupe cu orice actualizare minoră a browserului care va repara sau suplimenta asistența. Nu vă împușcați în picior, nu folosiți potențial periculoase.". Ceea ce, de fapt, s-a întâmplat cu primul hack pentru Opera, menționat în acest articol.
Pe baza acestui lucru, credem în continuare că cel mai bun hack pentru browserul Opera este un aspect valid, competent.
