CSS кроссбраузерность

Updated: 08.04.21

Все мы желаем того, чтобы написанные нами стили корректно отображались в различных браузерах. Но как ни крути, придется дописывать стили, чтобы они работали в других браузерах. Этот процесс называется – приведение верстки сайта к кроссбраузерному виду. Кроссбраузерность — это когда css стили корректно отображаются в различных браузерах, и их различных версиях.

Хочу дать несколько советов, чтобы процесс приведения ваших CSS к кроссбраузерности занял меньше времени.

  1. Ориентируйтесь на самые популярные браузеры. Если у вас на сайте не установлены системы аналитики и вы не знаете какие браузеры используют ваши пользователи, то можно ориентироваться на рейтинги браузеров на пример такой есть тут gs.statcounter.com. При использовании рейтинга стоит учитывать регион аудитории сайта и платформу(Desktop,Tablet,Mobile). Например, если это сайт для аудитории из Африки, то тут уже может преобладать не Chrome, а другой браузер. Также в процессе верстки стоит посматривать, как выглядит сайт в тех браузерах, что занимают 2 и 3 место.
рейтинг браузеров
рейтинги браузеров в динамике по всему миру по всем платформам 2012-2019 года/ Source: StatCounter Global Stats — Browser Market Share
рейтинг браузеров по миру август 2021
рейтинг браузеров по всем платформам по миру август 2021/ Source: gs.statcounter.com
рейтинг десктопных браузеров в россии
рейтинг десктопных браузеров в России/ Source: gs.statcounter.com
рейтинг мобильных браузеров в россии
рейтинг мобильных браузеров в России/ Source: gs.statcounter.com

2. Можно поискать самые популярные css стили, которые неправильно выглядят в других браузерах. Найти для них CSS хаки.

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

Префикс соответствует браузеру:

  • -webkit-: браузеры Chrome, Safari, Opera;
  • -moz-: браузер Mozilla Firefox;
  • -ms-: браузер Internet Explorer.

Пример использования:

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

4. Существуют специальные инструменты в сети для генерации кроссбраузерных стилей. Хочу выделить несколько самых интересных на мой взгляд.

Инструменты для CSS кроссбраузерности

caniuse.com

Для проверки, поддерживает ли версия браузера определенное css свойство. Например какие браузеры(и их версии) поддерживают flexbox

service can i use

iwanttouse.com

Укажите какие компоненты вы используете на сайте и узнаете, какой процент(приблизительно) пользователей не смогут полноценно воспользоваться вашим сайтом.

doiuse

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

CSS3 Click Chart

Примеры css, с информацией о том в каких браузерах это будет работать

Плюсы:

  •  Описано много стилей;
  •  Есть пример использования с результатом.

Минусы:

  • Поначалу сложно ориентироваться на сайте;
  • Нельзя генерировать стиль со своими параметрами (дан свой пример использования).
стлили-битрикс

CSS3 Generator

Генерация кроссбраузерного css по вашим параметрам

Плюсы:

  • Удобен и интуитивен в управлении;
  • Можно генерировать стили для своих параметров;
  • Можно посмотреть результат генерированного стиля.

Минусы:

  • Мало стилей
кроссбраузерность_битрикс

modernizr

Это JavaScript библиотека подключается на сайте. Она сканирует браузер на поддержку тех или иных свойств, и все доступные свойства помечаются в теге html в качестве классов или в качестве свойств js объекта Modernizr.

Как подключить кроссбраузерный шрифт читайте тут.

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

Рекомендуем к прочтению:



1 Комментарий

  • Алексей PR.:

    =)
    Так и делаю. Делаю под хром верстку, для некоторых стилей сохранил хаки, вот так и привожу к кроссбраузерности CSS.

Оставить комментарий

Этот сайт защищен reCAPTCHA и применяются Политика конфиденциальности и Условия обслуживания Google.