Как сделать чтобы сайт открывался во всех браузерах

Обновлено: 06.07.2024

Чтобы разобраться, в чем суть да дело, обратимся к истории. Когда были разработаны основы построения Всемирной Паутины, один из ее создателей, Тим Бернерс-Ли, для хранения в ней документов придумал простой текстовый формат. В нем разметка документов осуществлялась при помощи тэгов. Язык был назван HTML, и именно с того времени берет свое начало веб-разработка.

Изначально веб-страницы отличались от обычных документов только наличием гиперссылок. Графики и интерактивных элементов на них и в помине не было, а язык состоял из малого количества самых основных тэгов (<a>, <b>, <i>, <u>, <br> и т.д.).

Время шло, интернет-софт развивался. Появились браузеры, поддерживающие графику, был разработан интерфейс CGI. Так в язык разметки попали тэг <img>, тэги HTML-форм — <form>, <input>, <select>и другие.

В результате долгой и упорной работы Консорциума были приняты стандарты: HTML 2.0, HTML 3.2, HTML 4.0, XHTML. Но отголоски строительства той «вавилонской башни» дошли и до сегодняшних дней. Ибо разработанные стандарты не носят императивного характера, они всего лишь рекомендации для разработчиков. Часть браузеров начала следовать стандартам w3c (Opera, Firefox, Safari, Konqueror), другая же часть продолжила упорно «гнуть свою линию». Ну, а создатели одного из популярных сегодня браузеров вообще решили стандарты «подмять» под себя (я думаю, все догадались, о каком продукте идет речь J).

Итак, можно назвать следующие причины несовместимости браузеров:

Универсального решения, позволяющего делать кросс-браузерные сайты, не существует. Но, следуя определенным рекомендациям, можно подстраховаться и снизить вероятность того, что сайт окажется несовместим с определенными браузерами и, как следствие — уменьшить объем времени (и нервов), затраченных на его разработку.

На что ориентироваться?

Сделать сайт, который будет совершенно одинаково отображаться во всех существующих браузерах, невозможно. Да и не нужно. Какой смысл добиваться нормального отображения страницы, скажем, в iCab (альтернатива Safari на платформе Macintosh), если его используют (по данным на май этого года) меньше 0.01 % пользователей? При посещаемости ресурса в 10000 хостов в день только 1 человек может увидеть «поплывший» дизайн. Но совершенно другое дело, если сайт криво отображается в Internet Explorer, занимающем около 74 % рынка браузеров. Уже 7400 человек изо дня в день будут наблюдать глюки, и вероятно, большая их часть перестанет быть аудиторией сайта.

Следовательно, надо ориентироваться только на самые популярные браузеры. Таковыми на данный момент являются:

Internet Explorer — 73.75 %, Firefox — 18.41 %, Safari — 6.37 %, Netscape — 0.62 %, Opera — 0.71 %.

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

На ошибках учатся

Большая часть проблем с некорректным отображением возникает, если в структуре документа допущены ошибки:

пропущена закрывающая кавычка в значении параметра; специальные символы записаны в незакодированном виде и т.п.

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

Поэтому тщательно проверяйте синтаксис HTML-кода. В некоторых редакторах (например, в ActiveState Komodo Edit) есть встроенный синтаксический анализатор, не гнушайтесь пользоваться им и следовать его рекомендациям.

Стандартизация

Отсутствие ошибок на странице еще не гарантирует того, что она будет кросс-браузерной. Чтобы браузер корректно отобразил страницу, он в первую очередь должен знать, какому из стандартов (HTML 4.01, XHTML) она соответствует. Стандарт определяется на основе анализа исходного кода. Но не факт, что он будет определен правильно. Поэтому может возникнуть ситуация, когда браузер станет интерпретировать страничку, написанную в XHTML, как HTML 4.01 (или наоборот). Естественно, о корректном отображении содержимого в данном случае не может быть и речи. Вероятность неверного определения стандарта для страницы тем больше, чем меньше ее код этому самому стандарту соответствует. Это — очень распространенная ошибка среди новичков-копипастеров. Склепанные из кусочков, взятых из разных источников, такие страницы-«франкенштейны» представляют собой жуткую смесь из HTML и XHTML. Каково бедному браузеру разбираться, как же этот ужас следует интерпретировать?! Поэтому правилом хорошего тона считается идти интернет-обозревателям навстречу, а именно:

выдерживать код всех страниц сайта в одном стандарте;

Теперь кратко рассмотрим стандарт XHTML 1.0. Для более подробного ознакомления с этим и другими стандартами я рекомендую прочитать официальные документы Консорциума w3c.

Итак, XHTML — это язык, который по возможностям похож на HTML, но создан на базе XML. Его синтаксис намного строже, чем у HTML, но благодаря этому алгоритмы его анализа и парсинга проще, а скорость интерпретации — выше.

По синтаксису язык очень похож на XML, а именно:

абсолютно все тэги XHTML закрываются (даже те, которые в HTML не имели закрывающего тэга) — <a> <a>, <img src=”” alt=”” />, <br />; одиночные параметры тэгов записываются в развернутой форме — <option selected=”selected”>, <td nowrap=”nowrap”>; имена тэгов и параметров записываются в нижнем регистре — <a href=, а не <A HREF=; все специальные символы должны быть закодированы — & lt, & amp вместо < и &; оформление документа должно быть отделено от содержания и осуществляться только средствами CSS; элементы-блоки (<div>, <p>) не могут быть вложены во внутристрочные элементы (<a>, <span>, <b>).

Для указания формата документа используется специальный тэг DTD (Document Type Definition), который должен размещаться строго в начале документа, перед тэгом <html> (см. таблицу).

Рис. 1. Сейчас мы будем сдавать экзамен по знанию HTML. И не кому-нибудь — самому Консорциуму W3C!

Дополнительно к указанию типа документа для XHTML необходимо указать пространство имен в параметре xmlns тэга <html> :

Сервис автоматически проанализирует код документа и выведет список ошибок и предупреждений с подробными комментариями к ним (рис. 2).

W3C предоставляет к Вашим услугам так же и 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. Настоящие пальцы на настоящем устройстве, настоящие браузеры в естественной среде обитания расскажут вам много нового о том, как именно будут пользоваться вашими интерфейсами. Это гораздо важнее того, насколько они похожи на макет.

В работе я периодически пользуюсь разными браузерами: Google Chrome, Яндекс.Браузером, Mozilla Firefox, Opera. Давно заметил, что одни и те же сайты в разных приложениях открываются также по-разному. Где-то эти отличия мало заметны и никак не влияют на просмотр и чтение, но иногда возникают определенные сложности с картинками, баннерами, кнопками команд и даже текстами. Чаще всего с такими проблемами сталкиваются владельцы смартфонов и планшетов. Большинство посетителей, встретившись с подобными неудобствами, просто покидают проблемный ресурс и переключаются на альтернативные источники информации.

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

Дело в том, что разные браузеры созданы и работают на разных движках. Эти движки отвечают за загрузку, обработку, отображение и расчет данных. Каждый движок воспринимает и считывает информацию, закодированную в HTML-тегах и CSS-стилях определенного веб-ресурса по-своему. В свою очередь сайты также создаются в различных CMS, разработчики используют варианты встроенных команд, плагинов и скриптов. Для того чтобы сайт одинаково хорошо отображался в разных браузерах, необходимо, чтобы он соответствовал требованиям кроссбраузерности. Что это такое, как проверить и настроить адаптивность сайта в различных браузерных приложениях, мы поговорим в этой статье.

Так что такое кроссбраузерность?

Понятие кроссбраузерности появилось еще на заре освоения интернета в начале 90-х годов. В то время существовало всего два ведущих браузера - Internet Explorer от Microsoft и Netscape Navigator. Считалось, что если сайт одинаково корректно отображается в обоих приложениях, то с кроссбраузерностью у него все в порядке. Затем Netscape Navigator прекратил свое существование, но стали один за другим появляться новые разработки браузерных систем. Некоторые сайты в них отображались корректно, с другими начинали возникать различные баги. Посетители относились к подобным проблемам негативно и просто напросто переставали посещать такие сайты. Разработчики веб-ресурсов вынуждены были учитывать этот фактор и искать пути решения проблемы.

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

Конечно, нет необходимости добиваться совершенно одинакового отображения визуальной и текстовой информации сайта во всех без исключения версиях браузеров. Достаточно, чтобы ресурс обладал адаптивностью ко всем возможным устройствам просмотра вне зависимости от размеров экрана. Не должно быть проблем с версткой, когда картинки, баннеры, логотипы «наезжают» друг на друга или вовсе не отображаются. Текстовая информация должна быть читабельной, особенно это касается таблиц. Важно, чтобы корректно работали сервисные приложения, вшитые в ресурс.

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

Google Chrome и производных обозревателях (типа Яндекс.Браузера, Chromium, Opera c 15 версии и т.д.);
Microsoft Edge (сейчас он тоже работает на движке Blink, как и Chrome);
Mozilla Firefox;
Safari (браузер, который используется на iOS и macOS).

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

Параметры, определяющие кроссбраузерность

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

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

Согласно данным компании Google, более 70% интернет-трафика сейчас идет через мобильные устройства. С 1 июля 2019 г. индексирование с приоритетом мобильного контента включено по умолчанию в Google Chrome для всех новых сайтов. Это заставляет веб-разработчиков все активнее заниматься обеспечением совместимости страниц с планшетами и смартфонами.

Как проверить кроссбраузерность сайта

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

Сначала нужно понять, какие браузеры нужны для теста. Для этого лучше всего воспользоваться специальными сервисами аналитики – Яндекс.Метрикой и Google Analytics. Они покажут, каким браузерами отдают предпочтение ваши пользователи. Согласно статистике Statcounter, в тройку лидеров в РФ входят: Google Chrome, Яндекс.Браузер и Opera.

Проверить кроссбраузерность веб-ресурса в автоматическом режиме можно с помощью специальных платных и бесплатных сервисов. Рассмотрим некоторые из них подробнее.

CrossBrowserTesting

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

Используются следующие способы проверки:

«Живой тест». Можно работать с ресурсом в браузере с заранее выбранными параметрами, записывать видео и делать скриншоты.
Тест Selenium. Подразумевает автоматическую проверку в соответствии с предварительно созданным скриптом. Результаты записываются в формате видеофайла.
Режим автоматического сохранения скриншотов. Можно комбинировать различные ОС, браузеры, устройства и размеры экранов.
Локальное подключение. Можно проверить документы, которые еще не загрузились на сайт.

В течение 7 дней доступен бесплатный тестовый период с лимитом в 60 минут.

Browsershots

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

IE NetRenderer

Как видно из названия, проверить кроссбраузерность сайта можно только для Internet Explorer, начиная с версии 5.5 и заканчивая 11. Сервис работает онлайн, указать здесь можно только версию браузера и адрес тестируемого ресурса.

Browserling

Осуществляет проверку не в эмулируемом, а в реальном окне браузера, который установлен на виртуальной машине программы. Работает с ОС Windows и 4+ версиями ОС Android в пяти популярных браузерах – Chrome, Opera, IE, Safari, Firefox. Ресурс полностью платный.

Spoon Browser Sandbox

Проводит бесплатную проверку кроссбраузерности сайта в последних версиях Chrome, IE, Opera, Safari и Firefox. Тестирование в старых релизах платное. После загрузки специального плагина доступно тестирование всех параметров кроссбраузерности. Интерфейс русифицирован.

MultiBrowser

Платный сервис проверки кроссбраузерности. Работает со всеми доступными версиями Firefox, Chrome, Safari 5.1, несколькими сборками Explorer и эмуляциями большинства смартфонов и планшетов. Приложение способно подключать браузеры, уже установленные на ПК, либо загружать версии, которые нужны пользователю. Есть функция тестирования сайта в различных браузерах в офлайн-режиме. Бесплатная демо-версия доступна в течение двух недель.

Sauce Labs

Онлайн-сервис тестирования кроссбраузерности. При оформлении платной подписки доступна автоматическая проверка около 700 комбинаций браузеров, разрешений и устройств.

Equafy

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

Viewlike.us

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

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

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

CSS hacks

CSS хаки – это фрагменты CSS-кода, которые понимает только определенный браузер, другими он игнорируется. Вот CSS-хак для Internet Explorer 6 (IE6):

В этом коде хак, воспринимаемый только браузером IE v.6 и ниже, записан в виде «звездочка html».

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

Универсальные элементы

Фреймворки

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

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

Этот метод в чем-то схож с использованием хаков, но является более эффективным и корректным. Префиксы — приставки к названиям CSS-свойств, используемые определенными браузерами. Они позволяют изменять отображение в конкретном обозревателе.

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

-moz для Mozilla Firefox;
-ms используется в Internet Explorer и Microsoft Edge;
-webkit-border-radius для Safari, а также браузеров на движках WebKit и Blink;
-o используется в старых версиях Opera на движке Presto, с 2013 Opera использует Blink.

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

Заключение. Яндекс.Толока и кроссбраузерность

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

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

Кроссбраузерность — одна из важнейших характеристик любого сайта, подразумевающая одинаково корректное отображение и работу ресурса в разных браузерах, а также их версиях. Для того, чтобы сайт правильно функционировал в Google Chrome, Яндекс.Браузере, Safari, Opera, Firefox, Android Browser и т.д. как на стационарных, так и на мобильных устройствах, необходимо решить вопрос кроссбраузерности еще на этапе верстки. О том, как протестировать сайт на кроссбраузерность и добиться этого свойства, мы рассказываем в данной статье.

ТОП-10
лучших компаний интернет-продвижения России 2020

Почему сайты могут по-разному отображаться и работать в разных браузерах

Причина этой проблемы — отличия в исходном коде. Особенно это касается старых версий браузеров.

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

В чем выражается кроссбраузерность сайта и почему она так важна

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

При этом сайт не должен абсолютно одинаково выглядеть во всех браузерах. Вам достаточно:

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

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

Как протестировать сайт на кроссбраузерность

Ручное тестирование кроссбраузерности сайта. Для этого нужно установить на ПК разные браузеры и посмотреть, как сайт отображается в каждом из них. Способ верный, но неудобный: придется скачивать разные браузеры и их версии, а некоторые из них, к слову, можно установить только на macOS.
Использование специальных онлайн-сервисов. Этот способ прост и надежен. Таких сервисов достаточно много: есть и бесплатные, но с определенными ограничениями, и платные, но более функциональные и быстрые.

Здесь можно бесплатно проверить сайт на корректность отображения информации в различных браузерах (около 65) и операционных системах. В зависимости от степени загруженности сервера запросами проверка занимает от пяти минут до двух часов. Если вы хотите ускорить процесс, рекомендуем приобрести доступ к так называемой «приоритетной обработке».

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

Из бесплатных сервисов также можно использовать CrossBrowserTesting, Browserling и т.д. Каждый из них отличается определенными функциональными особенностями и возможностями. Некоторые сервисы требуют пройти регистрацию, на других можно проверить сайт и без нее.

Если вы планируете использовать платный сервис, попробуйте BrowserStack . Этот мощный инструмент в режиме реального времени проверяет сайты на кроссбраузерность в более чем 2000 браузеров и устройств. А еще здесь есть бесплатный пробный период.

Кроме онлайн-сервисов, существуют и специальные приложения. К примеру, Multi-Browser Viewer. Этот инструмент позволяет проверить не только корректность отображения данных в разных браузерах, но и то, насколько правильно сайт функционирует.

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

Предлагаем вам несколько самых действенных способов решения этой задачи:

1. Вендорные префиксы. Они представляют собой приставки к названиям уникальных свойств, которые используются вендорами (в данном случае это производители браузеров). Такие префиксы применяются в конкретных случаях, а именно, когда CSS-свойство:

нестандартно и прописано для определенного браузера;
это эксперимент, который еще дорабатывается;
реализует частичный функционал.

-moz- применяется в Firefox;
-ms- применяется в IE и Edge;
-webkit- применяется в Safari, Google и прочих браузерах на базе WebKit и Blink;
-o- применяется в старых версиях Opera (на платформе Presto).

Код может выглядеть следующим образом:

-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
- webkit-flex-wrap — это свойство для версий Chrome с 4 по 28 и версий Safari с 3.1 по 8;
-ms-flex-wrap — свойство для IE 10.

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

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

3. Разделение стилей. Используется для поддержки Internet Explorer. Этот способ предполагает определение браузера и подключение конкретного файла стилей. В IE применяются условные комментарии, которые понимает только Internet Explorer. Другие браузеры воспринимают этот код как простой комментарий.

4. Универсальные элементы. Они одинаково качественно функционируют практически во всех популярных браузерах. Благодаря им исходный код ресурса не выглядит громоздким, а главное, соответствует требованиям браузеров.

На бесплатном онлайн-сервисе caniuse. com вы узнаете, какие теги поддерживаются той или иной версией браузера.

Самые популярные браузеры среди пользователей Рунета

По данным Яндекс.Радара за июнь 2020 года, в большей степени пользователи Рунета предпочитают Google Chrome, Яндекс.Браузер и Safari.

Самые популярные браузеры среди пользователей Рунета

Что касается браузеров на мобильных устройствах, то здесь Яндекс.Браузер и Safari меняются местами.

Самые популярные браузеры на мобильных устройствах

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

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