على الرغم من أن العديد من ميزات CSS3 الجديدة غير مدعومة من قبل العديد من المتصفحات، أو أنها غير مدعومة بشكل جيد. ولكن كمطور للواجهة الأمامية، لا يمكنك الانتظار حتى تدعمه جميع المتصفحات بشكل كامل قبل التعلم.
ما هي الميزات الجديدة التي يقدمها لنا CSS3؟ ببساطة، يمكن لـ CSS3 تحقيق العديد من التأثيرات التي كانت تتطلب سابقًا استخدام الصور والبرامج النصية في بضعة أسطر فقط من التعليمات البرمجية. مثل الزوايا الدائرية وحدود الصورة وظلال النص وظلال المربع وما إلى ذلك. لا يعمل CSS3 على تبسيط عملية التصميم لمطوري الواجهة الأمامية فحسب، بل يعمل أيضًا على تسريع تحميل الصفحة.
في هذه المقالة، دعونا نلقي نظرة شاملة على الميزات الجديدة المتنوعة لـ CSS3. لا تنس أيضًا الاطلاع على بعض دروسنا ونصائحنا السابقة حول CSS:
من أجل استخدام معظم ميزات CSS3، يتعين علينا استخدام ملحقات خاصة بالشركة المصنعة بالإضافة إلى الخصائص الأصلية. والسبب هو أن معظم المتصفحات حتى الآن تدعم فقط بعض خصائص CSS3. ولسوء الحظ، قد لا يتم حتى التوصية ببعض الخصائص من قبل W3C، لذلك من المهم تمييزها عن الخصائص القياسية عن طريق تحديد خصائص خاصة بالمتصفح (ثم استخدام الخصائص المتوافقة مع المعايير عندما تكون زائدة عن الحاجة وسيتجاوزها النمط).
بالطبع، عيب هذا الأسلوب هو أنه سيؤدي إلى ورقة أنماط فوضوية وأداء غير متناسق للموقع بين المتصفحات. بعد كل شيء، لا نريد إعادة تقديم الحاجة إلى اختراق المتصفحات الخاصة في أوراق الأنماط الخاصة بنا. تم استخدام علامات التحديد والوميض وغيرها من علامات Internet Explorer سيئة السمعة في العديد من أوراق الأنماط وأصبحت أسطورة في التسعينيات؛ ولا تزال تجعل العديد من مواقع الويب الموجودة (في المتصفحات الأخرى) غير متسقة أو حتى صعبة القراءة. ونحن لا نريد أن نضع أنفسنا في نفس الموقف الآن، أليس كذلك؟
ومع ذلك، لا يلزم أن يبدو موقع الويب متماثلًا تمامًا في جميع المتصفحات. في بعض الأحيان يكون من الممكن استخدام الخصائص الخاصة في المتصفح لتحقيق تأثيرات محددة.
الخصائص الخاصة الأكثر شيوعًا هي للمتصفحات المستندة إلى Webkit (مثل Safari)، والتي تبدأ بـ -webkit-، والمتصفحات المستندة إلى Gecko (مثل Firefox)، والتي تبدأ بـ -moz-، وKonqueror (-khtml -)، يحتوي كل من Opera (-o-) وInternet Explorer (-ms-) على امتدادات خصائص خاصة بهم (حاليًا يدعم IE8 فقط البادئة -ms-)
كمصممين محترفين، علينا أن ندرك أن استخدام هذه الخصائص الخاصة سيجعل أوراق الأنماط الخاصة بنا تفشل في اجتياز التحقق من الصحة . لذا فإن وضعها في الإصدار النهائي من النمط أمر نادر حاليًا. لكن في بعض الحالات، مثل التجريب أو التعلم، يمكننا على الأقل التفكير في كتابتها في ورقة أنماط مع خصائص CSS القياسية.
تعتبر محددات CSS أدوات قوية بشكل لا يصدق: فهي تسمح لنا بتحديد عناصر HTML محددة في العلامات دون الحاجة إلى استخدام فئات أو معرفات أو JavaScripts زائدة عن الحاجة. ومعظمها لم تتم إضافته حديثًا إلى CSS3، ولكن لم يتم استخدامها على نطاق واسع كما ينبغي. تعتبر المحددات المتقدمة مفيدة جدًا إذا كنت تحاول الحصول على علامة نظيفة وخفيفة الوزن وفصل أفضل بين البنية والأداء. يمكنها تقليل عدد الفئات والمعرفات في العلامات وتسهيل صيانة أوراق الأنماط على المصممين.
تمت إضافة ثلاثة محددات سمات جديدة إلى 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 均支持。
扩展阅读