Все идет уже о том, как мы должны использование CSS3 more и все возможности и гибкость, которые приходят с ней, но что мы должны по-прежнему считают IE6 и другие тревожные browsers.

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

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

Также учитывать наши предыдущие статьи:

• Укрощение Advanced CSS Selectors
• Take Your Design To The Next Level с CSS3
• продвинуть Ваш веб-дизайна в будущее с CSS3

Содержание Что Matters

Джеффри Зельдман раз said “ содержание предшествует дизайна.Дизайн в отсутствие содержания не дизайн; it’ S decoration.” В самом деле, самое главное на ваш сайт content.Это то, что каждый человек должен иметь возможность получить, независимо от того, какой браузер они using.

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

Это не значит, что мы должны выйти из борьбы за ликвидацию либо IE6.Мы все еще можем последовать примеру таких сайтах, как Twitter и YouTube и добавить видно, но не тупиковая предупреждения upgrade.

YouTube и сообщения Twitter предупреждение для IE6 users

И помните: каждая профессия имеет обязанность educate тех, кто не знаком с их торговлей.Мы должны объяснить, как материал работает для наших клиентов, не будучи покровительственным.Это не их дело знать об этом после того, как all.

Основы Первое: три слоя (HTML, CSS и JavaScript)

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

Во-вторых, мы добавим style, CSS.В этом шаге мы добавим визуальные элементы нашего дизайна, мы даем веб-сайте своей личности.Мы также убедитесь, что контент будет доступен без третьего layer.

И, наконец, третий слой, JavaScript, behavior.Здесь мы добавляем интерактивные элементы на нашем сайте.Мы делаем опыт богаче, используя вещи, такие как вкладки, ползунки, лайтбоксы, etc.

С этим путем в виду, наш контент всегда будет доступен в любом браузере.Мы уверены, что старые браузеры получают только основное содержание и пренебрежение более сложные слои, которые могли бы препятствовать их users’ доступ к it.

Добавление Основной стиль для Старого Browsers

Таким образом, наша семантическая разметка будет сделано, и мы знаем, что некоторые браузеры не могут оказать CSS неправильно или вообще, такие, как браузеры, прежде чем Netscape 4.0 или Internet Explorer 4.0.Для тех браузерах, показывая голые контент-невооруженным версии является самым безопасным choice.

Некоторые люди говорят, что сегодня нет необходимости это делать.Но если вы хотите, чтобы убедиться, что эти люди на этих браузеров не возникнут какие-либо проблемы, просто ссылку на базовую версию вашего CSS с link теги, а затем на более продвинутый файл с @importДекларация:

<link rel="stylesheet" type="text/css" href="basic.css" media="screen" />

<style type="text/css">
	@import "advanced.css";
</style>

Вы также можете пропустить link теги вообще и оставить их с текстовой версии сайта:

<style type="text/css">
	@import "style.css";
</style>

Охватывая Differences

Сейчас разберемся с паршивой овцы наиболее часто используемых браузеров: Internet Explorer 6.

У вас есть два варианта:

1. Если бы только незначительный процент вашей аудитории просмотра веб-страниц с ней, и вы не хотите выбрасывать деньги своего клиента в канализацию, можно создать основную таблицу стилей для IE6.
2. Признайте, что ваш проект будет not выглядеть одинаково в IE6, и принимать решения о том, что оставить из: какие причуды IE6 будет исправить и которая будет оставить be.

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

В вашем HTML, вам придется добавить несколько условных комментариев ссылку на таблицу стилей и, чтобы скрыть другие листы с IE6:

	<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />

В первый условный комментарий, мы связываем наш основной таблицы стилей для всех браузеров, которые не являются IE6 (отсюда “!“).А во втором комментарий, мы связываемся непосредственно к универсальной IE6 стилей на хранилище Google (и сэкономить полосу пропускания в этом!)

Сделать Photoshop Быстрее сайт использует универсальный таблицы стилей для IE6

Если вы предпочитаете второй путь, вы должны быть готовы принять различия между браузером визуализации.Знайте, что некоторые детали вашего проекта не будет видно или сделать, как приятно в IE6, IE7 или даже и 8.И Не быть upset О it.

Resets

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

Много стилей вокруг в Интернете для пользы никому.Тот, который обычно считается стандартным и наиболее часто реализуются является reset__1 Эрик Мейер | , или некоторые изменения it.

С появлением HTML5, в том числе новые HTML elements в вашем сброс CSS также является хорошей идеей. Html5doctor обеспечивает хорошее обновление для сброса Эрик Мейер, который можно использовать бесплатно в вашем projects.

Вы можете использовать сброс CSS либо путем встраивания его в верхней части свой собственный файл CSS, или, если хотите, чтобы держать вещи опрятными, импортируя его из стилей:

@import url(reset.css);

CSS различия, которые могут нарушить ваш Layout

Если вы решили использовать универсальный IE6 CSS, вы только что спасли себя много головной боли.Но не позволяйте блестящие логотипы IE7 и 8 дурак: если вы собираетесь использовать новейшие методы CSS, вам все равно придется сделать многое, чтобы удовлетворить them.

IE6 и PNG support

Мы все знаем, что PNG изображения с альфа-каналом прозрачности (то есть красивая из них) не играть хорошо на IE6.Мы все видели, что раздражает голубой фон, на наш тщательно проработанный logos.

Вы можете выбрать один из нескольких обходные пути, чтобы эту проблему, так что IE6 может отображать PNG.Каждый из них довольно быстро реализовать и делает разницу в общей design.

Вот несколько из лучших сценариев и методов для решения этого вопроса:

• DD_belatedPNG
• SuperSleight JQuery Plugin
• PNG 8-битный техники (Fireworks)
• Умный PNG оптимизация Techniques
• PNG Руководство по оптимизации: более умные Techniques

Тем не менее, следует отметить, что все больше и больше веб-дизайнеров в настоящее время предпочитают не решить проблему PNG в IE6:

Недавно обновленный веб-сайт 31three не применяет никаких исправлений для PNGs в IE6.

Расширенный Selectors

Эти селекторы почти определения успешного развития CSS сами по себе, потому что они держат истинная power. Из CSS и могут сделать нашу жизнь как разработчикам гораздо легче (!, И наш бюджет настолько ниже)

Решение о том, чтобы заставить их работать на Internet Explorer или нет, зависит в значительной степени от того, что вы используете их for.

Например, если вы используете их, чтобы добавить дополнительные детали, чтобы ваши проекты, такие, как маленькие значки для обозначения различных типов файлов, это won’ т сделать большой разницы, если значки don’ T дисплей на некоторых браузерах.Посетители сайта не будут знать, что они отсутствуют, и ссылки все еще будет отлично usable.

Эти селекторы также широко используются для повышения типографских деталей, и отсутствие поддержки их won’ т быть большой проблемой для вашей designs.

Hicksdesign использует передовые селекторы для пронумерованы пули в меню навигации, и они просто не видны для IE6 users

Какие браузеры не поддерживают эту ? Internet Explorer 6 не увидите стили применяются практически с любой продвинутый переключатель.Это только действительно понимает простые комбинаторы потомком и классов и ID селекторы.Он даже борется с несколькими классами применительно к тем же элементом!Это не будет trusted.

IE7 игнорирует :lang селектора и псевдо-элементы, такие как :first-line :first-letter :before и :after.Но это does понять все атрибутом selectors.

Кроме того, ни одно из Интернета релизы проводника на сегодняшний день поддерживает :target псевдо-класса, элементы пользовательского интерфейса состояния псевдо-классов (:enabled :disabled и т.д.), структурные псевдо-классы (например, :nth-child,:nth-of-type или :first-child) или отрицаниепсевдо-element.

Box-Sizing

Box-калибровка позволяет указать браузеру, как вы хотите, чтобы рассчитать ширину и высоту element.

Например, если вы установили box-sizing собственность до border-box, то отступы и границы будут вычтены из указанной ширины и высоты этого элемента, вместо того, добавил к ним (как указано в W3C’ характеристики сдля стандартная коробка model).

Это может сделать его легче контролировать размер элементов и сделать размеров ведут себя одинаково в разных browsers.

Если вы считаете, что ваш сайт делает в IE в режиме совместимости (и, следовательно, делает с без standard окна модели), вы можете использовать это свойство в таблицах стилей, чтобы все браузеры uniform.

Убедитесь в том, чтобы добавить стандартную собственности и конкретного производителя из них:

div {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

Какие браузеры не поддерживают эту ? Если сайт отображается в режиме совместимости, IE6 будет оказывать использованием нестандартных окне модели, так что это уже будет рендеринга как если бы он был “border-box“собственность на.Вы можете заставить IE6 для отображения в режиме совместимости.Есть несколько способов сделать это, один способ заключается в добавлении комментария HTML до doctype декларация вашего HTML pages.

Медиа Queries

Медиа запросов не полностью supported большинством браузеров, Internet Explorer и не поддерживает их в all.

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

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

. Если вы используете их, чтобы создать более гибкий дизайн сайта, который адаптируется к изменениям, скажем, в размер окна, то знайте, что только поддержка Safari, Firefox и Опера им (частично)

Какие браузеры не поддерживают эту ? Internet Explorer, а в некоторых случаях, Safari и Firefox.

CSS различия, которые в основном Decorative

Это вопросы, которые лучший левый alone для не поддерживающих браузеров, потому что отсутствие поддержки не будет проблемой для пользователей, которые хотят полу …

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