Những điểm mới trong CSS4

CSS4 là những gì chúng ta mong đợi ở những tính năng của phiên bản tiếp theo sẽ có, CSS sẽ càng ngày càng giúp cho mã đánh dấu của bạn gọn hơn, có thể tác động được mãnh mẽ hơn và giảm bớt sự phụ thuộc vào các thư viện javaScript với những tính năng đơn giản. Mặc dù hiện tại chúng ta vẫn nỗ lực đưa CSS3 vào các website của mình nhưng chúng ta cũng đã phải rất hạn chế bởi IE8 vẫn còn tồn tại một thời gian tương đối dài nữa và IE9 chưa thực sự hổ trợ CSS3 tốt, có lẽ IE11 mới thực sự hoàn toàn hổ trợ CSS3 tốt nhất, vấn để chỉ là thời gian. Hiện CSS level 4 đã được W3C phác thảo và hiện tại vẫn đang triển khai để hoàn thiện. Bài viết này sẽ tìm hiểu về một số CSS selector mới sẽ được giới thiệu ở phiên bản CSS level 4.

Với CSS3 chúng ta có pseudo-class là :not() nhưng chỉ cho phép với một phần tử đơn, trong CSS4 bạn có thể liệt kê các phần tử chọn bằng cách thêm đối số ví dụ:

a:not([rel="external"], [rel="nofollow"]) {
    color: red;
}

Ở thời điểm hiện tại chưa có trình duyệt nào hỗ trợ cách thức này. Tiếp theo là pseudo-class :matches điều này thực sự hữu dụng khi bạn phải liệt kê nhiều thẻ chọn theo thừa kế mà chúng có những thẻ nào đó trùng nhau. Ví dụ thông thường chúng ta sẽ viết như sau:

section h1, article h1, aside h1 {
    color: red;
}

Bây giờ chúng ta có thể viết như thế này:

:matches(section, article, aside) h1 {
    color: red;
}

Rõ ràng với cách thức viết mới sẽ ngắn gọn và chặt chẽ hơn, hiện tại trình chuyệt Chrome và Firefox đã hỗ trợ nhưng bạn phải viết theo bộ nguồn mà trình duyệt quy định, ví dụ:

:-moz-any(section, article, aside) h1,
:-webkit-any(section, article, aside) h1{
    color: red;
}

pseudo-class :any-link, thông thường chúng ta thường viết như sau:

a:link,
a:visited {
   color: red;
}

Bây giờ bạn có thể viết ngắn gọn thành:

a:any-link {
   color: red;
}

Hiện tại vẫn chưa có trình duyệt nào hỗ trợ cách chọn này. Tiếp theo là Pseudo-class với liên kết nội bộ :local-link, đây sẽ là cách chọn những thẻ liên kết với nhiều mục đích khác nhau về liên kết bên trong website hay liên kết tới trang khác hoặc các cấp của đường dẫn liên kết, ví dụ bạn có thể chọn những liên kết bên trong website của bạn:

:local-link {
   text-decoration: none;
}

Ví dụ chọn theo các cấp cùa đường dẫn liên kết:

/*  Nhứng liên kết dạng không có cấp http://example.com/  */
:local-link(0) {
    color: red;
}
/* Nhứng liên kết có một cấp http://example.com/year/ */
:local-link(1) {
    color: red;
}
/* Nhứng liên kết có 2 cấp http://example.com/year/month/ link(s) */
:local-link(2) {
    color: red;
}

Hiện chưa có trình duyệt nào hỗ trợ những selector này

Thông thường các nút này có vài trạng thái là :enable, :disable, : checked và có một trạng thái mới là :indeterminate, nó là trạng thái không ảnh hưởng tới giá trị của input field và mặc định nó chỉ hiện thị lần đầu tiên khi field chưa được tác động. Trạng thái này mặc định không được hiển thị mà bạn phải bật nó bằng javaScript với thuộc tính indeterminate. Hiện bộ chọn mới của CSS có thể cho phép bạn chọn field với trạng thái này thông qua pseudo-class :indeterminate, hầu hết các trình duyệt hiện đại đều đã hỗ trợ cách chọn này. Ví dụ:

<style type="text/css">
:indeterminate {
   opacity: 0.3;
}
</style>
<label for="test">Label</label>
<input type="checkbox" id="test" />
<script type="text/javascript">
document.getElementById("test").indeterminate = true;
</script>

Chúng ta đã quen với pseudo-class :nth-child giúp chúng ta chọn phần tử theo thứ tự hay một quy tắc nào đó. Ví dụ nếu muốn chọn các phần tử có thứ tự là chắn chúng ta có nth-child(even) nếu bây giờ chúng ta muốn chọn các phần tử là chẵn nhưng có tên class là .active thì sao. Để tăng khả năng chọn phần tử ở phiên bản tiếp theo của CSS chúng ta sẽ có pseudo-class :nth-math và nth-last-math. ví dụ:

li:nth-match(even of .active) {
   color: red;
}
/* Bạn có thể liệt kê bằng dấu phẩy */
p:nth-match(2n+1 of .active, .visible, .current) {
   color: red;
}

:nth-last-math cũng tương tự như :nth-math nhưng nó sẽ bắt đầu theo thứ tự từ dưới lên. Hiện tại chưa có trình duyệt nào hỗ trợ những pseudo-class này.

Mặc dù vẫn có các cách chọn các cột trong table với các selector theo cấu trúc cây DOM nhưng để thêm trực quan và ngắn gọn đồng thời nâng cao tính hữu dụng của table thì css4 sẽ có thêm một số pseudo-class mới, ví dụ:

:column(.highlight) {
    background-color: yellow;
}
:nth-column(2n+1) {
    background-color: gray;
}
:nth-last-column(3n+1) {
    background-color: green;
}

Hiện chưa có trình duyệt nào hỗ trợ những bộ chọn này.

Chúng ta vẫn đang thắc mắc làm sao để chọn phần tử tổ tiên của một phần tử với CSS, chúng ta không muốn thực hiện điều này bằng javaScript và một trong những điều mong đợi nhất này trong phiên bản tiếp theo của CSS sẽ có. Ví dụ

body! header a.styleSwitcher:hover {
   background: red;
}

Ví dụ trên phần từ được định kiểu với CSS là body bởi dấu "!". Thật quá hữu dụng với cách chọn này. Hiện tại chưa có trình duyệt nào hỗ trợ cách chọn này nhưng chúng ta tin rằng các trình duyệt sẽ mau chóng được cập nhật khi CSS4 được chính thức công bố.

Với form HTML5 chúng ta có thuộc tính required="required" để yêu cầu người dùng phải nhập những trường cần thiết và để định kiểu cho những trường yêu cầu bắt buộc hoặc không bắt buộc sẽ có 2 pseudo-class mới là :required và :optional. Ví dụ

<style>
:required {
border: 1px solid red;
}
:optional {
border: 1px solid gray;
}
</style>
<form method="get">
    <input type="text" required="required" />
    <input type="text" />
</form>

Trừ trình duyệt IE thì hiện hầu hết các trình duyệt hiện đại đã hỗ trợ những pseudo-class này. Còn rất nhiều thứ nữa ở phiên bản css4 tiếp theo mọi thứ vẫn được tiến hành và đây mới chỉ là những bản thảo, chúng ta còn có các cải tiến css về text, về images, về background... chúng ta sẽ cùng chờ đợi. Có một điều chúng ta thấy rằng CSS ngày càng cải tiến thì nó càng có tác động mạnh mẽ đến giao diện người dùng trên web hơn, ngày càng ít phải dùng tới javaScript ở những chức năng đơn giản hơn, ngày càng ít phải sử dụng hình ảnh làm giao diện hơn và ngày càng ít phải dùng class name hơn kết hợp với những cải tiến ở ngôn ngữ đánh dấu HTML.