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

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

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

Изучите блочную модель CSS

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

Блочная модель CSS отвечает расчет :

- Сколько места занимает блок каждого элемента
- Наслаиваются/корректно ли отображаются границы или поля
- Размеры блоков
- В некоторой степени, положение блока относительно остального содержимого страницы

Блочная модель CSS имеет несколько основных правил:

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

Некоторые важные вещи, которые стоит помнить, когда работаете с блочными элементами:

- Если ширина блока выставлена на «100%», то у него не должно быть никаких полей, отступов или границ, иначе он залезет за исходник

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

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

- Правила и принципы, указанные выше, работают при условии, что страница, содержащая блочные элементы, отработана по стандартным схемам (пункт был добавлен после обзора комментариев)

Блочная модель, как мы ее видим, используя Firebug в Firefox

Изучите разницу между блоками и встроенными элементами

Для опытных разработчиков, это очередная вещь, не требующая размышлений. Но, тем не менее, это очередная важная область, которую, если понять, то  получится "Эврика!”  и множество проблем в дальнейшем можно будет избежать, и вы будете чувствовать себя более уверенно при создании разнобраузерных макетов.

Картинка ниже показывает разницу между блочными и встроенными элементами:

Несколько основных правил, отличающих блочные элементы от встроенных:

- Блочные элементы, по умолчанию, свободно расширяются по горизонтали до размеров исходника, поэтому не нужно выставлять ширину на «100%»

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

- Встроенные элементы игнорируют настройки ширины и высоты

- Встроенные элементы перемещаются с текстом, подчиняются заданным типографическим настройкам, таким как интервалы, размеры шрифты, отступы (white-space, font-size, letter-spacing)

- Встроенные элементы могут выравниваться используя функцию  вертикального выравнивания , а блочные элементы — не могут.
У встроенных элементов будет некоторый отступ вниз для того, чтобы соответствовать некоторым элементам текста, например буква "g”)

- Встроенный элемент станет блочным, если он плавающий

Изучите «плавание» и обнуление (Floating, Clearing)

Для макетов с несколькими колонками, которые довольно легко обслуживать, лучший способ — использовать «floats». Если вы точно уверены, что знаете, как работают поплавки, то это важный шаг к достижению межбраузерного соответствия.

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

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

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

- Чтобы заставить содержание обтекать плавающий элемент, то оно должно быть либо встроенным, либо «плыть» в том же направлении

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

- Если блочный элемент содержит в себе подчиненный плавающий элемент, то он «схлопнется», что потребует исправления

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

- Элемент, который и обнулен и плавающий — очистит себя от элементов, идущих До, но не После

Сначала используйте Internet Explorer (или не используйте)

Примите к сведению, что мы настоятельно не рекомендует использовать для разработки сайтов сначала Internet Explorer. По нашему мнению, сайты должны разрабатываться для «современных» веб-браузеров, сначала под их стандарты, а потом уже «подгонять» под «глючные» версии IE. Согласны или нет? Комментарии под статьей!

Большая часть того, что мы обсуждали касалась принципов CSS-кодинга и шаблонов. Этот же принцип больше посвящен привычкам и предпочтения большинства дизайнеров. Несмотря на то, что мы можем ненавидеть использование IE6 и IE7 для каждодневной деятельности в интернете, но когда дело касается написания проекта с нуля, то практически самое лучшее, что вы можете сделать — тестировать ваш шаблон на ранних этапах работы именно на этом браузере. Возможно, даже стоит открыть независимую версию IE6 или IE7  и начать разработку в этом браузере.

Конечно, у вас не будет доступа к таким вещам, как Firebug, но, по большому счету, для CSS(особенно на ранних этапах разработки) вам и не нужен Firebug. Намного легче заставить шаблон работать сначала на IE6 и IE7, а потом уже подправить его для других браузеров, чем делать это каким-то другим путем. Если в процессе разработки вы будете ждать до последнего, прежде чем открыть IE6 и/или IE7, то скорее всего столкнетесь с некоторыми, а может и вовсе — со всеми, из следующих проблем:

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

- Шаблон в некоторых местах потребует переработки, увеличивая время вашей работы

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

- Шаблон не будет для других браузеров таким же, как в IE6 и IE7

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

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

Изучите основные проблемы Internet Explorer

Если вы собираетесь использовать IE в процессе разработки или для проверки шаблонов в нем, то вы обязательно должны знать, каковы его возможности и то, с чем у IE (особенно 6 и 7 версии) возникают проблемы.

Подробная дискуссия о каждой из возможных проблем, которые могут возникнуть в Internet Explorer, и список  всех невместимостей с CSS  – точно выходит за рамки этой статьи. Но есть некоторые очень серьезные несоответствия и проблемы в использовании CSS под IE, которых разработчикам следует опасаться. Приведем краткое изложение проблем, с которыми вам придется иметь дело:

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

- IE6 может дублировать поля у плавающих элементов со той стороны, в которую они «плывут»; опция  display: inline  часто убирает эту проблему

- В IE6 и IE7 могут возникнуть проблемы, если элемент  не имеет разметки , например поля наслаиваются неправильно, фон не отображается  и многие другие

- IE6 не поддерживает минимально и максимально заданные показатели, например  min-height, или  max-width

- IE6 не поддерживает фиксированное размещение фоновых картинок

- IE6 и IE7 не поддерживает большинство дополнительных значений для опции  display (например  inline-table,table-cell, table-row, и т.д.)

- Вы не можете использовать псево-класс  :hover  ни на каком из элементов в IE6, кроме «анкера» ()

- Некоторые версии IE слабо поддерживают некоторые селекторы CSS (например attribute selectors, child selectors, и т.д.)

- Версии IE 6-8 плохо поддерживают CSS3, но  есть некоторые обходные пути

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

Некоторые вещи никогда не будут выглядеть как надо

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

Формы всегда будут выглядеть по-разному

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

Посмотрите на картинку ниже, которая показывает опцию select в элементах главной страницы  Facebook  в пяти разных версиях браузеров (взято с  Adobe’s Browserlab):

select элементы с опцией   выглядят по-разному в разных браузерах.

Некоторые элементы форм можно проконтролировать визуально. Например, если клиент требует, чтобы кнопка «submit» выглядела одинаково во всех браузерах, то это еще не проблема — вы можете просто использовать картинку, вместо обычного, который, как и select, будет выглядеть по-разному в разных браузерах.

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

Типография всегда будет выглядеть по-разному

Другая сфера, от которой мы не должны ожидать соответствия вплоть до пикселя — это шрифты, а особенно — шрифты в основном тексте.  Разные способы  придумали, чтобы решить проблему отображения шрифтов в заголовках, недавно запущенный  Google Font API  также создан для этого. Но основной текст, скорее всего, всегда будет выглядеть по-разному в разных браузерах.

С типографией, мы сталкиваемся не только с проблемой доступности шрифтов на разных машинах, но, в некоторых случаях, даже если шрифт доступен и на обеих машинах, то он все равно выглядит по-разному. Например, Windows ClearType доступен для IE7, но не для IE6, что заставляет шрифты выглядеть иначе под разными версиями IE.

График ниже показывает снимки с  A List Apart  под IE6 и IE7. Шероховатый текст в IE6 более заметен в заголовке, чем в основном тексте, но все отображения текстов явно отличаются в разных браузерах(если текст, конечно, не картинка):

Типография A List Apart в IE6 и IE7

Используйте CSS reset

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

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

Откат настроек CSS показан в панели инструментов разработчика в Firefox

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

Используйте справку SitePoint о CSS

Если у вас возникли проблемы с отображением некоторых аксессуаров CSS под разными браузерами, то обязательно посмотрите  справку SitePoint о CSS , чтобы проверить ограничения по совместимости. Справка SitePoint о CSS(которая доступна и в книжном варианте, но не столь обновленная) включает в себя полезные сведения о совместимости с разными браузерами любого стандартного аксессуара CSS.

Таблицы SitePoint по совместимости для настроек CSS

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

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

Заключение

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

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

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