Как создать CSS-код с учетом особенностей браузера?

Когда речь заходит о современной веб-разработке, кроссбраузерная совместимость является одной из серьезных проблем для разработчиков. Вы можете столкнуться с таким вопросом, как «Почему мой макет выглядит по-разному в разных браузерах?». Или «Почему мой пользовательский интерфейс создает проблемы в браузере XYZ, но точно работает в браузере ABC?». Это распространенные вопросы разработчиков о кроссбраузерных несоответствиях в коде. Но за этими запросами может стоять множество причин. Например, такой браузер, как Opera Mini, иногда не поддерживает ориентацию текста CSS. В таких случаях браузерно-специфический CSS может помочь обеспечить браузерную совместимость веб-сайтов и веб-приложений.

Однако эти проблемы возникают из-за различий в браузерных движках разных браузеров.
Вкратце, браузерный движок — это компонент, который преобразует веб-код в код, который браузер может воспринять и отобразить. Если в одном браузере определенное свойство не предназначено для такого преобразования, движок браузера отобразит значения по умолчанию. Поскольку эти браузерные движки предназначены для конкретных браузеров, они имеют свой собственный набор стандартов и протоколов. Это означает, что у нас не может быть универсального кода CSS или чего-то, что работает во всех браузерах.

Новичок в селекторах CSS? Ознакомьтесь с этой шпаргалкой Ultimate CSS Selector, чтобы повысить свою карьеру веб-дизайнера.

В этой статье мы рассмотрим, как создать CSS-код для конкретного браузера, чтобы устранить проблемы кроссбраузерной совместимости веб-сайтов и веб-приложений.

Знаете ли вы? Теперь вы можете тестировать свои сайты на базе jQuery в 3000+ различных настольных и мобильных браузерах с помощью jQuery Testing Cloud, масштабируемого и надежного облака онлайн-тестирования для ручного и автоматизированного тестирования jQuery-сайтов.

Зачем нужен CSS для конкретного браузера?

Универсальный код разрабатывается в соответствии со стандартами, однако популярные синтаксисы работают не во всех браузерах. Такой код может привести к несоответствию CSS и, в крайних случаях, к отсутствию элементов на веб-странице.

Эта ключевая проблема освещена в исследовании MDN, в ходе которого были опрошены разработчики со всего мира. На рисунке ниже показаны наиболее распространенные кроссбраузерные проблемы.

Для примера возьмем «Отзывчивость». В связи с широким распространением использования мобильных устройств отзывчивый веб-дизайн стал стандартом для выпуска онлайн-приложений. Однако сложно реализовать этот дизайн для всех размеров экрана, браузеров, версий и разрешений.

По данным Statcounter, Chrome имеет наибольшую долю рынка — 63,06%, Safari — 19,84%, Firefox — 4,18%, Edge — 4,12% и Opera -2,33%.

Устаревшая версия браузера может не отображать стиль CSS или свойство, введенное сообществом CSS позднее. Иногда браузер запрашивает другой синтаксис, в то время как браузер поддерживает только частичную реализацию.

Это справедливо для многих специфических для браузера свойств CSS. В результате разработка веб-приложения с согласованным пользовательским интерфейсом может оказаться сложной задачей, если вы не знаете о специфических для браузера свойствах CSS.

CSS-код, специфичный для браузера Google Chrome

Написание CSS-кода, специфичного для Google Chrome, не так просто, как написание условных операторов. Для каждого свойства, для которого вы пишете код CSS, вы должны знать целевой код CSS для конкретных версий Chrome. Универсальных утверждений не существует.

Учитывая это, Google Chrome также поддерживает различные специфические для браузера свойства CSS из предыдущих версий, поэтому вы можете не чувствовать необходимости добавлять дополнительный код для этого браузера. Кроме того, многие пользователи Chrome используют последние версии, что избавляет нас от необходимости задумываться о неподдерживаемых браузерно-специфических свойствах CSS в более ранних версиях.

Чтобы написать специфический для браузера CSS-код в Google Chrome, вы можете следовать этим специфическим для браузера CSS-свойствам:

• Поддержка браузерно-специфических свойств CSS в браузерах Webkit (включая Safari) для всех версий Chrome:
  .selector:not(*:root) { property:value; }

• Чтобы нацелить поддержку свойств на версии Chrome >= 29:
  @supports (-webkit-appearance:none) {}

• Для целевой поддержки свойств в версиях Chrome < 29: .selector { (;property: value;); }
  .selector { [;property: value;]; }

• Для поддержки медиа-запросов в Chrome версий от 22 до 28:
  @media screen {}

• Чтобы направить медиа-запросы в Chrome версии выше 28:
  @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }

Это наиболее часто используемые специфические для браузера свойства CSS в Google Chrome, которые, вероятно, подойдут для большинства веб-приложений.

Код CSS, специфичный для браузера Safari

Safari — это еще один браузер на основе webkit, который позволяет разработчикам повторно использовать те же функции таргетинга webkit, которые мы создали в Chrome. В результате три специфических для браузера CSS свойства, перечисленные ниже для Google Chrome, будут работать и в Safari.

• .selector:not(*:root) { property:value; }

• @supports (-webkit-appearance:none) {}

• .selector { (;property: value;); }
  .selector { [;property: value;]; }

Кроме этого, есть еще несколько специфических для браузера свойств CSS, которые вы можете использовать, чтобы нацелить код CSS на Safari. Например, если ваш CSS-код включает несколько медиа-запросов, вам нужно включить следующий фрагмент, чтобы нацелить его на конкретные браузеры Safari:

• Для Safari 4:
  @media screen and (min-width:0) {}

• Для Safari >=6:
  @media screen { @media (min-width: 0px) {} }

• Если ваш CSS-код содержит код селектора (для выбора нескольких элементов с веб-страницы), следующий фрагмент необходим для браузеров Safari:

• Для Safari 2:
  html:first-child .selector {}

• Для Safari 2 и Safari 3:
  html[xmlns*=»»] body:last-child .selector {}
  html[xmlns*=»»]:root .selector {}

• Для Safari 2 и Safari 3.1:
  |html[xmlns=»»] .selector {}

• Для Safari 5.1 и Safari 6:
  _::-moz-svg-foreign-content, :root .selector {}

• Если ваш CSS-код содержит несколько медиа-запросов, следующий фрагмент поможет вам нацелиться на конкретные браузеры Safari:

• Для Safari >= 7:
  @media screen {}

Код CSS, специфичный для браузера Mozilla Firefox

Mozilla Firefox — сложный браузер для работы. Однако он всегда отделял себя от Internet Explorer и открыто говорил об этом. Более того, в отличие от Chrome и Safari, он не построен на движке webkit. В результате разработчики могут использовать специфические для браузера CSS-коды для Mozilla Firefox, показанные ниже.

Если ваш CSS-код направлен на выделение элементов, вам помогут следующие CSS-свойства, специфичные для браузера Firefox:

• Для Firefox 1.5 и Firefox 2:
  body:empty .selector {}

• Для Firefox версии больше 2:
  body:last-child .selector, x:-moz-any-link {}

• Для версий Firefox больше 3:
  body:last-child .selector, x:-moz-any-link, x:default {}

• Для версий Firefox более 3.5:
  body:not(:-moz-handler-blocked) .selector {}

• Для версий Firefox больше 6:
  _::-moz-progress-bar, body:last-child .selector {}

• Для версий Firefox больше 21:
  _::-moz-range-track, body:last-child .selector {}

• Для всех версий Firefox:
  _:-moz-tree-row(hover), .selector {}

В приведенных выше кодах селекторы используются для разных целей. Пожалуйста, ознакомьтесь с их реализацией, прежде чем применять их на своей веб-странице.

Если ваш код CSS ориентирован на медиазапросы в других браузерах, следующие дополнения создадут код медиазапроса, специфичный для Firefox:

• Для Firefox версии <= 3: @media all {}

• Для Firefox >= 3.6:
  @media screen and (-moz-images-in-menus:0) {}

• Для Firefox >= 4:
  @media screen and (min—moz-device-pixel-ratio:0) {}

• Для Firefox >= 8:
  @media all and (min—moz-device-pixel-ratio:0) and (min-resolution: .001dpcm) {}
  @media all and (-moz-images-in-menus:0) and (min-resolution: .001dpcm) {}

• Для Firefox >= 11:
  @media all and (min—moz-device-pixel-ratio:0) { @media (min-width: 0px) {} }
  @media all and (-moz-images-in-menus:0) { @media (min-width: 0px) {} }

• Для Firefox >= 29:
  @media all and (min—moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm) {}

Тестируйте веб-сайты Kentico в самом надежном и масштабируемом облаке тестирования CMS и проводите сквозное ручное или автоматизированное кроссбраузерное тестирование мобильных и веб-приложений, созданных с помощью $Kentico, используя облако онлайн-тестирования Kentico.

CSS-код, специфичный для браузера Microsoft Edge

Microsoft Edge — это причина, по которой Microsoft больше не заботится об Internet Explorer. Edge более надежен, соответствует современным тенденциям, создан на базе Chromium и работает быстрее. Он был выпущен в 2015 году и сейчас является третьим по популярности браузером в мире.

Благодаря своей повсеместной распространенности и простоте использования этот браузер является одним из самых приоритетных для веб-разработчиков. Приведенные ниже фрагменты кода могут помочь в создании CSS-кода, специфичного для Microsoft Edge:

@supports (-ms-ime-align:auto) {
селектор {
свойство: значение;
}
}

За исключением вышеуказанного, все функционирует должным образом в Microsoft Edge, поскольку он был разработан только в 2015 году. К тому времени многие стандарты уже были установлены, и существенных изменений в свойствах не произошло. Другие браузеры были выпущены в начале 2000-х годов, и поэтому они требуют особого внимания, так как за это время было выпущено более 60 версий.

Специфический CSS-код браузера Opera

Opera — один из старейших браузеров на рынке, работающий уже более 26 лет. Ранее Opera использовала движок Presto, но со временем перешла на WebKit. Это дает нам преимущество в том, что описанные ранее CSS-коды WebKit также будут правильно работать в Opera.

Подводя итог, можно сказать, что следующие специфические для браузера свойства CSS основаны на WebKit для CSS:

• .selector:not(*:root) { property:value; }

• @supports (-webkit-appearance:none) {}

• .selector { (;property: value;); }

• .selector { [;property: value;]; }

• @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }

Кроме этих, вы можете использовать еще один код CSS-селектора для версий Opera выше 9.5:

_:-o-prefocus, body:last-child .selector {}

Основная проблема, с которой мы сталкиваемся при разработке веб-приложения, — это управление элементами в различных браузерах и движках. Однако применение CSS, специфичного для браузера, не гарантирует, что наш код будет работать правильно. Поэтому мы должны быть уверены в нашем коде после его проверки.

Код CSS, специфичный для браузера Internet Explorer

Первый браузер, который мы рассмотрим, — это самый проблемный браузер для разработчиков на сегодняшний день — Internet Explorer. Поддержка Internet Explorer компанией Microsoft прекращена. Поэтому новых разработок для него не будет. Даже когда поддержка и разработки были доступны, они действовали не так, как стандарты W3C. К счастью, Microsoft добавила в браузер условные выражения, чтобы нацелить код на специфический для браузера код. Как разработчик, вы должны быть хорошо знакомы с условными выражениями.

Условные выражения в Internet Explorer

Концепция условных выражений в Internet Explorer была выпущена Microsoft из-за неполной работоспособности кода. Как следует из названия, условные операторы задают условие для Internet Explorer, и если условие выполняется, то интерпретируются утверждения внутри условий.

Условные операторы в Internet Explorer записываются подобно комментариям следующим образом:

<!--Condition>
Code
< !-->

Часть условия здесь предлагает множество утверждений. Основная цель здесь — определить версию браузера и затем двигаться дальше. Так, если я нацелен на IE7 и не уверен, что моя единственная строка кода будет работать, я могу включить специальный код в утверждение.

CSS code
<!--[if IE7 ]>
Specialised CSS Code for IE 7
< ![endif]-->

Таким образом, если браузер определит, что версия Internet Explorer — 7, он сможет применить специальный код. Однако вы должны знать, что работает, а что нет в Internet Explorer.

Преимущество этого синтаксиса в том, что он похож на синтаксис комментариев HTML, который выглядит следующим образом:

<! –
Comments
<!-->

В результате, если браузеры, отличные от Internet Explorer, отображают часть условного оператора, они игнорируют ее, воспринимая как комментарий.

Помимо прямого написания «IE 7», вы можете использовать и другие возможности условных операторов, которые описаны ниже:

Для демонстрации одного из операторов, приведенных в таблице выше, вы можете использовать их следующим образом:

<!--[if gte IE 5 ]>
  <h2>This code is for IE greater than or equal to version 5</h2>
<![endif]-->

Как только вы узнаете об условных операторах в Internet Explorer, вы можете использовать их для связывания ваших CSS-файлов в зависимости от версии браузера следующим образом:

<link href="my_normal.css" rel="stylesheet" type="text/css">
<!--[if gte IE 5]>
<link href="ie5-7.css" rel="stylesheet" type="text/css">
<![endif]-->

В этом коде, если версия браузера окажется выше версии 5, будет загружен CSS файл «ie5-7.css», который будет содержать специфический для этого браузера CSS код.

Как проверить код CSS, специфичный для браузера?

Чтобы проверить код и убедиться, что он работает как положено в каждом из основных браузеров, можно воспользоваться следующими методами.

Использование валидатора

Валидатор — это программное обеспечение или инструмент, который проверяет код на соответствие лучшим практикам и определенным стандартам. Поскольку веб-языки анализируются, а не компилируются, они будут выведены на экран, даже если в них есть многочисленные ошибки. Валидатор выделит эти ошибки во время кодирования или при явном применении к коду. Почти все языки веб-разработки имеют валидаторы, опубликованные на рынке.

Существует множество вариантов валидации кода, специфичного для CSS. Редакторы кода, например, включают плагины валидаторов, которые могут сканировать ваш код во время выполнения и выявлять ошибки. Вы также можете найти опубликованные сайты, например W3C, которые проверят ваш CSS-код, используя необработанный CSS-код, опубликованные сайты или CSS-файлы. Что бы вы ни делали в рамках этапа тестирования.

Используйте CSS-ориентированные фреймворки

Хотя фреймворк — это личный выбор разработчика, я всегда находил отличную поддержку в CSS-ориентированных фреймворках по своему опыту. Лучшие CSS-фреймворки, такие как Bootstrap, поставляются с предопределенными библиотеками для наиболее распространенных вещей, которые вы хотите создать. Это могут быть формы, кнопки или простой тег label.

Пример кода приведен ниже:

<button class="btn btn-secondary dropdown-toggle" type="button">

Создавать их самостоятельно и применять к ним CSS — это трудоемко и чревато ошибками. С CSS-фреймворками вам не придется использовать валидатор CSS, так как он сам следит за соблюдением всех стандартов и отзывчивостью.

Тестирование на кросс-браузерную совместимость

Заключительный этап создания вашего веб-сайта или веб-приложения завершается кроссбраузерным тестированием. После создания CSS-кодов и валидации CSS, ориентированных на конкретные браузеры, хорошо бы отобразить сайт на нескольких браузерах и устройствах, чтобы подтвердить кроссбраузерную совместимость результата. Платформы для кроссбраузерного тестирования предоставляют отличную инфраструктуру, функции и интеграции, которые просто созданы для этой цели. Они помогают просматривать веб-сайты на экранах настольных и мобильных компьютеров. Это также помогает контролировать отзывчивый веб-дизайн.

Чтобы избавиться от необходимости использовать собственные лаборатории для тестирования устройств, лучше выбрать облачную платформу тестирования, например LambdaTest. Она позволяет проводить кроссбраузерное тестирование на 3000+ реальных браузерах и операционных системах в режиме онлайн для проверки CSS-кодов, специфичных для конкретного браузера. Вы также можете протестировать CSS, специфичный для браузера, на реальном устройстве в облаке LambdaTest, чтобы убедиться, что он правильно отображается в условиях реального пользователя.

LambdaTest также поставляется с инструментом проверки отзывчивости — LT Browser для тестирования отзывчивости веб-сайтов на различных экранах просмотра, таких как мобильные телефоны, планшеты, настольные компьютеры и ноутбуки. Вы можете обратиться к нашему блогу о том, почему разработчики должны использовать LT Browser, чтобы углубиться в его возможности и попробовать его бесплатно.

Если вы хотите узнать больше о LT Browser, посмотрите видеоинструкцию ниже.

Вы можете следить за каналом LambdaTest на YouTube для просмотра видео о тестировании отзывчивости, автоматизированном тестировании скриншотов браузера, автоматизации тестирования, CI/CD и многом другом.

Как только вы закончите тестирование вашего веб-приложения на нескольких браузерах, вы можете быть уверены и опубликовать его всему миру.

Знаете ли вы, что теперь вы можете тестировать свои веб-сайты на базе CSS-фреймворка Laravel в 3000+ различных настольных и мобильных браузерах с помощью Online Laravel Testing Cloud — масштабируемого и надежного облака онлайн-тестирования для ручного и автоматизированного тестирования веб-сайтов Laravel?

Как вы относитесь к браузерно-специфическому CSS?

Сегодня существуют различные браузеры, и если вы пользуетесь ими, то все они отличаются друг от друга. Поскольку они имеют множество функций, вы можете никогда не узнать, какой браузер использует ваш конечный пользователь для открытия вашего веб-приложения. Самое большее, что мы можем сделать, это быть готовыми ко всем целевым браузерам. Однако это нелегкая задача. Знание специфических для браузера проблем для реализации специфического для браузера кода CSS требует тщательного анализа и работы.

В этой статье мы рассмотрели те же методы, которые позволят вам создавать веб-сайты, безупречно отображаемые на всех новейших и устаревших браузерах и операционных системах. Я надеюсь, что вы нашли свои собственные хаки и специфические коды, над которыми нужно работать как веб-разработчик.

Сообщите нам о них в разделе комментариев, а мы постараемся обновить наиболее используемые из них в этом посте.