Biến CSS (Thuộc tính tùy chỉnh)

Khám phá Thuộc tính tùy chỉnh CSS, còn được gọi là Biến CSS, một tính năng mới mạnh mẽ của các trình duyệt hiện đại giúp bạn viết CSS tốt hơn

Giới thiệu

Trong vài năm qua, các bộ tiền xử lý CSS đã gặt hái được nhiều thành công. Các dự án mới thường bắt đầu với Ít hơn hoặc SASS. Và nó vẫn là một công nghệ rất phổ biến.

Theo tôi, lợi ích chính của những công nghệ đó là:

  • Chúng cho phép lồng các bộ chọn
  • Cung cấp chức năng nhập khẩu dễ dàng
  • Họ cung cấp cho bạn các biến

CSS hiện đại có một tính năng mạnh mẽ mới được gọi làThuộc tính tùy chỉnh CSS, còn thường được gọi làBiến CSS.

CSS không phải là một ngôn ngữ lập trình nhưJavaScript, Python, PHP, Ruby hoặc Go nơi các biến là chìa khóa để làm điều gì đó hữu ích. CSS rất hạn chế trong những gì nó có thể làm và nó chủ yếu là một cú pháp khai báo để cho các trình duyệt biết cách họ nên hiển thị một trang HTML.

Nhưng một biến là một biến: tên đề cập đến một giá trị và các biến trong CSS giúp giảm sự lặp lại và không nhất quán trong CSS của bạn, bằng cách tập trung vào định nghĩa giá trị.

Và nó giới thiệu một tính năng độc đáo mà các bộ tiền xử lý CSS sẽ không bao giờ có:bạn có thể truy cập và thay đổi giá trị của Biến CSS theo chương trình bằng JavaScript.

Những điều cơ bản của việc sử dụng biến

Biến CSS được xác định bằng cú pháp đặc biệt, viết trướchai dấu gạch ngangsang tên (--variable-name), sau đó là dấu hai chấm và một giá trị. Như thế này:

:root {
  --primary-color: yellow;
}

(thêm về:rootmột lát sau)

Bạn có thể truy cập giá trị biến bằng cách sử dụngvar():

p {
  color: var(--primary-color)
}

Giá trị biến có thể là bất kỳ giá trị CSS hợp lệ nào, ví dụ:

:root {
  --default-padding: 30px 30px 20px 20px;
  --default-color: red;
  --default-background: #fff;
}

Tạo các biến bên trong bất kỳ phần tử nào

Các biến CSS có thể được định nghĩa bên trong bất kỳ phần tử nào. Vài ví dụ:

:root {
  --default-color: red;
}

body { –default-color: red; }

main { –default-color: red; }

p { –default-color: red; }

span { –default-color: red; }

a:hover { –default-color: red; }

Những thay đổi trong các ví dụ khác nhau đó làphạm vi.

Phạm vi biến

Việc thêm các biến vào một bộ chọn làm cho chúng có sẵn cho tất cả các con của nó.

Trong ví dụ trên, bạn đã thấy việc sử dụng:rootkhi xác định một biến CSS:

:root {
  --primary-color: yellow;
}

:rootlà một lớp giả CSS xác định phần tử gốc của cây.

Trong ngữ cảnh của một tài liệu HTML, sử dụng:rootbộ chọn trỏ đếnhtmlphần tử, ngoại trừ điều đó:rootcó cao hơntính cụ thể(được ưu tiên).

Trong ngữ cảnh của hình ảnh SVG,:rootchỉ vàosvgnhãn.

Thêm thuộc tính tùy chỉnh CSS vào:rootlàm cho nó có sẵn cho tất cả các phần tử trong trang.

Nếu bạn thêm một biến bên trong.containerbộ chọn, nó sẽ chỉ khả dụng cho trẻ em của.container:

.container {
  --secondary-color: yellow;
}

và sử dụng nó bên ngoài phần tử này sẽ không hoạt động.

Các biến có thể làphân công lại:

:root {
  --primary-color: yellow;
}

.container { –primary-color: blue; }

Ở ngoài.container,--primary-colorsẽ làmàu vàng, nhưng bên trong nó sẽ làmàu xanh da trời.

Bạn cũng có thể gán hoặc ghi đè một biến bên trong HTML bằng cách sử dụngkiểu nội tuyến:

<main style="--primary-color: orange;">
  <!-- ... -->
</main>

Các biến CSS tuân theo bình thườngQuy tắc xếp tầng CSS, với mức độ ưu tiên được đặt theotính cụ thể

Tương tác với giá trị Biến CSS bằng JavaScript

Điều thú vị nhất với Biến CSS là khả năng truy cập và chỉnh sửa chúng bằng JavaScript.

Đây là cách bạn đặt một giá trị biến bằng JavaScript thuần túy:

const element = document.getElementById('my-element')
element.style.setProperty('--variable-name', 'a-value')

Mã bên dưới này có thể được sử dụng để truy cập vào một giá trị biến thay thế, trong trường hợp biến được xác định trên:root:

const styles = getComputedStyle(document.documentElement)
const value = String(styles.getPropertyValue('--variable-name')).trim()

Hoặc, để áp dụng kiểu cho một phần tử cụ thể, trong trường hợp các biến được đặt với một phạm vi khác:

const element = document.getElementById('my-element')
const styles = getComputedStyle(element)
const value = String(styles.getPropertyValue('--variable-name')).trim()

Xử lý các giá trị không hợp lệ

Nếu một biến được gán cho một thuộc tính không chấp nhận giá trị của biến đó, nó được coi là không hợp lệ.

Ví dụ: bạn có thể chuyển một giá trị pixel cho mộtpositionthuộc tính hoặc giá trị rem của thuộc tính màu.

Trong trường hợp này dòng được coi là không hợp lệ và bị bỏ qua.

Hỗ trợ trình duyệt

Hỗ trợ của trình duyệt cho các Biến CSS làrất tốt,theo Tôi có thể sử dụng.

Các biến CSS vẫn tồn tại ở đây và bạn có thể sử dụng chúng ngay hôm nay nếu bạn không cần hỗ trợ Internet Explorer và các phiên bản cũ của các trình duyệt khác.

Nếu bạn cần hỗ trợ các trình duyệt cũ hơn, bạn có thể sử dụng các thư viện nhưPostCSShoặc làHuyền thoại, nhưng bạn sẽ mất khả năng tương tác với các biến thông qua JavaScript hoặc Công cụ dành cho nhà phát triển trình duyệt, vì chúng được chuyển sang CSS cũ ít biến (và như vậy, bạn mất hầu hết sức mạnh của Biến CSS).

Các biến CSS phân biệt chữ hoa chữ thường

Biến này:

--width: 100px;

khác với:

--Width: 100px;

Toán trong các biến CSS

Để làm toán trong Biến CSS, bạn cần sử dụngcalc(), ví dụ:

:root {
  --default-left-padding: calc(10px * 2);
}

Truy vấn phương tiện với Biến CSS

Không có gì đặc biệt ở đây. Các biến CSS thường áp dụng cho các truy vấn phương tiện:

body {
  --width: 500px;
}

@media screen and (max-width: 1000px) and (min-width: 700px) { –width: 800px; }

.container { width: var(width); }

Đặt giá trị dự phòng cho var ()

var()chấp nhận tham số thứ hai, là giá trị dự phòng mặc định khi giá trị biến không được đặt:

.container {
  margin: var(--default-margin, 30px);
}

Tải xuống miễn phí của tôiSổ tay CSS


Các hướng dẫn css khác: