Как пишется кроссбраузерность

#1

#2

Undi

#3

aaa

#4

aaa

#5

Фрося

#6

aaa

#7

Vasiliy

#8

aaa

#9

Clauster

#10

Vasiliy

#11

Boltick

#12

barancev

#13

Undi

#14

Clauster

#15

aaa

#16

SALar

#17

aaa

#18

aaa

#19

Clauster

#20

Vasiliy

Кроссбраузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности. Понятие «кроссбраузерность» очень часто путают с попиксельным соответствием, что на самом деле является разными понятиями.

Причины появления

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

См. также

• Кроссплатформенность

В этой статье не хватает ссылок на источники информации. Информация должна быть проверяема, иначе она может быть поставлена под сомнение и удалена. Вы можете отредактировать эту статью, добавив ссылки на авторитетные источники. Эта отметка установлена 13 мая 2011.

Всего найдено: 14

Как правильно писать: кросс-культурный или кросскультурный?

Ответ справочной службы русского языка

Следует писать через дефис.

Подскажите, как писать слова с приставкой кросс-? Например, кросс(?)функциональный. Допустимы ли варианты слитно, через дефис? Какой предпочтительнее?

Ответ справочной службы русского языка

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

Здравствуйте! Подскажите перенос слова «кроссфит». Крос-сфит или кросс-фит?

Ответ справочной службы русского языка

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

Почему лироэпика, но лиро-эпический? Почему тогда не кроссплатформенность при кросс-платформенном?

Ответ справочной службы русского языка

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

Как правильно: кроссбраузерный или кросс-браузерный?

Ответ справочной службы русского языка

Следует писать через дефис: кросс-браузерный.

Подскажите, пожалуйста, как правильно пишется слово «кросссегментный»

Ответ справочной службы русского языка

Орфографически верно: кросс-сегментный.

Добрый день! Скажите, пожалуйста, какое написание верно: «кросс-платформенный» или «кроссплатформенный»? Заранее благодарю за ответ. Ольга.

Ответ справочной службы русского языка

Верно дефисное написание: кросс-платформенный.

Здравствуйте! Скажите, пожалуйста, как правильно -«кросс-функциональный» или «кроссфункциональный»? Спасибо

Ответ справочной службы русского языка

Корректно дефисное написание: кросс-функциональный.

Здравствуйте! В последнее время время в литературе сталкиваюсь с новым словом
«кросскультурный», которое пишется по-разному: слитно и через дефис — кросс-культурный.
Заранее благодарю.

Ответ справочной службы русского языка

«Русский орфографический словарь» РАН (4-е изд., М., 2012) устанавливает дефисное написание: кросс-культурный.

Как пишется слово «кросссекционный»? По правилам (по аналогии) — слитно. Но как быть с тремя с, сошедшимися на стыке? Корректно ли в данном случае слитное написание или лучше через дефис?
Заранее благодарю за ответ.

Ответ справочной службы русского языка

Уместно дефисное написание, по аналогии с прилагательным кросс-секторальный.

Сколько букв «с» правильно писать в слове «кросссерверный»?
логика подсказывает, что 3. Однако в интернете чаще встречается написание с 2мя буквами.

Ответ справочной службы русского языка

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

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

Ответ справочной службы русского языка

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

Добрый день,
У нас возник вопрос, как правильно написать слово, образованное от английского cross-sectoral:
кросс-секторальный или кроссекторальный?
Большое спасибоё

Ответ справочной службы русского языка

Правильно: _кросс-секторальный_.

слово содержащее три буквы С

Ответ справочной службы русского языка

Например: _кресс-салат, кросс-система, масс-старт, пресс-служба_.

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

В этой статье подробно расскажем про кроссбраузерность и объясним, как ее настроить на сайте.

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

Термин «кроссбраузерность» появился 30 лет назад в самый разгар соперничества браузеров. Разработчики Microsoft Internet Explorer и Netscape Navigator внедряли функции, которые работали только в их браузерах. Из-за этого HTML-, JS- и CSS-коды сайтов стали обрабатываться по-разному в этих программах.

Это оказалось проблемой для владельцев веб-ресурсов. Чтобы ее решить, пришлось делать специальные настройки в коде сайтов. В результате удавалось добиться правильного отображения страниц в популярных обозревателях. Такую особенность и назвали кроссбраузерностью. Ее основные критерии:

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

Хорошая читаемость текста. Текстовые материалы должны выглядеть понятно и легко восприниматься.

Работоспособность статичных компонентов. Не должно быть проблем с фоном сайта и другими неподвижными элементами.

Работоспособность активных компонентов. Элементы на странице, которые подвязаны на JS- или CSS-анимации, должны выполняться без ошибок. 

Чтобы настроить кроссбраузерность, необходимо знать популярные программы для работы с сайтами. Это поможет понять, на что ориентироваться в первую очередь. Вот топ-10 браузеров в России по версии Яндекс.Радара (за 2021 год):

1. Google Chrome — 40,87%.
2. Яндекс.Браузер — 25,07%
3. Safari — 12,99%.
4. Opera — 4,34%.
5. Android Browser — 3,32%.
6. Mozilla Firefox — 2,60%.
7. Samsung Internet — 2,24%.
8. Edge — 1,93%.
9. MIUI Browser — 1,72%.
10. Internet Explorer — 0,32%.

Зачем нужна кроссбраузерность

Кроссбраузерность помогает:

1. Сделать работу с сайтом более удобной. Так аудитории будет легче взаимодействовать с контентом и совершать конверсии.
2. Улучшить важный поведенческий фактор — показатель отказов. Он показывает процент людей, которые перешли на веб-ресурс, но посмотрели не более одной страницы. Когда такой показатель высок, поисковики считают сайт непопулярным и снижают его позиции в выдаче.
3. Создать положительный имидж ресурса и бренда. Если элементы сайта везде отображаются корректно, это показывает ответственный подход к делу и вызывает лояльность пользователей.
4. Увеличить целевую аудиторию за счет тех, кто пользуется редкими браузерами.

Необходимость в кроссбраузерности зависит от многих факторов. 

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

Бывает немного иначе. Сайт делают для пользователей. Аналитики клиента уже подсчитали, что 99% аудитории пользуется браузером Safari, поэтому руководство компании решило не покупать услугу настройки кроссбраузерности.

А бывает и так, что у клиента нет аналитиков и поэтому он не знает, какой процент аудитории использует тот или иной браузер. Здесь кроссбраузерность будет уместна.

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

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

Browsershots

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

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

Адрес: browsershots.org

MultiBrowser

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

Адрес: multibrowser.com

Browserling

Ключевое преимущество сервиса — максимально наглядный и простой интерфейс. Browserling поддерживает самые популярные версии Windows и несколько браузеров: Chrome, Opera, Firefox, Safari, Internet Explorer.

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

Адрес: browserling.com

CrossBrowserTesting

Сервис находит недочеты сайта на базе любых операционных систем и браузеров. Поддерживаются даже платформы Android и iOS. CrossBrowserTesting автоматически анализирует общедоступные и локальные сайты сразу в нескольких браузерах. Также можно создать скриншоты и видео выполненных тестов.

Есть бесплатный пробный период.

Адрес: crossbrowsertesting.com

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

Есть несколько методов, которые помогут оптимизировать ваш ресурс.

CSS-хаки

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

Чтобы лучше понять этот метод, рассмотрим хак для Mozilla Firefox. Для этого создадим квадрат красного цвета:

<style>

    .hackBlock {

        width: 100px;

        height: 100px;

        border: 1px solid #000;

        background: red

    }

</style>

<div class=»hackBlock»></div> 

Теперь пропишем свойство, которое будет работать только в Mozilla Firefox:

@-moz-document url-prefix() {

    .hackBlock {

        background: blue;

    }

}

Благодаря этому в Mozilla Firefox квадрат будет синим, а в других браузерах — красным.

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

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

Вендорный префикс — это приставка перед сущностями в CSS. Благодаря префиксу можно добиться корректного отображения свойств CSS для разных браузеров.

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

-webkit-: браузеры Google Chrome, Safari;

-o-: браузер Opera;

-moz-: браузер Mozilla Firefox;

-ms-: браузер Internet Explorer.

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

Пример добавления вендорных префиксов для свойства transition:

А вот пример обычного CSS-кода:

.example {

    display: grid;

    transition: all .5s;

    user-select: none;

    background: linear-gradient(to bottom, white, black);

}

Теперь этот же код, только с префиксами:

.example {

    display: -ms-grid;

    display: grid;

    -webkit-transition: all .5s;

    -o-transition: all .5s;

    transition: all .5s;

    -webkit-user-select: none;

       -moz-user-select: none;

        -ms-user-select: none;

            user-select: none;

    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));

    background: -o-linear-gradient(top, white, black);

    background: linear-gradient(to bottom, white, black);

}

Чтобы облегчить работу, используйте онлайн-сервис для расстановки вендорных префиксов «Автопрефиксер».

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

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

Проверить, какие элементы поддерживают разные браузеры, можно в сервисе caniuse.com. Это ресурс, который содержит все последние спецификации HTML, CSS и JavaScript. 

Как и где искать информацию для настройки кроссбраузерности

Веб-сообщество Stack Overflow

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

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

Адрес: ru.stackoverflow.com

Телеграм-каналы

Frontender’s notes

Основные темы — HTML, CSS, JavaScript, NodeJS, Soft skills. Участники регулярно выкладывают ссылки на статьи по фронтенд-разработке, а также обучающие видео. 

Адрес: t.me/frontendnoteschannel

FrontEnd Book

Здесь вы найдете ссылки на книги по фронтенд-разработке. Их можно скачать в ознакомительных целях.

Адрес: t.me/frontendbook

FrontEndDev

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

Адрес: t.me/front_end_dev

JavaScript Noobs

Сообщество новичков в JavaScript. Участники помогают друг другу разбираться в популярном языке программирования.

Адрес: t.me/js_noobs_ru

Веб-стандарты

Первое русскоязычное объединение фронтенд-разработчиков. Появилось в 2006 году. На канале есть лента новостей и событий, подкасты, анонсы конференций по фронтенду и многое другое.

Адрес: t.me/webstandarts_ru

Советы: как часто проверять сайт на кроссбраузерность

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

• в момент запуска сайта;
• когда снижаются показатели продаж;
• когда увеличивается процент отказов;
• не менее одного раза в 1–3 года (зависит от сложности дизайна).

В идеале стоит совмещать два способа контроля: 

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

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

Разные устройства могут различаться не только разрешениями экранов, но и браузерами, с которых происходит выход в интернет. Их огромное количество, например: Google Chrome, Firefox, Safari, Egde, Opera, Vivaldi. Эти браузеры могут по-разному отображать одни и те же элементы на странице.

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

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

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

Основные движки:

• Blink — принадлежит компании Google, имеет открытый исходный код, входит в состав проекта Chromium. Используют браузеры: Chrome, Opera, Яндекс.Браузер, Vivaldi и др. Над развитием этого движка работают многие крупные компании: Opera, Intel, IBM, Yandex, Vivaldi и другие.
• WebKit — принадлежит компании Apple, имеет открытый исходный код, используется в браузере Safari. Именно этот движок c 2008 г. по 2013 г. использовала компания Google в своем браузере Chrome.
• Gecko — принадлежит компании Mozilla, имеет открытый исходный код, используется в браузерах Firefox и Tor Browser.
• EdgeHTML — принадлежит компании Microsoft, имеет закрытый исходный код, используется в браузере Edge. Пришел на смену движку Trident (использовался в Internet Explorer), с запуском Windows 10, и работает только на этой операционной системе. 15 января 2020 года Microsoft выпустило обновление для
  браузера Edge (Microsoft Edge 79 stable), в котором перешла на Chromium с браузерным движком Blink.

Примечание.
Последующие сравнения с браузером Edge справедливы для версий ниже 79.

Проблема различного отображения верстки заключена в том, что разные движки по-разному воспринимают и обрабатывают некоторые html-теги и css-стили, а также содержимое самих тегов. Например, браузер Edge подсвечивает все номера телефонов добавляет свои стили.

На самом сайте эти номера телефонов прописаны как обычный текст без ссылок, но браузер Edge отображает их в виде ссылок. Исправить это можно, добавив свои стили для номера телефона, либо добавив в тег, содержащий номер телефона, атрибут x-ms-format-detection=»none».

В результате получаем номер телефона без добавления стилей:

Подробнее о html и css расскажем ниже.

Как добиться одинакового отображения сайта в разных браузерах?

Разобравшись с понятием кроссбраузерной верстки, возникает вопрос: а как добиться корректного отображения верстки во всех этих браузерах? Откроем несколько секретов html-верстальщиков. =)

1. Использование префиксов

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

Производители браузеров называют несколько причин использования префиксов:

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

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

• -moz- используется в Firefox;
• -ms- используется в Edge и Internet Explorer;
• -webkit- используется в Safari, Chrome и браузерах на основе движков WebKit и Blink;
• -o- — используется в старых версиях браузера Opera, работающего на движке Presto. С 2013 г. Opera перешла на движок Blink.

Пример кода:

-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;

• -webkit-flex-wrap — свойство для Chrome с 4 по 28 версии, Safari с 3.1 по 8 версии;
• -ms-flex-wrap — свойство для Internet Explorer 10.

2. CSS-хаки

Это использование специальных свойств, понимаемых только определенными браузерами. Разберем пример css-хака, работающего только в Firefox. Создадим квадрат и закрасим его в красный цвет:

<style>
    .hackBlock {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        background: red
    }
</style>
    
<div class="hackBlock"></div>         

А теперь добавим свойство, которое будет работать только в Firefox:

@-moz-document url-prefix() {
    .hackBlock {
        background: blue;
    }
}        

3. Разделение стилей для браузеров

Метод заключается в том, чтобы определить вид браузера и подключить определенный файл стилей. В Internet Explorer используются условные комментарии, которые понимаются только этим браузером, остальные браузеры видят такой код как обычный комментарий.

Пример для Internet Explorer 9:

<!—[if IE 9]>
    <link rel="stylesheet" href="style-for-ie9.css">
<![endif]—>

Файл style-for-ie9.css подключится только в браузере Internet Explorer 9.

Подытожим:

• В основном для кроссбраузерной верстки используют префиксы, это увеличивает объем кода, но он остается быть валидным и понятным.
• CSS-хаки являются нежелательным способом исправления ошибок. Использование их приводит к плохой читабельности кода, невалидности, некачественной поддержке в будущем.
• Разделение стилей с помощью условных операторов используется для поддержки браузеров Internet Explorer.

Рассмотрим возникающие проблемы кроссбраузерности на небольшом примере.

Создадим html-документ и посмотрим отображение элементов и стилей в браузерах: Chrome, Firefox, Edge, Safari, Internet Explorer 9/11. В документе создадим две горизонтальные линии, поле для ввода текста, кнопку и ссылку.

<hr>
<hr>
<input type="text" placeholder="text here"><br>
<button>click</button><br>
<ahref="#">link </a>

Посмотрим в браузерах:

Как видите, есть отличия в отображениях горизонтальных линий (<hr>), кнопок, и в Internet Explorer 9 нет текста placeholder. Атрибут placeholder у тегов input и textarea появился в стандарте html5, поддержка которого стала доступной в Internet Explorer с 10 версии.

Чтобы в Internet Explorer 9 появился placeholder, придется использовать JavaScript. Можно написать свое решение, либо воспользоваться готовым плагином Placeholders.js. Для использования данного скрипта нужно подключить к странице jQuery и сам плагин:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script>
<script src="placeholders.min.js"></script>

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

Добавим всем элементам отступы, цвет красный (color: red) и посмотрим, что изменилось:

В Firefox горизонтальные линии окрасились в красный цвет, а в Chrome, Edge и Safari placeholder остался черным. Добавим цвет placeholder в оставшихся браузерах, увеличим высоту горизонтальной линии и зальем ее красным цветом:

input[type="text"]::placeholder {
    color: red;
}            

Все горизонтальные линии стали красными, но в Firefox толщина отличается от других. Связано это с тем, что в браузере Firefox стиль color: red окрашивает рамку вокруг элемента, в то время как в остальных браузерах этот стиль не действует на рамку, и она остается прозрачной. Уберем рамку и свойство color: red. Для исправления цвета placeholder’а у текстового поля в Edge необходимо воспользоваться префиксами: -ms-input-placeholder и -ms-input-placeholder:

hr {
    background-color: red;
    margin: 20px 0;
    height: 5px;
    border: none;
}

input[type="text"]:-ms-input-placeholder {
    color: red;
}

input[type="text"]::-ms-input-placeholder {
    color: red;
}        

Добавим остальные стили:

Внешний вид отличается только у браузеров Internet Explorer.

Начнем с 11-ой версии. Мы сделали ссылку в виде черной кнопки и текст расположили по центру. Для этого использовали свойство display: flex, но специально добавили свойство min-height: 40px. Поддержка flex у Internet Explorer с 10-ой версии, но с некоторыми ошибками, одну из которых мы продемонстрировали. Если у элемента задана минимальная высота, то в IE 11 не работает вертикальное выравнивание. Исправим это с помощью css-хака, добавим свойства, которые будут работать только в IE 11:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    a {
        display: table-cell;
        min-height: 40px;
        vertical-align: middle;
        text-align: center;
        margin: 10px auto;
        margin-left: 100px;
    }
}        

Получаем правильное отображение:

Как писали выше, поддержка flex в Internet Explorer стала доступной только с 10-ой версии, из-за этого ссылка в 9-ой версии отображается как строковый элемент display: inline.

Исправим это с помощью добавления условного комментария в html-документ, в котором подключим новый файл стилей.

<!—[if IE 9]>
    <link rel="stylesheet" href="style-for-ie9.css">
<![endif]—>

И пропишем в новом файле стили для ссылки:

a {
    display: table-cell;
    height: 42px;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;
}        

Помимо неправильного отображения ссылки, у кнопки нет фона градиента. Это также связано с тем, что поддержка линейных градиентов появилась в Internet Explorer c 10-ой версии. Создадим файл gradient.svg с графикой линейного градиента и в стилях для IE9 зададим фон изображением созданного градиента background: url(gradient.svg).

Получаем следующие стили для IE9:

a {
    display: table-cell;
    height: 42px;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;
}

button {
    background: url(gradient.svg);
}        

В итоге получится такой же внешний вид всех элементов, что и в других браузерах:

Из приведенного примера мы видим, что основные проблемы с кроссбраузерностью возникают при разработке под Internet Explorer. Целесообразно ли поддерживать старые браузеры? Ответ на этот вопрос зависит от посещаемости вашего сайта. Необходимо проанализировать статистику посещения браузерами вашего сайта. Статистика statcounter.com показывает, что в России доля Internet Explorer составляет всего 3%, а статистика liveinternet.ru — 1.5% (на июнь 2019 года).

Для современных сайтов стоит отказаться от поддержки Internet Explorer, т.к. без использования всех современных возможностей CSS придется выполнять практически вторую верстку сайта под браузер с долей 1,5-3%. Но, как говорилось выше, все зависит от пользователей, посещающих ваш сайт.

Проверка кроссбраузерности: наши рекомендации

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

• browsershots.org

  

  

• browserstack.com

  

  

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

Вывод

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

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

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

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

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

Кроссбраузерность – что это такое

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

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

Согласитесь, когда проект работает только под какую-то одну категорию пользователей (например, тех, кто использует тот же Chrome), то это не очень хорошо. Самим пользователям будет не очень удобно работать с таким сайтом, а это порождает большую долю проблем.

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

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

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

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

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

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

1. Google Chrome и производных обозревателях (типа Яндекс.Браузера, Chromium и т. д.);
2. Opera;
3. Mozilla Firefox;
4. Internet Explorer (ныне Microsoft Edge);
5. Safari (браузер, который используется на macOS).

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

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

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

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

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

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

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

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

• Browsershots

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

Для использования вам необходимо перейти на официальный сайт, после чего ввести адрес ресурса в специальное окно. Также здесь можно отметить с помощью галочек те браузеры и версии, которые вам нужны. Еще здесь есть возможность проверить работу сайта с разных операционных систем: Linux, Windows, Mac и BSD.

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

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

Browsershots можно использовать бесплатно, однако в платной версии есть дополнительные функции. Прежде всего это приоритет в сравнении с бесплатными проверками, поддержка кастомного разрешения экрана, JS и Flash (разные сборки), а также цветовая глубина.

• CrossBrowserTesting

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

CrossBrowserTesting – платный инструмент, который можно использовать только после оплаты подписки. Однако вы можете активировать пробный режим, создав себе аккаунт.

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

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

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

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

• Browserling

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

Инструмент поддерживает почти все популярные обозреватели и версии. Также здесь есть поддержка мобильной операционной системы Android. Но данный функционал доступен только после оплаты подписки. Минимальный тарифный план обойдется вам в 19 долларов за месяц использования. Более расширенный – 29 долларов.

Также вы сможете использовать базовый бесплатный тариф, который доступен изначально. Он накладывает ряд ограничений. Например, время тестирования ограничено тремя минутами. Также в бесплатной версии вы не сможете выбрать ничего, кроме Windows 7 и Internet Explorer 11. Для тестирования сайтов под другими платформами придется оплачивать тарифный план.

К сожалению, iOS и macOS пока не завезли. Но вы все равно сможете проверить адаптированность сайта к обозревателю Safari. Только к его Windows-версии.

• MultiBrowser

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

Нужно просто выкупить программу один раз, потом вы сможете пользоваться ей столько, сколько захотите. Стоимость профессиональной версии этого софта – 200 долларов.

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

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

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

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

• Browser Sandbox

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

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

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

• IE NetRenderer

Сервис позволяет вам сделать аудит ресурса относительно браузера Internet Explorer. Этот онлайн-инструмент работает со всеми версиями этого браузера, поэтому вам достаточно просто перейти на сайт, выбрать нужную и начать тест.

Это бесплатная платформа, которая работает на чистом энтузиазме. Самая последняя доступная версия браузера – 11. В силу того, что сейчас в Windows используется Edge, этот инструмент пользуется не очень высокой популярностью. Но если учитывать, что сейчас еще есть много пользователей, которые работают с устаревшими браузерами от Microsoft, то IE NetRenderer не выглядит таким уж бесполезным.

• Sauce Labs

Огромная платная платформа для тестирования ресурсов на кроссбраузерность. Для использования этого сервиса придется заплатить определенную сумму: минимальный тариф стоит 19 долларов, самый дорогой – 298. Оплата помесячная.

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

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

• Browsera

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

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

Стоимость месячной подписки – 49 долларов. Можно купить еще более расширенную за 99.

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

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

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

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

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

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

Заключение

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

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

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