Кроссбраузерная верстка как сделать

Добавил пользователь Алексей Ф.
Обновлено: 28.08.2024

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

Именно поэтому я дам определение данному термину и подробно опишу, что это такое, объясню, почему возникает проблема разного отображения одного и того же сайта на html и css в различных браузерах и дам несколько полезных советов. Давайте начнем разбор полетов!

Кроссбраузерность, покажи свое лицо!

Это означает, что независимо от того, в каком ППО для просмотра html-страничек вы откроете сервис, его стилевая разметка не должна измениться.

Почему же все такие проблемные?

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

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

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

Второй проблемой некорректного отображения объектов на страницах веб-сервисов могут стать браузерные стандартные значения. Так, в каждом продукте, будь то Chrome, Safari, Opera или другие, для большинства свойств и атрибутов установлены некие значения по умолчанию. В качестве примера можно назвать разные отступы от края экрана для тега body.

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

Рецепты для решения проблем с идентичностью отображения

При этом есть свои определенные хитрости. Каждый раз тестить сервис во всех указанных системах затратно по времени. Для этого начните верстать сайт для Firefox или Chrome (однако я бы советовал первый), периодически проверяя его в IE седьмой версии (она самая проблемная).

Реже стоит проверять в IE девятой версии, Safari и Opera. Ну и напоследок в Firefox или Chrome в зависимости от того, что вы выбрали вначале.

Почему же так? Движок Gecko близок к оперовскому и WebKit-у, который используют продукты Google и Apple. Большинство фейлов случается в старых версиях Explorer, поэтому внешний вид веб-сервиса в них нужно проверять чаще всего.

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

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

А я прощаюсь с вами. Обязательно подписывайтесь на мой канал, ведь далее я расскажу вам об адаптивной верстке! И не забудьте поделиться ссылкой на мой блог с друзьями. Пока-пока!

Кроссбраузерность – это способность сайта одинаково успешно адаптироваться под разные браузеры, корректно и без сбоев в функционировании отображаться в них. Указанный термин появился в 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 комбинациями различных разрешений, браузеров и устройств.

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

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

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

Кроссбраузерность вёрстки предполагает что вёрстка страницы должна одинаково выглядеть во всех популярных браузерах. А именно 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 (что бывает крайне редко) или в новой версии есть интересный новый и нужный Вам функционал.

Если вас интересует будущее браузеров, верстки, то читаем статью: кроссбраузерная верстка.

Кроссбраузерная верстка CSS– это одинаково отображаемая верстка страницы в различных браузерах, которая реализуется средствами CSS.

Кроссбраузерность css верстки можно реализовать двумя способами:

- Сделать единственный кроссбраузерный css стиль для сайта.

- Сделать css файлы стилей для каждого из браузеров и средствами javascript, определять браузер и подгружать файлы.

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

Естественно лучше если будет стиль в единственном файле (при редактировании не открывать массу файлов), но по поводу css нюансов (особенностей) браузеров, то лучше их отделить в разные файлы.

Итак, компромисс кроссбраузерной верстки на css:

Создать файл общего стиля (style.css).

Все уникальные особенности и несоответствия для каждого браузера разделить по файлам (opera.css, safari.css, explorer.css, firefox.css…). И подгружать их средствами JS, PHP или другими известными вам способами.

Способы определения браузеров

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

IE 6, 7, 8 (Internet Explorer):

Opera:

Mozilla Firefox:

Safari:

Вот мои предложения по поводу реализации кроссбраузерной верстки на css . Если у кого-то есть варианты получше, прошу поделиться.

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

Основные браузеры

Существует пять основных браузеров: Chrome, Opera, Safari, Internet Explorer, Mozilla Firefox. При разработке сайта, обязательно проверяйте его во всех этих браузерах.

Одно и то же свойство CSS может поддерживаться одним браузером и не работать в другом, особенно это касается новейшей спецификации. Для того, чтобы узнать, какие свойства CSS можно использовать уже сегодня, воспользуйтесь сервисом caniuse.

Вендорные префиксы

-o- — префикс для браузера Опера
-moz- — префикс для браузера Mozilla
-ms — префикс для Internet Explorer
-webkit- — префикс для браузеров, построенных на движке Webkit, таких, как Safari и Chrome

Пример с вендорными префиксами:

-webkit-transition-duration:0.6s;
-moz-transition-duration:0.6s;
-o-transition-duration:0.6s;
-ms-transition-duration:0.6s;
transition-duration:0.6s;

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

Стандартные стили браузера

Чтобы это не произошло и код Вашего сайта был максимально кроссбраузерным, можно использовать специальные технологии по обнулению тех стилей, которые содержатся в браузере по умолчанию. Для этого разработаны технологии reset.css и normalize.css. Рассмотрим их подробно.

reset.css

Американец Эрик Майер написал css-документ reset.css, в котором все стили обнуляются. Убираются отступы и границы всех элементов веб-страницы, удаляются маркеры, а также всем элементам задается одни размер шрифта.

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

normalize.css

Немногим позднее американские разработчики Николас Галахер и Джонатан Нил создали css-документ normalize.css, в котором вместо полного обнуления всех стилей происходит их нормализация. То есть, полезные настройки браузера сохраняются, разработчику не нужно тратить время на то, чтобы заново прописать стили для абсолютно всех элементов, так как они унифицируются для всех браузеров. Более того, normalize.css исправляет несовместимости браузера Internet Explorer для версий IE9 и выше, а также ошибки в популярных браузерах.

Этот css-документ использует популярный фреймворк Bootstrap.

Оба файла – reset.css и normalize.css распространяются бесплатно.

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

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