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

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

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

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

Понимание Box CSS Model

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

Моделью CSS окно отвечает за расчет:

• Сколько места блочный элемент принимает up
• Или нет границ и / или поля перекрываются, или collapse
• Box’ S dimensions
• В какой-то степени, box’ позиции по отношению к другим содержанием на page

Моделью CSS окно имеет следующие основные правила:

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

Несколько важных вещей, чтобы иметь в виду, для работы с элементами уровня блока:

• Если окно имеет ширину установлен на “ 100% ”, то shouldn’ т есть какие-либо поля, отступы, или границы, в противном случае он будет переполнение ееparent
• Вертикально-соседних полях может вызвать некоторые Комплекс рушится issues которые могут вызвать расположение problems
• Элементы расположены относительно или абсолютно будет вести себя иначе, детали которого обширны и выходят за рамки этого article
• Правила и принципы выше, заявил в предположении, что страницы проведение блочных элементов отображается в стандартном режиме (этот пункт был добавлен позже, после рассмотрения комментариев posted)

окна модели в качестве отображается с помощью Firebug в Firefox

Понимать разницу между блоком и Inline

Для опытных разработчиков, это еще не просто.Это, однако, еще одно важное направление, что, когда он полностью понял, вызовет лампочка appear много головной боли будет avoided, и you’ будете чувствовать себя гораздо более уверенно в создании кросс-браузерный layouts.

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

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

• Элементов блока, по умолчанию, естественно расширить горизонтально, чтобы заполнить их родительского контейнера, так there’ Не нужно устанавливать ширину “ 100% ”
• Элементов блока, по умолчанию, начинается с левого края родительского окна, ниже всех предыдущих элементов блока (если поплавков или расположить элементы используются, см. ниже)
• Встроенные элементы будут игнорировать ширина и высота settings
• Встроенные элементы потока с текстом, и могут быть типографские свойства, такие как white-space font-size, и letter-spacing
• Встроенные элементы могут быть выровнены помощью vertical-align собственность, но элементы блока cannot
• Встроенные элементы будут иметь некоторые природные пространства под ними для того, чтобы разместить элементы текста, которые падают ниже линии (как буква “ g”)
• Встроенный элемент станет блочным элементом, если он floated

Понимание плавающей и Clearing

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

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

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

• Плавающих элементов удаляются из потока другого уровня блока, не плавающих элементов, так другими словами, если вы плавать окне слева задней части (на уровне блоков) that’ ы не плавал появится позади поплавка встека, и любой текст внутри абзаца (встроенный уровне) будет обтекать float
• Чтобы получить содержимое обтекании плавающий элемент, он должен быть либо внутри, либо плавали в то же direction
• Плавающий элемент без объявленной ширины сожмется до ширины его содержание, так it’ S правило, лучше всего иметь набор шириной float
• Если блок содержит элемент плавали дети, это будет “ collapse” требующие fix
• Элемент that’ S “ cleared” позволит избежать обтекает плавающий элемент над ними в document
• Элемент that’ с обеих очищается и плавали только очистить себя элементы, которые приходят раньше, не after

Использование Internet Explorer первого (или Don’ т)

Обратите внимание, что Smashing Magazine’ Команда настоятельно рекомендует в отношении развивающихся веб-сайтов в Internet Explorer в первую очередь.По нашему мнению, сайты должны быть разработаны в “ modern” веб-браузеров, стандартов, а затем быть изменен для багги версиях Internet Explorer.Советы ниже, не отражают мнение Smashing редакции.Согласны или не согласны?Комментарий к этой статье !

Самые того, что I’ ве обсуждали до сих пор имеет дело с CSS кодирование и компоновки принципы.Этот принцип относится скорее к привычкам и предпочтениям большинства дизайнеров.Хотя мы могли бы ненавидеть использовать IE6 и IE7 в нашей повседневной деятельности интернет, когда придет время для создания клиентских проектов с нуля, одна из лучших вещей, которые вы можете сделать, это тестирование Вашего макета в этих браузерах early в развитии.Возможно, вы даже хотите открыть автономную версию IE6 или IE7 и просто начать развитие в этом browser.

Конечно, вы won’ T имеют доступ к инструменты, такие как Firebug, но в целом для CSS (особенно на ранних стадиях развития), вы won’ т необходимость Firebug.It’ гораздо легче получить макет работал сначала в IE6 и IE7, а затем исправить для других браузеров, чем делать это наоборот.Ждать, пока в конце процесса разработки, чтобы открыть IE6 и / или IE7, скорее всего, вызвать некоторые, если не все, из следующихпроблемы:

• Несколько хаки будет необходимо, нуждающихся в отдельные таблицы стилей для разных версий IE, в результате чего код раздутой и менее ремонтопригодны и создание веб-сайта slower
• Макет в некоторых местах, возможно, придется переработать, умножая развития time
• Тестирование временем будет увеличиваться, иногда в геометрической прогрессии, оставляя все меньше времени для более важных tasks
• Макет в других браузерах не будет таким же, как в IE6 и IE7

I wouldn’ T ожидать разработчикам использовать Internet Explorer этом агрессивно для личных проектов, веб-приложений, или других не-клиент работе.Но для корпоративных clients которого пользователь базы в первую очередь на Internet Explorer, этот совет может предотвратить много головной боли при получении вещи, чтобы работать должным образом, и, безусловно, сделает кросс-браузерного опыта гораздо больше likely.

Иногда просмотра IE’ с проблемами, как “ раздражает bugs” может создать ненужную негатива, и может помешать время разработки и дальнейшего обслуживания.Работа с IE является фактом жизни для дизайнеров и разработчиков, так что просто посмотр� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров