Хотя многие новые функции CSS3 не поддерживаются многими браузерами или поддерживаются недостаточно хорошо. Но как фронтенд-разработчик вы не можете ждать, пока все браузеры полностью его поддержат, прежде чем начинать обучение.
Какие новые возможности приносит нам CSS3? Проще говоря, CSS3 позволяет добиться многих эффектов, которые раньше требовали использования изображений и скриптов, всего за несколько строк кода. Например, закругленные углы, границы изображений, тени текста, тени блоков и т. д. CSS3 не только упрощает процесс проектирования для фронтенд-разработчиков, но и ускоряет загрузку страниц.
В этой статье давайте подробно рассмотрим различные новые возможности CSS3.
Чтобы использовать большинство функций CSS3, нам необходимо использовать расширения, специфичные для производителя, наряду с исходными свойствами. Причина в том, что до сих пор большинство браузеров поддерживали только некоторые свойства CSS3. И, к сожалению, некоторые свойства могут даже не быть рекомендованы W3C, поэтому важно отличать их от стандартных свойств, указывая свойства, специфичные для браузера (а затем использовать совместимые со стандартами свойства, когда они являются избыточными, стиль переопределит их).
Конечно, недостатком этого подхода является то, что он приведет к беспорядочной таблице стилей и несогласованной производительности сайта в разных браузерах. В конце концов, мы не хотим вновь вводить необходимость взлома приватных браузеров в наших таблицах стилей. Печально известные теги Marquee, Blink и другие теги Internet Explorer использовались во многих таблицах стилей и стали легендой в 1990-х годах; они до сих пор делают многие существующие веб-сайты (в других браузерах) непоследовательными или даже трудными для чтения. И мы не хотим сейчас оказаться в такой же ситуации, верно?
Однако веб-сайт не обязательно должен выглядеть одинаково во всех браузерах. Иногда можно использовать частные свойства браузера для достижения определенных эффектов.
Наиболее распространенные частные свойства относятся к браузерам на основе Webkit (например, Safari), которые начинаются с -webkit-, и браузерам на основе Gecko (например, Firefox), которые начинаются с -moz-, и Konqueror (-khtml -), Opera (-o-) и Internet Explorer (-ms-) имеют свои собственные расширения свойств (в настоящее время только IE8 поддерживает префикс -ms-).
Как профессиональные дизайнеры, мы должны понимать, что использование этих частных свойств приведет к тому, что наши таблицы стилей не пройдут проверку . Поэтому включение их в окончательную версию стиля на данный момент является редкостью. Но в некоторых случаях, например, при экспериментировании или обучении, мы можем, по крайней мере, рассмотреть возможность записи их в таблицу стилей вместе со стандартными свойствами CSS.
Селекторы CSS — невероятно мощные инструменты: они позволяют нам указывать определенные элементы HTML в тегах без необходимости использовать избыточные классы, идентификаторы или JavaScript. И большинство из них не были добавлены в CSS3 недавно, но не получили должного широкого использования. Расширенные селекторы очень полезны, если вы пытаетесь добиться чистого, легкого тега и лучшего разделения структуры и производительности. Они могут уменьшить количество классов и идентификаторов в тегах и облегчить дизайнерам поддержку таблиц стилей.
В CSS3 были добавлены три новых селектора атрибутов:
[att^="value"]
Соответствует элементам, содержащим атрибуты, начинающиеся с определенного значения.
[att$="value"]
Соответствует элементам, которые содержат атрибуты, заканчивающиеся определенным значением.
[att*="value"]
Соответствует элементам, содержащим атрибут с определенным значением.
атрибут значения элемента
а[title$="tweetCC"] {
position: absolute;
top: 0;
right: 0;
display: block;
width: 140px;
height: 140px;
text-indent: -9999px;
}
浏览器支持:只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你的样式中使用属性选择器是比较安全的。
连字符CSS3中唯一新引入的连字符是通用的兄弟选择器（同级）。它针对一个元素的有同一个父级节点的所有兄弟级别元素。
比如，给某个特定的div的同级的图片添加一个灰色的边框(div和图片应该有同一个父级节点)，在样式表中定义下面的样式就足够了：
div~img {
border: 1px solid #ccc;
}
浏览器支持：所有的主要浏览器都支持这个通用的兄弟选择器除了我们最爱的IE6 ！
伪类或许在CSS3中增加最多的就是新的伪类了，这里是一些最有趣和最有用的：
:nth-child(n)
让你基于元素在父节点的子元素的列表位置来指定元素。你可以是用数字、数字表达式或odd 和even 关键词(对斑马样式的列表很完美)。所以如果你想匹配在第四个元素之后的一个3个元素的分组，你可以简单的这样使用：
:nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...个元素*/
:nth-last-child(n)
与上个选择器的思想同样，但是从后面匹配元素（倒序），比如，为了指定一个div里面的最后两个段落，我们可以使用下面的选择器：
div p:nth-last-child(-n+2)
:last-child
匹配一个父节点下的最后一个子元素，等同于:nth-last-child(1)
:checked
匹配选择的元素，比如复选框
:empty
匹配空元素（没有子元素）。
:not(s)
匹配所有不符合指定声明(s)的元素。比如，如果你想让所有的没有使用”lead”类的段落的显示为黑色，可以这样写：
p:not([class*="lead"]) { color: black; }
Andrea Gandino 在他的网站上使用:last-child 为选择器指定每篇日志的最后一个段落，并将其的外间距(margin)设置为0:
#primary .text p:last-child { margin: 0; }
浏览器支持: Webkit核心和Opera 浏览器支持所有新的CSS3 伪类，Firefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, only-child, :root, :empty, :target, :checked, :enabled 和:disabled，但是Firefox 3.5 将更加广泛的支持CSS3 选择器。Trident核心浏览器(Internet Explorer)事实上不支持这些伪选择器。
伪元素在CSS3中唯一引入的伪元素是::selection.它可以让你指定被用户高亮（选中）的元素。
浏览器支持:目前没有任何一款Internet Explorer 或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。