Hiểu từ khóa màu hiện tại trong CSS
Bây giờ ta có các thuộc tính tùy chỉnh trong CSS, ta có toàn quyền đối với các biến của riêng mình trong CSS. Nhưng ngay cả trước khi những thứ đó trở nên hữu ích, ta có thể sử dụng một từ khóa có sẵn kể từ Mô-đun Màu CSS Cấp 3 , currentColor , để giữ cho màu sắc nhất quán trong các phần tử.
currentColor hoạt động giống như một biến cho giá trị hiện tại của thuộc tính color trên phần tử. Và phần Cascading của CSS vẫn có hiệu lực, vì vậy nếu không có thuộc tính color nào được xác định trên một phần tử, phần xếp tầng sẽ xác định giá trị của currentColor .
Sử dụng
currentColor rất hữu ích khi bạn muốn một màu nhất định nhất quán trong một phần tử. Ví dụ: nếu bạn muốn một phần tử có màu đường viền giống với màu văn bản của phần tử, việc sử dụng currentColor có ý nghĩa rất nhiều vì sau đó nếu bạn quyết định màu văn bản chính, bạn chỉ có thể thay đổi giá trị ở một nơi.
Một ví dụ
Tất cả các từ đều tốt và tốt, nhưng không có gì đánh bại một ví dụ! Hãy sử dụng currentColor ở một vài nơi khác nhau trong một ví dụ đơn giản. Bạn sẽ thấy currentColor cũng có thể thực sự hữu ích như giá trị cho các thuộc tính fill của SVGs như thế nào.
Đây là ví dụ cuối cùng của ta trông như thế nào (di chuột qua nó nếu bạn có thể):
Xem Pen bGprJqg của alligatorio ( @alligatorio ) trên CodePen .
Đầu tiên, đánh dấu của ta :
<div class="outer-circle">
<svg width="150" height="150" viewBox="0 0 322 322">
<g fill="none" fill-rule="evenodd">
<circle class="main-circle" cx="161" cy="161" r="161"/>
<circle class="left-eye" fill="#6A76C0" cx="108" cy="109" r="25"/>
<path d="M112 239h99a49.5 49.5 0 0 1-99 0zM161 201c13.8 0 25-26.2 25-40 0-9.2-8.3-17.5-25-25-16.7 7.5-25 15.8-25 25 0 13.8 11.2 40 25 40z" fill="#51BAB6"/>
<circle fill="#6A76C0" cx="221" cy="109" r="25"/>
</g>
</svg>
</div>
Như bạn thấy, không có gì lạ mắt xảy ra với đánh dấu, chỉ là một div bên ngoài và một đồ họa SVG đơn giản trong đó.
Điều kỳ diệu ✨ xảy ra trong các kiểu CSS:
.outer-circle {
color: gold;
border: 10px solid currentColor;
box-shadow: 0px 0px 15px currentColor;
width: 200px;
height: 200px;
border-radius: 50%;
margin: 2rem auto;
display: flex;
align-items: center;
justify-content: center;
}
.main-circle {
/* inherited from parent */
fill: currentColor;
}
.outer-circle:hover .left-eye {
fill: currentColor;
}
Hơn nữa, giá trị của color cũng có thể là một biến CSS và currentColor sẽ vẫn có giá trị mong đợi của ta :
Xem Pen BaKdEZQ của alligatorio ( @alligatorio ) trên CodePen .
Đánh dấu về cơ bản giống nhau, ngoại trừ một lớp bổ sung ở vòng ngoài:
<div class="outer-circle alternative">
<!-- ... -->
</div>
Và sau đó, trong các kiểu, ta overrides màu từ .outer-circle và sử dụng giá trị của một trong các biến CSS có sẵn trên trang web này để thay thế:
.alternative {
color: var(--code);
}
Kết thúc
Số dặm của bạn với currentColor có thể khác nhau, bởi vì nhiều thuộc tính bao gồm một màu sẽ được mặc định thành giá trị hiện tại của color ( border , box-shadow , text-decoration …). Thêm vào đó là thực tế là ta hiện có các biến CSS đầy đủ, bạn có thể thấy rằng bạn không thường xuyên lấy currentColor khỏi túi thủ thuật của bạn trong những ngày này. Tuy nhiên, nó vẫn ở đó nếu cần thiết. Nó có thể trở nên đặc biệt hữu ích khi đảm bảo các biểu tượng SVG được tô bằng màu giống với màu văn bản hiện tại.
Hỗ trợ trình duyệt
Tôi có thể sử dụng màu hiện tại không? Dữ liệu về hỗ trợ cho tính năng màu hiện tại trên các trình duyệt chính từ caniuse.com.
Các tin liên quan
Thuộc tính z-index CSS Mighty2020-09-01
CSS: focus-trong Pseudo-Class
2020-09-01
Giới thiệu về Bộ đếm CSS
2020-08-31
Thuộc tính CSS text-shadow
2020-08-20
Cách tạo hiệu ứng cuộn thị sai với CSS thuần túy trong Chrome
2020-08-03
Cách tạo trang đích có kiểu dáng với CSS Tailwind
2020-06-23
Triển khai một CSS thuần túy có thể thu gọn
2020-05-02
Căn giữa mọi thứ trong CSS bằng Flexbox
2020-05-02
Tham chiếu phông chữ hệ thống CSS
2020-03-29
Sử dụng Thuộc tính chiều cao dòng CSS để cải thiện khả năng đọc
2020-02-04
