В настоящее время все используют другой браузер. Между популярными вариантами, такими как Firefox, Safari, Chrome и Internet Explorer, которые составляют около 98% доли браузеров на интернет-рынке, и другими малоизвестными браузерами, такими как Konqueror, существует множество браузеров, используемых для просмотра вашего сайта.
Как ваш сайт работает со всеми этими вариантами? Важно, чтобы ваш веб-сайт можно было использовать на всех основных носителях, будь то популярные браузеры, мобильные устройства или любые другие устройства для просмотра веб-страниц. В этой статье мы рассмотрим некоторые основы обеспечения кросс-браузерной совместимости вашего сайта, включая фрагменты и ресурсы, которые помогут вам на этом пути.
Проблема
Не все используют один и тот же браузер. Подобно тому, как все работают в разных операционных системах, вы не можете ожидать, что все люди будут использовать один и тот же инструмент для просмотра веб-страниц.
Итак, какие есть варианты? Данные о текущей доле браузеров варьируются в зависимости от источника и региона, но в целом Internet Explorer, Firefox, Chrome, Safari и Opera составляют большую часть доли рынка, а Internet Explorer доминирует на рынке. Internet Explorer 8 занимает более 25% рынка, Internet Explorer 6 — 215%, а Internet Explorer 7 — 14%.
Когда существует так много разных вариантов, каждый из которых работает со своим собственным механизмом рендеринга, как вы гарантируете, что ваш веб-дизайн или приложение будут работать в каждом из них? Это то, что мы надеемся охватить и предоставить решения в этой статье.
Как работает ваш сайт?
Итак, как ваш текущий сайт работает во множестве существующих браузеров? Почему бы не проверить на себе? Кроссбраузерное тестирование — это хороший способ убедиться, что ваш сайт выглядит хорошо и совместим со всеми браузерами. Если вы не хотите устанавливать все основные браузеры на свой персональный компьютер, вот несколько ресурсов, которые вам помогут.
Лаборатория браузеров Adobe
Adobe Browserlab предлагает отличное решение для просмотра скриншотов вашего сайта по запросу. Обычно это моя программа для тестирования в различных браузерах.
Браузершоты
Делает скриншоты вашего веб-дизайна в разных браузерах. После того, как вы отправите свой URL-адрес, он предоставит вам URL-адрес, по которому будут загружены ваши скриншоты.
Песочница браузера
Запускает приложение для просмотра вашего сайта в различных браузерах.
Браузеркемп
Позволяет проверить совместимость вашего дизайна с браузерами Mac OS X.
IE-тестер
Бесплатный веб-браузер, позволяющий проверить, как выглядит ваш сайт в IE8, IE7, IE 6 и IE5.5 в Windows 7, Vista и XP.
Браузерная проверка вашего сайта
Получается, ваш сайт не работает должным образом во всех основных браузерах? Не волнуйся. Это случается с лучшими из нас. Теперь пришло время заняться его исправлением.
Подтвердить
Прежде всего, подтвердите свой сайт. Устранение этих ошибок XHTML и CSS часто может решить эти надоедливые ошибки браузера. Я предлагаю запустить ваш сайт через W3 XHTML Validator и CSS Validator.
Сброс CSS
Еще один отличный способ убедиться, что ваш сайт совместим с разными браузерами, — всегда сбрасывать CSS перед началом работы над проектом. Существует множество различных глобальных сбросов CSS, но наиболее правильными считаются сбросы Эрика Мейера и Yahoo:
Перезагрузка Эрика Мейера
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
Сброс CSS YUI
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;}
Либо включите этот стиль сброса CSS в верхней части вашей таблицы стилей, либо попросите Yahoo разместить его и просто связать с ним в своих HTML-документах прямо перед вашей собственной таблицей стилей:
Условные операторы
Еще один популярный метод обеспечения кросс-браузерной совместимости вашего сайта — таргетинг на определенные браузеры с помощью условных операторов. По сути, идея состоит в том, чтобы определить браузер пользователя, и если он один из указанных, он должен выполнить определенное действие.
Одним из наиболее распространенных применений условных операторов является включение таблицы стилей, если используется браузер Internet Explorer. Делая это, вы можете исправить некоторые ошибки, которые существуют в вашем коде, и переопределить текущую таблицу стилей.
Чтобы использовать условные операторы, просто включите оператор в голова раздел вашего XHTML, прямо под включением таблицы стилей.
Включите таблицу стилей, если браузер IE
Целевые версии IE
(Конечно, вы можете заменить IE6 с любой версией IE)
Обнаружение браузера PHP
Если вы ищете более конкретный способ таргетинга на браузеры и даже операционные системы, то вам следует рассмотреть возможность проверки PHP-скрипта обнаружения браузера Techpattern. Это очень мощный скрипт, который обнаружит все, от операционной системы вашего посетителя, браузера, поддержки JavaScript, разрешения экрана и многого другого.
Обнаружение браузера jQuery
Для решения на основе jQuery для обнаружения браузеров и добавления соответствующего класса в тело вашего сайта, ознакомьтесь с Обнаружение браузера TVI Design с использованием jQuery. Сценарий добавляет в тело класс, который затем можно стилизовать в CSS.
Мобильные устройства
Вещи меняются. В наши дни появляются новые устройства в качестве среды для просмотра веб-страниц. Будь то смартфоны, iPod или iPad, существует новая среда для веб-дизайна, и поскольку они становятся все более популярными, это означает, что вы также должны учитывать их при разработке сайта.
Как мой сайт выглядит на мобильном устройстве?
Как насчет того, чтобы протестировать свой сайт в некоторых веб-эмуляторах мобильных устройств? Если вы хотите протестировать свой дизайн на мобильном устройстве, вот несколько отличных ресурсов:
Тест iPhone
Симулятор для быстрого тестирования ваших веб-приложений для iPhone
айфони
iPhoney — это бесплатное приложение, которое вы можете загрузить, чтобы имитировать работу в Интернете на iPhone. Включает поддержку поворота, масштабирования и даже отключения плагинов, таких как Flash.
MobiReady
Отличный инструмент для тестирования в мобильных устройствах. Предоставляет обратную связь, включая результаты тестирования, параметры и эмуляторы.
Эмулятор мобильного устройства
Отличный способ протестировать свой сайт на множестве мобильных устройств.
Способы сделать ваш сайт мобильным
Так как же сделать свой сайт мобильным? Что ж, если вы заинтересованы в создании мобильной версии своего сайта, вот несколько способов сделать это.
Перенаправить пользователей на мобильном устройстве
Простой способ убедиться, что ваш сайт оптимизирован для мобильных устройств, — перенаправить пользователей, просматривающих его с мобильного устройства, на определенную «простую» версию страницы на вашем сервере. Одними из самых простых способов сделать это являются сценарий мобильного перенаправления Studio Hyperset или использование упрощенного обнаружения устройств Mobiforge в PHP.
Мобифай
Mobify позволяет вам создать мобильную версию вашего сайта на основе вашего текущего дизайна. Он также позволяет просматривать статистику трафика и варианты рекламы.
Мофус
Mofuse позволяет бесплатно создать мобильную версию блога. Это довольно легко и занимает совсем немного времени.
Дополнительные ресурсы
Все еще нуждаетесь в ресурсах и решениях для кросс-браузерной совместимости?
Об авторе
Шон Генг — независимый веб-дизайнер из Питтсбурга, штат Пенсильвания. Он является куратором сайта Designmess, онлайн-сообщества дизайнеров и разработчиков. Вы можете следить за ним в Твиттере или связаться с ним через его веб-сайт.