- Trang chủ
- Tham khảo
- CSS
- CSS3
- :root
Định nghĩa và sử dụng
- ":root" chọn thành phần gốc của văn bản.
- Trong văn bản HTML thành phần gốc luôn luôn là
Cấu trúc
:root { property: value; }
Ví dụ
HTML viết:
Thành phần p
Thành phần div
Hiển thị trình duyệt khi chưa có CSS:
Thành phần p
Thành phần div
CSS viết:
Hiển thị trình duyệt khi đã có css:
Thành phần p
Thành phần div
Ta thấy tất cả thành phần trong thành phần gốc đã được chọn.
Trình duyệt hỗ trợ
":root" được hỗ trợ trong đa số các trình duyệt, ngoài trừ trình duyệt Internet Explorer 8 trở xuống.
1] Bộ chọn :root trong CSS
- Bộ chọn :root dùng để chọn phần tử gốc trong trang web.
[phần tử chính là phần tử gốc của trang web]
2] Cách sử dụng bộ chọn :root trong CSS
- Để sử dụng bộ chọn :root, ta dùng cú pháp như sau:
:root{
các khai báo định dạng CSS
}
3] Một số ví dụ
Ví dụ
:
- Thiết lập nền màu vàng cho phần tử gốc trong trang web
:root{
background-color:yellow;
}
Xem ví dụ
Bài viết được sự cho phép của tác giả Lưu Bình An
Chuyện gì xảy ra nếu chúng ta dùng var[] với một biến undefined
Trước hết phải nói CSS và HTML là ngôn ngữ không quá strictly, một vài lỗi nhỏ không làm làm chết nguyên trang, nếu dùng var[] với một biến không tồn tại, không gây ra ảnh hưởng parsing.
Sẽ có nhiều lý do cho việc xuất biến undefined trong var, có thể là
- Gõ nhầm tên biến
- Tưởng là có nhưng chưa define biến này
- Biến đó ko tồn tại trên trang đang xem
Bởi, lời khuyên là luôn đặt biết ở node trên cùng như :root hay html, như vậy biến có thể truy xuất ở bất cứ đâu trong DOM.
:root { --main-color: #f06; } .my-lovely-component { border: 1px solid var[--main-color]; }Vậy nếu biến đó undefined thì sao? Thứ tự xử lý sẽ là
- Nếu property đó ko inheritable [ví dụ như border] nó được đưa về initial
- Nếu là property kế thừa, như color, thì inherited giá trị từ thằng cha, nếu không có cái nào hết, thì sẽ dùng initial
Giá trị initial của border sẽ là medium none currentColor, cái này siêng thì kiểm tra trên MDN
:root { --main-color: #f06; } body { color: gold; } .my-lovely-component { // nó sẽ dùng giá trị `gold` kế thừa từ body color: var[--secondary-color]; }11 công cụ hữu ích để kiểm tra và tối ưu hóa các file CSS
9 CSS animation mới "mãn nhãn" cho các project
Đây cũng ít ai để ý mà dùng, var[] có thể truyền thêm tham số thứ 2, là giá trị fallback khi không tìm thấy biến
// dùng red nếu không thấy --theme-color color: var[--theme-color, red];Khá clear đúng không, nhưng bạn cũng có thể viết như thế này cho nó rắc rối đồng đội chơi
color: var[--foo, var[--bar, var[--baz, var[--are, var[--you, var[--crazy]]]]];Cú pháp trên hoàn toàn hợp lệ, nhưng không nên làm khó nhau như vậy. Ngoài ra đây cũng là một cách viết hợp lệ
--my-variable: one, two, three; content: var[--foo, one, two, three];Hãy nhớ, làm mọi thứ đơn giản nhất thôi các bạn, đừng nghĩ mình viết như vậy sẽ thông minh hơn người khác.
Rắc rối là như vậy, may mà chúng ta có DevTool cứu giúp
Tự động điền tên biến
Khi cần quick change trên trình duyệt, sau khi gõ var[, nó tự động gợi ý các biến hợp lệ
Firefox, Edge, Chrome đều có
Biết giá trị nào đang được sử dụng
Bên trong tab Computed, giá trị cuối cùng đang sử dụng sau cả tá kế thừa sẽ được hiện ra
Hy vọng trong tương lai DevTool sẽ có nhiều hỗ trợ hơn như xác định biến undefined
Bài viết gốc được đăng tải tại vuilaptrinh.com
Có thể bạn quan tâm:
Xem thêm Việc làm IT hấp dẫn tại TopDev