Кроссбраузерность

FineGO / Статьи / Кроссбраузерность

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

Как мы уже говорили ранее кроссбраузерность и адаптивная вёрстка вещи совершенно разные, а именно:
кроссбраузерность — это идентичное (одинаковое) отображение и работоспособность во всех популярных и наиболее распространённых браузерах.
Адаптивная верстка – это одинаковое отображение и работоспособность во всех популярных и наиболее распространённых устройствах.

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

Давайте рассмотрим пример такой верстки:
Задача:
Нам необходимо сделать прямоугольник с закруглёнными углами, который бы быстро грузился и корректно отображался во всех популярных браузерах.
Решение 1:
Можно воспользоваться «старым» проверенным методом – это нарисовать картинку с закруглёнными углами и вставить её фоном в прямоугольник. В итоге мы получим почти тоже самое что и при кроссбраузерной верстке, но это хорошо если прямоугольник один! А если их 50 и они все разные? Тогда увеличивается время загрузки страницы, и как следствие потенциальный клиент не захочет ждать пока грузиться контент и уйдёт на другой ресурс.
Решение 2:
Стандартными средствами HTML рисуем прямоугольник, прописываем ему произвольное имя класса и в файле стилей прописываем его свойства. Приведу небольшой пример:
Код HTML:


<div class="test_poligon"></div>
Код CSS:
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-o-border-radius:5px;
-icab-border-radius:5px;
-ms-border-radius:5px;


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

Мы рассмотрели одну из самых простых проблем, с которыми можно столкнуться.

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

Ещё несколько лет назад основная проблема или даже камень преткновения для верстальщиков был браузер от компании Microsoft IE версии 6, который и по сей день практически не поддаётся «дрессировки», но к счастью сейчас, по статистики процент его использования быстро стремится к нулю и составляет менее десятой доли процента от общего использования.

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