Hướng dẫn root css là gì

• 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

ol li { --foo: red; } ul li { color: var(--foo); }

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à

1. Nếu property đó ko inheritable (ví dụ như border) nó được đưa về initial
2. 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