С появлением IE9, Microsoft дала понять о своем намерении работать с основанными на стандартах технологии.

В IE все еще самый популярный браузер и во многом браузер для непосвященных, это, мы надеемся, долгожданный старт из нас мастеров Web охватывает идея использования CSS3 же свободно, как мы делаем CSS 2.1.Однако, с IE9 не поддерживаются в версиях для Windows, прежде чем Vista, и многие предприятия по-прежнему работает XP и неохотно (или не могут) для обновления, это может занять некоторое время, пока подавляющее большинство наших пользователей увидят новые технологии поставлены на практике.

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

Полезные Analogy

Лучшая аналогия для объяснения CSS3, что я слышал относится к миру кино.Кинематографисты не может гарантировать, что их платформа зрители увидят свои фильмы на.Некоторые из них будут наблюдать за ними в кино, некоторые из них будут смотреть их дома, а некоторые будут смотреть их на портативные устройства.Даже среди этих немногих вариантов просмотра, есть еще огромный потенциал для различия: IMAX, DVD, Blu-Ray, объемный звук — кто-то может даже выбрать VHS

Итак, значит ли это, вы не должны использовать все великие вещи, что Blu-ray позволяет со звуком и видео только потому, что кто-то где-то не будет смотреть фильм на Blu-Ray плеер?Конечно, нет.Вы сделать опыт так хорошо, как вы можете сделать it, и тогда люди будут получать опыт, который подходит к тому, что они просмотра фильма on.

Много о CSS3 можно сравнить с 3-D технологии.Они оба передовых технологий, которые добавляют много опыта.Но сделать фильм без использования 3-D технология все еще вполне приемлемо, а иногда даже необходимо.Кроме того, вам не нужно выплеснуть CSS3 градиенты везде и использовать каждый шрифт можно найти.Но если некоторые действительно улучшить сайт, то почему бы не

Однако, просто приравняв CSS3 в 3-D попадает в точку.Во многих случаях, просто CSS3 позволяет нам делать вещи, которые мы делали в течение многих лет, но без всех hassle.

Изящно Ослабить или постепенно Повысить

В фильме, вы создаете лучший фильм вы можете сделать, а затем адаптировать продукт к смотровой площадке.Ничего не напоминает?Если вы баловались или даже принимать взглянуть на CSS3, это should.

Есть две школы мысли с CSS3 использования, и было бы с уверенностью сказать, что основным принципом как является поддержание юзабилити веб-сайта для тех, чьи браузеры не поддерживают CSS3 возможностей, обеспечивая при этом CSS3 усовершенствования для тех, чьи браузеры.Другими словами, убедитесь, что фильм по-прежнему выглядит хорошо даже без 3-D функции.Во многих отношениях,школы мысли схожи, и независимо от того, которое вы принимаете, вы будете сталкиваться с многими из тех же проблем и вопросов, только из разных angles.

Изящные Degradation

С изящная degradation Вы Код для лучшего browsers и убедиться, что, как различные слои CSS3 очистить от кожуры ходьбы от старых браузеров, тех пользователей, до сих пор получить работоспособное (даже если не всегда, как приятно) опыт.

Подход схож (хотя и не идентично) использование IE6 только стилей, в которой вы служите определенный набор стилей для большинства пользователей, служа альтернативные стили для пользователей IE6 и ниже.Как правило, IE6 версии сайта удаляет или заменяет стиль свойства, которые не работают в IE6, а также исправления для любого макета причуды.Изящная деградация отличается тем, что она делает использование природных откаты в самом браузере, а также исправления определяются возможности браузера, а не конкретных версиях браузера.Кроме того, изящные деградации обычно не требует совершенно другой набор стилей.В результате, однако, является то, что большинство пользователей получают нормальный вид, а затем хитрости применяются для людей, которые еще предстоит открыть лучше browser.

Агрессивные изящная деградация в центре недавней книге Энди Кларк, Hardboiled Web Design, и сопровождающих website делает большое использование изящная деградация.Есть много других примеров, в том числе ли веб-сайты должны выглядеть точно так же в каждом Browser.com, который был построен для демонстрации техники и Virgin Atlantic в vtravelled blog, разработанный Джоном O’Nolan, которыепоказывает некоторые большие откаты тонкие, что большинство пользователей даже не заметят.И если вы пользователь WordPress, почему бы не сравнить с администратором приборной панели в IE к нему в другом браузере

Прогрессивная Enhancement

Прогрессивное улучшение следит за процессом в обратном: что, опираясь на более низком поддержка браузеров и затем с помощью CSS3 для повышения опыта тех, с более способными браузеров.Это делалось, и до сих пор некоторые, с отдельным стилем повышение sheets.

В качестве отправной точки, большинство людей будут кодировать разумной основе стандартов браузера, затем добавить код для поддержки браузеров, таких как IE7 и 8, а затем, возможно, бросили в некоторые исправления для IE6 для хорошей мерой, а затем шаг назад идумаю: “Как я могу улучшить это с помощью CSS3?” Оттуда они бы добавить свойства, такие как закругленные углы, градиенты, @font-face замена текста и так on.

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

Примеры техники включают в личных сайтов Сэм Brown и Elliot Jay Stocks, которые обе имеют обогащения тип таблицы стилей, Эллиот говорил по этому вопросу, и слайды с его 2009 Web проезда South разговор “, перестать беспокоиться и покончим с этим(Progressive Укрепление и преднамеренного деградации) “сделать для хорошего reading.

Elliot Jay Stock’ с презентацией ‘ перестать беспокоиться и о With It (прогрессивное улучшение и преднамеренной деградации) ’

Сравнение двух, изящные деградации можно считать сверху вниз, начиная с браузерами наиболее способных использовать CSS3 и работает до старых браузеров, которые не имеют support.

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

Как это сделать

Независимо от вашего подхода, вы, несомненно, найдете себя на мысли, через общий резервный процесс в некоторой точке: что бы этот элемент выглядеть с некоторым свойством, и что бы он выглядел без него?Будет ли это выглядеть хорошо или сломанные?Если она будет выглядеть сломан, есть хороший шанс, что вы должны что-то сделать it.

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

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

Заказ Properties

Давайте бросим быстрый взгляд на заказ свойствами и, как браузеры их интерпретировать.Браузер производители изначально предлагают CSS3 функциональность браузера с помощью префиксов: -moz для Mozilla, -webkit для Chrome и Safari, -o оперы и т.д. Каждый браузер, то игнорирует любые префиксы не предназначены для этого.Конвенция является к списку браузера конкретных префиксы, а затем свойство по умолчанию, а именно:

.somediv {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; }

Да, это создает немногонакладные расходы, но если учесть, как такие эффекты были достигнуты, прежде чем CSS3, это действительно не much.

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

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

JavaScript

JavaScript является наиболее распространенным методом позволяет кросс-браузерной поддержки функций CSS3, и он может быть использован в качестве замены или для обеспечения свойств CSS3 в старых браузерах или быть использованы в качестве alternative.

Modernizr

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

Modernizr работает путем добавления классов в html элемент страницы, которые вы бы тогда звоните в стиле sheet.

Например, для отображения различной фоне, когда градиенты CSS3 не поддерживается, ваш код будет выглядеть примерно так:

.somediv {
	background: -webkit-gradient(linear, 0% 0%, 0% 100%,
	  from(#660C0C), to(#616665), color-stop(.6,#0D0933)); }

.no-cssgradients .somediv {
	background: url('/images/gradient.jpg'); }

И наоборот, для отображения различной фоне только тогда, когда свойство CSS3 поддерживается, то вы должны сделать следующее:

.cssgradients .somediv {
	background: -webkit-gradient(linear, 0% 0%, 0% 100%,
	  from(#660C0C), to(#616665), color-stop(.6,#0D0933));}

.somediv {
	background: url('/images/gradient.jpg'); }

Таким образом, вы контролируете то, что показано в отсутствии имущества, и вы портной вывод, что имеет смысл.В этом случае, вы могли бы служить градиент изображения в отсутствии поддержки CSS3 gradients.

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

CSS3 PIE

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

PIE делает Internet Explorer 6 до 8, способные обрабатывать несколько наиболее полезных CSS3 украшения features.

В то время как он не поддерживает множество функций, он позволяет использовать box-shadow border-radius и линейные градиенты в IE, не делая много дополнительного кода.Во-первых, загрузить CSS PIE наличие файла, а затем, когда вы хотитеприменять функциональность, вы должны включить его в CSS, например, так:

.somediv {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	behavior: url(path/to/PIE.htc); }

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

Selectivzr

CSS3 расширил свой репертуар за передовые селекторы, такие как [rel="selector"] и псевдо-селекторы, такие как :focus, включить селекторы, такие как :nth-of-type, которые дают вам гораздо больше контроля и сосредоточить внимание и позволяет обойтись без многихпрезентационных классов и идентификаторов.Поддержка селекторов сильно варьируется, особенно с широким разнообразием дополнительных селекторов быть introduced.

Таким образом, третий оружием в вашем арсенале CSS3 скорее всего, будет Selectivzr, которая позволяет продвинулись CSS3 селекторов, которые будут использоваться в старых браузерах, и направлен прямо на старые IE versions.

Зайдем на Selectivizr сайт и скачать и добавить в сценарий.Вы будете иметь, чтобы синхронизировать его с рамки JavaScript, таких как JQuery или MooTools, но скорее всего, вы работаете с одним уже.На главной странице стоит беглый взгляд, потому что не все селекторы поддерживаются всеми библиотеками JavaScript, поэтому убедитесь, что вам нужно, поддерживается вашей библиотеке choice.

Проблемы

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

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

Некоторые свойства CSS3: соображения и Fallbacks

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

Вся информация в этой статье о поддержке браузеров является правильной в мае 2011 года.Вы можете держать в курсе и проверить более подробную информацию о поддержке, посетив findmebyIP.Поддержка не был проверен в браузер версии старше, чем Chrome 7.0, Firefox 2.0, Opera 9, Safari 2 и Internet Explorer 6.

Пограничные Radius

поддержка: Google Chrome 7.0, Firefox (2,0 для стандартных углов, 3,5 для эллиптических углах), Opera 10.5, Safari 3.0, IE 9

Недвижимость: border-radius

Продавец prefixes: -webkit-border-radius -moz-border-radius

Пример usage (даже углы с радиусом 5 пикселей):

.somediv {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; }

Резервный поведения: закругленные углы будут отображаться square.

. WordPress входа в кнопки в IE (слева) и Google Chrome (справа)

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

А как насчет браузеров, которые не поддерживают border-radius?Самый простой ответ, не беспокойтесь.Оказывает закругленные углы в неподдерживаемых браузерах действительно стоит этого делать?Если это так, то вы должны делать только то, что вы делали в течение многих лет: JavaScript хаки и images.

Может ли это свойство сбить вас с толку?На самом деле, border-radius довольно проста.Будьте осторожны при использовании его на фоновые изображения, потому что есть, конечно, некоторые ошибки в некоторых версиях браузера, которые держат в углах изображения появлялись округлые.Но, кроме того, это одна из лучших поддерживаемых свойств CSS3 так far.

Пограничные Image

Поддержка: Google Chrome 7.0, Firefox 3.6, Opera 11, Safari 3.0, нет поддержки в IE

Недвижимость: border-image border-corner-image

префиксы: -webkit-border-image -moz-border-image

Пример usage (повторяющиеся изображения с высоты среза и шириной 10 пикселей):

.somediv {
	-webkit-border-image: url(images/border-image.png) 10 10 repeat;
	-moz-border-image: url(images/border-image.png) 10 10 repeat;
	border-image: url(images/border-image.png) 10 10 repeat; }

Резервный поведения: показывает стандартные границы CSS, если свойство имеет значение, или нет границ, если не specified.

border-image демо на CSS3.info.В нижней пункт показывает стандартное свойство border: double orange 1em.

border-image собственность менее возвестило среди новых свойств, отчасти потому, что она может быть немного трудно обернуть вокруг головы.Пока мы не будем вдаваться в подробности, рассмотрим образ вы работаете, и протестировать несколько вариантов до реализации имущества.Что будет граница выглядеть, если содержание переполнения?Как это будет приспособиться к содержанию?Положите некоторую мысль в вашем выборе между stretch и repeat.

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

Границы изображений, используемых на Blog.SpoonGraphics.Изображение слева является базой изображений для border.

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

Box Shadow

поддержка: Google Chrome 7.0, Firefox 3.6, Safari 3.0, IE 9

Недвижимость: box-shadow

префиксы: -webkit-box-shadow -moz-box-shadow (-moz больше не нужны на Firefox 4)

Пример usage (показывает черную тень, смещение вниз на 10 пикселей и право на 10 пикселей, и с радиусом размытия 5 пикселей):

.somediv {
	-moz-box-shadow: 10px 10px 5px #000;
	-webkit-box-shadow: 10px 10px 5px #000;
	box-shadow: 10px 10px 5px #000; }

Резервный поведения: тень не displayed.

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

Тонкая тень поле слева, и селективный границ резервных на right.

В его отсутствие?Вы можете использовать селективные границах (т.е. левая и нижняя граница подражать тонкие тени коробке)

.somediv {
	-moz-box-shadow: 1px 1px 5px #888;
	-webkit-box-shadow: 1px 1px 5px #888;
	box-shadow: 1px 1px 5px #888; }

.no-boxshadow .somediv {
	border-right: 1px solid #525252;
	border-bottom: 1px solid #525252; }

RGBa и HSLa

RGBa поддержки: Google Chrome 7.0, Firefox 3.0, Opera 10, Safari 3.0, IE 9

HSLA поддержки: Google Chrome 7.0, Firefox 3.0, Opera 10, Safari 3.0

Недвижимость: rgba hsla

Резервный поведения: цвет декларации игнорируются, и браузер возвращается к ранее указанным цвет, цвет по умолчанию или нет color.

.somediv {
	background: #f00;
	background: rgba(255,0,0,0.5); }

В приведенном выше примере, оба фоне заявлений задать красный цвет.Где RGBa поддерживается, он будет показан на 50% (0.5), а также в других случаях, резервный будет гореть красным (#f00).

24 Ways делает большое творческое использование RGBa.

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

Оба предлагают новые способы определения цвета, с дополнительным преимуществом в котором можно указать альфа-канал value.

Очевидны для резервного RGBa и HSLA является сплошным цветом, не проблема, но главное, чтобы не упустить это разборчивость.Полупрозрачный цвет может иметь совсем другой тон к оригиналу.Значение RGB показан в виде твердого вещества цвета и то же значение на 0,75 Непрозрачность может варьироваться в зависимости массово на фоне тени, так что не забудьте проверить, как ваш текст будет выглядеть против background.

Изменение прозрачности может повлиять на четкость наложением text.

Если прозрачность имеет важное значение, вы можете также использовать фоновые изображения PNG.Конечно, это приносит с с …

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