이 기사에서는 브라우저 접두사가 무엇인지, 그 이유와 CSS에서 사용하는 방법을 살펴 보겠습니다.
접두사 란 무엇입니까?
CSS의 이론적 기초를 배우기 시작하고 실제로 이러한 지식을 사용하는 웹 개발자는 실제 예제를 볼 때 문제가 발생할 수 있습니다. 이것은 그에게 무슨 일이 일어나고 있는지 이해하지 못하고이 기술을 연구하려는 더 많은 욕구를 좌절시킬 수 있습니다.
예를 들어 웹 사이트의 스타일을 고려할 때 웹 개발자는 앞에 모호한 단어가 포함 된 속성 (-webkit-, -moz-, -ms- 등)이 발생할 수 있습니다.
* (-webkit-box-sizing : border-box; -moz-box-sizing : border-box; 상자 크기 : 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; 상자 크기 : border-box;)
이 코드는 웹 페이지의 모든 요소에 대한 너비와 높이를 계산하기위한 알고리즘을 변경하는 CSS 속성을 사용합니다. border-box 값을 가진 첫 번째 CSS 속성 인 -webkit-box-sizing은 웹킷 (Safari) 또는 깜박임 엔진 (Chrome, Opera, Yandex.Browser)을 사용하는 브라우저를위한 것입니다. border-box 값을 가진 두 번째 CSS 속성 인 moz-box-sizing은 Gecko 엔진 (Mozilla Firefox)을 사용하는 브라우저를위한 것입니다. 마지막 CSS 속성은이 속성이 이미 표준에 따라 테스트되고 구현 된 브라우저를위한 것입니다.
CSS 속성에 접두사를 사용하는 경우 접두사없이 CSS 속성 앞에 배치해야합니다. 이것이 왜 중요한가? 한 번에 원래 속성 (접두사없이)이 브라우저에 구현되면 실험 버전이 아니라 마지막 속성이므로 사용되기 때문에 중요합니다.
예 : Chrome 버전 40에서 웹 페이지의 모든 요소에 CSS 속성 적용
위의 그림은 원래 상자 크기 속성이이 브라우저에 이미 포함되어 있으며 마지막 속성이므로 브라우저는 위의 -webkit-box-sizing 속성 대신이 속성을 사용합니다.
브라우저에서 특정 속성에 대한 지원을 확인하는 방법은 무엇입니까?
특정 브라우저에서이 속성이 구현되었는지 여부를 확인할 수있는 사이트는 아래 링크 일 수 있습니다. 또한이 사이트에는이 버전의 브라우저를 사용하는 사용자의 비율이 표시됩니다.
웹 사이트 "사용할 수있는 ..."예를 들어, 브라우저에서 변환 특성이 어떻게 구현되는지 확인하십시오.
CanIUse 웹 사이트에서 브라우저는 특정 특성 또는 태그에 대한 지원 상태에 따라 다른 색상으로 표시됩니다.
- 빨간색 사각형은이 속성이 구현되지 않은 브라우저입니다.
- 오른쪽 상단에 하이픈이있는 녹색 사각형은이 속성이 접두사를 통해 사용되는 브라우저입니다.
- 연한 녹색 사각형은이 속성이 부분적으로 구현 된 브라우저입니다.
- 녹색 사각형은이 속성이 표준에 따라 구현되는 브라우저입니다.
아시다시피, 모든 브라우저가 CSS 스타일 파일을 같은 방식으로 취급하지는 않습니다. 기본적으로 소규모 버전의 이전 버전에서는 문제가 발생합니다. 인터넷 익스플로러 (버전 7 이하). 그건 그렇고, 최신 브라우저 (예 : Opera, Mozilla Firefox, Chrome)에서 문제가 발생하면 적극 추천 페이지 레이아웃을 수정합니다.
자 여기 있습니다. 브라우저에 문제가 있습니다. 그리고 나는이 문제를 해결하는 적어도 세 가지 방법을 알고 있습니다.
첫 번째 방법. 가장 정확한
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 기능에 대한 브라우저 지원을 제공하는 데 사용할 수있는 많은 폴리 \u200b\u200b필이 있습니다.
다음은 단락 3에서 언급 된 사이트의 브라우저 간 문제를 해결하기 위해 설계된 일부 폴리 필입니다.
- respond.js-구현 cSS3 미디어 쿼리 Internet Explorer 6-8의 경우;
- html5shiv는 Internet Explorer 6-8에서 HTML5 의미 요소를 사용할 수있게합니다.
- selectivzr-Internet Explorer 6-8에서 CSS3 선택기 및 의사 클래스를 에뮬레이트합니다. 전체 지원에는 Mootools 1.3 또는 NWMatcher 1.2.3이 필요합니다. jQuery 1.3 / 1.4에서 부분 지원이 가능합니다.
- REM-unit-polyfill-브라우저가 rem 단위를 지원하고 대체를 제공하는지 여부를 결정합니다. IE8 이하에서 작동합니다.
이러한 폴리 필을 사용하려면 CDN 또는 섹션의 조건부 주석 내에 올바른 형식의 파일로 폴리 필을 추가해야합니다.
(중 하나를 포함하는 것을 잊지 마십시오 selectivizr에 필요한 JavaScript 라이브러리):
각 프로젝트마다 이러한 추가 스크립트가 실제로 필요한지 여부를 평가해야합니다. 스크립트가 성능 문제를 일으킬 수 있기 때문입니다. 대부분의 폴리 필은 작지만 추가로로드 된 각 스크립트는 추가 HTTP 요청입니다. 페이지 로딩 속도가 느려질 수 있습니다.
8. Modernizr을 사용한 기능 정의
JavaScript Modernizr 라이브러리를 사용하면 사이트의 브라우저 간 호환성을 확인할 수 있습니다. 특정 HTML5 또는 CSS3 기능이 다른 브라우저에서 지원되는지 여부입니다. 함수를 사용할 수 없으면 대체 CSS 또는 JavaScript 코드가로드 될 수 있습니다.
아이디어는 브라우저의 기능을 직접 결정하고 특정 버전의 브라우저를 설치하지 않는 것입니다. 그리고 이것을 바탕으로 기능이 덜 효율적이며 신뢰할 수있는 방식으로 파생됩니다.
Modernizr은 브라우저에 누락 된 기능을 추가하지 않습니다. 따라서 대체 CSS 또는 polyfill의 코드를 제공해야합니다.
먼저 완전한 기능을 갖춘 어셈블리를 다운로드해야합니다. 나중에 개발할 준비가되면 맞춤 조립 테스트중인 특정 기능이 있습니다. .no-js 클래스를 사이트의 HTML 태그에 추가하고 CSS 파일 다음의 헤드 섹션에 Modernizr 스크립트를 포함시키기 만하면됩니다.
Modernizr 데모
이것은 Modernizr 운동입니다.
.no-js 클래스는 사용자 브라우저에서 JavaScript가 활성화되어 있는지 확인하는 데 사용됩니다. 활성화하면 Modernizr은 .no-js를 .js 클래스로 바꿉니다. 테스트 기능 Modernizr은 브라우저에서 특정 기능이 지원되는지 여부를 분석하고 HTML 요소에 추가 된 일련의 클래스를 생성합니다. 예를 들어 Chrome 47.0.2526.111은 다음 객체 클래스를 반환합니다.
Modernizr은 현재 존재하는지 확인하기 위해 함수 이름과 함께 호출 할 수있는 전역 객체로 사용할 수 있습니다. 부울 값 ( 참 또는 거짓).
CSS와 JavaScript의 간단한 두 가지 예를 살펴 보겠습니다.
크로스 브라우저 CSS CSS 문제 해결 예제 : SVG 지원 확인 및 PNG를 폴백으로 제공
현재 점점 더 SVG를 적극적으로 사용하는 경향이 있습니다 ( 확장 가능한 벡터 그래픽)이지만이 그래픽은 IE8 이하에서 지원되지 않습니다. 브라우저에서 SVG가 지원되는 경우 Modernizr은 CSS 클래스를 생성합니다. SVG를 사용할 수없는 경우 도구는 .no-svg 클래스를 HTML에 추가합니다. 아래 CSS를 사용하면 SVG 사용 가능 브라우저는 일반 .logo 클래스를 사용하고 SVG가 아닌 브라우저는 .no-svg 규칙을 사용합니다.
로고 (배경 이미지 : url ( "logo.svg"); 너비 : 164px; 높이 : 49px;) .no-svg .logo (배경 이미지 : url ( "/logo.png"); 너비 : 164px; 높이 : 49px;)
JavaScript 예제 : 경계 반경 정의 및 적절한 CSS 클래스 추가
IE8 이하에서는 프레임 모서리를 반올림 할 수 없습니다. border-radius 함수의 존재 여부에 따라 사용되는 다양한 CSS 클래스를 만들 수 있습니다.
// border-radius 함수가있는 브라우저 클래스 .round-borders (border-radius : 5px;) // border-radius 함수가없는 브라우저 클래스 .black-borders (테두리 : 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";)
결론
레거시 브라우저의 반응 형 웹 디자인과 관련하여 보편적 인 솔루션은 없습니다. 실제 브라우저 사용자 수를 파악하려면 리소스의 대상을 분석하는 것이 중요합니다. 그런 다음 사이트 간 철저한 테스트를 거쳐 잠재적 인 크로스 브라우저 문제를 식별해야합니다.
게시 날짜 : 06/07/2011
잘 알려진 다른 브라우저의 해킹과 앞에서 설명한 100,500 배의 해킹에 대해 다시 설명하겠습니다.
다음은 Vlad Mergevich 웹 사이트 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의 해킹에 대해서는 별도로 언급 할 것입니다. 예를 들면 다음과 같습니다.
#example (
색깔 : 녹색;
* 색상 : 빨간색;
}
크롬과 사파리
웹킷 엔진 기반 브라우저 해킹-Chrome 및 Safari :
@ 미디어 화면 및 (-webkit-min-device-pixel-ratio : 0) (
#example (
색깔 : 빨강;
}
}
Firefox
@ -moz-document url-prefix () (
#example (
색깔 : 빨강;
}
}
오페라
Opera에 대한 보편적 인 해킹은 없습니다! 물론, 네트워크에서 Opera의 핵을 찾을 수 있지만, 아쉽게도이 정보는 약간 구식입니다. 한 번 해킹이 있었지만 모든 것이 나왔습니다.
@media all 및 (최소 너비 : 0px) (
}
흠, 모든 브라우저에 대한 해킹이 있지만 Opera에 대한 해킹이 없다면 논리적 인 결론은 먼저 Opera를 보완 한 다음 다른 브라우저의 레이아웃을 개선해야한다는 것입니다. 어떻게 보십니까?
UPD 08/09/11 : 정면에서 마지막 보고서 : Habré에는 오페라에 대한 해킹이있었습니다. 여기 하나가 있습니다 :
@media all 및 (-webkit-min-device-pixel-ratio : 10000),
전부는 아니고 (-webkit-min-device-pixel-ratio : 0) (
#example (색상 : 빨간색;)
}
그러나 사용하지 않는 것이 좋습니다. 나는 Vadim Makeev (일명 Pepelsbey)의 의견을 논쟁으로 줄 것이다. "이 해킹은 미디어 쿼리에 대한 불완전하거나 잘못된 지원을 기반으로하며 지원을 수정하거나 보완 할 수있는 사소한 브라우저 업데이트로 인해 중단 될 수 있습니다.. 사실,이 기사에서 언급 한 오페라의 첫 번째 해킹에서 발생했습니다.
이를 기반으로, 우리는 여전히 Opera 브라우저를위한 최고의 해킹이 유능하고 유효한 레이아웃이라고 믿습니다.
