CSS4

W3C vẫn đang tiếp tục xây dựng để cập nhật lên phiên bản tiếp theo của CSS3 là CSS4, những gì chúng ta mong đợi ở những tính năng 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 từ năm 2011 và hiện tại vẫn đang triển khai để hoàn thiện, bạn có thể theo dõi những cập nhật tại website của W3C.

Có gì mới?

Kết hợp các các phần tử chọn

Pseudo-class

`:not`

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ụ:

CSS3

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

CSS4

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

Pseudo-class

`:matches`

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:

CSS3

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

CSS4

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

CSS3

a:link,
a:hover,
a:visited,
a:focus {
	*color: red;
}

CSS4

a:matches(:link, :hover, :visited, :focus) {
	*color: red;
}

Pseudo-class

`:any-link`

Với pseudo-class :any-link bạn sẽ rút ngắn dòng code hơn trong tình huống sau:

CSS3

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

CSS4

a:any-link {
	*color: red;
}

Pseudo-class

`:local-link`

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:

CSS3

Không có

CSS4

: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;
}

Trạng thái indeterminate của checkbox và radio

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ụ:

CSS3

Không có

CSS4



Label

Thêm bộ chọn về các phần tử theo cấu trúc cây

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ụ:

: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.

CSS3

Không có

CSS4

li:nth-match(even of .active) {
	*color: red;
}
p:nth-match(2n+1 of .active, .visible, .current) {
	*color: red;
}

Thêm bộ chọn với cấu trúc dạng table

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ụ:

CSS3

Không có

CSS4

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

Chọn phần tử cha

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ụ:

Ví dụ bê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ố.

CSS3

Không có

CSS4

body! header a.styleSwitcher:hover {
	*background-color: green;
}

Chọn phần tử trong form với trường yêu cầu bắt buộc và không bắt buộc

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ụ

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.

CSS3

Không có

CSS4



	*
	*