Giải Mã Sức Mạnh CSS: Tìm Hiểu Sâu về @property và Định Nghĩa Kiểu Thuộc Tính Tùy Chỉnh

Các thuộc tính tùy chỉnh CSS (còn được gọi là biến CSS) đã cách mạng hóa cách chúng ta viết và quản lý CSS. Chúng mang lại khả năng tái sử dụng, tính linh hoạt và khả năng bảo trì, làm cho bảng định kiểu của chúng ta trở nên động và dễ quản lý hơn. Tuy nhiên, cho đến gần đây, các thuộc tính tùy chỉnh thiếu khả năng định nghĩa các kiểu dữ liệu mong muốn của chúng, hạn chế tiềm năng của chúng cho việc tạo kiểu và hoạt ảnh nâng cao. Hãy đến với quy tắc @property – một yếu tố thay đổi cuộc chơi cho phép chúng ta định nghĩa rõ ràng kiểu, cú pháp và giá trị khởi tạo của các thuộc tính tùy chỉnh của mình.

Quy tắc @property là gì?

Quy tắc @property là một phần của họ API CSS Houdini, nhằm mục đích phơi bày các hoạt động bên trong của công cụ CSS cho các nhà phát triển. Cụ thể, @property là một phần của API Thuộc tính và Giá trị Tùy chỉnh (Custom Properties and Values API). Nó cho phép bạn đăng ký một thuộc tính tùy chỉnh với trình duyệt, chỉ định:

• name: Tên của thuộc tính tùy chỉnh (ví dụ: --my-color).
• syntax: Kiểu dữ liệu mong đợi của thuộc tính (ví dụ: <color>, <number>, <length>).
• inherits: Liệu thuộc tính có nên kế thừa giá trị từ phần tử cha của nó hay không (true hoặc false).
• initial-value: Giá trị mặc định của thuộc tính nếu không có giá trị nào khác được chỉ định.

Bằng cách định nghĩa các đặc điểm này, bạn có quyền kiểm soát lớn hơn đối với cách các thuộc tính tùy chỉnh được sử dụng và cách chúng hoạt động, đặc biệt là trong hoạt ảnh và chuyển đổi.

Tại sao nên sử dụng @property? Lợi ích

Sử dụng @property mang lại một số lợi thế đáng kể:

1. An toàn kiểu và Xác thực

Nếu không có @property, CSS coi tất cả các thuộc tính tùy chỉnh là chuỗi. Điều này có thể dẫn đến hành vi không mong muốn khi bạn cố gắng sử dụng chúng trong các phép tính hoặc hoạt ảnh yêu cầu các kiểu dữ liệu cụ thể. Ví dụ, nếu bạn muốn một thuộc tính tùy chỉnh đại diện cho một số nhưng vô tình gán cho nó một giá trị chuỗi, hoạt ảnh của bạn có thể bị lỗi hoặc tạo ra kết quả không chính xác.

@property giải quyết vấn đề này bằng cách cho phép bạn chỉ định cú pháp (kiểu dữ liệu) mong đợi của thuộc tính tùy chỉnh. Trình duyệt sau đó sẽ xác thực giá trị được gán theo cú pháp này, đảm bảo rằng nó tuân thủ kiểu mong đợi. Nếu giá trị không khớp với cú pháp, trình duyệt sẽ sử dụng giá trị khởi tạo (nếu được cung cấp) hoặc coi thuộc tính là không hợp lệ.

2. Hoạt ảnh và Chuyển đổi Mượt mà

Sức mạnh thực sự của @property tỏa sáng khi nói đến hoạt ảnh và chuyển đổi. Nếu không có nó, việc tạo hoạt ảnh cho các thuộc tính tùy chỉnh có thể phức tạp vì trình duyệt không biết cách nội suy giữa các giá trị khác nhau của một chuỗi chung. Bạn có thể cần phải dùng đến các thủ thuật JavaScript hoặc sử dụng các tính năng CSS hạn chế để đạt được hiệu ứng mong muốn.

Bằng cách định nghĩa cú pháp của một thuộc tính tùy chỉnh, bạn cho trình duyệt biết cách nội suy giữa các giá trị của nó trong quá trình hoạt ảnh và chuyển đổi. Ví dụ, nếu bạn định nghĩa một thuộc tính tùy chỉnh với cú pháp <color>, trình duyệt biết rằng nó nên nội suy giữa các màu bằng cách sử dụng một gradient màu mượt mà. Tương tự, nếu bạn định nghĩa một thuộc tính với cú pháp <number>, trình duyệt biết rằng nó nên nội suy giữa các số bằng cách sử dụng một tiến trình tuyến tính.

3. Cải thiện Khả năng đọc và Bảo trì Mã

@property cải thiện khả năng đọc và bảo trì mã CSS của bạn bằng cách làm cho rõ ràng kiểu dữ liệu mà một thuộc tính tùy chỉnh được dự định đại diện. Điều này giúp các nhà phát triển khác (và chính bạn trong tương lai) hiểu mục đích của thuộc tính và cách nó nên được sử dụng.

Hơn nữa, bằng cách định nghĩa rõ ràng giá trị khởi tạo của một thuộc tính tùy chỉnh, bạn cung cấp một giá trị dự phòng rõ ràng sẽ được sử dụng nếu không có giá trị nào khác được chỉ định. Điều này có thể ngăn ngừa các lỗi hiển thị không mong muốn và làm cho mã của bạn trở nên mạnh mẽ hơn.

4. Nâng cao Hiệu suất

Trong một số trường hợp, sử dụng @property có thể cải thiện hiệu suất mã CSS của bạn. Bằng cách cung cấp cho trình duyệt thêm thông tin về các kiểu dữ liệu mong đợi của các thuộc tính tùy chỉnh của bạn, bạn cho phép nó tối ưu hóa quá trình hiển thị. Điều này có thể dẫn đến hoạt ảnh và chuyển đổi nhanh hơn, đặc biệt là trên các bố cục phức tạp.

Cú pháp của @property

Quy tắc @property được định nghĩa bằng cú pháp sau:

            @property --property-name {
 syntax: <type>;
 inherits: true | false;
 initial-value: <value>;
}
            

              
                Copy
              
            
          

Hãy cùng phân tích từng thành phần này:

• --property-name: Đây là tên của thuộc tính tùy chỉnh mà bạn đang định nghĩa. Nó phải bắt đầu bằng hai dấu gạch ngang (--) và có thể chứa bất kỳ ký tự định danh CSS hợp lệ nào. Ví dụ: --primary-color, --font-size, --spacing-unit.
• syntax: Điều này chỉ định kiểu dữ liệu mong đợi của thuộc tính tùy chỉnh. Nó được định nghĩa bằng một bộ mô tả kiểu giá trị CSS. Một số giá trị cú pháp phổ biến bao gồm:
• <color>: Đại diện cho một giá trị màu (ví dụ: #ffffff, rgb(255, 255, 255), hsl(0, 0%, 100%), white).
• <number>: Đại diện cho một giá trị số (ví dụ: 1, 3.14, -42).
• <length>: Đại diện cho một giá trị độ dài (ví dụ: 10px, 2em, 50vh, 1rem).
• <percentage>: Đại diện cho một giá trị phần trăm (ví dụ: 50%, 100%, 25.5%).
• <string>: Đại diện cho một giá trị chuỗi (ví dụ: "Hello", "World").
• <image>: Đại diện cho một giá trị hình ảnh (ví dụ: url("image.jpg"), linear-gradient(...)).
• <angle>: Đại diện cho một giá trị góc (ví dụ: 45deg, 0.5rad, 1turn).
• *: Đại diện cho bất kỳ giá trị CSS hợp lệ nào. Sử dụng thận trọng, vì nó làm mất mục đích kiểm tra kiểu.
• Cú pháp tùy chỉnh: Cho phép bạn định nghĩa các cú pháp phức tạp bằng các mẫu giống biểu thức chính quy.
• inherits: Giá trị boolean này xác định liệu thuộc tính tùy chỉnh có nên kế thừa giá trị từ phần tử cha của nó hay không. Nếu đặt thành true, thuộc tính sẽ kế thừa. Nếu đặt thành false, thuộc tính sẽ không kế thừa và sẽ sử dụng giá trị khởi tạo của nó nếu không được định nghĩa rõ ràng trên phần tử. Giá trị mặc định là false.
• initial-value: Điều này chỉ định giá trị mặc định của thuộc tính tùy chỉnh. Nếu thuộc tính không được đặt rõ ràng trên một phần tử, nó sẽ sử dụng giá trị này. Giá trị khởi tạo phải là một giá trị hợp lệ theo cú pháp đã chỉ định. Nếu không có giá trị khởi tạo nào được cung cấp và không có giá trị nào khác được đặt, thuộc tính sẽ được coi như có giá trị không được đặt (unset).

Các Ví dụ Thực tế về @property trong Thực hành

Hãy xem xét một số ví dụ thực tế về cách sử dụng @property trong mã CSS của bạn.

Ví dụ 1: Tạo Hoạt ảnh cho một Màu

Trong ví dụ này, chúng ta sẽ tạo một thuộc tính tùy chỉnh có tên --background-color và tạo hoạt ảnh cho nó bằng các chuyển đổi CSS. Chúng ta sẽ định nghĩa cú pháp là <color> để đảm bảo rằng trình duyệt nội suy giữa các màu một cách chính xác.

            @property --background-color {
 syntax: <color>;
 inherits: false;
 initial-value: #ffffff; /* White */
}

.box {
 width: 200px;
 height: 200px;
 background-color: var(--background-color);
 transition: --background-color 0.5s ease-in-out;
}

.box:hover {
 --background-color: #007bff; /* Blue */
}
            

              
                Copy
              
            
          

Trong đoạn mã này:

• Chúng ta định nghĩa một thuộc tính tùy chỉnh --background-color với cú pháp <color>, đặt inherits thành false, và đặt initial-value thành màu trắng (#ffffff).
• Chúng ta áp dụng thuộc tính này cho background-color của một phần tử .box bằng cách sử dụng var(--background-color).
• Chúng ta thêm một chuyển đổi vào thuộc tính --background-color để nó hoạt ảnh mượt mà khi giá trị thay đổi.
• Chúng ta thay đổi giá trị của --background-color thành màu xanh lam (#007bff) khi di chuột, tạo hiệu ứng chuyển đổi màu mượt mà.

Ví dụ 2: Tạo Hoạt ảnh cho một Số

Trong ví dụ này, chúng ta sẽ tạo một thuộc tính tùy chỉnh có tên --blur-radius và tạo hoạt ảnh cho nó bằng các chuyển đổi CSS. Chúng ta sẽ định nghĩa cú pháp là <length> để đảm bảo rằng trình duyệt nội suy giữa các giá trị độ dài một cách chính xác. Ví dụ này cũng cho thấy một trường hợp sử dụng phổ biến của việc sử dụng độ dài: giá trị pixel. Điều này cũng có thể dễ dàng chuyển sang các loại đơn vị khác. Điều quan trọng cần lưu ý là việc đặt giá trị khởi tạo thành `0px` là rất quan trọng, vì trình duyệt cần một đơn vị cơ sở để thực hiện các chuyển đổi một cách chính xác.

            @property --blur-radius {
 syntax: <length>;
 inherits: false;
 initial-value: 0px;
}

.image {
 width: 300px;
 height: 200px;
 background-image: url("image.jpg");
 filter: blur(var(--blur-radius));
 transition: --blur-radius 0.3s ease-in-out;
}

.image:hover {
 --blur-radius: 5px;
}
            

              
                Copy
              
            
          

Trong đoạn mã này:

• Chúng ta định nghĩa một thuộc tính tùy chỉnh --blur-radius với cú pháp <length>, đặt inherits thành false, và đặt initial-value thành 0px.
• Chúng ta áp dụng thuộc tính này cho hàm filter: blur() của một phần tử .image bằng cách sử dụng var(--blur-radius).
• Chúng ta thêm một chuyển đổi vào thuộc tính --blur-radius để nó hoạt ảnh mượt mà khi giá trị thay đổi.
• Chúng ta thay đổi giá trị của --blur-radius thành 5px khi di chuột, tạo hiệu ứng làm mờ mượt mà.

Ví dụ 3: Tạo Giao diện Người dùng theo Chủ đề với các Thuộc tính Kế thừa

Trong ví dụ này, chúng ta sẽ tạo một giao diện người dùng theo chủ đề đơn giản bằng cách sử dụng các thuộc tính tùy chỉnh kế thừa. Chúng ta sẽ định nghĩa một thuộc tính tùy chỉnh có tên --theme-color và đặt nó trên phần tử :root. Điều này sẽ cho phép tất cả các phần tử con kế thừa màu chủ đề.

            @property --theme-color {
 syntax: <color>;
 inherits: true;
 initial-value: #4caf50; /* Green */
}

:root {
 --theme-color: #4caf50;
}

.button {
 background-color: var(--theme-color);
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}

.button:hover {
 --theme-color: #388e3c; /* Darker Green */
}
            

              
                Copy
              
            
          

Trong đoạn mã này:

• Chúng ta định nghĩa một thuộc tính tùy chỉnh --theme-color với cú pháp <color>, đặt inherits thành true, và đặt initial-value thành màu xanh lá cây (#4caf50).
• Chúng ta đặt giá trị của --theme-color trên phần tử :root, làm cho nó có sẵn cho tất cả các phần tử trong tài liệu.
• Chúng ta sử dụng thuộc tính này để đặt background-color của một phần tử .button.
• Chúng ta thay đổi giá trị của --theme-color thành màu xanh lá cây đậm hơn (#388e3c) khi di chuột, chứng minh cách các thuộc tính kế thừa có thể được cập nhật dễ dàng để thay đổi chủ đề của giao diện người dùng.

Ví dụ 4: Định nghĩa một cú pháp tùy chỉnh

Thuộc tính syntax cũng có thể chấp nhận một chuỗi để định nghĩa một mẫu cụ thể hơn, điều này đặc biệt hữu ích cho việc xác thực các giá trị phức tạp hơn. Cú pháp này sử dụng một hệ thống giống biểu thức chính quy, được ghi lại trên MDN (Mozilla Developer Network). Ví dụ này minh họa cách định nghĩa và sử dụng một cú pháp tùy chỉnh cho vị trí nền mà chấp nhận cả các tùy chọn từ khóa `top`, `bottom`, `left` và `right` là các giá trị hợp lệ.

            @property --background-position {
 syntax: "[ top | bottom | left | right ]{1,2}";
 inherits: false;
 initial-value: top left;
}

.container {
 width: 300px;
 height: 300px;
 background-image: url('image.jpg');
 background-position: var(--background-position);
}

/* Valid positions */
.container.top-right {
 --background-position: top right;
}

.container.bottom-left {
 --background-position: bottom left;
}

/* Invalid position (will fallback to initial-value) */
.container.invalid {
 --background-position: center;
}
            

              
                Copy
              
            
          

Ở đây, syntax được chỉ định bằng cách sử dụng biểu diễn chuỗi của các từ khóa hợp lệ. Ký hiệu [ ] định nghĩa một tập hợp các tùy chọn, ký hiệu | phân tách chúng và {1,2} giới hạn số lượng giá trị được phép thành một hoặc hai từ khóa. Nếu một giá trị không hợp lệ như center được sử dụng, trình duyệt sẽ trở về initial-value là top left.

Hỗ trợ Trình duyệt

Hỗ trợ trình duyệt cho @property nhìn chung tốt trên các trình duyệt hiện đại, bao gồm:

• Chrome (phiên bản 64 trở lên)
• Edge (phiên bản 79 trở lên - dựa trên Chromium)
• Firefox (phiên bản 72 trở lên)
• Safari (phiên bản 14.1 trở lên)

Tuy nhiên, luôn là một ý hay khi kiểm tra các bảng tương thích trình duyệt mới nhất trên các trang web như Can I use... để đảm bảo rằng các tính năng bạn đang sử dụng được hỗ trợ trong các trình duyệt mà người dùng của bạn có khả năng sử dụng.

Đối với các trình duyệt cũ hơn không hỗ trợ @property, trình duyệt sẽ bỏ qua quy tắc @property và đơn giản coi thuộc tính tùy chỉnh là một biến CSS thông thường. Điều này có nghĩa là hoạt ảnh và chuyển đổi có thể không hoạt động như mong đợi, nhưng mã vẫn sẽ có chức năng.

Các Thực hành Tốt nhất khi sử dụng @property

Dưới đây là một số thực hành tốt nhất cần ghi nhớ khi sử dụng @property:

• Luôn định nghĩa cú pháp: Đảm bảo luôn định nghĩa syntax cho các thuộc tính tùy chỉnh của bạn để đảm bảo an toàn kiểu và cho phép hoạt ảnh và chuyển đổi mượt mà.
• Đặt giá trị khởi tạo: Cung cấp một initial-value để cung cấp giá trị mặc định và ngăn ngừa các lỗi hiển thị không mong muốn.
• Sử dụng tên mô tả: Chọn tên mô tả cho các thuộc tính tùy chỉnh của bạn, làm rõ mục đích và kiểu dữ liệu của chúng. Ví dụ, sử dụng --button-background-color thay vì --color.
• Cân nhắc kế thừa: Quyết định xem các thuộc tính tùy chỉnh của bạn có nên kế thừa từ phần tử cha của chúng hay không. Sử dụng inherits: true cho các thuộc tính nên được chia sẻ trên toàn bộ giao diện người dùng, chẳng hạn như màu chủ đề hoặc kích thước phông chữ.
• Kiểm tra kỹ lưỡng: Kiểm tra mã của bạn trên các trình duyệt khác nhau để đảm bảo rằng nó hoạt động như mong đợi. Sử dụng các cơ chế dự phòng cho các trình duyệt cũ hơn không hỗ trợ @property.
• Tài liệu hóa các thuộc tính tùy chỉnh của bạn: Thêm nhận xét vào mã CSS của bạn để giải thích mục đích và cách sử dụng các thuộc tính tùy chỉnh của bạn. Điều này sẽ giúp các nhà phát triển khác (và chính bạn trong tương lai) dễ dàng hiểu mã của bạn hơn. Các công cụ như Stylelint cũng có thể được cấu hình để thực thi các thực hành tốt nhất này.

@property và CSS Houdini

Như đã đề cập trước đó, @property là một phần của họ API CSS Houdini. CSS Houdini là một tập hợp các API cấp thấp giúp phơi bày các hoạt động bên trong của công cụ CSS cho các nhà phát triển, cho phép họ mở rộng CSS với các tính năng và hành vi tùy chỉnh.

Các API Houdini khác bao gồm:

• Paint API: Cho phép bạn định nghĩa hình ảnh nền, đường viền và mặt nạ tùy chỉnh bằng JavaScript.
• Animation Worklet API: Cho phép bạn tạo hoạt ảnh hiệu suất cao bằng JavaScript.
• Layout API: Cho phép bạn định nghĩa các thuật toán bố cục tùy chỉnh cho các phần tử, chẳng hạn như hệ thống lưới hoặc bố cục masonry.
• Parser API: Cho phép bạn phân tích cú pháp và thao tác mã CSS bằng JavaScript.

Bằng cách kết hợp @property với các API Houdini khác, bạn có thể tạo ra các giải pháp CSS thực sự mạnh mẽ và có thể tùy chỉnh.

Kết luận

Quy tắc @property là một bổ sung mạnh mẽ cho CSS, cho phép bạn định nghĩa các kiểu thuộc tính tùy chỉnh, kích hoạt việc tạo kiểu, hoạt ảnh và chuyển đổi nâng cao. Bằng cách sử dụng @property, bạn có thể cải thiện an toàn kiểu, khả năng đọc, khả năng bảo trì và hiệu suất của mã CSS của mình.

Mặc dù hỗ trợ trình duyệt nhìn chung tốt, điều quan trọng là phải kiểm tra mã của bạn trên các trình duyệt khác nhau và cung cấp các cơ chế dự phòng cho các trình duyệt cũ hơn không hỗ trợ @property.

Bằng cách tuân theo các thực hành tốt nhất được nêu trong bài viết này, bạn có thể khai thác sức mạnh của @property để tạo ra những trải nghiệm web thực sự tuyệt vời.

Tìm hiểu thêm

• MDN Web Docs: @property
• Houdini.how: Hướng dẫn về CSS Houdini
• Can I use @property