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

Здравствуйте дорогие читатели!

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

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

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

рейтинг браузеров по всему миру

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

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

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

CSS3 Click Chart

Плюсы:

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

Минусы:

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

стлили-битриксCSS3 Generator

Плюсы:

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

Минусы:

  • Мало стилей

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

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

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

Удачи вам!

ПоделитьсяShare on Facebook0Share on VKShare on Google+0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest0

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

  • Алексей PR.:

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

Добавить комментарий