Giới thiệu về các thuộc tính tùy chỉnh CSS

Sep 14, 2025

Cách

Một trong những tính năng tốt nhất duy nhất của bộ xử lý CSS là các biến. Có khả năng khai báo một lần và sử dụng lại biến trên dự án của bạn không phải là tùy chọn trong bất kỳ hệ thống nào.

5 tính năng CSS mới nóng và cách sử dụng chúng

Sử dụng bộ tiền xử lý như Sass. (Tìm hiểu thêm trong bài viết của chúng tôi Sass là gì? ) cung cấp cho bạn ít nhất một bước xây dựng thêm, có thể là một nỗi đau nếu bạn chỉ muốn xây dựng một thứ nhanh chóng (để xây dựng thực sự nhanh, hãy thử một người tạo ra trang web ). CSS đã đi một chặng đường dài kể từ những ngày tối của hack bảng, vì vậy hãy xem xét một trong những khía cạnh hữu ích nhất: thuộc tính tùy chỉnh.

Để biết thêm những công cụ sẽ làm cho cuộc sống của bạn dễ dàng hơn, hãy xem những thứ này web hosting dịch vụ và lưu trữ đám mây tùy chọn. Hoặc đọc tiếp và chúng ta sẽ bắt đầu với một ví dụ đơn giản.

: root {
      - Màu đỏ: # FC4752;
    Không thể
    
    .Điều hướng Trang web {
      Màu nền: var (- màu đỏ);
    Không thể
    
    .site-footer {
      Màu sắc: var (- màu đỏ);
    }

Các :nguồn gốc Bộ chọn Pseudo nhắm vào phần tử cha cấp cấp cao nhất trong DOM, cho tất cả các yếu tố truy cập vào --màu đỏ . Có, định nghĩa biến CSS nên bắt đầu bằng Bằng và bạn có thể truy cập chúng ở bất cứ đâu với var () . Tốt, bất cứ nơi nào được xếp tầng dưới của chúng tôi :nguồn gốc bộ chọn.

color-red image — Với var (), bạn cũng có thể xác định giá trị dự phòng, sẽ được sử dụng nếu biến đã cho là không thể truy cập hoặc không tồn tại

Với var () Bạn cũng có thể xác định một giá trị dự phòng, sẽ được sử dụng nếu biến đã cho là không thể truy cập hoặc không tồn tại cho lớp.

 .site-điều hướng {
      Màu nền: var (- màu đỏ, đỏ);
    }

Các giá trị được thừa hưởng từ DOM, có nghĩa là bạn có thể làm cho chúng cụ thể hơn.

: root {
      --màu đỏ;
    Không thể
       
    .Điều hướng Trang web {
      --màu xanh lá cây;
      
      Màu nền: var (- màu);
    Không thể
        
    .site-footer {
      Màu sắc: var (- màu);
    }

Mỗi var (- màu) có màu đỏ, ngoại trừ mỗi var (- màu) Dưới Điều hướng Trang web . Nói chung, đó không phải là một thực hành lý tưởng để ghi đè lên một giá trị đã được xác định nhưng có những trường hợp có giá trị phạm vi vẫn là giải pháp đầy đủ nhất.

Đây là những điều cơ bản nhưng bạn có thể làm nhiều hơn nữa. Một ví dụ hữu ích cho thiết kế web đáp ứng đang thay đổi bố cục dựa trên kích thước khung nhìn.

: root {
      - Màu đỏ: # FC4752;
      --flex-layout: hàng;
    Không thể
    
    @Media (chiều rộng tối đa: 640px) {
      :nguồn gốc {
        --flex-layout: cột;
      Không thể
    Không thể
    
    .Điều hướng Trang web {
      Hiển thị: Flex;
      Flex-Direction: var (- flex-layout, hàng);
      
      Màu nền: var (- màu đỏ, đỏ);
    Không thể
    
    .site-footer {
      Màu sắc: var (- màu đỏ);
    }

Dưới 640px Trình kích hoạt truy vấn phương tiện, thay đổi hướng flex sang cột trên lớp điều hướng trang web, tạo nội dung dọc (cột) thay vì ngang (hàng) mặc định. Trong ví dụ này, vì biến mặc định được cung cấp cho điều hướng trang web, bạn thậm chí không cần ban đầu :nguồn gốc định nghĩa của - Bố cục -Flex; thay vào đó nó thực sự sẽ đi thẳng đến hàng.

amedia written in a green bubble — Dưới 640px Trình kích hoạt truy vấn phương tiện, thay đổi hướng Flex thành cột và tạo nội dung dọc thay vì ngang

Điều này thật tuyệt nhưng nó chưa hoàn toàn thú vị và trò chơi nào. Chẳng hạn, vì Truy vấn phương tiện không phải là một phần tử, giá trị điểm dừng không thể đến từ một thuộc tính tùy chỉnh. Mặc dù nhóm làm việc CSS có dự thảo sử dụng env () Đối với các truy vấn, triển khai nhà cung cấp và hỗ trợ thích hợp có lẽ là nhiều năm từ nơi mọi thứ ngày nay.

Không sao đâu. Chúng tôi sẽ bám dính vào những gì chúng ta có bây giờ. Một trường hợp sử dụng nâng cao hơn cho một thuộc tính tùy chỉnh là chuyển đổi chủ đề. Bạn có thể xác định một chủ đề cơ sở, xây dựng trang web của bạn xung quanh nó và chỉ cần bật nó ra, với trình duyệt thực hiện nâng vật nặng. Và nó thậm chí không nặng nề.

Về cơ bản, hãy nghĩ về nó nằm dọc theo các dòng của chế độ ban đêm của Twitter, nhưng không có bạn thực sự chuyển đổi CSS (tôi thấy bạn).

 & lt; main & gt;
      & lt; nav class = "trang web-điều hướng" & gt;
        & lt; div & gt; tôi thích interwebs & lt; / div & gt;
      & lt; / nav & gt;
      & lt; div class = "trang web-footer" & gt;
        & lt; nhãn cho = "bộ chọn màu" & gt; thay đổi màu & lt; / nhãn & gt;
        & lt; loại đầu vào = "màu" id = "picker màu" & gt;
      & lt; / div & gt;
      & lt; phong cách & gt;
        :nguồn gốc {
          - Màu sắc: # FC4752;
        Không thể
        
        cơ thể {lề: 0; Đệm: 0; Không thể
        
        chủ yếu {
          Hiển thị: Flex;
          Hướng dẫn: Cột;
          nội dung biện minh: không gian giữa;
          Chiều cao: 100vh;
        Không thể
        
        .Điều hướng Trang web,
        .site-footer {
          Đệm: 12px;
        Không thể
        
        .Điều hướng Trang web {
          Màu nền: var (- màu, đỏ);
        Không thể
        
        .site-footer {
          Màu sắc: var (- màu);
        Không thể
      & lt; / style & gt;
      & lt; script & gt;
        var colorpicker = document.queryselector ("# Picker Color-Picker");
        colorpicker.addeventlistener ("Thay đổi", hàm () {
          document.documentelement.style.setproperty ("- màu", cái này. Giá trị);
      })
      & lt; / script & gt;
& lt; / main & gt;

Giá trị chọn màu đầu vào thay thế tài liệu của tài liệu --màu sắc giá trị, làm cho sự thay đổi mà không có một cú hích. Bạn có thể chơi với các chế độ hòa trộn, màu kênh alpha hoặc PNG - khả năng và thú vị vô tận.

white text saying - - dark on a dark background — Bạn có thể xây dựng trang web của mình xung quanh một chủ đề cơ sở và chỉ cần bật nó ra, với trình duyệt thực hiện nâng vật nặng

Bây giờ với CSS chứng minh tương lai của bạn, điều này không phụ thuộc vào bất kỳ nhà phát triển nào của bên thứ ba và chỉ sử dụng các thuộc tính tùy chỉnh, có một cơ hội tốt mà bạn được bảo hiểm và sẵn sàng để khởi động sản xuất.

Nhưng nếu bạn muốn một cái gì đó khác ngoài các biến trong mã của bạn, hãy nói các mô-đun CSS? Tính đến ngày hôm nay, đối với các tính năng CSS hiện tại như các mô-đun hoặc làm tổ, bạn không thể dành thêm bước xây dựng nữa, nhưng bạn có thể thực hiện nó với lời hứa ngọt ngào không phải viết lại mã khi các nhà cung cấp bắt kịp với thông số kỹ thuật.

Thay vì tái cấu trúc CSS của bạn mỗi khi bạn muốn cải thiện đầu ra của mình, bạn nên viết mã của mình trong một đặc tả được căn chỉnh theo cách đó ở vị trí đầu tiên. Đây là sự khác biệt chính giữa các bộ xử lý trước và sau bộ xử lý. Một bộ tiền xử lý thực sự ghi CSS cho bạn (về cơ bản, từ tệp văn bản), trong khi bộ xử lý sau căn chỉnh CSS đã hợp lệ để hỗ trợ trình duyệt hơn, sau này cho phép bạn linh hoạt hơn trong quy trình.

Sử dụng phương thức gốc luôn đánh bại cách giải quyết và có kiến thức làm việc về các công nghệ trong tương lai là vị trí tốt nhất bạn có thể ở trong khi học CSS.

Bài viết này ban đầu được xuất bản trong số phát hành 306 của mạng lưới , Tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. Theo dõi mạng tại đây .

Những bài viết liên quan:

5 mẹo cho CSS siêu nhanh
Hiểu thuộc tính Hiển thị CSS
Thủ thuật CSS để cách mạng hóa bố cục web của bạn

Giới thiệu về các thuộc tính tùy chỉnh CSS

Cách - Các bài báo phổ biến nhất

Tạo hiệu ứng Anaglyph cũ

Làm thế nào để vẽ một con voi

Chuyển đổi trò chơi flash sang HTML5

Cách vẽ zombie đầy màu sắc

Nâng cấp kết cấu của bạn trong Trình thiết kế chất

Cách tạo thế giới đầy màu sắc kể một câu chuyện

Tăng tốc độ công việc kết cấu của bạn

Tạo hiệu ứng hỏa hoạn 3D

Thể loại