Root trong css là gì
Show Định nghĩa và sử dụng
Cấu trúc:root { property: value; } Ví dụHTML viết:
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:
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
Xem ví dụ Nội dung bài viết
Chắc hẳn các bạn khi nghe về cách sử dụng biến trong CSS sẽ nghĩ ngay đến các CSS Preprocessors như SASS hay LESS. Hoặc nếu không thì cũng suy nghĩ sử dụng biến trong CSS làm sao mà được nhỉ ? Sau một thời gian dùng biến với SASS mình có tìm tòi và nghiên cứu liệu trong CSS thuần có thể sử dụng biến không nhỉ mà không cần phải dùng SASS hay LESS. Nếu được như thế thì tiện lắm, các bạn mới học chưa biết cách dùng SASS hay LESS thì có thể học cách sử dụng biến trong CSS để làm quen trước sau này vào làm với SASS hay LESS đỡ bỡ ngỡ khi sử dụng biến. Vì thế hôm nay mình xin chia sẻ những kiến thức về biến trong CSS để các bạn có thể hiểu rõ nó như thế nào, cách dùng ra sao nhé. Có rất nhiều lý do để sử dụng biến trong CSS. Nhưng theo bản thân mình thấy thì khi sử dụng biến thì số lượng code bị lặp lại được hạn chế và dễ dàng tùy chỉnh. Chỉ cần dùng biến và thay đổi giá trị biến thì tất cả các elements dùng biến đó đều thay đổi theo. Khi làm chắc chắn các bạn sẽ gặp các trường hợp như thế này. Cả 3 elements này đều dùng chung 1 mã màu, khiến code bị lặp đi lặp lại. .title { color: #ffa400; } .author-text { color: #ffa400; } .box-description { background-color: #ffa400; } Vì thế khi dùng biến thì mọi thứ trở nên dễ đọc hơn và dễ dàng tùy chỉnh hơn. :root { --yellow-color: #ffa400; } .title { color: var(--yellow-color); } .author-text { color: var(--yellow-color); } .box-description { background-color: var(--yellow-color); } # Khai báo và sử dụng biến trong CSSCách khai báo cũng đơn giản thôi các bạn sử dụng theo cú pháp này: Thường thường khi dùng biến trong CSS mình hay khai báo biến trong :root{ --ten-bien: gia tri; --background-main-color: #ffa400; }
Cách sử dụng cũng đơn giản nốt theo cú pháp sau: .box { background-color: var(--background-main-color); } Các bạn có thể xem demo ở Codepen này: See the Pen CSS Variables by EvonDev (@blackzero) on CodePen. # Khai báo biến cục bộCó nghĩa là khi code các bạn có thể kế thừa từ thẻ để sử dụng các biến từ nó. Tuy nhiên các bạn cũng có thể set riêng cho chính phần tử mà các bạn đang làm hoặc phần tử cha bọc nó. Để mình ví dụ cho các bạn dễ hiểu. :root { --red: red; } .other-box { background-color: var(--red); } Giờ ở thẻ mình tạo 1 biến là Tuy nhiên nếu mình muốn set biến cho chính cái box đó riêng mà không cần phải sử dụng từ thẻ có được không ? Xin thưa các bạn là được nha. Các bạn có thể sử dụng như này :root { --red: red; } .other-box { /* dùng biến --red ở bên trong để ghi đè ở :root*/ --red: pink; background-color: var(--red); } Lúc này biến mà
Ở đây biến cũng thế. Nó cũng ưu tiên từ trong ra ngoài. Vì thế nên giờ cái See the Pen CSS Variables #2 by EvonDev (@blackzero) on CodePen. # Responsive với biếnỞ bài trước mình có nói về nên
sử dụng đơn vị em hay rem vào dự án rồi chia sẻ cách dùng Nếu các bạn làm mà không dùng :root { --big-title-size: 50px; --text-size: 16px; --link-size: 14px; } @media only screen and (max-width: 767px) { :root { --big-title-size: 30px; --text-size: 15px; --link-size: 13px; } } Đó là điểm hay đó các bạn. Khi xuống màn hình các bạn mong muốn chỉ cần thay đổi giá trị của biến lại là mọi thứ sẽ thay đổi theo ý muốn của các bạn. Quá tuyệt vời phải không nào. Ảnh lấy từ CSS Tricks để demoVậy thì so với các CSS Preprocessors thì như thế nào ? Nó có khác biệt gì hay ưu điểm nhược điểm gì so với SASS hay LESS không ? Các bạn có thể đọc bài này của CSS Tricks viết rõ ràng chi tiết lắm nha. # Trình duyệt hỗ trợHiện tại thì số lượng sử dụng CSS Variables toàn cầu là # Sử dụng biến với @supportsNếu các bạn thích dùng biến trong CSS quá mà lại sợ trúng IE hay Opera Mini thì toi mạng. Vì thế cách tốt nhất đó là sử dụng thuộc tính Sau khi các bạn tìm hiểu rồi thì chắc hẳn các bạn cũng biết sơ sơ cách dùng. Mình sẽ áp dụng chúng vào trong bài này. Nếu máy bạn nào không có Opera Mini hay IE thì dùng giả lập test thử coi sao hoặc làm cho khách hàng dùng mấy trình duyệt đó là biết kaka. :root { --big-title-color: red; } h2 { font-size: 50px; color: bue; } @supports (--css: variables) { h2{ color: var(--big-title-color); } } Ở trên mình làm 1 ví dụ nhỏ là nếu trình duyệt
hỗ trợ biến trong CSS bằng cách sử dụng mới có thể sử dụng biến và lúc này thẻ sẽ có chữ màu xanh. |