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

Updated: 08.04.21

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

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

  1. Ориентируйтесь на самые популярные браузеры. В сети можно найти рейтинги браузеров. Также стоит учитывать регион аудитории сайта. Например, если это сайт для аудитории из Африки, то тут уже преобладает не Chrome, а другой браузер. Также в процессе верстки стоит посматривать, как выглядит сайт в тех браузерах, что занимают 2 и 3 место.
рейтинг браузеров
рейтинг браузеров по всему миру/ Source: StatCounter Global Stats — Browser Market Share

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. Существуют специальные инструменты в сети для генерации кроссбраузерных стилей. Хочу выделить 2 самых интересных на мой взгляд.

Инструменты для 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.