Как сделать кроссбраузерность сайта css

Обновлено: 07.07.2024

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое кроссбраузерная вёрстка, — спрашивают Илья, Сергей и Эдуард, — какие есть браузеры и нужен ли пиксель-пёрфект?

Если собрать охапку современных браузеров, то разложить её можно по-разному: по устройствам, по платформам, по типу работы, да хоть по цвету иконок. Самое полезное для разработчика — уметь разложить их по движкам. Именно движок, то есть самое ядро браузера, определяет как он работает с вашей вёрсткой.

При всём разнообразии браузеров, независимых движков довольно мало, а новые появляются очень редко. Так что вместо десятков браузеров вам нужно поддерживать не больше пяти независимых движков. А ещё бывает, что браузеры с одним названием используют разные движки на разных платформах! В общем, всё очень сложно и интересно.

Самый популярный в мире браузерный движок — это Blink. Его использует Chrome и браузеры на его основе: Opera, Samsung Internet, Яндекс.Браузер и другие. Для работы с JavaScript, эти браузеры используют движок V8 — тот же, что и в Node.js. Один из главных разработчиков открытого движка Blink — Google, но в разработке активно участвует не меньше десятка компаний.

WebKit, другой популярный движок, очень похож на Blink. А вообще, наоборот — это Blink похож на WebKit. Это как? В 2013 году Blink форкнули из WebKit. По сути, скопировали. Google собрала вещи и сказала Apple, основному разработчику WebKit, что ей не нравятся её методы работы и теперь всё будет по-другому. Что поделать, опенсорс. И действительно, стало по-другому: основа у WebKit и Blink общая (префиксы webkit , например), но возможности уже довольно разные. На новом WebKit сейчас работают мобильные и десктопные браузеры Safari, на старом — встроенный браузер на Android до версии KitKat.

На движке Gecko работает браузер Firefox, когда-то очень популярный, а сегодня сохраняющий небольшую долю и важную роль в развитии веба и технологий. Префиксы у Gecko свои: moz — Mozilla, но для лучшей совместимости Firefox специально поддерживает некоторые свойства WebKit. Полноценный Firefox на Gecko работает на десктопных платформах и на Android. Параллельно с Gecko, Mozilla разрабатывает экспериментальный движок Servo и меняет некоторые части Gecko прямо на ходу. Например, в следующем Firefox 57 движок CSS заменят на новый.

Браузер Edge работает на всех современных платформах Microsoft, включая мобильные и Xbox. В его основе движок EdgeHTML — недавно как раз вышла его 16-я версия. EdgeHTML тоже форкнули от движка Trident или MSHTML, на котором работал браузер Internet Explorer. Удивительно похоже на историю Blink и WebKit: оба движка сохраняют общие префиксы ( ms и опять немного webkit для совместимости), но сильно отличаются по возможностям. EdgeHTML отбросил всякое старьё и смело развивается: пара крупных релизов в год и даже система голосования за фичи. Trident и IE закрыли в 2015 году.

Кроме движков, полезно ещё знать особенности платформ. Например, на мобильной платформе iOS куча браузеров, помимо встроенного Safari: Chrome, Firefox, Opera, Яндекс, UC и даже Edge недавно выпустили. Но все эти браузеры — просто оболочки над встроенным в систему движком WebKit. Правила этой платформы запрещают использовать другие браузерные движки. А вот на Android большинство браузеров поставляются со своими движками: Firefox, Opera, Samsung, но некоторые используют встроенный Chromium.

Ну вроде всё? А нет! Есть ещё отдельная группа необычных браузеров: они живут не на устройствах пользователей, а глубоко на серверах. На устройствах стоит только лёгкая оболочка, которая запрашивает адрес и получает с сервера набор скриншотов и ссылок, слепленных в сайт. Это прокси-браузеры и они безумно сжимают трафик, но по пути теряют: фирменные шрифты, фоновые картинки, градиенты, скруглённые уголки, тени и вроде того. Opera Mini — один из самых популярных прокси-браузеров. На сервере у него крутится устаревший движок Presto, а ставят его чаще всего на простые телефоны. Но есть и другие, подробнее вам расскажет Тим Кадлек.

Некоторые браузеры работают только на одной платформе: Edge и IE есть только на Windows, Safari только на macOS и iOS. Были когда-то попытки интервенций, но ничего не вышло. Это конечно усложняет тестирование. К счастью, есть сервисы вроде BrowserStack, которые дают вам доступ ко всем существующим браузерам, а Microsoft выкладывает компактные образы Windows для тестирования Edge и IE в виртуальных машинах.

Ладно! Про браузеры мы теперь знаем. А что делать, если тот же браузер, тот же движок — а результат на разных платформах разный? А ничего не поделаешь! На деле браузеры могут сильно отличаться в зависимости от платформы или устройства. Самая большая разница между десктопными и мобильными браузерами — в последних очень много оптимизаций и просто магии. Но можно поймать и разное поведение на десктопных Windows и macOS.

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

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

И ещё про тестирование. Как бы хорошо ни имитировал устройства и браузеры эмулятор Chrome DevTools — это только намёк на то, как они будут выглядеть в реальности. Важно проверить результат на настоящих платформах и устройствах, как минимум: на Windows, Android, macOS и iOS. Настоящие пальцы на настоящем устройстве, настоящие браузеры в естественной среде обитания расскажут вам много нового о том, как именно будут пользоваться вашими интерфейсами. Это гораздо важнее того, насколько они похожи на макет.

Сегодня поговорим об одном из очень важных требований к вёрстке. Речь пойдёт о кроссбраузерности.

Что такое кроссбраузерная вёрстка?

Кроссбраузерность вёрстки предполагает что вёрстка страницы должна одинаково выглядеть во всех популярных браузерах. А именно Opera, Mozilla Firefox, Google Chrome, Safari, Internet Explorer, Яндекс браузер и другие. При этом особое внимание необходимо уделить такому браузеру как Internet Explorer (IE). Дело в том, что этот браузер портит жизнь веб-разработчикам уже много лет подряд. Так как он не понимает многих современных HTML тегов, CSS стилей и у него специфический подход к отображению некоторых CSS свойств, отличающийся от всех остальных браузеров.

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

Если Вы планируете заказать вёрстку сайта у верстальщика, то обязательно уточняйте момент кроссбраузерности. И указывайте начиная с какой версии браузера IE должна поддерживаться вёрстка. Это позволит Вам избежать недопонимания и проблем в будущем.

На сегодняшний день актуальными являются версии 8, 9, 10

Будьте готовы к тому что за создание вёрстки, которая будет поддерживаться начиная с IE7 у Вас могут просить дополнительную плату, так как если вёрстка сложная, то такое требование значительно увеличит объём работы верстальщику.

Как добиться кроссбраузерности?

Если же Вы взялись верстать сайт самостоятельно и хотите чтобы он был кроссбраузерным и нормально поддерживался IE разных версий, то вот Вам несколько советов:

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

На этом у меня всё. Если у Вас есть вопросы или уточнения по данной статье я буду рада если Вы напишите их в комментариях.

Желаю Вам удачной вёрстки, качественных сайтов и высокой посещаемости.

До встречи в моих новых статьях.

С уважением Юлия Гусарь

Подписаться на рассылку

2 комментария

Здравствуйте, Вячеслав!
Каждая тема уникальна. При обновлении темы файл стилей может вообще существенно отличаться от предыдущей версии темы.
Поэтому сказать однозначно нельзя.
Советую вам полностью скопировать с сервера папку с Вашей темой и на всякий случай сделать резервную копию базы данных сайта, а только потом уже обновлять.
Дальше алгоритм Ваших действий будет примерно следующим:
1) После обновления можно будет попробовать просто заменить содержимое файла style.css со старого на новый (при этом у Вас обязательно должен быть резерв того файла стилей который Вы заменяете!). Если всё получилось — отлично! Если нет, то переходим к шагу 2
2) Снова заменяем файл стилей на тот, который использует обновлённая тема. А затем копируем содержимое файла стилей старой версии темы и просто вставляем в файл стилей новой версии обязательно в самом конце! Это позволит Вам сохранить стили новой темы и добавить к ней те изменения, которые были внесены позже.
Можно воспользоваться этим вариантом сразу но в этом случае у Вас получится очень длинный CSS файл.

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

А вообще если нет острой необходимости в обновлении темы, то можно спокойно её оставить так как есть. Ничего страшного при этом не произойдёт.
Исключение составляют те случаи когда старая тема начинает конфликтовать с новыми версиями WordPress (что бывает крайне редко) или в новой версии есть интересный новый и нужный Вам функционал.

Кроссбраузерность – это способность сайта одинаково успешно адаптироваться под разные браузеры, корректно и без сбоев в функционировании отображаться в них. Указанный термин появился в 90-х годах, когда уже существовало несколько браузеров и они активно соперничали друг с другом. Из-за того, что создатели приложений начали использовать различные функции, предназначенные для определенного браузера, страницы некоторых сайтов стали отображаться и работать по-разному. Так и возникла необходимость делать веб-ресурсы кроссбраузерными.

Для чего нужна кроссбраузерность

Предположим, вы особо постарались для создания красивого дизайна вашего сайта. Он получился привлекательным, способным обратить внимание многочисленных пользователей. Но, если не проверить кроссбраузерность вашего ресурса, то результат может быть самым неожиданным. Дело в том, что посетители заходят на сайт с разных устройств и браузеров. И может произойти так, что в некоторых браузерах ресурс будет отображаться неправильно. К примеру, шрифт может выглядеть некрасиво или съезжать, не будут видны все картинки или возникнут другие графические проблемы. Что в таком случае произойдет? Посетитель попросту покинет такой сайт и пойдет искать другой.

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

Как сделать сайт кроссбраузерным

Есть ряд критериев, позволяющих оценить кроссбраузерность ресурса:

Текст. Если это информационный сайт, на котором размещен преимущественно текстовый контент, то этот параметр крайне важен. Если текст съезжает, не отображается, то это плохо.
Расположение элементов. Некоторые из них могут или немного съезжать, или быть вовсе не видны. Это означает, что сайт не адаптирован к какому-то конкретному обозревателю.
Нормальная работа всех сайдбаров, кнопок и пр. Если в ответ на клик определенные или все кнопки не работают, то они не функционируют совместно с какой-то конкретной программой или устройством.
Скорость загрузки. Если страницы загружаются медленно, зависают, то это означает, что какие-то элементы обозреватель не распознает.
Адаптивность под разные устройства. Сайт должен нормально открываться, а его элементы – корректно отображаться на ПК, планшетах, мобильных устройствах. В случае отсутствия адаптивности следует позаботиться хотя бы о разных версиях для различных устройств.

Неадаптированные сайты сегодня встречаются не очень часто. В большинстве случаев ресурсы отображаются корректно во всех браузерах (если, конечно, они обновлены до последней версии). Если обращение будет идти даже со стороны устаревшего браузера, то и в таких случаях можно решить проблему. Обычно вебмастера устанавливают специальную заглушку, извещающую пользователя об использовании устаревшего ПО. Также ему предлагается перейти на официальные источники, чтобы выполнить обновление. Но, такой вариант подходит далеко не всем. Где гарантия, что пользователь захочет перейти по ссылке и обновить программное обеспечение, а не просто закрыть ресурс?

Как сделать сайт кроссбраузерным

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

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

Какие браузеры необходимо учитывать при верстке

Кроссбраузерными считаются те сайты, которые отлично работают как минимум в таких браузерах:

Mozilla Firefox;
Opera;
Google Chrome;
Internet Explorer (в настоящее время – Microsoft Edge);
Safari (используется на macOS).

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

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

С помощью каких сервисов проверить кроссбраузерность сайта

Установка всех браузеров на компьютерном устройстве невозможна, да и не нужна. А вот воспользоваться специальными сервисами для проверки кроссбраузерности конкретного сайта можно и даже необходимо. Они могут быть платными и бесплатными. Вот некоторые из них:

CrossBrowserTesting. Является платным и выполняет проверку в режиме онлайн. Поддерживается почти всеми браузерами и версиями операционных систем.
MultiBrowser. Это платный сервис. Работает со всеми сервисами Chrome, Firefox, Safari и некоторыми сборками Explorer.
Litmus. Бесплатное пользование доступно 3 дня. Поддерживает большинство мобильных устройств и версий известных браузеров.
Equafy. Позволяет не только тестировать кроссбраузерность сайта, но и отыскивать ошибки верстки в режиме автоматического сканирования.
Sauce Labs. Тестирует кроссбраузерность онлайн. Функционал пробной версии достаточно ограничен, но при подписке на платный сервис дает возможность пользоваться 700 комбинациями различных разрешений, браузеров и устройств.

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

Читайте также: