Кроссбраузерная верстка что это: Кроссбраузерная вёрстка / Блог компании HTML Academy / Хабр

Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

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

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

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

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

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

Netscape Navigator выбыл из гонки, отдав монополию Internet Explorer. Спустя практически одновременно начали набирать обороты проекты Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) и Safari (WebKit), разделив рынок между собой и заставив сообщество задуматься о вопросе кроссбраузерности своих сайтов.

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

Разработать кроссбраузерную верстку — отдельный вопрос при работе над крупным проектом. При выполнении этого условия чаще всего задействуются CSS и HTML правила, иногда дополняемые небольшим JavaScript (jQuery) кодом.

Выполняется анализ целевых платформ, с которых наиболее вероятно и часто приходит клиент на сайт, внимание концентрируется на наиболее популярных браузерах и разрешениях экранов. Для этих целей можно использовать Яндекс Метрику, Google Analytics и другие сервисы сбора данных о посетителях.

На сегодняшний день производители браузеров начали активно заниматься своевременной поддержкой стандартов World Wibe Web, HTML 5 и CSS 3, что несомненно сказалось на качестве отображения страниц. Однако, в некоторых свойствах каскадных таблиц и трактовке кода, даже сейчас на разных движках встречаются существенные расхождения, которые необходимо исправлять вручную.

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

Использование CSS hacks

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

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

Остались, как ещё один рудимент браузерных войн, в особенности браузеров WebKit. Более “чистый” и честный способ, чем использования хаков.

Каждый браузер имеет собственные свойства с вендорным префиксом, так, например элемент border-radius в Mozilla Firefox представлен свойством -moz-border-radius, а в Chrome и Safari -webkit-border-radius. Такие свойства меняют поведение элемента только в определенном браузере, и игнорируются другими платформами.

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

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

Проверить поддержку правил можно на бесплатном сервисе caniuse.com. В наглядном представлении в виде таблиц можно уточнить, начиная с какой версии тот или иной тег введён в поддержку каждым движком, и можно ли его применять

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

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

Так же есть специальные сервисы проверки сайта на кроссбраузерность.

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

• crossbrowsertesting.com
• browserstack.com
  Преимущество: Мощные средства для глубокого анализа веб-ресурса в режиме онлайн.
  Недостаток: Платное использования большинства функций.

Как влияет на посещаемость сайта

Существует негласная статистика, говорящая о том, что Яндекс Браузер и Chrome пользуются популярностью молодёжи, а Opera и Mozilla отдают предпочтения уже работающие люди. Представьте, что вы создали сайт по скейтбордингу для молодежи, а его оформление с треском проваливается в Chrome. Шрифты не загружаются, отступы появляются совсем не там, где они должны быть — настоящая катастрофа маркетинга, потеря целевой аудитории.

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

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

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

Так же в блоге у нас есть статья про адаптивную верстку. 

табличная, кроссбраузерная, адаптивная. Основные принципы

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

Верстка с помощью css – что это и зачем оно нужно?

Ну сначала все же немного разъяснений для новичков. Css – это замечательный язык, который полностью состоит из свойств и их значений. Эти самые свойства позволяют определенным образом влиять на внешний вид элементов. Например, свойство color определяет цвет текста, background – фон элемента, font – его шрифт и т.д и т.п.

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

Так вот, css придуман для того, чтобы создавать внешний вид. И со своей задачей он справляется замечательно. HTML позволяет создавать элементы, формировать разметка, а css – оформлять все это дело. Эти два языка связаны неразлучно, так что если отнять один – другой просто станет неполноценным.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Основные вещи, которые можно сделать в css

Табличная верстка с помощью css. На самом деле от таблиц как от способа верстать во многом отказались из-за громоздкого html-кода, но не так давно в css появились возможности, которые позволили любые элементы превратить в табличные. Вот они: Display: table, display: table-row, display: table-cell.

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

Кроссбраузерная верстка. Как css может в этом помочь

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

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

*{ padding: 0; margin: 0; } ul{ list-style: none; }

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Адаптивная верстка в css

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

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

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

@media and only screen (max-width: 600px){ img{ float: none; } }

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

Основа адаптивности закладывается с помощью свойства max-width. Например, max-width: 1320px означает, что максимум блок будет тянуться на 1320 пикселей, но если размер окна будет меньше, то он тоже будет уменьшаться. Никакого горизонтального скролла!

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

Какой редактор использовать для работы с css?

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

Скриншот с кодом, который вы только что могли наблюдать, сделан из программы Notepad++, где и был открыт css-файл. Мне кажется, этот редактор просто отлично подходит для работы с этим языком – очень хорошо подсвечиваются различные составные части кода, а если разработчик еще и придерживается определенных правил оформления, то код читается просто замечательно.

Узнайте css лучше

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

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

Навигация по статье:

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

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

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

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

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

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

Для того чтобы Вам сделали вёрстку, которая будет нормально отображаться в IE начиная с версии 7 и выше, обычно указывают так «поддержка IE7+»

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

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

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

1. Постарайтесь не использовать теги HTML5 так как IE старых версий их не понимает и отображает непонятно что, а если используете, то не забудьте подключить специальный плагин, который научит IE понимать теги HTML5.
   Вот ссылка на скачивание этого плагина: плагин HTML5 для Internet Explorer

2. Избегайте использования псевдоклассов. Большую часть псевдоклассов CSS3 IE не поймёт и искусственно научить его понимать их (как в случае с тегами HTML5) у Вас не получится.
   Особенно это касается псевдоклассов :first-child, :last-child и им подобных.

3. Не используйте псевдоэлементы CSS3 (:before, :after). Причина та же что и в случае с псевдоклассами. Мало того, тут к «любимому» браузеру веб-разработчиков IE присоединяется браузер Safari, который используется на устройствах Apple, и у которого тоже проблемы с корректным отображением псевдоэлементов.
4. Тестируйте вёрстку не отходя от кассы. Делайте кроссбраузерное тестирование не в конце вёрстки, а на каждом этапе. Например, сверстали шапку сайта – сразу проверили во всех браузерах, потом блок контента и так далее. Иначе в конце вёрстки Вас может ждать неприятный сюрприз, который Вам скорее всего преподнесёт всеми любимый Internet Explorer, а может и не только он.
5. Табличная вёрстка в помощь. Если вёрстка не сложная и адаптивность не нужна, то есть смысл сделать её табличной. Так как это значительно упростит процесс создания кроссбраузерной вёрстки.
   Более подробно о блочной и табличной вёрстках написано здесь.
6. Используйте css хаки для разных браузеров. Будьте готовы к тому, что разные браузеры по разному отображают шрифты и рассчитывают размеры блоков. Особенно это касается браузера Mozilla Firefox, который за счёт иного способа отображения шрифтов делает блоки на несколько пикселей шире чем другие браузеры.
   Для решения данной проблемы используются CSS хаки, которые дают возможность прописать стили для каждого браузера по отдельности.

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

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

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

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

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

Простые, но эффективные советы по кросс-браузерной вёрстке, которые должен знать каждый

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

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

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

Если вы разрабатываете веб-сайты в течение долгого времени, вы согласитесь со мной, что Internet Explorer 8 и более ранние версии этого браузера — это один из самых больших кошмаров веб-дизайнеров и разработчиков. Несмотря на это, есть ещё люди, использующие эти версии IE для просмотра веб-сайтов.

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

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

Давайте смиримся с тем фактом, что веб-браузеры по умолчанию по-разному стилизуют элементы HTML. Некоторые браузеры имеют различный подход к значениям таких стилей как margin и padding.

Чтобы это исправить, есть хороший приём — добавить код CSS reset в начало вашего файла стилей. Это сбросит стили всех элементов.

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

У Эрика Майера есть хороший набор правил CSS, чтобы сделать это. Также вы можете посмотреть на Normalize.css от Николаса Галлахера, современную альтернативу для сброса стилей в HTML5.

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

Хорошей практикой перед выкладыванием сайта в сеть является проверка HTML и CSS при помощи валидаторов, так как это поможет вам исправить некоторые мелкие ошибки, которые могут принести проблемы в будущем.

Вы можете использовать валидаторы HTML и CSS от W3C. Эти валидаторы одобрены W3C, но, если вы хотите, то можете использовать любые другие, которые вам нравятся.

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

Рассмотрим пример.

Следующий код будет работать во всех версиях IE:

<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" /!>
<[endif]-->

А следующий код предназначен для конкретной версии IE:

<!--[if IE6]>
<link href="ie.css" rel="stylesheet" type="text/css" /!>
<[endif]-->

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

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

Рассмотрим список вендорных префиксов:

• Safari и Chrome (-webkit-)
• Firefox (-moz-)
• Opera (-o-)
• Internet Explorer (-ms-)

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

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

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

Но проблема тут не в этом. Чаще всего мы располагаем плавающие элементы слева и справа и помещаем их в контейнер.

Посмотрите на рисунки ниже:

Рис. 1. Вот, чего мы хотим добиться.

Рис. 2. Однако вот, что у нас получается.

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

Хотя не существует каких-либо строгих правил использования определённого измерения для размера шрифта, я бы посоветовал использовать единицы em и проценты, поскольку они основаны на настройке размера шрифта в браузере пользователя.

Большинство людей используют пиксели (px) или пункты (pt), которые основаны на разрешении экрана. Они всегда фиксированы.

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

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

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

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

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

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

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

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

Данная публикация представляет собой перевод статьи «Simple Yet Important Cross-Browser Styling Tips Everyone Should Know» , подготовленной дружной командой проекта Интернет-технологии.ру

Кроссбраузерная верстка в современных условиях

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

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

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

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

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

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

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

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

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

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

И к третьей проблеме можно отнести в некотором роде халатность самих разработчиков. Что я подразумеваю под этим? Всего лишь несоблюдение стандартизированных правил, которые были установлены специальной организацией W3C (официальный сайт расположен по ссылке [urlspan] https://www.w3.org[/urlspan]).

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

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

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

1. Запомните, верстать юзабилити сайта нужно сразу для всех указанных заказчиком браузеров. Невозможно написать ресурс только, например, для Chrome и не столкнуться впоследствии с проблемами в других браузерах. Вы потратите больше времени на исправление кода. Чтоб этого избежать поэтапно проверяйте проделанную работу сразу во всех браузерах. Для этого существуют специальные программы-помощники:
   — для IE был разработан Explorer Tester, в котором можно проверять сразу все версии,
   — для Opera стоит использовать официальный сайт http://www.opera.com/dragonfly/,
   — для названного выше Google Chrome приложение Firebug (http://getfirebug.com/releases/lite/chrome/),
   — для Mozilla Firefox — [urlspan]https://addons.mozilla.org/ru/firefox/addon/firebug/[/urlspan].

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

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

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

2. Со второй выше описанной проблемой поможет справится ручной сброс параметров css или CSS Reset. Если вы хотите подробнее ознакомиться с названным подходом – что я вам настоятельно рекомендую, – то прочтите один из предыдущих уроков, касающийся очистки css-стилей. Благодаря данному подходу базовые значения в ППО для просмотра веб-страниц будут обнуляться.
3. Чтобы справиться с приведением программного кода к утвержденным стандартам, я советую вам перейти по ссылке на сайт W3C и внимательно ознакомиться с документацией. Данная организация также создала свой собственный валидатор для проверки приложений в онлайн-режиме тремя способами: по ссылке на ресурс, по загруженному файлу и непосредственно сам код, внесенный в диалоговое окно. Кстати, ранее этой теме я посвятил целую статью. Так что можете детальнее познакомиться с программами-валидаторами и узнать, для чего они нужны. Конечно фанатично увлекаться подгонкой кода под стандарты не надо, стоит обратить внимание только на важные правила.
4. Не поленитесь установить наиболее популярные браузеры последних версий у себя на компьютере для оптимизации своей работы.

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

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

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

С уважением, Роман Чуешов

Прочитано: 155 раз

Введение в кроссбраузерное тестирование — Изучение веб-разработки

В этой статье модуль начинается с обзора темы (кросс) браузерного тестирования, ответов на такие вопросы, как «что такое кроссбраузерное тестирование?», «С какими наиболее распространенными типами проблем вы можете столкнуться?», и «каковы основные подходы к тестированию, выявлению и устранению проблем?»

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

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

• Различные браузеры, кроме одного или двух, которые вы регулярно используете на своих устройствах, в том числе немного более старые браузеры, которые некоторые люди все еще могут использовать, которые не поддерживают все последние, самые блестящие функции CSS и JavaScript.
• Различные устройства с различными возможностями, от новейших лучших планшетов и смартфонов до смарт-телевизоров, вплоть до дешевых планшетов и даже более старых функциональных телефонов, на которых могут работать браузеры с ограниченными возможностями.
• Люди с ограниченными возможностями, которые используют Интернет с помощью вспомогательных технологий, таких как программы чтения с экрана, или не используют мышь (некоторые люди используют только клавиатуру).

Помните, что вы не являетесь вашими пользователями — просто потому, что ваш сайт работает на Macbook Pro или Galaxy Nexus высокого класса, не означает, что он будет работать для всех ваших пользователей — предстоит еще много тестирования!

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

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

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

Во-вторых, когда мы говорим «через приемлемое количество веб-браузеров», мы не имеем в виду 100% браузеров в мире — это практически невозможно. Вы можете сделать несколько осознанных звонков относительно того, какие браузеры и устройства будут использовать ваши пользователи (как мы обсудим во второй статье этой серии — см. Нужно проверить их все?), Но вы не можете гарантировать все.Как веб-разработчик, вам необходимо согласовать с владельцем сайта ряд браузеров и устройств, над которыми обязательно должен работать код, но помимо этого, вам необходимо разработать защитный код, чтобы дать другим браузерам наилучшие шансы на то, чтобы используйте свой контент. Это одна из самых серьезных проблем веб-разработки.

Примечание : Мы также рассмотрим защитное кодирование позже в этом модуле.

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

Существует много разных причин, по которым возникают проблемы с кроссбраузерностью, и обратите внимание, что здесь мы говорим о проблемах, когда вещи ведут себя по-разному в разных браузерах / устройствах / предпочтениях просмотра.Прежде чем вы даже перейдете к кроссбраузерным проблемам, вы должны уже исправить ошибки в своем коде (см. «Отладка HTML», «Отладка CSS» и «Что пошло не так?» Устранение неполадок JavaScript из предыдущих тем, чтобы при необходимости освежить память).

Кросс-браузерные проблемы обычно возникают по следующим причинам:

• иногда браузеры содержат ошибки или по-разному реализуют функции. Эта ситуация намного менее плохая, чем раньше; назад, когда IE4 и Netscape 4 соревновались за доминирующий браузер в 1990-х годах, компании-разработчики браузеров сознательно реализовывали разные вещи по-разному, чтобы получить конкурентное преимущество, что сделало жизнь разработчиков адом.В наши дни браузеры намного лучше следуют стандартам, но иногда все еще появляются различия и ошибки.
• некоторые браузеры могут иметь разные уровни поддержки технологических функций, чем другие. Это неизбежно, когда вы имеете дело с передовыми функциями, которые браузеры только реализуют, или если вам нужно поддерживать действительно старые браузеры, которые больше не разрабатываются, которые, возможно, были заморожены (т.е. над ними больше не выполняется новая работа. ) задолго до того, как была изобретена новая функция.Например, если вы хотите использовать на своем сайте передовые функции JavaScript, они могут не работать в старых браузерах. Если вам нужно поддерживать старые браузеры, возможно, вам придется не использовать их или преобразовать код в старомодный синтаксис, используя при необходимости какой-то кросс-компилятор.
• Некоторые устройства могут иметь ограничения, из-за которых веб-сайт работает медленно или плохо отображается. Например, если сайт был разработан так, чтобы красиво выглядеть на настольном ПК, он, вероятно, будет выглядеть крошечным и его будет трудно читать на мобильном устройстве.Если ваш сайт содержит множество больших анимаций, это может быть нормально для планшета с высокими характеристиками, но может быть вялым или рывчатым на устройстве низкого уровня.

и более причин помимо этого.

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

Рабочие процессы для кроссбраузерного тестирования

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

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

Рабочий процесс тестирования и исправления ошибок в проекте можно разбить примерно на следующие четыре этапа (это очень грубо — разные люди могут действовать по-разному):

Начальное планирование> Разработка> Тестирование / обнаружение> Исправления / итерация

Шаги 2–4 будут повторяться столько раз, сколько необходимо для выполнения всей реализации.Мы рассмотрим различные части процесса тестирования более подробно в следующих статьях, а пока давайте просто резюмируем, что может происходить на каждом этапе.

Первоначальное планирование

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

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

Так, например, вы можете создать сайт электронной коммерции, который обслуживает клиентов в Северной Америке. Сайт должен полностью работать в последних нескольких версиях наиболее популярных браузеров для настольных и мобильных устройств (iOS, Android, Windows phone) — в том числе Chrome (и Opera, поскольку он основан на том же механизме рендеринга, что и Chrome), Firefox, IE. / Edge и Safari.Он также должен обеспечивать приемлемое взаимодействие с IE 8 и 9 и быть доступным с соблюдением требований WCAG AA.

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

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

Примечание : Вы можете найти информацию о поддержке технологий браузером, просмотрев различные функции на MDN — сайте, на котором вы находитесь! Вам также следует проконсультироваться с caniuse.com для получения дополнительных полезных сведений.

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

Развитие

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

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

• Сделайте так, чтобы вся функциональность работала как можно точнее во всех целевых браузерах. Это может включать в себя написание разных путей кода, которые воспроизводят функциональность по-разному, нацеленные на разные браузеры, или использование Polyfill для имитации любой отсутствующей поддержки с использованием JavaScript или других технологий, или использование библиотеки, которая позволяет вам написать один бит кода, а затем выполняет разные вещи в фоновом режиме в зависимости от того, что поддерживает браузер.
• Примите тот факт, что некоторые вещи не будут работать одинаково во всех браузерах, и предоставьте различные (приемлемые) решения в браузерах, которые не поддерживают полную функциональность. Иногда это неизбежно из-за ограничений устройства — широкоформатный кинотеатр не даст такого же визуального восприятия, как 4-дюймовый мобильный экран, независимо от того, как вы программируете свой сайт.
• Примите тот факт, что ваш сайт просто не будет работать в некоторых старых браузерах, и двигайтесь дальше. Это нормально, если ваш клиент / пользовательская база согласны с этим.

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

Тестирование / открытие

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

1. Протестируйте его в паре стабильных браузеров в вашей системе, таких как Firefox, Safari, Chrome или IE / Edge.
2. Проведите небольшое тестирование доступности, например, попробуйте использовать свой сайт только с клавиатурой или используйте свой сайт через программу чтения с экрана, чтобы проверить, доступен ли он для навигации.
3. Протестируйте на мобильной платформе, например Android или iOS.

На этом этапе исправьте все проблемы, которые вы обнаружите с новым кодом.

Затем вам следует попробовать расширить свой список тестовых браузеров до полного списка браузеров целевой аудитории и начать концентрироваться на устранении проблем с кроссбраузерностью (см. Следующую статью для получения дополнительной информации об определении ваших целевых браузеров).Например:

• Попробуйте протестировать последнее изменение во всех современных браузерах для настольных ПК, в том числе в Firefox, Chrome, Opera, IE, Edge и Safari для ПК (в идеале — Mac, Windows и Linux).
• Протестируйте его в обычных браузерах телефонов и планшетов (например, iOS Safari на iPhone / iPad, Chrome и Firefox на iPhone / iPad / Android),
• Также проведите тесты в любых других браузерах, которые вы включили в свой целевой список.

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

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

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

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

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

Вы также можете пойти дальше, если хотите.Доступны коммерческие инструменты, такие как Sauce Labs, Browser Stack, Endtest, LambdaTest, TestingBot и CrossBrowserTesting, которые делают это за вас, не беспокоясь о настройке, если вы хотите вложить немного денег в свое тестирование. Также можно настроить среду, которая автоматически запускает тесты для вас, а затем позволяет вам регистрировать свои изменения в центральном репозитории кода, только если тесты все еще проходят.

Тестирование предварительных версий браузеров

Часто бывает полезно протестировать предварительные версии браузеров; см. следующие ссылки:

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

Исправления / итерация

Как только вы обнаружили ошибку, вам нужно попытаться ее исправить.

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

Возможно, это не ваша вина — если в браузере есть ошибка, то, надеюсь, поставщик быстро ее исправит. Это могло быть уже исправлено — например, если ошибка присутствует в Firefox версии 49, но ее больше нет в Firefox Nightly (версия 52), то они исправили ее. Если это не исправлено, вы можете сообщить об ошибке (см. Сообщение об ошибках ниже).

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

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

Сообщение об ошибках

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

Сводка

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

В этом модуле

7 инструментов для кроссбраузерного тестирования, которые вам понадобятся в 2019 году

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

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

Во-первых, что такое кроссбраузерное тестирование?

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

• Проверка кода: сообщают ли некоторые браузеры об ошибках кода?
• Производительность: сайт работает медленно или даже вызывает сбои?
• Адаптивный дизайн: постоянно ли адаптируется дизайн?
• Несоответствия пользовательского интерфейса: есть ли еще недостатки дизайна?
• Другое странное поведение: что-то еще просто не работает?

Что произойдет, если я не пройду тест?

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

Возьмем для примера электронную коммерцию. 69,89% проверок прекращаются, и 17% из них связаны с ошибками и сбоями веб-сайта. Если предположить, что бизнес будет накапливать полмиллиона продаж в год, это 59 407 продаж, потерянных из-за ошибок и сбоев, которые можно было предотвратить с помощью кросс-браузерного тестирования.

Поскольку Microsoft объявила, что откажется от собственных движков EdgeHTML и Chakra в пользу широко распространенных движков Blink и V8, это означает, что многие из основных браузеров сегодня предлагают аналогичные уровни совместимости кода. Хотя это шаг назад с точки зрения здоровой конкуренции, это означает, что, если веб-сайт работает в Google Chrome, он, скорее всего, будет работать в Brave, Opera и в будущем Microsoft Edge. В сочетании с тем фактом, что даже Microsoft проинструктировала нас прекратить использование Internet Explorer, кроссбраузерное тестирование стало проще, чем когда-либо прежде: только Safari и Firefox используют свои собственные движки.

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

• Хром: 61,75%
• Safari: 15.12%
• Firefox: 4,92%
• UC: 4,22%
• Opera: 3,15%
• Internet Explorer: 2.8%
• Samsung Интернет: 2,74%
• Microsoft Edge: 2,15%

* По состоянию на ноябрь 2018 г.

Также имейте в виду, что существует несколько версий каждого веб-браузера для разных ОС. Звучит страшно? Не совсем, но — это чертовски скучно тестировать сайты на всех из них!

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

Имея немедленный доступ к более чем 2000 веб-браузеров, работающих на реальных устройствах Android и iOS, хорошо известный BrowserStack позволяет разработчикам и другим заинтересованным сторонам участвовать в кроссбраузерном тестировании, будь то создание снимков экрана, отладка ошибок в реальном времени или собственно взаимодействуйте с браузером изначально и посмотрите, как выглядит макет при изменении размера окна.Нет необходимости идти на компромисс с симуляторами и эмуляторами, BrowserStack предлагает вам полный контроль, поскольку вы будете взаимодействовать с настоящими браузерами на удаленных машинах.

Это не , как настоящая вещь, это — это настоящая вещь.

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

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

CrossBrowserTesting от SmartBear предлагает как ручное, так и автоматическое тестирование с помощью Selenium, более 1500 удаленных браузеров на мобильных и настольных компьютерах и имеет такую ​​же настройку подписки, что и BrowserStack (за исключением их «плана для фрилансеров»). Благодаря полному доступу к расширениям браузера и инструментам разработчика, таким как Chrome Dev Tools и FireBug, возможности взаимодействовать с помощью движений пальцем и многому другому, и, наконец, средствам для отладки внешних ошибок, CrossBrowserTesting не сильно отличается от BrowserStack.

CrossBrowserTesting и BrowserStack также позволяют пользователям сравнивать версии (в реальном времени или снимки экрана), запускать несколько тестов (или делать несколько снимков экрана) одновременно и даже делиться результатами.

All-in-all, подходящая альтернатива BrowserStack, однако я бы выбрал BrowserStack, если для вас важно количество поддерживаемых браузеров (BrowserStack поддерживает еще 500).

Благодаря неограниченному тестированию браузера в реальном времени, неограниченному автоматическому тестированию, неограниченному тестированию отклика, неограниченному тестированию скриншотов и круглосуточной поддержке, у вас не будет ни малейшего беспокойства относительно ограничений при использовании Lambdatest.А с самым дешевым тарифным планом, начинающимся всего с 15 долларов в месяц, Lambdatest предлагает лучшую отдачу от вложенных средств. Фактически, есть даже высокофункциональная опция «пожизненно бесплатно», что делает его одним из самых доступных инструментов кросс-браузерного тестирования, доступных сегодня на рынке, и очень подходящим для тех, кто впервые озабочен кросс-браузерным тестированием.

В качестве дополнительного бонуса все опции включают бесплатные минуты автоматизации; это если вы не выберете их мощный вариант автоматизации!

Все опции также включают:

• 2000+ собственных тестовых браузеров
• Отслеживание проблем с помощью журналов тестирования
• Функциональность локального тестирования
• Автоматическое тестирование скриншотов
• Адаптивное и визуальное сравнительное тестирование
• Доступ к расширению WordPress и Chrome
• Интеграция с Trello, Asana, Jira и Slack

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

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

Кроме того, у них есть расширения для Chrome, Firefox, Opera и Safari!

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

Что отличает инструменты кроссбраузерного тестирования Functionize от конкурентов, так это широкое использование искусственного интеллекта и тот факт, что если вы настроите тесты для в одном браузере , нет необходимости перекодировать тесты для других, что может сэкономить немало денег. время. Все они посвящены автономному тестированию (с использованием технологии Adaptive Event Analytics ™), так что вы можете больше времени уделять анализу результатов.

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

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

Несмотря на функциональность, аналогичную другим инструментам кроссбраузерного тестирования, Sauce Labs стоит от 89 долларов в месяц (для тестирования на реальных устройствах).Однако они существуют довольно давно и заявляют, что у них «самое большое в мире облако для непрерывного тестирования», поэтому, если у вас есть бюджет, стоит попробовать.

Заключение

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

Будь то Functionize и их подход к интерфейсному тестированию, основанный на искусственном интеллекте, Experitest с их конкурентоспособными ценами или BrowserStack с их недорогим вариантом для фрилансеров, один из этих инструментов наверняка удовлетворит потребности ваших команд. Если вы ищете потрясающий универсальный вариант, Lambdatest, по-видимому, предлагает лучшее соотношение цены и качества.

javascript — кроссбраузерная разработка — qaru Переполнение стека

1. Товары
2. Клиенты
3. Случаи использования

1. Переполнение стека Общественные вопросы и ответы
2. Команды Частные вопросы и ответы для вашей команды
3. предприятие Частные вопросы и ответы для вашего предприятия
4. работы Программирование и связанные с ним возможности технической карьеры
5. Талант Нанять технических талантов
6. реклама Обратитесь к разработчикам по всему миру

,

Принципы кроссбраузерного кодирования CSS — Smashing Magazine

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

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

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

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

Понимание модели CSS Box

Это одна из первых вещей, с которой вы должны быть полностью знакомы, если хотите получить кроссбраузерную разметку с очень небольшим количеством приемов и обходных путей . К счастью, блочная модель не является сложной задачей для понимания и обычно работает одинаково во всех браузерах, за исключением обстоятельств, связанных с определенными версиями Internet Explorer (подробнее об этом позже).

Модель блока CSS отвечает за вычисление:

• Сколько места занимает элемент уровня блока
• Перекрываются ли границы и / или поля или сжимаются
• Размеры блока
• В некоторой степени положение бокса относительно другого содержимого на странице

Модель бокса CSS имеет следующие основные правила:

• Элементы уровня блока по существу прямоугольные (как и все элементы на самом деле)
• Размеры элемента блока вычисляются по ширине, высоте, заполнению, границам и полям
• Если высота не указана, элемент блока будет иметь высоту, равную содержанию, которое он содержит, плюс заполнение (если нет поплавков, о чем см. ниже)
• Если нет ширины указано, неплавающий прямоугольник будет расширяться, чтобы соответствовать ширине своего родительского элемента без заполнения (подробнее об этом позже)

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

• Если для поля установлено значение «100%», у него не должно быть полей, отступов или границ, в противном случае он будет переполнять свой родительский
• Вертикально смежные поля могут вызвать некоторые сложные проблемы со сворачиванием, которые могут вызвать проблемы с макетом
• Элементы, расположенные относительно или абсолютно, будут вести себя по-разному, детали которых обширны и выходят за рамки данной статьи
• Вышеупомянутые правила и принципы сформулированы в предположении, что страница, содержащая элементы уровня блока, отображается в стандартном режиме (этот пункт был добавлен позже после просмотра опубликованных комментариев)

Модель коробки, отображаемая с помощью Firebug в Firefox

Понимание разницы между блочным и встроенным

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

На изображении ниже показано различие между блочными и встроенными элементами:

Вот несколько основных правил, отличающих блочные элементы от встроенных:

• Блочные элементы по умолчанию естественным образом расширяются по горизонтали, чтобы заполнить их родительский контейнер, поэтому нет необходимости устанавливать ширину «100%».
• Элементы блока по умолчанию будут начинаться с самого левого края родительского блока, под любыми предыдущими элементами блока (если не используются поплавки или позиционированные элементы; см. ниже)
• Встроенные элементы будут игнорировать настройки ширины и высоты.
• Встроенные элементы перемещаются с текстом и подчиняются типографским свойствам, таким как пробел , размер шрифта и межбуквенный интервал
• Встроенные элементы могут быть выровнены с помощью свойство vertical-align , но блочные элементы не могут.
• Встроенные элементы будут иметь некоторое естественное пространство под ними для размещения текстовые элементы, которые опускаются ниже линии (например, буква «g»).
• Встроенный элемент станет блочным, если он размещен как плавающий

Общие сведения о перемещении и очистке

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

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

Вот некоторые важные вещи, о которых следует помнить при перемещении и очистке элементов:

• Плавающие элементы удаляются из потока других, не плавающих элементов уровня блока; Другими словами, если вы перемещаете блок влево, конечный абзац (уровень блока), который не перемещается, появится за плавающим элементом в стеке, а любой текст внутри абзаца (встроенный уровень) будет обтекать плавающий объект
• Чтобы получить содержимое для обтекания плавающего элемента, оно должно быть либо встроенным, либо плавающим в том же направлении.
• Плавающий элемент без объявленной ширины будет сжиматься до ширины его содержимого, поэтому обычно лучше иметь заданную ширину для плавающего элемента.
• Если блочный элемент содержит плавающие дочерние элементы, он «схлопнется», что потребует исправления.
• «Очищенный» элемент не будет обтекать плавающие элементы над ними в документе
• Элемент, который очищен и перемещен, будет только очищен из элементов, которые идут до, а не после

Сначала используйте Internet Explorer (или не используйте)

Обратите внимание, что команда Smashing Magazine настоятельно не рекомендует разрабатывать веб-сайты в Internet Expl Орер первым.На наш взгляд, сайты должны разрабатываться в «современных» браузерах, сначала со стандартами, а затем настраиваться для версий Internet Explorer с ошибками. Приведенный ниже совет не отражает мнение редакционной группы Smashing. Согласны или не согласны? Прокомментируйте эту статью!

Большая часть того, что я обсуждал до сих пор, касается принципов кодирования и компоновки CSS. Этот принцип больше связан с привычками и предпочтениями большинства дизайнеров. Хотя нам может не понравиться использовать IE6 и IE7 в нашей повседневной работе в Интернете, когда приходит время создавать клиентский проект с нуля, одна из лучших вещей, которые вы можете сделать, — это протестировать свой макет в этих браузерах в начале года разработки.Возможно, вы даже захотите открыть отдельную версию IE6 или IE7 и просто начать разработку в этом браузере.

Конечно, у вас не будет доступа к таким инструментам, как Firebug, но обычно для CSS (особенно на ранних этапах разработки) Firebug вам не понадобится. Намного проще сначала заставить макет работать в IE6 и IE7, а затем исправить его для других браузеров, чем делать это наоборот. Ожидание до конца процесса разработки, чтобы открыть IE6 и / или IE7, вероятно, вызовет некоторые, если не все, из следующих проблем:

• Потребуется несколько взломов, требующих отдельных таблиц стилей для разных версий IE, что делает код раздутый и менее обслуживаемый и делает веб-сайт медленнее
• Макет в некоторых местах, возможно, придется переработать, увеличивая время разработки
• Время тестирования увеличится, иногда экспоненциально, оставляя меньше времени для более важных задач
• Макет в других браузерах будет не будет таким же, как в IE6 и IE7

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

Иногда рассмотрение проблем IE как «досадных ошибок» может создать ненужный негатив и затруднить разработку и дальнейшее обслуживание. Работа с IE — это реальность для дизайнеров и разработчиков, поэтому просто рассматривайте его проблемы, как любую проблему с CSS, и создавайте оттуда.

Понимание наиболее распространенных проблем Internet Explorer

Если вы собираетесь начать разработку с IE или, по крайней мере, проверить макет в IE на ранней стадии, тогда вы должны понимать, что такое Internet Explorer (обычно версии 6 и 7 ) есть проблемы или каковы его ограничения.

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

• IE6 станет проблематичным, если чрезмерное использование поплавков приведет к (как ни парадоксально) исчезновению содержимого или дублированию текста.
• IE6 удвоит маржу для плавающих элементов на сторона, которая совпадает с направлением поплавка; настройка отображения : встроенный часто исправляет это
• В IE6 и IE7, если у элемента нет макета, это может вызвать ряд проблем, в том числе не отображается фон, неправильно сжимаются поля и т. д.
• IE6 делает не поддерживает свойства CSS на основе минимума и максимума, такие как min-height или max-width
• IE6 не поддерживает фиксированное позиционирование фоновых изображений
• IE6 и IE7 не поддерживают множество альтернативных значений для дисплея свойство (e.грамм. inline-table , table-cell , table-row и т. Д.)
• Вы не можете использовать псевдокласс : hover для любого элемента IE6, кроме привязки ( )
• Некоторые версии IE слабо поддерживают определенные селекторы CSS (например, селекторы атрибутов, дочерние селекторы и т. Д.).
• IE версий 6–8 слабо поддерживает CSS3, но есть некоторые обходные пути.

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

Некоторые вещи никогда не будут выглядеть одинаково

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

Формы часто будут выглядеть по-разному

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

Взгляните на изображение ниже, которое отображает элементы на домашней странице Facebook, как показано в 5 различных версиях браузера (скриншоты взяты из Adobe Browserlab):

элементов в разных браузерах отображаются по-разному

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

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

Типографика всегда будет выглядеть по-другому

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

С типографикой мы не только сталкиваемся с проблемой доступности шрифтов на разных машинах, но в некоторых случаях, даже когда шрифт доступен на двух разных машинах, шрифт будет выглядеть по-разному.Windows ClearType, например, доступен в IE7, но не в IE6, в результате чего один и тот же шрифт выглядит по-разному в двух разных версиях IE.

На рисунке ниже показаны снимки экрана из A List Apart в IE6 и IE7. Зернистый текст в IE6 более очевиден в заголовке, чем в основной копии, но весь текст отображает заметную разницу между двумя браузерами (если, конечно, текст не является изображением):

Типографика A List Apart по сравнению с IE6 и IE7

Использовать сброс CSS

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

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

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

Сброс CSS, как показано на панели инструментов разработчика Firefox

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

Используйте справочник CSS SitePoint

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

Таблицы совместимости SitePoint для свойств CSS

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

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

Заключение

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

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

Дополнительная литература

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

.

No related posts.

• Вперед Скрипт загрузки файлов на сервер php jquery: Загрузка файлов через jQuery AJAX FormData
• Назад Php шторм: Скачать PhpStorm: Умная IDE для PHP

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт