CSS4 - Có thể bạn chưa biết?

Giới thiệu

Hiện tại, CSS3 vẫn đang là phiên bản CSS đang rất được ưa chuộng và sử dụng rộng rãi ở hầu hết các trang web hiện nay. Vậy các bạn đã nghe đến CSS4? Chắc chắn rồi, nó chính là phiên bản tiếp theo của CSS là CSS3, CSS4 hiện nay vẫn đang phát triển và có rất nhiều phương thức mới được thêm vào. Vậy nó là gì và có gì khác biệt so với phiên CSS3 và có những tính năng nào đã bắt đầu được hỗ trợ cho các trình duyệt web hiện nay?

Mutability

Đầu tiên phải nói đến đó là phương thức Mutability. Đây là 1 phương thức của CSS4 cho phép tạo pseudo-class hay nôm na là lớp giả (tương tự như :before hay :after của CSS3). Mutability có 2 trạng thái là ::read-only (chỉ đọc) và ::read-write (đọc-ghi), nghĩa là khi dùng 2 thuộc tính này sẽ làm cho trạng thái của cấu trúc HTML thay đổi tùy theo chức năng của các element. Lớp giả này có thể kết hợp với thuộc tính contenteditable của HTML5 để cho hiệu quả cao hơn. Ví dụ: HTML viết:

<p>Content (ready-only)</p>
<input type="text" value="Test (read-write)" />
<section contenteditable="true">
    <h2>Edit away!</h2>
    <p>Here stands a typical website text.</p>
</section>

CSS viết

:read-only {
  color: red;
}
 
:read-write {
  color: blue;
}

Thuộc tính contenteditable=true trong HTML cho phép người dùng có thể chỉnh sửa nội dung bên trong. Kết quả: https://codepen.io/anon/pen/KqqGrX Trình duyệt hỗ trợ Firefox: 36+, Chrome: 32+, Opera 14+, Safari 8+

Attribute case-sensitivity

Tiếp theo là phương thức attribute case-sensitivity. Phương thức này gần giống với phương thức [attribute] trong CSS2, nhưng ở phiên bản CSS4 này nó còn hỗ trợ chúng ta phân biệt cả chữ hoa, chữ thương trong bảng mã ASCII. Ta xem ví dụ sau đây. Ví dụ: HTML viết:

<div>
  <a href="test.pdf">Test</a>
  <a href="test.PDF">Test</a>
  <a href="test.pDF">Test</a>
  <a href="test.html">Test</a>
  <a href="test.xml">Test</a>
</div>

CSS viết:

a[href$="pdf" i] {
   color: red;
}

Kết quả: https://codepen.io/tranquocy/pen/YQQdQe Trình duyệt hỗ trợ: Firefox: 47+, Chrome: 49+, Opera 36+, Safari 9+

Hyperlink

Đây là phương thức của CSS4 truy cập đến các anchors của hyperlinks (siêu liên kết) để style cho element đó. Ví dụ: HTML viết:

<div>
  <a href="">CSS</a>
  <a href="http://www.w3.org/">W3C</a>
</div>

CSS viết:

:any-link {
  color: red;
}

Kết quả: https://codepen.io/tranquocy/pen/weeQdr Trình duyệt hỗ trợ Phương thức này của CSS chỉ mới hỗ trợ cho trình duyệt Firefox 50 trở lên.

Matches-any

Phương thức này của CSS4 cho phép chúng ta truyền vào 1 danh sách các phần từ cha của phần tử đang được nhắc đến. Nó cho phép bạn tạo ra bộ selectors bởi các thiếp lập khớp với tất cả các selectors đã chọn. Từ đó CSS sẽ chỉ style cho các phần từ phù hợp với các đối số đã được khai báo trong danh sách. Để hiểu rõ hơn ta xem xét ví vụ sau. Ví dụ: HTML viết:

<section>
  <h1>Section: Hello World!</h1>
  <p>But I must explain to you how...</p>
</section>

<article>
  <h1>Article: Hello World!</h1>
  <p>But I must explain to you how...</p>
</article>

<header>
  <h1>Header: Hello World!</h1>
  <p>But I must explain to you how...</p>
</header>

<aside>
  <h1>Aside: Hello World!</h1>
  <p>But I must explain to you how...</p>
</aside>

CSS viết:

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

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

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

Kết quả: https://codepen.io/tranquocy/pen/OggaeZ Trình duyệt hỗ trợ: Firefox: 4+, Chrome: 12+, Opera 15+, Safari 5+

Default option

Default option dành cho các phần tử HTML có dạng required hoặc optional. Nếu phần tử HTML nhập vào không ở dạng required thì mặc định sẽ là optional. Ví dụ: HTML viết:

<form method="get">
  <input type="text" required="required" />
  <input type="text" />
</form>

CSS viết:

:required {
  border: 1px solid red;
}

:optional {
  border: 1px solid gray;
}

Kết quả: https://codepen.io/tranquocy/pen/Oggryw Trình duyệt hỗ trợ: Firefox: 3+, Chrome: 6+, Safari 5+ Trên đây là bài chia sẻ của mình về một số phương thức mới của CSS4 mà mình đã tìm hiểu trong thời gian qua. CSS4 vẫn còn rất nhiều phương thức mới nhưng chưa lại được hỗ trợ trong các trình duyệt. Tuy nhiên, với sự phát triển mạnh mẽ của website hiện nay, hy vọng CSS4 sẽ sớm được hỗ trợ trên các trình duyệt thông dụng để đem lại sự trải nghiệm tuyệt vời hơn cho người dùng. Cảm ơn các bạn đã theo dõi bài viết!

Tham khảo: http://css4-selectors.com/