CSS3의 많은 새로운 기능은 많은 브라우저에서 지원되지 않거나 제대로 지원되지 않습니다. 그러나 프런트엔드 개발자로서 모든 브라우저가 이를 완벽하게 지원할 때까지 기다릴 수는 없습니다.
CSS3는 어떤 새로운 기능을 제공합니까? 간단히 말해서, CSS3는 이전에 단 몇 줄의 코드만으로 이미지와 스크립트를 사용해야 했던 많은 효과를 얻을 수 있습니다. 둥근 모서리, 그림 테두리, 텍스트 그림자, 상자 그림자 등 CSS3는 프런트엔드 개발자의 디자인 프로세스를 단순화할 뿐만 아니라 페이지 로딩 속도도 향상시킵니다.
이 글에서는 CSS3의 다양한 새로운 기능을 포괄적으로 살펴보겠습니다. 또한 이전 CSS 튜토리얼과 팁도 확인하는 것을 잊지 마세요.
대부분의 CSS3 기능을 사용하려면 원래 속성과 함께 제조업체별 확장을 사용해야 합니다. 그 이유는 지금까지 대부분의 브라우저는 일부 CSS3 속성만 지원하기 때문입니다. 불행하게도 일부 속성은 W3C에서 권장되지 않을 수도 있으므로 브라우저별 속성을 지정하여 표준 속성과 구별하는 것이 중요합니다(그런 다음 중복된 스타일인 경우 표준 호환 속성을 사용하면 이를 재정의합니다).
물론 이 접근 방식의 단점은 스타일 시트가 지저분해지고 브라우저 간 사이트 성능이 일관되지 않는다는 것입니다. 결국 우리는 스타일시트에 개인 브라우저 해킹의 필요성을 다시 도입하고 싶지 않습니다. Internet Explorer의 악명 높은 선택 윤곽, 깜박임 및 기타 태그는 수많은 스타일 시트에 사용되었으며 1990년대에 전설이 되었습니다. 이러한 태그는 여전히 많은 기존 웹사이트(다른 브라우저에서)를 일관성이 없거나 심지어 읽기 어렵게 만듭니다. 그리고 우리는 지금 같은 상황에 처하고 싶지 않습니다. 그렇죠?
그러나 웹사이트가 모든 브라우저에서 정확히 동일하게 보일 필요 는 없습니다 . 때로는 특정 효과를 얻기 위해 브라우저에서 개인 속성을 사용할 수도 있습니다.
가장 일반적인 개인 속성은 -webkit-으로 시작하는 Webkit 기반 브라우저(예: Safari), -moz-로 시작하는 Gecko 기반 브라우저(예: Firefox) 및 Konqueror(-khtml -)에 대한 것입니다. Opera(-o-) 및 Internet Explorer(-ms-)에는 모두 고유한 속성 확장이 있습니다(현재 IE8만 -ms- 접두사를 지원합니다).
전문 디자이너로서 우리는 이러한 개인 속성을 사용하면 스타일 시트가 유효성 검사를 통과하지 못하게 된다는 점을 인식해야 합니다. 따라서 이를 스타일의 최종 버전에 넣는 것은 현재 거의 없습니다. 그러나 실험이나 학습과 같은 일부 경우에는 최소한 표준 CSS 속성과 함께 스타일 시트에 작성하는 것을 고려할 수 있습니다.
CSS 선택기는 놀라울 정도로 강력한 도구입니다. 이를 통해 중복된 클래스, ID 또는 JavaScript를 사용하지 않고도 태그에 특정 HTML 요소를 지정할 수 있습니다. 그리고 대부분은 CSS3에 새로 추가되지는 않았지만 마땅히 널리 사용되지는 않았습니다. 깨끗하고 가벼운 태그를 만들고 구조와 성능을 더 잘 분리하려는 경우 고급 선택기가 매우 유용합니다. 태그의 클래스 및 ID 수를 줄이고 디자이너가 스타일 시트를 더 쉽게 유지 관리할 수 있도록 해줍니다.
세 가지 새로운 속성 선택기가 CSS3에 추가되었습니다.
[att^="value"][att$="value"][att*="value"]요소의 값 속성
a[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 均支持。
扩展阅读