Этап 1 – Техника
Конечно же, эффективная разработка кросс-браузерного кода начинается от выбранного подхода и наличия опыта. В первой части статьи мы покажем вам некоторые методы, которые могут облегчить вам процедуру разработки кросс-браузерного приложения.
- Сброс CSS
Исходя из того, что различные браузеры по-разному распознают стандартные стили оформления ваших html-элементов, первым делом нам нужно включить функцию сброса CSS в код нашей страницы. Применяя данный код, вы можете быть уверенными, что вы избежали головной боли, с которой вы бы обязательно повстречались.
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
- Замечания по Internet Explorer
Давайте на чистоту: Internet Explorer (особенно 6-я версия) является ночным кошмаром каждого верстальщика. Дабы уменьшить количество ошибок воспроизведения страниц данным браузером, Microsoft внедрили в него условные комментарии. Они дают вам возможность ссылаться на каскадные таблицы стилей, которые будут интерпретироваться отдельно данным браузером.
<!--[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]-->
- «Хаки» для Internet Explorer
Хотя лучше пользоваться условными комментариями, вы все же можете указать другие версии браузера, применим данный код:
.class {
width:200px; /* All browsers */
*width:250px; /* IE */
_width:300px; /* IE6 */
.width:200px; /* IE7 */
}
Такой метод, правда, не отвечает правилам W3C (именно поэтому вам лучше использовать условные комментарии), но иногда это и вправду экономит много драгоценного времени.
- Определяем конкретно браузер Opera
Опера, правда, не настолько популярный браузер среди обычных пользователей, но это ведь вряд ли можно назвать причиной того, почему можно и не исправлять ошибку, которая может возникнуть. Код, предоставленный ниже, указывает конкретно на Opera, что позволяет вам добавлять CSS-код, соответствующий стандартам данного браузера.
@media all and (min-width: 0px){
.classname {}
}
- Определяем конкретно браузер Safari
Safari считается одним из таких браузеров, которые максимально отвечают стандартам, поэтому редко случается, что приходится исправлять какие-то ошибки, которые присуще только данному браузеру. Правда, иногда все же такое случается. Предоставляем вам отличный «хак», которые поможет вам укладываться в рамки правил для данного браузера.
html:lang(en)>body .classname {}
- Определяем конкретно браузер Google Chrome
Опять же, как и для Opera и Safari, данному браузеру также требуется «хак» такого же типа.
body:nth-of-type(1) p{
color: #333333;
}
- PHP-класс определения браузера (browser detect)
Так как Internet Explorer часто вызывает проблемы с просмотром итоговой веб-страницы, то вам приходится выкручиваться и применять функцию, когда ваш веб-сайт определяет браузер, через который совершается просмотр.
Если вы пишите на PHP, то очень удобно будет использовать класс «Browser Detect», с помощью которого можно определить вплоть до 20 различных браузеров.
Скачать класс
- Определение браузера посредством jQuery
Этот огромный кусочек кода в плагине jQuery в файле browserdetect.js
определяет самые популярные браузеры (Safari, Firefox, Chrome, IE и Opera).
Как только вы добавите browserdetect.js в ваш HTML-файл, он сразу автоматически добавит нужный css-класс в «тело» кода страницы.
Например, «тело» кода вашей веб-страницы будет выглядеть примерно так, если посетитель использует Firefox3:
<body class="browserFirefox3">
Скачать код
- Определение браузера в WordPress
Чуть раньше, на блоге WpRecipes, рассказывалось о том, каким образом можно определять используемый браузер через WordPress. Код, приведенный ниже, автоматически добавит нужные строки в код каждой страницы блога. Вам требуется просто добавить данный код в файл functions.php, который находится в папке с темой оформления вашего блога.
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
if($is_lynx) $classes[] = 'lynx';
elseif($is_gecko) $classes[] = 'gecko';
elseif($is_opera) $classes[] = 'opera';
elseif($is_NS4) $classes[] = 'ns4';
elseif($is_safari) $classes[] = 'safari';
elseif($is_chrome) $classes[] = 'chrome';
elseif($is_IE) $classes[] = 'ie';
else $classes[] = 'unknown';
if($is_iphone) $classes[] = 'iphone';
return $classes;
}
- Крах IE6
Иногда (никто не говорит, что постоянно!) этот «обожаемый» всеми браузер Internet Explorer 6-й версии доставляет веб-разработчикам множество проблем и продолжительную головную боль. Вряд ли можно сказать, что данный метод обрадует ваших посетителей, но это на самом деле стоит использовать на страницах вашего сайта.
Вероятно, вы уже догадались, о чем мы. Конечно же, данный код приведет к краху браузера IE6. До свидания, динозавр!
<style>*{position:relative}</style><table><input></table>
Если вам интересует больше информации о том, как можно добиться краха данного браузера, то вам следует заглянуть сюда.
Этап 2 – Инструменты
Различные методы и опыт, конечно же, очень важны при разработке эффективного кросс-браузерного приложения. Но инструменты могут значительно сократить ваши временные затраты, и облегчить вам жизнь.
Во второй части данной статьи, давайте обратим внимание на инструменты, которые вы можете бесплатно получить в интернете.
- Xenocode Browsers
Этим на самом деле должны воспользоваться все. Данная утилита позволяет вам запустить различные браузеры (IE6, 7, 8, Firefox 2 и 3, Google Chrome, и Opera) прямо из сети интернет. Вам просто нужно установить небольшой плагин, и все готово!
Единственный минус данной утилиты, это то, что ее возможно запустить только на Windows (XP SP2 или более свежих версиях). Это, вероятно, опечалит пользователей Mac, но это не делает утилиту менее полезной.
Посетить Xenocode Browsers
- IE6 CSS Fixer
Мы помним, что уже заявляли ранее о том, что данный браузер является ночным кошмаром разработчиков. Данная утилита была разработана специально для того, чтобы конвертировать «нормальные» каскадные таблицы стилей, в подходящие для IE.
Например, она заменяет размеры таблиц, учитывая данные о том, что в данном браузере есть очень известный «баг» в этой области.
Посетить IE6 CSS Fixer
- Browsershots
Вряд ли кто-то станет использовать в офисе 3 разных ОС, и 25 разных браузеров. Помнится, встречались случаи, когда разработчики просили знакомых с другой ОС посмотреть, как выглядит их проект с другой ОС и с другого браузера. Теперь все эти действия можно исключить, и воспользоваться Browsershots: выбираете требуемую ОС, выбираете нужный браузер, немного ждете, и веб-сайт предоставляет вам скриншоты того, как ваш проект будет смотреться на выбранных параметрах.
Хотя это и отличный сервис, у него все же есть кое-какие минусы. Главный минус заключается во времени, которое нужно ждать, прежде чем вы получите скриншоты (это также зависит от количества выбранных браузеров). Стоит заметить, что данный сервис предлагает еще и платный вариант, в котором вам не придется ждать столько времени.
Посетить Browsershots
- Browsrcamp: Как ваш сайт выглядит на Mac
- MultipleIES: Запуск различных версий IE на вашем компьютере
Утилита, предназначенная исключительно для Windows, которая позволяет вам устанавливать и запускать различные версии Internet Explorer (от 3-ей до 6-ой версии) на вашем компьютере.
Правда, иногда случаются некоторые различия между отображением в «реальном» IE и генерированным в multipleIE, но это никак не сказывается на работоспособности утилиты.
Скачать MultipleIES
- ie4osx: Internet Explorer на MAC OS
Утилита, схожая по принципу с MultipleIEs, но уже для пользователей ОС MAC. Печально то, что она запускается только на X11, и работает при этом медленно и очень нестабильно. Но если у вас нет возможности использовать компьютер с ОС Windows, то это утилита будет просто незаменима.
Скачать ie4osx