14 инструментов для проверки кросс браузерности сайта

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

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

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

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

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

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

Основные понятия

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

Что представляет из себя отзывчивый веб-дизайн (responsive web design)? Это прежде всего гибкая, или по другому «резиновая» сетка макета вашего сайта основаная на относительных единицах измерения, которая позволяет использовать один макет для разного типа устройств, гибкие изображения и видеоматериалы, и медиазапросы.

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

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

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

И так, адаптивный веб-дизайн (adaptive web design) включает в себя гибкую сетку макета сайта, гибкие изображения и видеоматериалы, медиазапросы и прогрессивное улучшение (progressive enhancement).

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

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

Медиазапросы, используемые в Bootstrap 4

В этом разделе мы с Вами рассмотрим основные медиазапросы, которые используются в Bootstrap 4. Bootstrap это HTML, CSS и Javascript фреймворк для создания адаптивных страниц.

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

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция min-width) используются в Bootstrap 4:

// Small devices (landscape phones, минимальная ширина области просмотра 576px и выше)
@media (min-width: 576px) { ...код CSS }

// Medium devices (tablets, минимальная ширина области просмотра 768px и выше)
@media (min-width: 768px) { ...код CSS }

// Large devices (desktops, минимальная ширина области просмотра 992px и выше)
@media (min-width: 992px) { ...код CSS }

// Extra large devices (large desktops, минимальная ширина области просмотра 1200px и выше)
@media (min-width: 1200px) { ...код CSS }

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

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция max-width) используются в Bootstrap 4:

// Extra small devices (portrait phones, максимальная ширина области просмотра 576px и ниже)
@media (max-width: 575.98px) { ...код CSS }

// Small devices (landscape phones, максимальная ширина области просмотра 768px и ниже)
@media (max-width: 767.98px) { ...код CSS }

// Medium devices (tablets, максимальная ширина области просмотра 992px и ниже)
@media (max-width: 991.98px) { ...код CSS }

// Large devices (desktops, максимальная ширина области просмотра 1200px и ниже)
@media (max-width: 1199.98px) { ...код CSS }

В Bootstrap 4 существуют также точки останова направленные на определенный сегмент размеров экрана с использованием минимальной и максимальной ширины области просмотра (мультимедийные функции min-width и max-width):

// Small devices (landscape phones, минимальная ширина области просмотра 576px и максимальная ширина области просмотра 768px)
@media (min-width: 576px) and (max-width: 767.98px) { ...код CSS }

// Medium devices (tablets, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 992px)
@media (min-width: 768px) and (max-width: 991.98px) { ...код CSS }

// Large devices (desktops, минимальная ширина области просмотра 992px и максимальная ширина области просмотра 1200px)
@media (min-width: 992px) and (max-width: 1199.98px) { ...код CSS }

Обратите внимание, что точки останова, направленные на опеределенный сегмент используют логический оператор and («И»), который используется для объединения нескольких медиазапросов в один, в нашем случае это значение для минимальной и максимальной ширины области просмотра. Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:

Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:

// Medium and Large devices (tablets and desktops, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 1200px)
@media (min-width: 768px) and (max-width: 1199.98px) { ...код CSS } 

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

Обращаю Ваше внимание, что представленные значения не являются обязательными для использования, а представлены лишь с ознакомительной целью и служат отправной точкой в мир адаптивной верстки ;)

Верстка по Flexbox. Часть 2.

Сравнение

В качестве некоторого обобщения представим наличие некоторых наиболее важных с точки зрения автора на сегодняшний день технологий безопасности веб-браузеров в виде Таблицы 1, а затем сделаем некоторые выводы. Заметим, что данная таблица не является результатом какого-либо тестирования браузеров (за исключением проверки факта использования технологии ASLR в системе Windows 7 SP1, Ultimate, x64). Данные, представленные в таблице, приводятся на основе информации, предоставляемой производителями браузеров.

Таблица 1: Наличие технологий безопасности в популярных веб-браузерах

Технологии безопасности Apple Safari 5.0.5 Google Chrome 12.0 Microsoft Internet Explorer 9 Mozilla Firefox 5.0 Opera 11.11
Автоматические обновления браузера Есть Есть Есть Есть Есть
Поддержка HTTPS-соединений и визуализация наличия безопасного соединения Есть Есть Есть Есть Есть
Защита от компрометации HTTPS-соединений Нет Есть Частично (pinned sites) Нет Нет
Поддержка EV-сертификатов Есть Есть Есть Есть Есть
Механизмы защиты от XSS-атак Есть Есть Есть Есть Нет (XSS-атака в версии 11)
Фильтр вредоносных сайтов по URL Есть Есть Есть Есть Есть
Фильтр вредоносного программного обеспечения Нет Есть (sandboxing и репутационные технологии проверки чистоты файлов) Есть (SmartScreen- Application Reputation) Частично (при использовании дополнений, интеграция с антивирусным ПО) Нет
Режим приватного просмотра Есть (Режим «Частный доступ») Есть («Режим инкогнито») Есть (Режим InPrivate) Есть (Режим «Приватный просмотр») Есть («Режим приватности»)
Защита от слежения Нет Нет Есть (Tracking Protection) Есть Нет
Использование ASLR Исполняемый файл и DLL-библиотеки Исполняемый файл и DLL-библиотеки Исполняемый файл и DLL-библиотеки Исполняемый файл и DLL-библиотеки Исполняемый файл и DLL-библиотеки

Коммерческие инструменты для тестирования

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

Mogotest

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

Доступны несколько тарифных планов. Персональный тарифный план стоит $15 в месяц и допускает проверки до 50 страниц на трех сайтах. Тарифный план для фрилансеров стоит $45 в месяц и допускает проверки на 10 сайтах и до 350 страниц. Групповой тарифный план стоит от $125 в месяц до $4499+ за неограниченный доступ.

Cloud Testing

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

BrowserCam

Стоимость использования BrowserCam начинается от $19.95 за один сервис в день и заканчивается $999.95 за годовую подписку на полный комплект услуг.

Multi-Browser Viewer

Multi-Browser Viewer выполняет проверки для браузеров настольных систем и мобильных устройств. Он включает 26 виртуализированных веб браузеров, 5 браузеров для мобильных устройств (включая iPhone и iPad) и 61 вариант браузеров для снимков экрана (вы сможете видеть, как сайт выглядит, но взаимодействовать с ним нельзя). Также доступны пять языков: английский, испанский, немецкий, русский и французский.

Multi-Browser Viewer стоит $139.95 за однопользовательскую лицензию, включая годовую поддержку. Обновления после года использования стоят $99.95. Также доступен пробный период использования инструмента через веб сайт.

Тестирование, тестирование, тестирование…

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

  • Browserstack — это коммерческий сервис, который предоставляет доступ к тестовой среде, в которой можно проверить свой проект более чем на 700 стационарных браузерах и мобильных устройствах с помощью виртуальной машины в облаке;
  • Microsoft Virtual Machines — если вы работаете в Linux, у вас не будет доступа к Internet Explorer. Решение может заключаться в том, чтобы загрузить образы виртуальных машин для IE6 в IE11, которые затем могут использоваться в сочетании с Oracle VM Virtualbox или Vagrant для локального тестирования;
  • Различные разрешения экрана для конкретного браузера можно быстро протестировать с помощью онлайн-сервиса Screenfly. С использованием плагинов для браузеров, таких как Window Resizer для Google Chrome, или непосредственно в разделе инструментов для разработчиков Chrome и Firefox.

Без паники

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

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

Это грозит:

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

Необходимые условия

Windows 10 со следующими минимальными системными требованиями.

  • Windows 10, версия 1903 с последними накопительными обновлениями (KB4503293 или более поздней версии) и обновлением для системы безопасности KB4501375 или более поздней версии
  • Windows 10, версия 1809 с последним накопительным обновлением (KB4509479 или более поздней версии)
  • Windows 10, версия 1803 с последним накопительным обновлением (KB4512509 или более поздней версии)
  • Windows 10, версия 1709 с последним накопительным обновлением (KB4512494 или более поздней версии)

Windows Server 2019 с последним накопительным обновлением (KB4501371 или более поздней версии)

Windows 8,1 и Windows Server 2012 R2 с последней версией SSU (KB4504418 или выше) и KB4507463 или более поздней версии

Windows 8 Embedded и Windows Server 2012:

  • Установка KB4492872 для перехода на Internet Explorer 11
  • Установка последних накопительных обновлений IE11 KB4510979 или более поздней версии

Windows 7 с пакетом обновления 1 (SP1) и Windows Server 2008R2 с последней версией SSU (KB4490628 или выше), а также KB4507437 или выше

Доступен административный шаблон Microsoft EDGE (Дополнительные сведения можно найти в статье Настройка Microsoft Edge ).

Режим IE будет поддерживаться в версиях для Windows, которые поддерживают IE11. Режим IE скоро будет доступен в Windows 10 версий 1607 и 1507, Windows Server 2016.

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

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

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

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

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

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

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

Google Chrome – самый быстрый браузер для Windows

Cписок самых лучших браузеров возглавляет Google Chrome, он самый популярный браузер в России, СНГ и большинства других стран. Благодаря своей структуре предлагает пользователю высокую скорость работы со всеми типами контента. Безопасный, функциональный и понятный интерфейс – залог успеха Интернет-обозревателя.

Сегодня Google Chrome – не просто браузер, а целая платформа с отдельными веб-приложениями – удаленный рабочий стол Chrome, веб-приложения в режиме оффдайн, подписка на Push-уведомления.

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

Преимущества Google Chrome

  • Большой выбор расширений для Google Chrome в Chrome Web Store;
  • Кроссплатформенность – поддержка OS Windows, MacOS, Android, iOS и Linux;
  • Большой выбор расширений в Chrome Web Store;
  • Высокая производительность;
  • Встроенные инструменты для разработчиков;
  • Простой и минималистичный дизайн, понятный всем пользователям;
  • Высокий уровень защиты – предупреждения о вредоносных, фишинговых, опасных сайтах;
  • Защита от взлома и фильтрация всех загружаемых файлов;
  • Встроенный блокировщик всплывающих окон;
  • Встроенная проверка файлов на предмет содержания вредоносного кода;
  • Поддержка возможности использования нескольких учетных записей с отдельной синхранизацией;
  • Встроенный менеджер паролей – умеет не только сохранить пароли, но и сгенерировать сложный пароль в два клика мышкой;
  • Встроенный просмотр PDF-файлов;
  • Разработчики часто выпускают обновления, добавляя новые возможности и внедряя новые технологии в браузер;
  • Режим инкогнито – приватный режим без функций сохранения истории, куков и в целом вашей интернет-активности.

Недостатки

  • В новых версиях Flash Player не доступен! Google Chrome отказался от поддержки Flash Player одним из первых. НО остается возможность включить данную опцию вручную.
  • Имеется множество расширений для браузера, но не все имеют русскую локализацию.
  • Пожирание памяти – одна из главных проблем браузера при работе на старых компьютерах. Не рекомендуется запускать на слабых пк вместе с браузером ресурсоемкие программы.
  • Торможение – проблема возникает при одновременно открытии множества вкладок.

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

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

Следует отметить, что это не простое бесполезное требование, а нечто, чему заслужено уделено такое внимание

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

Как обновить Гугл Хром

Google Chrome на данный момент является одним из самых популярных браузеров в мире. И это при том, что появился на свет он одним из самых последних (можете ). Лично я использую его для работы с сайтами, ибо он идеально для этого подходит.

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

Но вернемся к теме нашей статьи — как обновить этот браузер? Для этого нужно будет кликнуть по расположенной в правом верхнем углу иконке с тремя горизонтальными полосками и выбрать из выпавшего меню пункт «О браузере Гугл Хром»
:

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

Итак, после выбора пункта «О браузере Google Chrome» вы увидите окно, где будет происходить сравнение текущей версии обозревателя с той, которая сейчас доступна на сервере обновлений.

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

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

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

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

Нужно ли web-странице выглядеть идентично во всех браузерах?

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

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

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

Интернет технологии постоянно развиваются, благодаря чему возможности пользователей сети растут. Однако, для реализации тех или иных функциональных задач требуются уже обновленные браузеры. В связи с этим компании, занимающиеся выпуском браузеров, постепенно прекращают поддержку старых версий, стимулируя пользователей переходить на новые версии программных комплексов. Так, к примеру, с 12 января этого года компания Microsoft уже не будет оказывать поддержку браузеров Explorer, версий 8,9 и 10. Компании Google и Mozilla Foundation идут тем же путем, поэтому чтобы просматривать web-странички в наиболее полном формате, следует использовать новые версии браузеров.

Особенности тестирования.

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

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

В основном при тестировании ПО в разных браузерах, проверке подлежит вёрстка (цвет, шрифты, расположение графических картинок и динамических элементов) и JavaScript.

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

Maxthon

Maxthon — стартовая страничка

Maxthon — достаточно быстрый браузер, который работает сразу на двух движках Webkit и Trident (по заверениям разработчиков им удалось найти некий баланс, позволяющий браузеру выжимать макс. скорость из ресурсов ПК).

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

Ключевые особенности:

  1. использует два движка: Webkit и Trident;
  2. авто-блокировка рекламы;
  3. есть инструмент Pass Keeper (удобный менеджер паролей);
  4. встроен ночной режим;
  5. простой и удобный дизайн в стиле минимализма;
  6. возможность сохранения веб-страничек в облако (почти как избранное, только вы получаете весь материал на страничке целиком);
  7. наличие UUMail (виртуального почтового ящика);
  8. встроенный режим чтения (для снижения нагрузки на глаза, особенно полезен для сайтов с мелким шрифтом), и др.

Заключение

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

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

Рейтинг
( Пока оценок нет )
Editor
Editor/ автор статьи

Давно интересуюсь темой. Мне нравится писать о том, в чём разбираюсь.

Понравилась статья? Поделиться с друзьями:
Люкс-хост
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: