Каскадные таблицы стилей были введены 13 лет назад, и широко применяется CSS 2.1 стандарт просуществовал 11 лет.Когда мы смотрим на веб-сайты, которые были созданы 11 лет назад, it’ ясно, что мы находимся за тысячи километров от той эпохи.Это довольно удивительно, как много веб-разработки развивалась на протяжении многих лет, таким образом, мы никогда не мог себе представить, then.

Итак, почему это, что, когда дело доходит до CSS, we’ застряли в прошлом, и так боится экспериментировать?Почему это, что мы все еще используем неудобные CSS хаки и JavaScript-зависимые методы для укладки?Почему can’ т мы сделать использование богатых функций CSS3 и инструменты, доступные в современных веб-browsers и принять качество наших конструкций на следующий уровень

It’ пора ввести функций CSS3 в наших проектах и ​​не бояться постепенно включать CSS3 свойств и селекторов в наших таблицах стилей.Оформление наши клиенты осведомлены о преимущества CSS3 (и позволяя старше устаревших браузеров исчезнет) находится в нашей власти, и мы должны действовать на нее, особенно если это означает создание веб-сайтов более гибким и сокращение развитие и поддержание costs.

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

Пожалуйста, не поленитесь почитать наши предыдущие, статья по теме:

• продвинуть Ваш веб-дизайна в будущее с CSS3

Использование браузера Конкретные Properties

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

Недостатков этого подхода, конечно, грязный стилей и непоследовательной дизайна в веб-браузерах.В конце концов, мы не хотим возродить потребность в собственных хаки браузера в нашей таблице стилей.Интернет Explorer’ с печально известной <marquee> <blink> теги и другие были заняты во многих стилей и стала легендарной в 1990-х годах, они до сих пор делают многие существующие веб-сайты противоречивые или даже нечитаемыми.И мы don’ хотите, чтобы поставить себя в такой же ситуации сейчас, прямо

Тем не менее, веб-сайты сделать not должна выглядеть точно так же во всех браузерах.И с помощью браузера специфическими свойствами для достижениячастности эффекты в некоторых браузерах иногда делает sense.

Наиболее распространенные extensions являются те, которые используются для Webkit-браузеры (например, Safari), который начинается с -webkit-, и Gecko-браузеры (например, Firefox), которые начинаются с -moz-.Konqueror (-khtml-), Opera (-o-) и Internet Explorer (-ms-) имеют свои собственные extensions.

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

Полезные Links

• Производитель специальных расширений и W3C
• Производитель специальных расширений для CSS3
• конкретного производителя properties

1.Selectors

CSS селекторы невероятно мощный инструмент: они позволяют нацелены на конкретные элементы HTML в нашей markup без необходимости полагаться на ненужные классы, идентификаторы и JavaScripts.Большинство из них aren’ т новых для CSS3, но не так широко, как они должны быть.Расширенный селекторов может быть полезно, если вы пытаетесь достичь чистый, легкий разметки и лучшее разделение структуры и представления.Они могут уменьшить количество классов и идентификаторов в разметку и сделать его проще для дизайнеров для поддержания стиля sheet.

Характеристики selectors

Три новых видов селекторов атрибутов являются частью CSS3 спецификации:

• [att^="value"]
  Матчи элементов, атрибутов, которая начинается с указанной value.
• [att$="value"]
  Матчи элементов, атрибутов, который заканчивается с указанным value.
• [att*="value"]
  Матчи элементов, атрибутов, содержащий указанную value.

tweetCC используется селектор атрибута целевой ссылки, которые имеют название атрибута заканчивается в словах “ tweetCC”:

a[title$="tweetCC"] { 
    position: absolute; 
    top: 0; 
    right: 0; 
    display: block; 
    width: 140px; 
    height: 140px; 
    text-indent: -9999px; 
    }

Поддержка браузеров: единственный браузер, который doesn’ T поддержка CSS3 селекторов атрибутов IE6.Оба IE7 и IE8, Opera и Webkit и Gecko-браузеров делать.Таким образом, используя их в свою таблицу стилей, безусловно, safe.

Combinators

Только новый вид комбинатор, введенные в CSS3 является общим селектором брата.Он предназначен для всех братьев и сестер элемента, которые имеют одинаковые parent.

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

div~img {
	border: 1px solid #ccc;
	}

Поддержка браузеров: Все основные браузеры поддерживают общую выбора, кроме братьев наших любимых: Internet Explorer 6.

Псевдо-Classes

Наверное, самая обширная новое дополнение к CSS новые псевдо-классы.Вот некоторые из наиболее интересных и полезных из них:

• :nth-child(n)
  Позволяет целевых элементов на основе их позиции в parent’ список с дочерних элементов.Вы можете использовать числа, число выражения или odd и even ключевые слова (идеально подходит для Zebra-стиль строк таблицы).Итак, если вы хотите, чтобы соответствовать группе из трех элементов после элемента вперед, вы можете просто использовать:

   name="code">:nth-child(3n+4) { background-color: #ccc; }

• :nth-last-child(n)
  следует той же идее, что и предыдущий выбор, но совпадает с последним детей родительский элемент.Например, целевой последних двух пунктах в div, мы будем использовать следующий селектор:

   name="code">div p:nth-last-child(-n+2)

• :last-child
  Матчи последнего ребенка одного из родителей, и эквивалентно

   name="code">:nth-last-child(1)

• :checked
  Матчи элементов, которые проверяются, например, проверить boxes.
• :empty
  Матчи элементы, которые не имеют детей или empty.
• :not(s)
  Соответствует всем элементам, которые не соответствуют указанной декларации (ы).Например, если мы хотим, чтобы все пункты, что aren’ T класса “ lead” появляются черные, мы должны написать:

   name="code">p:not([class*="lead"]) { color: black; }

  .

На своем сайте, Андреа Gandino использует :last-child псевдо-селектор для целевой последний абзац каждый блог и применять маржа от 0 до него:

#primary .text p:last-child { 
    margin: 0; 
    }

Поддержка браузеров: Webkit основе оперы и браузеры поддерживают все новые CSS3 псевдо-селекторы.Firefox 2 и 3 (на основе Gecko) поддерживают только :not(s) :last-child nly-child :root :empty :target :checked :enabled и :disabled, но Firefox 3.5будет иметь широкой поддержкой CSS3 selectors.Trident-браузеров (Internet Explorer) практически не имеют поддержки псевдо-selectors.

Псевдо-Elements

Только псевдо-элемент введен в CSS3 составляет ::selection.Это позволяет целевых элементов, которые были выделены user.

Поддержка браузеров: Нет текущих Internet Explorer или Firefox браузеры поддерживают ::selection псевдо-элемент.Safari, Opera и Chrome do.

Полезные Links

• Селекторы Уровень 3: W3C рабочей Draft
• CSS3: Селекторы атрибутов: CSS3.info
• Таблица совместимости:CSS3 Selectors
• CSS селекторы и псевдо-селекторов браузера compatibility
• CSS3 характеристики Selectors
• :: selection
• Генеральный Sibling Selector
• CSS3 псевдо-classes

2.RGBA и Opacity

RGBA позволяет указать не только цвет, но непрозрачность element.Некоторые браузеры по-прежнему don’ T поддерживают его, так it’ хорошая практика, чтобы указать до цвета RGBa другой цвет без прозрачности, что старые браузеры будут understand.

Tim Van Damme используется RGBA цвета на эффекты при наведении курсора на links

На своем сайте, Tim Van Damme используется RGBA цвета на эффекты при наведении, например, в сети ссылки на его домашней странице:

#networks li a:hover,
#networks li a:focus {
    background: rgba(164, 173, 183, .15);
    }

При настройке цветов RGBA, мы должны указать красного, синего и зеленого значения либо с целым числом от 0 до 255 или с процентами.Альфа значение должно быть между 0,0 и 1,0, например, 0,5 для 50% opacity.

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

Вот пример того, как мы хотели бы добавить 80% непрозрачностью div:

div { 
	opacity: 0.8; 
	}

Поддержка браузеров: RGBA поддерживается Webkit-браузеров.Не браузера Internet Explorer поддерживает его.Firefox 2 does’ T поддерживают его тоже, но делает Firefox 3, как это делает Opera 9.5.Прозрачность поддерживается оперы и Webkit и Gecko-браузеры, но не поддерживается либо IE release.

Полезные Links

• CSS цвет модуля Уровень 3: W3C рабочей Draft
• RGBA цвета: CSS3.info
• RGBa Browser Support
• RGBA цвета space
• ? Есть CSS3 RGBa готов к рок
• Super-Высокий Кнопки с CSS3 и RGBA

3.Multi-Column Layout

Этот новый CSS3 селектор позволяет достичь несколькими колонками без необходимости использовать несколько div с.Браузер обрабатывает свойства и создает столбцы, давая текста газеты, какflow.

tweetCC использует CSS3 нескольких столбцов селектор на своей домашней page

tweetCC отображает вступительный текст в четыре колонки на своей домашней странице.Четыре колонки aren’ T размещенных div S, вместо этого, веб-дизайнер использует CSS3 мульти-колонки следующим образом:

.index #content div { 
    -webkit-column-count : 4; 
    -webkit-column-gap : 20px; 
    -moz-column-count : 4; 
    -moz-column-gap : 20px; 
    }

Мы можем определить три вещи с этой селектора: количество столбцов (column-count), ширина каждого столбца (column-width, не используется в примере), и разрыв между столбцами (column-gap).Если column-count не установлен, браузер вмещает столько столбцов, которые вписываются в имеющиеся width.

Добавить вертикальный разделитель между столбцами, мы можем использовать column-rule имущество, которое функционирует в значительной степени как граница собственности:

div {
    column-rule: 1px solid #00000;
    }

Браузеры, которые don’ T поддерживают эти свойства отображения содержимого в виде простого текста, как если бы не было columns.

Дополнительные свойства:. column-break-after column-break-before column-span column-fill

Поддержка браузера. Multi-колонками поддерживается Safari 3 и 4 и Firefox 1.5

Полезные Links

• CSS3 модуля: Multi-колонки: W3C рабочей Draft
• Columns
• CSS3 – Multi-Column Layout Demonstration
• CSS3 Columns
• Проектирование tweetCC
• Введение в CSS3 – Часть 5: Несколько Columns

4.Несколько Backgrounds

CSS3 позволяет применять многослойные фоны к элементу с помощью нескольких свойств, таких как background-image background-repeat background-size background-position background-origin и background-clip.

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

div {
	background: url(example.jpg) top left no-repeat, 
		url(example2.jpg) bottom left no-repeat, 
		url(example3.jpg) center center repeat-y;
	}

Первое изображение будет тот, “ closest” в user.

Более сложный вариант того же свойства были бы:

div {
	background: url(example.jpg) top left (100% 2em) no-repeat, 
		url(example2.jpg) bottom left (100% 2em) no-repeat, 
		url(example3.jpg) center center (10em 10em) repeat-y;
	}

В этом случае (100% 2em) есть background-size значение; фоновое изображение в верхнем левом углу будет простираться на всю ширину div и быть 2em high.

Потому что очень немногие браузеры поддерживают его, и потому не отображается фон на веб-сайт действительно может нарушить website’ S визуального воздействия, это не широко используется CSS3.Тем не менее, это может значительно улучшить веб-designer’ S рабочий процесс и значительно снизить количество разметки, которые могли бы быть необходимы для достижения того жеeffect.

Поддержка браузеров: несколько фонов работать только на Safari и Konqueror.

Полезные Links

• наложения нескольких фоне images
• Несколько фонов с CSS3 и CSS3.info
• Введение в CSS3, часть 6: Backgrounds

5.Слово Wrap

word-wrap свойство используется для , чтобы длинные слова из overflowing.Он может иметь одно из двух значений: normal и break-word.normal значение (по умолчанию) распадается только на словах позволил точек разрыва, как и дефис.Если break-word используется, слово может быть нарушена в случае необходимости, чтобы соответствовать данного пространства и предотвращения overflowing.

область WordPress администратор использует word-wrap В данных tables.

В WordPress админке, word-wrap свойство используется для элементов таблицы, например, в списках постов и страниц:

.widefat * {
    word-wrap: break-word;
    }

Поддержка браузеров: word-wrap поддерживается Internet Explorer и Safari.Firefox будет поддерживать его в версии 3.5.

Полезные Links

• Силы Упаковка: ‘ слово wrap’ — CSS Текст Уровень 3: W3C рабочей Draft
• перенос слов: CSS3.info
• CSS слово wrap
• перенос слов: Mozilla разработчика Center

6.Текст Shadow

Несмотря на существующие с CSS2, text-shadow не является широко используется CSS собственности.Но это, весьма вероятно, будет широко принята с CSS3.Собственность дает дизайнерам новые кросс-браузерный инструмент для добавления измерения в конструкции и сделать текст стоять out.

Вы должны убедиться, однако, что текст в ваш дизайн читаем в случае user’ с браузером doesn’ T поддерживает расширенные свойства CSS3.Дайте цвет текста и фона достаточно отличие в том случае, text-shadow собственность isn’ T оказанные или понять должным образом browser.

Beakapp использует text-shadow собственности на своем сайте. Для содержания area

BeakApp.com использует text-shadow имущество за содержание области, добавить глубину и размерность в text и сделать это выделяются без использования замены изображениятехнику.Это свойство отображается только в Safari и Google Chrome.

CSS для website’ главной навигации показывает следующее:

.signup_area p {
	text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

Здесь мы имеем цвет тени (с помощью RGBA, см. выше), а затем вправо (координата х) и нижней (у-координата) смещение, и, наконец, размытие radius.

Чтобы применить несколько теней текста, отделить тени с запятой.Например:

p {
    text-shadow: red 4px 4px 2px, 
		yellow -4px -4px 2px, 
		green -4px 4px 2px;
    }

Поддержка браузеров: Webkit-браузеры Opera 9.5 и поддержкой text-shadow.Internet Explorer doesn’ T поддерживает его, и Firefox будет поддерживать только его версия 3.5.

Полезные Links

• Текст Shadows: ‘ текст-shadow’ — W3C рабочей Draft
• Текст тени: Web таблиц стилей CSS советы и tricks
• Text-тени, как Photoshop эффекты с помощью CSS — CSS3.info
• сделать прохладный и умный эффекты текста с помощью CSS Text-Shadow
• Safari’ с Text-Тень Anti-Aliasing CSS Hack
• текст-shadow
• текст-тень: Mozilla разработчика Center

7.@ Шрифт лицу-Attribute

Несмотря на то, одна из самых ожидаемых CSS3 features (хотя it’ ы были вокруг с CSS2), @font-face все еще не так широко принята в Интернете и других свойств CSS3.Это объясняется главным образом лицензированию шрифтов и вопросы авторского права: встроенные шрифты легко скачать из Интернета, одной из основных проблем ввести foundries.

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

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