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


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


Что такое кроссбраузерная вёрстка? Какие есть браузеры и нужен ли пиксель-пёрфект?

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

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

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

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

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

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

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

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

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

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

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

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

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

Подпишитесь на новости браузеров в Твиттере, поставьте себе Chrome Canary, Firefox Nightly, Safari Technology Preview. Включайте флаги, пробуйте, будьте в курсе и главное — хватит гоняться за пикселями, займитесь хорошими интерфейсами. Сайты не должны выглядеть одинаково во всех браузерах.


Видеоверсия


Вопросы можно задавать здесь.

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

Кроссбраузерная совместимость важна. Очень важно. Мы установили этот факт в нашем предыдущем посте о необходимости кроссбраузерного веб-сайта. Итак, следующий шаг - как сделать сайты совместимыми с кроссбраузерностью? Как мы можем убедиться, что наш веб-сайт обеспечивает плавное и беспроблемное взаимодействие с пользователем во всех браузерах, к которым может иметь доступ ваша целевая аудитория, будь то Firefox, Chrome или даже Internet Explorer.

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

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

Итак, приступим к делу.

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

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

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

Итак, теперь вам нужно протестировать его для разных браузеров и, как я уже сказал, для недооцененных и известных тоже 😉

Пора вам найти некоторые из серьезных ошибок. Итак, давайте их решим.

не работает в разных браузерах?

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

Найдите проблемы кроссбраузерной совместимости с мобильным браузером Opera Mini:


Если вы используете такие элементы, как

  • CSS3 3D-преобразования
  • 2D-преобразования
  • Фоновое изображение
  • Особенности формы HTML5
  • Семантические элементы
  • Псевдокласс CSS, отображаемый заполнителем
  • API веб-аутентификации
  • Мета-тег цвета темы

и т. Д., То ваш веб-сайт не будет работать в браузерах Opera Mini.

Найдите проблемы кроссбраузерной совместимости с Firefox Браузер:

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

  • Файловая система и FileWriter API
  • Веб-база данных SQL
  • XHTML + SMIL анимация
  • Шрифты EOT

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

Найдите проблемы кроссбраузерной совместимости с Safari

Shared Web Workers, CSS overflow-anchor, Web Authentication API, если они используются, вообще не будут работать в браузерах Safari. Однако сафари частично поддерживает некоторые функции, такие как функции форм HTML5 и маски CSS. Таким образом, эти функции, если они используются, также могут привести к тому, что ваш сайт не будет работать должным образом в браузерах Safari.

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


Итак, как вы можете видеть, API веб-аутентификации поддерживается только в последних версиях браузеров Edge, Firefox и Chrome, поэтому он не будет работать в других версиях, показывая проблемы несовместимости между браузерами.Точно так же вы можете проверить другие веб-технологии и функции.

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

Проверьте Doctype

Прежде всего вам нужно убедиться, что вы добавили DOCTYPE в свой HTML-файл.

Если нет, сделайте это немедленно.

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

Итак, если вы хотите, чтобы IE6 и выше имитировали поведение браузера, такого как Chrome и Firefox, вы можете добавить strict doctype .

"http://www.w3.org/TR/html4/strict.dtd">

Если вы этого не сделаете, браузер будет работать в режиме Quirks и будет имитировать поведение более старых версий.

Вы применили сброс CSS?

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

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

И это имеет огромное значение для Internet Explorer!

Очень известный сброс CSS Эрика Мейера может помочь вам решить эту проблему несовместимости браузера.Или вы можете использовать стандартные сбросы CSS, такие как normalize.css.

Добавить сброс CSS довольно просто, все, что вам нужно сделать, это загрузить файл CSS и включить его в свой заголовок, например:

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

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

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

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

Или вы тоже можете попробовать.

Используйте кроссбраузерные библиотеки и фреймворки

Предпочитайте использовать кроссбраузерные библиотеки javascript, такие как jQuery, AngularJS, ReactJS, MooTools, и некоторые фреймворки CSS, такие как Bootstrap, Foundation, 960 grid и т. Д. на них, что они не будут вводить какие-то глупые ошибки, которых можно очень легко избежать.

Все готово? Давайте подтвердим!

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

Вы можете использовать валидатор w3 для проверки HTML вашего сайта.

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

Точно так же вы можете проверить и для CSS.Попробуйте использовать валидатор Jigsaw от W3. Вы снова увидите результаты вроде:

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

Не пропустите тестирование кроссбраузерной совместимости

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

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

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

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

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

Удачного тестирования!

Автор: Дикша Агарвал

Дикша Агарвал занимается развитием продуктов в LambdaTest, а также является страстным блоггером и пропагандистом продукта.

.

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

Кроссбраузерность важна. Очень важно. Мы установили этот факт в нашем предыдущем посте о необходимости кроссбраузерного веб-сайта. Итак, следующий шаг - как сделать веб-сайты кроссбраузерными? Как мы можем гарантировать, что наш веб-сайт обеспечивает беспроблемный и беспроблемный пользовательский интерфейс во всех браузерах, к которым может иметь доступ ваша целевая аудитория, будь то Firefox, Chrome или даже Internet Explorer?

При разработке веб-сайта обычно используется комбинация JavaScript, CSS и HTML, причем последние версии CSS3 и HTML5.

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

Итак, приступим.

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

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

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

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

Пора вам найти некоторые из серьезных ошибок. Итак, давайте их решим.

Не работает в разных браузерах?

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

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

Если вы используете такие элементы, как:

  • CSS3 3D-преобразования.
  • 2D преобразований.
  • Фоновое изображение.
  • функций формы HTML5.
  • Семантические элементы.
  • Псевдокласс CSS, отображаемый заполнителем.
  • API веб-аутентификации.
  • Мета-тег цвета темы.

, то ваш веб-сайт не будет работать в браузерах Opera Mini.

Найдите проблемы совместимости с браузером с помощью браузера Firefox:

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

  • Файловая система и FileWriter API.
  • База данных веб-SQL.
  • XHTML + SMIL анимация.
  • шрифтов EOT.

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

Найдите проблемы кроссбраузерной совместимости с Safari

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

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

Итак, как вы можете видеть, API веб-аутентификации просто поддерживается в последних версиях браузеров Edge, Firefox и Chrome, поэтому он не будет работать в других версиях, что свидетельствует о проблемах несовместимости между браузерами.Точно так же вы можете проверить другие веб-технологии и функции.

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

Проверьте Doctype

Первое, что вам нужно убедиться, это добавить ли вы DOCTYPE в свой HTML-файл.

Если нет, сделайте это немедленно.

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

Итак, если вы хотите, чтобы IE6 и выше имитировали поведение браузера, такого как chrome и firefox, вы можете добавить strict doctype .

Если вы этого не сделаете, браузер будет работать в режиме Quirks и будет имитировать поведение более старых версий.

Вы применили сброс CSS?

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

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

И это очень ценно для Internet Explorer!

Очень известный сброс CSS Эрика Мейера может быть использован, чтобы помочь вам решить эту проблему несовместимости браузера. Или вы можете использовать стандартные сбросы CSS, такие как normalize.css.

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

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

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

Основной условный комментарий будет выглядеть примерно так:

      

Или вы тоже можете попробовать.


         

Использование кроссбраузерных библиотек и фреймворков

Предпочитаете использовать кросс-браузерные библиотеки JavaScript, такие как jQuery, React.js, MooTools и некоторые фреймворки CSS, такие как Bootstrap, Foundation, 960 grid и т. Д.? Причина использования этих кроссбраузерно совместимых библиотек и фреймворков заключается в том, что вы можете положиться на них, чтобы знать, что они не внесут каких-то глупых ошибок, которых можно очень легко избежать.

Все установлено? Давайте подтвердим!

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

Вы можете использовать валидатор w3 для проверки HTML-кода вашего сайта.

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

Точно так же вы можете проверить и для CSS.Попробуйте использовать валидатор Jigsaw от W3. Вы снова увидите результаты вроде:

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

.

10 советов по созданию кроссбраузерных веб-сайтов

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

На практике, конечно, все не так просто. Разные браузеры отображают HTML и CSS несколько по-разному, в то время как некоторые браузеры (не будем называть имена) сильно отклоняются от стандартов.

Лучше всего строить свои веб-страницы так, чтобы они выглядели одинаково во многих браузерах.Это часто называют кроссбраузерным (или мультибраузерным) кодированием.

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

1. Будьте проще

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

Не используйте слишком много вложенных элементов в разметке и используйте правильный элемент для работы. Используйте элементы ul и li для создания меню; не используйте стол или серию из элементов p .

Поместите все визуальное форматирование в свой CSS. Ваш HTML должен быть для содержания, а не для стиля.

2. Подтвердите свой код

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

W3C HTML Validator и CSS Validator - хорошие места для начала. Вы также можете использовать плагины браузера, такие как надстройка Html Validator Firefox, для автоматической проверки страниц во время их просмотра в браузере.

3. Избегайте необычных режимов браузера

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

Как правило, браузер переключается в режим причуд, если ваша страница не включает DOCTYPE (объявление типа документа), поэтому, чтобы избежать режима причуд, убедитесь, что каждая страница вашего сайта включает действительный DOCTYPE. Подробнее в этой статье Википедии о режиме Quirks.

4. Используйте правила сброса CSS

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

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

5. Разработка в Firefox

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

Лично я бы порекомендовал тестировать в Firefox при создании своего сайта, а затем, когда вы будете довольны этим, протестировать сайт в других браузерах, особенно в Internet Explorer, чтобы исправить любые проблемы совместимости.Firefox очень удобен для разработчиков (благодаря большому количеству надстроек) и достаточно соответствует стандартам. Если ваш сайт хорошо выглядит в Firefox, он, вероятно, будет выглядеть примерно так же в Opera и Safari.

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

6. Протестируйте в максимально возможном количестве браузеров

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

  • Internet Explorer 6, 7 и 8
  • Firefox 3
  • Safari 3
  • Опера 9

Тестирование всех трех версий Internet Explorer может быть сложной задачей, поскольку теоретически только одна версия IE может быть установлена ​​на одной копии Windows.Есть несколько способов решить эту проблему:

  • Приобрести 3 ПК для тестирования. Затем вы можете установить IE6 на один компьютер, IE7 на другой и IE8 на третий. Очевидно, что пространство или деньги могут сделать это непрактичным.
  • Взломайте IE6, 7 и 8 для работы на одной копии Windows. Существуют различные программы, которые могут помочь вам установить несколько версий IE на одну копию Windows. Например, посмотрите Multiple IE от TredoSoft и IE Collection от Utilu. Однако это может сделать вашу установку Windows нестабильной, а различные версии IE могут вести себя странным образом, поэтому этот подход не для слабонервных.
  • Воспользуйтесь виртуализацией. Хороший подход - использовать программное обеспечение виртуализации, такое как VMware или VirtualBox, для запуска трех отдельных копий Windows на одном ПК или Mac. Затем вы можете установить другую версию IE на каждую копию Windows. Это приводит к стабильным, независимым версиям IE. К недостаткам можно отнести стоимость (требуется 3 лицензии Windows) и производительность (вам понадобится мощный компьютер для работы с тремя версиями Windows плюс ваша операционная система).
    Один из способов обойти эти недостатки - использовать функцию моментальных снимков программного обеспечения, такого как VMware.Установите XP с IE6 и сделайте снимок; обновитесь до IE7, сделайте снимок; обновитесь до IE8, сделайте снимок. Теперь вы можете переключаться между IE, возвращаясь к своим 3 снимкам, и все это при использовании одной лицензии Windows.
  • Воспользуйтесь услугой онлайн-тестирования. Сайты , такие как Browsershots и Browsercam, позволяют делать снимки экрана вашего сайта в самых разных браузерах и операционных системах. Затем снимки экрана отображаются на веб-странице для загрузки или могут быть отправлены вам по электронной почте. Иногда вам приходится платить за использование этих сервисов, и создание снимков экрана может занять некоторое время, но это позволяет вам тестировать практически в любом браузере под открытым небом без необходимости запускать его локально.

7. Исправьте проблемы IE с помощью условных комментариев

Иногда, как бы вы ни старались, невозможно заставить ваш красивый сайт работать в Internet Explorer, не прибегая к серьезным хитростям CSS и / или JavaScript. Однако есть альтернатива. Включив разметку только для IE с условными комментариями, вы можете использовать дополнительный HTML, CSS или JavaScript только для IE, что позволит вам обойти любые проблемы. Намного чище, чем использование хаков.

8.Заставить IE6 работать с прозрачными PNG

Прозрачные изображения PNG - замечательная вещь - они позволяют иметь до 256 уровней прозрачности в изображении, а это значит, что вы можете делать изящные трюки, такие как полупрозрачность и сглаживание границ на любом типе фона. Однако Internet Explorer 6 по умолчанию неправильно отображает прозрачные PNG, а вместо этого отображает уродливые прямоугольники там, где должна быть прозрачность.

Хорошая новость заключается в том, что после небольшой настройки вы можете добиться, чтобы прозрачные PNG-файлы отлично работали в IE6, без необходимости вносить серьезные изменения в разметку или CSS.Хорошее решение - IE PNG Fix от Ангуса Тернбулла.

9. Обеспечьте резервные копии

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

  • Изображений: Убедитесь, что каждый тег img содержит атрибут alt , описывающий изображение.
  • Flash-ролики: Не используйте Flash для важных вещей, таких как навигация по сайту, или, если вы используете, предоставьте альтернативу, отличную от Flash.
  • JavaScript: Опять же, старайтесь избегать использования JavaScript для основных функций. Можно использовать его, чтобы упростить или ускорить работу. Используйте элемент noscript , чтобы предоставить альтернативу без JS (или, по крайней мере, для отображения сообщения с просьбой включить JavaScript).

10. Код вручную

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

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

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

(Windows) или Coda (Mac).

Завершение

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

.

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

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

Предварительные требования: Знакомство с основными языками HTML, CSS и JavaScript.
Цель: Для понимания основных концепций кроссбраузерного тестирования.

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

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

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

Помните, что вы не являетесь вашими пользователями - просто потому, что ваш сайт работает на Macbook Pro или high-end 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 для обнаружения ситуаций, в которых проблемная функция не работает, и запускать другой код в тех случаях, которые действительно работают.

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

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

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

Сводка

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

В этом модуле

.

Смотрите также

Поделиться в соц. сетях

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

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