—»     —»   Более 15 методов и приспособлений для написания кросс-браузерного кода
  Раздел: CSS/Style Sheets   Комментариев: 1  

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

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

Этап 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

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

Этим на самом деле должны воспользоваться все. Данная утилита позволяет вам запустить различные браузеры (IE6, 7, 8, Firefox 2 и 3, Google Chrome, и Opera) прямо из сети интернет. Вам просто нужно установить небольшой плагин, и все готово!
Единственный минус данной утилиты, это то, что ее возможно запустить только на Windows (XP SP2 или более свежих версиях). Это, вероятно, опечалит пользователей Mac, но это не делает утилиту менее полезной.
Посетить Xenocode Browsers

- IE6 CSS Fixer

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

Мы помним, что уже заявляли ранее о том, что данный браузер является ночным кошмаром разработчиков. Данная утилита была разработана специально для того, чтобы конвертировать «нормальные» каскадные таблицы стилей, в подходящие для IE.
Например, она заменяет размеры таблиц, учитывая данные о том, что в данном браузере есть очень известный «баг» в этой области.
Посетить IE6 CSS Fixer

- Browsershots

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

Вряд ли кто-то станет использовать в офисе 3 разных ОС, и 25 разных браузеров. Помнится, встречались случаи, когда разработчики просили знакомых с другой ОС посмотреть, как выглядит их проект с другой ОС и с другого браузера. Теперь все эти действия можно исключить, и воспользоваться Browsershots: выбираете требуемую ОС, выбираете нужный браузер, немного ждете, и веб-сайт предоставляет вам скриншоты того, как ваш проект будет смотреться на выбранных параметрах.
Хотя это и отличный сервис, у него все же есть кое-какие минусы. Главный минус заключается во времени, которое нужно ждать, прежде чем вы получите скриншоты (это также зависит от количества выбранных браузеров). Стоит заметить, что данный сервис предлагает еще и платный вариант, в котором вам не придется ждать столько времени.
Посетить Browsershots

- Browsrcamp: Как ваш сайт выглядит на Mac

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

- MultipleIES: Запуск различных версий IE на вашем компьютере

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

Утилита, предназначенная исключительно для Windows, которая позволяет вам устанавливать и запускать различные версии Internet Explorer (от 3-ей до 6-ой версии) на вашем компьютере.
Правда, иногда случаются некоторые различия между отображением в «реальном» IE и генерированным в multipleIE, но это никак не сказывается на работоспособности утилиты.
Скачать MultipleIES

- ie4osx: Internet Explorer на MAC OS

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

Утилита, схожая по принципу с MultipleIEs, но уже для пользователей ОС MAC. Печально то, что она запускается только на X11, и работает при этом медленно и очень нестабильно. Но если у вас нет возможности использовать компьютер с ОС Windows, то это утилита будет просто незаменима.
Скачать ie4osx
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, Firefox, Google Chrome, jQuery, Safari, Opera
Опубликовал Mysterious Master   Прочитано (раз): 9423   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 8 января 2012 @ 22:02
Написал: ZEOS — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Отличная статья winked



Недалёкое будущее (2030год):
Нужен верстальщик.
Требования: html7, css5, кроссбраузерность (ff 142, Chrome 114, Opera 23.1, ie 6)

wink
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

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


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031