Phiên bản css nào là tốt nhất?

Năm 2022 được coi là một trong những năm tuyệt vời nhất của CSS, về cả tính năng và bản phát hành tính năng trình duyệt hợp tác, với mục tiêu hợp tác để triển khai 14 tính năng

Xem cuộc nói chuyện Trạng thái của CSS từ Google I/O '22

Tổng quan

Bài đăng này là dạng bài viết của bài nói chuyện được đưa ra tại Google IO 2022. Nó không có nghĩa là hướng dẫn chuyên sâu về từng tính năng, mà là phần giới thiệu và tổng quan ngắn gọn để thu hút sự quan tâm của bạn, cung cấp chiều rộng thay vì chiều sâu. Nếu bạn quan tâm, hãy kiểm tra phần cuối của phần để biết các liên kết tài nguyên để biết thêm thông tin

Mục lục

Sử dụng danh sách dưới đây để chuyển đến các chủ đề quan tâm

Mới vào năm 20222022 và hơn thế nữa

Tính tương thích của trình duyệt web

Lý do chính khiến nhiều tính năng CSS được thiết lập để phát hành hợp tác là do những nỗ lực của Interop 2022. Trước khi nghiên cứu các nỗ lực của Interop, điều quan trọng là phải xem xét các nỗ lực của Compat 2021

Tương thích 2021

Mục tiêu cho năm 2021, dựa trên phản hồi của nhà phát triển thông qua các cuộc khảo sát, là ổn định các tính năng hiện tại, cải thiện bộ thử nghiệm và tăng điểm vượt qua của trình duyệt đối với năm tính năng

1. @media (dynamic-range: high) {
     .neon-pink {
       --neon-glow: color(display-p3 1 0 1);
     }
   }
   
   @supports (color: lab(0% 0 0)) {
     .neon-pink {
       --neon-glow: lab(150% 160 0);
     }
   }

   3 định vị

2. @media (dynamic-range: high) {
     .neon-pink {
       --neon-glow: color(display-p3 1 0 1);
     }
   }
   
   @supports (color: lab(0% 0 0)) {
     .neon-pink {
       --neon-glow: lab(150% 160 0);
     }
   }

   4 kích thước
3. bố cục

   @media (dynamic-range: high) {
     .neon-pink {
       --neon-glow: color(display-p3 1 0 1);
     }
   }
   
   @supports (color: lab(0% 0 0)) {
     .neon-pink {
       --neon-glow: lab(150% 160 0);
     }
   }

   5
4. bố cục

   @media (dynamic-range: high) {
     .neon-pink {
       --neon-glow: color(display-p3 1 0 1);
     }
   }
   
   @supports (color: lab(0% 0 0)) {
     .neon-pink {
       --neon-glow: lab(150% 160 0);
     }
   }

   6

5. @media (dynamic-range: high) {
     .neon-pink {
       --neon-glow: color(display-p3 1 0 1);
     }
   }
   
   @supports (color: lab(0% 0 0)) {
     .neon-pink {
       --neon-glow: lab(150% 160 0);
     }
   }

   7 định vị và hình ảnh động

Điểm kiểm tra được nâng lên trên toàn diện, thể hiện sự ổn định và độ tin cậy được nâng cấp. Xin chúc mừng các đội ở đây

Tương tác 2022

Năm nay, các trình duyệt đã gặp nhau để thảo luận về các tính năng và mức độ ưu tiên mà họ dự định phát triển, đồng thời hợp nhất các nỗ lực của họ. Họ đã lên kế hoạch cung cấp các tính năng web sau cho các nhà phát triển

1. @media (dynamic-range: high) {
     .neon-pink {
       --neon-glow: color(display-p3 1 0 1);
     }
   }
   
   @supports (color: lab(0% 0 0)) {
     .neon-pink {
       --neon-glow: lab(150% 160 0);
     }
   }

   8
2. Không gian màu và chức năng
3. ngăn chặn

4. @media (dynamic-range: high) {
     .neon-pink {
       --neon-glow: color(display-p3 1 0 1);
     }
   }
   
   @supports (color: lab(0% 0 0)) {
     .neon-pink {
       --neon-glow: lab(150% 160 0);
     }
   }

   9
5. khả năng tương thích biểu mẫu
6. cuộn
7. lưới con
8. kiểu chữ
9. Đơn vị khung nhìn
10. tương thích web

Đây là một danh sách thú vị và đầy tham vọng mà tôi nóng lòng muốn xem

Mới cho năm 2022

Không ngạc nhiên khi trạng thái của CSS 2022 bị ảnh hưởng đáng kể bởi hoạt động của Interop 2022

tầng lớp

Hỗ trợ trình duyệt. chrome 99, Được hỗ trợ 99 firefox 97, Được hỗ trợ 97 edge 99, Supported 99 safari 15.4, Supported 15. 4

Trước

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

8, thứ tự được phát hiện của các biểu định kiểu đã tải là rất quan trọng, vì các kiểu được tải sau cùng có thể ghi đè lên các kiểu đã tải trước đó. Điều này dẫn đến các biểu định kiểu mục nhập được quản lý tỉ mỉ, trong đó các nhà phát triển cần tải các kiểu ít quan trọng hơn trước và các kiểu quan trọng hơn sau. Toàn bộ các phương pháp tồn tại để hỗ trợ các nhà phát triển quản lý tầm quan trọng này, chẳng hạn như ITCSS

Với

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

8, tệp mục nhập có thể xác định trước các lớp và thứ tự của chúng trước thời hạn. Sau đó, khi các kiểu tải, được tải hoặc xác định, chúng có thể được đặt trong một lớp, cho phép duy trì tầm quan trọng ghi đè kiểu nhưng không có sự phối hợp tải được quản lý tỉ mỉ

Video cho thấy cách các lớp xếp tầng được xác định cho phép quá trình tải và tạo tự do và tự do hơn, trong khi vẫn duy trì xếp tầng khi cần

Chrome DevTools rất hữu ích để trực quan hóa kiểu nào đến từ lớp nào

Tài nguyên

• Trình giải thích các lớp Cascade
• Các lớp xếp tầng trên MDN
• Una Kravets. tầng lớp
• Ahmad bóng râm. Xin chào, Lớp xếp tầng CSS

lưới con

Hỗ trợ trình duyệt. chrome, Không được hỗ trợ × firefox 71, Được hỗ trợ 71 edge, Not supported × safari 16, Supported 16

Trước

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

2, một lưới bên trong một lưới khác không thể tự căn chỉnh với các ô hoặc đường lưới chính của nó. Mỗi bố cục lưới là duy nhất. Nhiều nhà thiết kế đặt một lưới duy nhất trên toàn bộ thiết kế của họ và liên tục căn chỉnh các mục trong đó, điều này không thể thực hiện được trong CSS

Sau

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

2, phần tử con của lưới có thể sử dụng các cột hoặc hàng của cha mẹ làm cột hoặc hàng của chính nó và căn chỉnh chính nó hoặc các phần tử con với chúng

Trong bản demo sau, phần tử nội dung tạo một lưới cổ điển gồm ba cột. cột ở giữa được gọi là

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

4 và các cột bên trái và bên phải đặt tên cho các dòng của chúng là

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

5. Sau đó, mỗi phần tử trong phần thân,

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

6 và

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

7, sử dụng các dòng được đặt tên từ phần thân bằng cách đặt

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

8

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

6

Cuối cùng, trẻ em của

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

6 hoặc

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

7 có thể tự căn chỉnh hoặc định cỡ bằng cách sử dụng các cột và dòng của

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

5 và

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

4

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

1

Devtools có thể giúp bạn xem các dòng và lưới con (hiện tại chỉ có Firefox). Trong hình ảnh sau đây, lưới cha và lưới con đã được phủ lên. Bây giờ nó giống như cách các nhà thiết kế nghĩ về bố cục

Trong bảng thành phần của devtools, bạn có thể xem thành phần nào là lưới và lưới con, điều này rất hữu ích cho việc gỡ lỗi hoặc xác thực bố cục

Ảnh chụp màn hình từ Firefox Devtools

Tài nguyên

• Lưới con trên MDN
• Bramus. Hướng dẫn bằng video về lưới con CSS thực tế

Truy vấn vùng chứa

Hỗ trợ trình duyệt. chrome 105, Được hỗ trợ 105 firefox, Không được hỗ trợ × edge 105, Supported 105 safari 16, Supported 16

Trước

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

23, các thành phần của trang web chỉ có thể đáp ứng kích thước của toàn bộ khung nhìn. Điều này rất tốt cho bố cục vĩ mô, nhưng đối với bố cục vi mô, trong đó vùng chứa bên ngoài của chúng không phải là toàn bộ chế độ xem, thì bố cục không thể điều chỉnh cho phù hợp

Sau

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

23, các phần tử có thể đáp ứng với kích thước hoặc kiểu vùng chứa chính. Thông báo trước duy nhất là các vùng chứa phải tự khai báo là các mục tiêu truy vấn có thể, đây là một yêu cầu nhỏ để đạt được lợi ích lớn

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

4

Các kiểu này giúp cho các cột Thứ Hai, Thứ Ba, Thứ Tư, Thứ Năm và Thứ Sáu trong video sau đây có thể được các thành phần sự kiện truy vấn

Bản trình diễn của Una Kravets

Đây là CSS để truy vấn bộ chứa

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

25 về kích thước của nó, sau đó điều chỉnh bố cục và kích thước phông chữ

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

6

Đây là một ví dụ khác. một thành phần sách tự điều chỉnh theo không gian có sẵn trong cột mà nó được kéo đến

Bản trình diễn của Max Böck

Una đã đúng khi đánh giá tình hình là. Có nhiều quyết định thiết kế thú vị và có ý nghĩa khi sử dụng

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

23

Tài nguyên

• Trình giải thích truy vấn vùng chứa
• Truy vấn vùng chứa trên MDN
• Bản trình diễn lịch của Una
• Bộ sưu tập truy vấn vùng chứa tuyệt vời
• Cách chúng tôi xây dựng Designcember trên web. nhà phát triển
• Ahmad bóng râm. Nói lời chào với các truy vấn vùng chứa CSS

@media (dynamic-range: high) { .neon-pink { --neon-glow: color(display-p3 1 0 1); }}@supports (color: lab(0% 0 0)) { .neon-pink { --neon-glow: lab(150% 160 0); }}27

Hỗ trợ trình duyệt. chrome 93, Được hỗ trợ 93 firefox 92, Được hỗ trợ 92 edge 93, Supported 93 safari 15.4, Supported 15. 4

Trước

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

27, khi bạn muốn một biểu mẫu có màu phù hợp với thương hiệu, bạn có thể gặp phải các thư viện hoặc giải pháp CSS phức tạp và trở nên khó quản lý theo thời gian. Mặc dù họ cung cấp cho bạn tất cả các tùy chọn và hy vọng bao gồm cả khả năng truy cập, nhưng việc lựa chọn sử dụng các thành phần tích hợp sẵn hoặc sử dụng các thành phần của riêng bạn trở nên tẻ nhạt để tiếp tục chọn

Sau

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

27, một dòng CSS mang lại màu thương hiệu cho các thành phần tích hợp. Ngoài tông màu, trình duyệt chọn một cách thông minh các màu tương phản phù hợp cho các phần phụ trợ của thành phần và thích ứng với bảng màu hệ thống (sáng hoặc tối)

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

1

Để tìm hiểu thêm về

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

27, hãy xem bài đăng của tôi trên web. dev nơi tôi khám phá nhiều khía cạnh khác của thuộc tính CSS hữu ích này.

Tài nguyên

• màu nhấn trên MDN
• màu nhấn trên web. nhà phát triển
• Bramus. Tô màu Điều khiển giao diện người dùng với màu nhấn CSS

Cấp độ màu 4 và 5

Web đã bị sRGB thống trị trong nhiều thập kỷ qua, nhưng trong thế giới kỹ thuật số ngày càng mở rộng của màn hình độ nét cao và thiết bị di động được trang bị sẵn màn hình OLED hoặc QLED, sRGB là không đủ. Hơn nữa, các trang động thích ứng với sở thích của người dùng được mong đợi và quản lý màu sắc là mối quan tâm ngày càng tăng đối với các nhà thiết kế, hệ thống thiết kế và người bảo trì mã

Tuy nhiên, không phải vào năm 2022—CSS có một số chức năng và không gian màu mới

• Màu sắc đạt đến khả năng màu HD của màn hình
• Không gian màu phù hợp với mục đích, chẳng hạn như tính đồng nhất về nhận thức
• Không gian màu cho độ dốc làm thay đổi đáng kể kết quả nội suy
• Các chức năng màu giúp bạn trộn và tương phản, đồng thời chọn không gian bạn thực hiện công việc

Trước tất cả các tính năng màu này, các hệ thống thiết kế cần tính toán trước các màu tương phản thích hợp và đảm bảo các bảng màu rực rỡ phù hợp, tất cả trong khi các bộ tiền xử lý hoặc JavaScript đã thực hiện công việc nặng nhọc này.

Sau tất cả các tính năng màu này, trình duyệt và CSS có thể thực hiện tất cả công việc một cách linh hoạt và kịp thời. Thay vì gửi nhiều KB CSS và JavaScript cho người dùng để bật màu theo chủ đề và trực quan hóa dữ liệu, CSS có thể thực hiện việc sắp xếp và tính toán. CSS cũng được trang bị tốt hơn để kiểm tra hỗ trợ trước khi sử dụng hoặc xử lý dự phòng một cách khéo léo

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

41

Hỗ trợ trình duyệt. chrome 101, Được hỗ trợ 101 firefox 96, Được hỗ trợ 96 edge 101, Supported 101 safari 15, Supported 15

HWB là viết tắt của hue, whiteness, and blackness. Nó tự thể hiện như một cách kết hợp màu sắc thân thiện với con người, vì nó chỉ là một màu sắc và một lượng trắng hoặc đen để làm sáng hoặc làm tối. Các nghệ sĩ trộn màu với trắng hoặc đen có thể thấy mình đánh giá cao việc bổ sung cú pháp màu này

Sử dụng chức năng màu này dẫn đến các màu từ không gian màu sRGB, giống như HSL và RGB. Xét về tính mới cho năm 2022, điều này không mang lại cho bạn màu sắc mới, nhưng nó có thể giúp một số tác vụ trở nên dễ dàng hơn đối với những người yêu thích cú pháp và mô hình tinh thần

Tài nguyên

• HWB trên MDN
• Stefan Judis. hwb() – một ký hiệu màu cho con người?

không gian màu

Cách thể hiện màu sắc được thực hiện với một không gian màu. Mỗi không gian màu cung cấp các tính năng và sự đánh đổi khác nhau để làm việc với màu sắc. Một số có thể kết hợp tất cả các màu sắc tươi sáng với nhau;

CSS 2022 được thiết lập để cung cấp 10 không gian màu mới, mỗi không gian có các tính năng độc đáo để hỗ trợ các nhà thiết kế và nhà phát triển trong việc hiển thị, chọn và trộn màu. Trước đây, sRGB là tùy chọn duy nhất để làm việc với màu sắc, nhưng giờ đây CSS mở ra tiềm năng mới và một không gian màu mặc định mới, LCH

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

42

Hỗ trợ trình duyệt. chrome, Không được hỗ trợ × firefox 88, Đằng sau một lá cờ ⚑ edge, Not supported × safari 15, Behind a flag ⚑

Trước

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

42, các nhà phát triển và nhà thiết kế cần các bộ tiền xử lý như Sass để trộn màu trước khi trình duyệt nhìn thấy chúng. Hầu hết các chức năng trộn màu cũng không cung cấp tùy chọn chỉ định không gian màu nào sẽ thực hiện trộn, đôi khi dẫn đến kết quả khó hiểu

Sau

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

42, nhà phát triển và nhà thiết kế có thể trộn màu trong trình duyệt, cùng với tất cả các kiểu khác của họ mà không cần chạy quy trình xây dựng hoặc bao gồm JavaScript. Ngoài ra, họ có thể chỉ định không gian màu nào sẽ thực hiện trộn hoặc sử dụng không gian màu trộn mặc định của LCH

Thông thường, một màu thương hiệu được sử dụng làm cơ sở và các biến thể được tạo từ màu đó, chẳng hạn như màu sáng hơn hoặc tối hơn cho các kiểu di chuột. Đây là giao diện của

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

42

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

và nếu bạn muốn trộn các màu đó trong một không gian màu khác, chẳng hạn như srgb, hãy thay đổi nó

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

2

Dưới đây là bản demo theo chủ đề bằng cách sử dụng

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

42. Hãy thử thay đổi màu thương hiệu và xem cập nhật chủ đề

Tận hưởng việc trộn màu trong các không gian màu khác nhau trong biểu định kiểu của bạn vào năm 2022

Tài nguyên

• phối màu() trên MDN
• bản trình diễn theo chủ đề
• Một bản demo theo chủ đề khác
• Fabio Giolito. Tạo chủ đề màu với các tính năng CSS sắp ra mắt này

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

47

Hỗ trợ trình duyệt. chrome, Không được hỗ trợ × firefox, Không được hỗ trợ × edge, Not supported × safari 15, Behind a flag ⚑

Trước

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

47, các tác giả biểu định kiểu cần biết trước các màu có thể truy cập được. Thông thường, một bảng màu sẽ hiển thị văn bản đen hoặc trắng trên một mẫu màu, để cho người dùng hệ thống màu biết màu văn bản nào sẽ cần để tương phản chính xác với mẫu màu đó.

Ví dụ từ

Sau

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

47, tác giả biểu định kiểu có thể giảm tải hoàn toàn tác vụ cho trình duyệt. Bạn không chỉ có thể sử dụng trình duyệt để tự động chọn màu đen hoặc trắng, mà bạn còn có thể cung cấp cho nó một danh sách các màu phù hợp với hệ thống thiết kế và để nó chọn màu đầu tiên vượt qua tỷ lệ tương phản mong muốn của bạn

Đây là ảnh chụp màn hình của bản demo bộ bảng màu HWB trong đó màu văn bản được trình duyệt tự động chọn dựa trên màu mẫu

Hãy thử bản trình diễn

Cú pháp cơ bản trông như thế này, trong đó màu xám được chuyển đến hàm và trình duyệt xác định xem màu đen hay trắng có độ tương phản cao nhất

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

4

Chức năng này cũng có thể được tùy chỉnh với một danh sách các màu, từ đó nó sẽ chọn màu tương phản cao nhất từ ​​​​lựa chọn

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

6

Cuối cùng, trong trường hợp không nên chọn màu tương phản cao nhất từ ​​danh sách, thì có thể cung cấp tỷ lệ tương phản mục tiêu và màu đầu tiên vượt qua nó sẽ được chọn

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

10

Chức năng này có thể được sử dụng cho nhiều mục đích khác ngoài màu văn bản, mặc dù tôi ước tính đó sẽ là trường hợp sử dụng chính của nó. Hãy nghĩ xem việc cung cấp các giao diện có thể truy cập và dễ đọc sẽ dễ dàng như thế nào sau khi việc chọn các màu tương phản thích hợp được tích hợp vào chính ngôn ngữ CSS

Tài nguyên

• độ tương phản màu () trên MDN
• Thử nghiệm

Cú pháp màu tương đối

Hỗ trợ trình duyệt. chrome, Không được hỗ trợ × firefox, Không được hỗ trợ × edge, Not supported × safari 15, Supported 15

Trước cú pháp màu tương đối, để tính toán màu và thực hiện điều chỉnh, các kênh màu cần được đặt riêng vào các thuộc tính tùy chỉnh. Hạn chế này cũng làm cho HSL trở thành hàm màu chính để thao tác màu vì màu sắc, độ bão hòa hoặc độ sáng đều có thể được điều chỉnh một cách đơn giản với

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

60

Sau cú pháp màu tương đối, bất kỳ màu nào trong bất kỳ không gian nào đều có thể được giải cấu trúc, sửa đổi và trả về dưới dạng màu, tất cả trong một dòng CSS. Không còn giới hạn đối với HSL—các thao tác có thể được thực hiện trong bất kỳ không gian màu nào mong muốn và cần tạo nhiều thuộc tính ít tùy chỉnh hơn để tạo điều kiện thuận lợi

Trong ví dụ cú pháp sau đây, một hex cơ sở được cung cấp và hai màu mới được tạo tương ứng với nó. Màu đầu tiên

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

61 tạo ra một màu mới trong LCH từ màu cơ bản, sau đó tiến hành thay thế độ đậm nhạt của màu cơ bản bằng

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

62, duy trì sắc độ (

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

63) và sắc độ (

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

64). Màu thứ hai

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

65 tạo ra một màu mới trong LCH từ màu cơ bản, nhưng lần này làm giảm sắc độ (

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

63) đi 20%

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

11

Nó giống như pha trộn màu sắc, nhưng nó giống với sự thay đổi hơn là pha trộn. Bạn có thể truyền một màu từ một màu khác, có quyền truy cập vào ba giá trị kênh như được đặt tên theo chức năng màu được sử dụng, với cơ hội điều chỉnh các kênh đó. Nói chung, đây là một cú pháp rất hay và mạnh mẽ cho màu sắc

Trong bản demo sau đây, tôi đã sử dụng cú pháp màu tương đối để tạo các biến thể sáng hơn và tối hơn của màu cơ bản và sử dụng

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

47 để đảm bảo các nhãn có độ tương phản phù hợp

Hãy thử bản trình diễn

Chức năng này cũng có thể được sử dụng để tạo bảng màu. Đây là bản demo trong đó toàn bộ bảng màu được tạo từ màu cơ bản được cung cấp. Một bộ CSS này cung cấp năng lượng cho tất cả các bảng màu khác nhau, mỗi bảng màu chỉ cung cấp một cơ sở khác nhau. Như một phần thưởng, vì tôi đã sử dụng LCH, hãy nhìn vào cảm nhận của các bảng màu — không có điểm nóng hoặc điểm chết nào được nhìn thấy, nhờ vào không gian màu này

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

12Dùng thử bản trình diễn

Hy vọng rằng bây giờ bạn có thể thấy không gian màu và các chức năng màu khác nhau có thể được sử dụng cho các mục đích khác nhau như thế nào, dựa trên điểm mạnh và điểm yếu của chúng

Tài nguyên

• Xây dựng bảng màu với cú pháp màu tương đối
• Xây dựng các biến thể màu với cú pháp màu tương đối

Không gian màu gradient

Trước không gian màu gradient, sRGB là không gian màu mặc định được sử dụng. sRGB nói chung là đáng tin cậy, nhưng có một số điểm yếu như vùng chết màu xám

Sau các không gian màu gradient, hãy cho trình duyệt biết không gian màu nào sẽ được sử dụng cho phép nội suy màu. Điều này mang lại cho các nhà phát triển và nhà thiết kế khả năng chọn độ dốc mà họ thích. Không gian màu mặc định cũng thay đổi thành LCH thay vì sRGB

Việc bổ sung cú pháp đi theo hướng gradient, sử dụng cú pháp

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

68 mới và là tùy chọn

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

13

Đây là một gradient cơ bản và cần thiết từ đen sang trắng. Nhìn vào phạm vi kết quả trong mỗi không gian màu. Một số chuyển sang màu đen sẫm sớm hơn những số khác, một số chuyển sang màu trắng quá muộn

Trong ví dụ tiếp theo này, màu đen được chuyển sang màu xanh lam vì đây là không gian có vấn đề đã biết đối với độ dốc. Hầu hết các không gian màu chuyển sang màu tím trong quá trình nội suy màu hoặc, như tôi muốn nghĩ về nó, khi các màu di chuyển bên trong không gian màu của chúng từ điểm A đến điểm B. Vì dải màu sẽ đi theo một đường thẳng từ điểm A đến điểm B, nên hình dạng của không gian màu sẽ thay đổi đáng kể các điểm dừng mà đường đi trên đường đi

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

69 và

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

100 là các không gian màu chuyên biệt giải thích cho các hiệu ứng trôi khác nhau, như màu này thành màu tím, làm cho chúng đặc biệt chính xác đối với chuyển màu

Để khám phá sâu hơn, ví dụ và nhận xét, hãy đọc chủ đề Twitter này

Tài nguyên

• Demo so sánh độ dốc trong không gian
• Máy tính xách tay có thể quan sát so sánh độ dốc

@media (dynamic-range: high) { .neon-pink { --neon-glow: color(display-p3 1 0 1); }}@supports (color: lab(0% 0 0)) { .neon-pink { --neon-glow: lab(150% 160 0); }}101

Hỗ trợ trình duyệt. chrome 102, Được hỗ trợ 102 firefox, Không được hỗ trợ × edge 102, Supported 102 safari 15.5, Supported 15. 5

Trước

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

101, một phương pháp hay là hướng sự tập trung của người dùng vào các khu vực của trang hoặc ứng dụng cần chú ý ngay lập tức. Chiến lược tập trung có hướng dẫn này được gọi là bẫy tiêu điểm vì các nhà phát triển sẽ đặt tiêu điểm vào một không gian tương tác, lắng nghe các sự kiện thay đổi tiêu điểm và nếu tiêu điểm rời khỏi không gian tương tác, thì tiêu điểm đó sẽ bị buộc quay lại. Người dùng trên bàn phím hoặc trình đọc màn hình được hướng dẫn quay lại không gian tương tác để đảm bảo hoàn thành nhiệm vụ trước khi tiếp tục

Sau

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

101, không cần đặt bẫy vì bạn có thể đóng băng hoặc bảo vệ toàn bộ các phần của trang hoặc ứng dụng. Các lần nhấp và nỗ lực thay đổi tiêu điểm chỉ đơn giản là không khả dụng trong khi các phần đó của tài liệu bị trơ. Người ta cũng có thể nghĩ về điều này giống như những người bảo vệ thay vì một cái bẫy, nơi mà

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

101 không quan tâm đến việc khiến bạn ở lại một nơi nào đó, thay vì khiến những nơi khác không có sẵn

Một ví dụ điển hình về điều này là hàm JavaScript

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

105

Trang web được hiển thị dưới dạng tương tác, sau đó một cảnh báo() được gọi và trang không còn hoạt động

Lưu ý trong video trước cách trang có thể truy cập bằng chuột và bàn phím cho đến khi một

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

105 được gọi. Sau khi cửa sổ bật lên hộp thoại cảnh báo được hiển thị, phần còn lại của trang bị đóng băng hoặc

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

101. Tiêu điểm của người dùng được đặt bên trong hộp thoại cảnh báo và không có nơi nào khác để đi. Sau khi người dùng tương tác và hoàn thành yêu cầu chức năng cảnh báo, trang sẽ tương tác trở lại.

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

101 trao quyền cho các nhà phát triển để đạt được trải nghiệm tập trung có hướng dẫn tương tự này một cách dễ dàng

Đây là một mẫu mã nhỏ để cho thấy nó hoạt động như thế nào

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

14

Một hộp thoại là một ví dụ tuyệt vời, nhưng

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

101 cũng hữu ích cho những thứ như trải nghiệm người dùng menu bên trượt. Khi người dùng trượt menu bên, không được để chuột hoặc bàn phím tương tác với trang phía sau nó; . Thay vào đó, khi menu bên đang hiển thị, hãy làm cho trang bị trơ và giờ đây, người dùng phải đóng hoặc điều hướng trong menu bên đó và sẽ không bao giờ thấy mình bị lạc ở một nơi nào khác trong trang có menu đang mở

Tài nguyên

• Trơ trên MDN
• Nhà phát triển Chrome. giới thiệu trơ

Phông chữ COLRv1

Trước phông chữ COLRv1, web có phông chữ OT-SVG, cũng là định dạng mở cho phông chữ có độ dốc và màu sắc và hiệu ứng tích hợp. Tuy nhiên, chúng có thể phát triển rất lớn và mặc dù chúng cho phép chỉnh sửa văn bản nhưng không có nhiều phạm vi để tùy chỉnh.

Sau phông chữ COLRv1, web có dấu chân nhỏ hơn, phông chữ có thể mở rộng theo vectơ, có thể định vị lại, có tính năng chuyển màu và chế độ hòa trộn chấp nhận các tham số để tùy chỉnh phông chữ cho mỗi trường hợp sử dụng hoặc để phù hợp với thương hiệu

Hình ảnh có nguồn gốc từ https. // nhà phát triển. trình duyệt Chrome. com/blog/colrv1-phông chữ/

Đây là một ví dụ từ bài đăng trên blog của Nhà phát triển Chrome về biểu tượng cảm xúc. Có thể bạn đã nhận thấy rằng nếu bạn tăng kích thước phông chữ trên một biểu tượng cảm xúc, thì nó sẽ không sắc nét. Đó là một hình ảnh chứ không phải nghệ thuật vector. Thông thường, trong các ứng dụng khi sử dụng biểu tượng cảm xúc, biểu tượng cảm xúc đó sẽ được hoán đổi thành nội dung có chất lượng cao hơn. Với phông chữ COLRv1, các biểu tượng cảm xúc có dạng vector và đẹp mắt

Phông chữ biểu tượng có thể làm một số điều tuyệt vời với định dạng này, cung cấp bảng màu hai tông màu tùy chỉnh, v.v. Tải phông chữ COLRv1 giống như bất kỳ tệp phông chữ nào khác

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

15

Việc tùy chỉnh phông chữ COLRv1 được thực hiện với

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

110, một quy tắc CSS đặc biệt để nhóm và đặt tên cho một tập hợp các tùy chọn tùy chỉnh thành một gói để tham khảo sau này. Lưu ý cách bạn chỉ định tên tùy chỉnh giống như thuộc tính tùy chỉnh, bắt đầu bằng

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

111

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

16

Với

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

112 làm bí danh cho các tùy chỉnh, bước cuối cùng là áp dụng bảng màu cho một thành phần đang sử dụng họ phông chữ màu

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

17Phông chữ Bungee Spice được hiển thị với màu tùy chỉnh, nguồn từ https. // nhà phát triển. trình duyệt Chrome. com/blog/colrv1-phông chữ/

Với ngày càng có nhiều phông chữ và phông chữ màu sắc khác nhau, kiểu chữ trên web đang trên con đường rất tuyệt vời hướng tới sự tùy biến phong phú và biểu đạt sáng tạo

Tài nguyên

• Đặc tả Colrv1 trên Github
• Nhà phát triển Chrome. Phông chữ Colrv1
• Video giải thích của nhà phát triển BlinkOn

Đơn vị khung nhìn

Trước các biến thể khung nhìn mới, web đã cung cấp các đơn vị vật lý để hỗ trợ lắp khung nhìn. Có một cho chiều cao, chiều rộng, kích thước nhỏ nhất (vmin) và cạnh lớn nhất (vmax). Chúng hoạt động tốt với nhiều thứ, nhưng trình duyệt di động gây ra sự phức tạp

Trên thiết bị di động, khi tải trang, thanh trạng thái có url được hiển thị và thanh này chiếm một phần không gian của chế độ xem. Sau một vài giây và một số tương tác, thanh trạng thái có thể trượt đi để mang lại trải nghiệm chế độ xem lớn hơn cho người dùng. Nhưng khi thanh đó trượt ra, chiều cao của khung nhìn đã thay đổi và mọi đơn vị

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

113 sẽ dịch chuyển và thay đổi kích thước khi kích thước mục tiêu của chúng thay đổi. Trong những năm sau đó, đơn vị

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

113 đặc biệt cần quyết định xem nó sẽ sử dụng kích thước khung nhìn nào trong số hai kích thước khung nhìn, vì nó gây ra các vấn đề về bố cục hình ảnh chói tai trên thiết bị di động. Người ta đã xác định rằng

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

113 sẽ luôn đại diện cho khung nhìn lớn nhất

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

18

Sau các biến thể khung nhìn mới, các đơn vị khung nhìn nhỏ, lớn và động được cung cấp, với việc bổ sung các giá trị logic tương đương với các đơn vị vật lý. Ý tưởng là cung cấp cho các nhà phát triển và nhà thiết kế khả năng chọn đơn vị nào họ muốn sử dụng cho kịch bản nhất định của họ. Có thể có một sự thay đổi nhỏ về bố cục gây chói tai khi thanh trạng thái biến mất, do đó, bạn có thể sử dụng

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

116 (chiều cao khung nhìn động) mà không phải lo lắng

Dưới đây là danh sách đầy đủ tất cả các tùy chọn đơn vị khung nhìn mới có sẵn với các biến thể khung nhìn mới

Đơn vị khung nhìn chiều cao

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

19

Đơn vị khung nhìn chiều rộng

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

40

Đơn vị bên khung nhìn nhỏ nhất

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

41

Đơn vị bên khung nhìn lớn nhất

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

42

Hy vọng rằng những điều này sẽ cung cấp cho các nhà phát triển và nhà thiết kế sự linh hoạt cần thiết để đạt được các thiết kế đáp ứng chế độ xem của họ

Tài nguyên

• Bramus. Khung nhìn lớn, nhỏ và động

@media (dynamic-range: high) { .neon-pink { --neon-glow: color(display-p3 1 0 1); }}@supports (color: lab(0% 0 0)) { .neon-pink { --neon-glow: lab(150% 160 0); }}117

Hỗ trợ trình duyệt. chrome 105, Được hỗ trợ 105 firefox 103, Đằng sau một lá cờ ⚑ edge 105, Supported 105 safari 15.4, Supported 15. 4

Trước

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

117, bộ chọn of luôn ở cuối. Ví dụ: chủ đề của bộ chọn này là một mục danh sách.

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

119. Bộ chọn giả có thể thay đổi bộ chọn nhưng chúng không thay đổi chủ đề.

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

120 hoặc

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

121

Sau

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

117, chủ đề cao hơn trong cây phần tử có thể vẫn là chủ đề trong khi cung cấp truy vấn về trẻ em.

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

123. Thật dễ hiểu vì sao

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

117 lại có tên chung là "bộ chọn cha", vì đối tượng của bộ chọn bây giờ là cha trong trường hợp này

Đây là một ví dụ cú pháp cơ bản trong đó lớp

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

125 vẫn là chủ ngữ nhưng chỉ được chọn nếu một phần tử con có lớp

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

126

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

43

Đây là một ví dụ trong đó phần tử

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

127 là chủ ngữ, nhưng bộ chọn chỉ khớp nếu một trong các phần tử con có

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

128

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

44

đã hoạt động tương tự như

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

130 và nên được sử dụng thay thế

Bộ chọn

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

117 bắt đầu trở thành một tiện ích tuyệt vời khi các trường hợp sử dụng thực tế trở nên rõ ràng hơn. Ví dụ: hiện tại không thể chọn thẻ

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

132 khi chúng bao bọc hình ảnh, gây khó khăn cho việc hướng dẫn thẻ neo cách thay đổi kiểu của nó trong trường hợp sử dụng đó. Có thể với

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

117 mặc dù

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

45

Đây đều là những ví dụ mà

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

117 chỉ trông giống như một bộ chọn gốc. Xem xét trường hợp sử dụng hình ảnh bên trong các phần tử

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

135 và điều chỉnh kiểu trên hình ảnh nếu hình có

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

136. Trong ví dụ sau, các hình có chú thích hình được chọn và sau đó chọn hình ảnh trong ngữ cảnh đó.

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

117 được sử dụng và không thay đổi chủ đề, vì chủ đề chúng tôi đang nhắm mục tiêu là hình ảnh không phải số liệu

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

46

Sự kết hợp dường như là vô tận. Kết hợp

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

117 với truy vấn số lượng và điều chỉnh bố cục lưới CSS dựa trên số lượng trẻ em. Kết hợp

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

117 với và tạo các ứng dụng phản hồi theo những cách sáng tạo mới

Kiểm tra hỗ trợ được thực hiện đơn giản với

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

140 và chức năng của nó, kiểm tra xem trình duyệt có hiểu cú pháp trước khi sử dụng không

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

47

Tài nguyên

• has() trên MDN
• Bộ chọn CSS

  @media (dynamic-range: high) {
    .neon-pink {
      --neon-glow: color(display-p3 1 0 1);
    }
  }
  
  @supports (color: lab(0% 0 0)) {
    .neon-pink {
      --neon-glow: lab(150% 160 0);
    }
  }

  117 không chỉ là "bộ chọn chính"

2022 và hơn thế nữa

Vẫn còn một số điều sẽ khó thực hiện sau khi tất cả những tính năng tuyệt vời này cập bến vào năm 2022. Phần tiếp theo xem xét một số vấn đề còn tồn tại và các giải pháp đang được tích cực phát triển để giải quyết chúng. Các giải pháp này là thử nghiệm, mặc dù chúng có thể được chỉ định hoặc có sẵn sau các cờ trong trình duyệt

Kết quả cuối cùng từ các phần tiếp theo sẽ khiến bạn yên tâm rằng các vấn đề được liệt kê có nhiều người từ nhiều công ty đang tìm cách giải quyết—chứ không phải các giải pháp này sẽ được tung ra vào năm 2023

Thuộc tính tùy chỉnh được gõ lỏng lẻo

Hỗ trợ trình duyệt. chrome 85, Được hỗ trợ 85 firefox, Không được hỗ trợ × edge 85, Supported 85 safari, Not supported ×

Thuộc tính tùy chỉnh CSS thật tuyệt vời. Chúng cho phép tất cả mọi thứ được lưu trữ bên trong một biến được đặt tên, sau đó có thể mở rộng, tính toán, chia sẻ và hơn thế nữa. Trên thực tế, chúng rất linh hoạt, thật tuyệt nếu có một số ít linh hoạt hơn

Xem xét một kịch bản trong đó một

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

143 sử dụng các thuộc tính tùy chỉnh cho các giá trị của nó

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

48

Tất cả điều này hoạt động tốt cho đến khi bất kỳ thuộc tính nào được thay đổi thành giá trị mà CSS không chấp nhận ở đó, chẳng hạn như

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

144. Toàn bộ bóng bị hỏng nếu bất kỳ một trong các biến lồng nhau bị thiếu hoặc được đặt thành loại giá trị không hợp lệ

Đây là nơi mà

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

145 xuất hiện.

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

146 có thể trở thành thuộc tính tùy chỉnh đã nhập, không còn lỏng lẻo và linh hoạt nữa mà an toàn với một số ranh giới xác định

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

49

Bây giờ, khi

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

143 sử dụng

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

148 và sau đó dùng thử

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

144, thì

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

150 sẽ bị bỏ qua vì nó không phải là

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

151. Điều này có nghĩa là bóng tiếp tục hoạt động, mặc dù giá trị không hợp lệ đã được cung cấp cho một trong các thuộc tính tùy chỉnh của nó. Thay vì thất bại, nó trở lại

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

152 của

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

153

hoạt hình

Ngoài sự an toàn về loại, nó còn mở ra nhiều cánh cửa cho hoạt ảnh. Tính linh hoạt của cú pháp CSS làm cho một số thứ không thể hoạt hình, chẳng hạn như độ dốc.

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

145 trợ giúp ở đây vì thuộc tính CSS đã nhập có thể thông báo cho trình duyệt về ý định của nhà phát triển bên trong phép nội suy quá phức tạp. Về cơ bản, nó giới hạn phạm vi khả năng đến mức một trình duyệt có thể tạo hiệu ứng động cho các khía cạnh của một phong cách mà trước đây nó không thể làm được.

Xem xét ví dụ trình diễn này, trong đó độ dốc xuyên tâm được sử dụng để tạo một phần của lớp phủ, tạo hiệu ứng tiêu điểm nổi bật. JavaScript đặt chuột x và y khi nhấn phím alt/opt, sau đó thay đổi kích thước tiêu cự thành giá trị nhỏ hơn, chẳng hạn như 25%, tạo vòng tròn tiêu điểm nổi bật ở vị trí chuột

Hãy thử bản demo

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

60

Tuy nhiên, gradient không thể hoạt hình được. Chúng quá linh hoạt và quá phức tạp để trình duyệt "chỉ lấy" cách bạn muốn chúng hoạt ảnh. Tuy nhiên, với

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

145, một thuộc tính có thể được nhập và tạo hoạt ảnh riêng biệt, nhờ đó trình duyệt có thể dễ dàng hiểu ý định

Trò chơi điện tử sử dụng hiệu ứng tiêu điểm này luôn tạo hiệu ứng hình tròn, từ hình tròn lớn đến hình tròn lỗ kim. Đây là cách sử dụng

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

145 với bản trình diễn của chúng tôi để trình duyệt tạo hoạt ảnh cho mặt nạ chuyển sắc

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

61Thử bản trình diễn

Trình duyệt hiện có thể tạo hiệu ứng động cho kích thước dải màu vì chúng tôi đã giảm diện tích bề mặt của sửa đổi xuống chỉ còn một thuộc tính và nhập giá trị để trình duyệt có thể nội suy độ dài một cách thông minh

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

145 có thể làm được nhiều hơn thế, nhưng những hỗ trợ nhỏ này có thể đi một chặng đường dài

Tài nguyên

• @property trên MDN
• @property trên web. nhà phát triển
• Trình diễn lấy nét thu phóng
• Thủ thuật CSS. Khám phá @property và sức mạnh hoạt hình của nó

Đã ở @media (dynamic-range: high) { .neon-pink { --neon-glow: color(display-p3 1 0 1); }}@supports (color: lab(0% 0 0)) { .neon-pink { --neon-glow: lab(150% 160 0); }}158 hoặc @media (dynamic-range: high) { .neon-pink { --neon-glow: color(display-p3 1 0 1); }}@supports (color: lab(0% 0 0)) { .neon-pink { --neon-glow: lab(150% 160 0); }}159

Trước các phạm vi truy vấn phương tiện, truy vấn phương tiện CSS sử dụng

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

158 và

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

159 để trình bày rõ ràng trên và dưới các điều kiện. Nó có thể trông như thế này

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

62

Sau phạm vi truy vấn phương tiện, cùng một truy vấn phương tiện có thể trông như thế này

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

63

Truy vấn phương tiện CSS sử dụng cả

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

158 và

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

159 có thể trông như thế này

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

64

Sau phạm vi truy vấn phương tiện, cùng một truy vấn phương tiện có thể trông như thế này

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

65

Tùy thuộc vào nền tảng mã hóa của bạn, một trong số đó sẽ trông dễ đọc hơn nhiều so với nền tảng còn lại. Nhờ các bổ sung thông số kỹ thuật, các nhà phát triển sẽ có thể chọn cái họ thích hoặc thậm chí sử dụng chúng thay thế cho nhau

Tài nguyên

• Cú pháp phạm vi truy vấn phương tiện Plugin PostCSS

Không có biến truy vấn phương tiện

Trước

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

164, các truy vấn phương tiện phải lặp đi lặp lại nhiều lần hoặc dựa vào bộ tiền xử lý để tạo đầu ra phù hợp dựa trên các biến tĩnh trong thời gian xây dựng

Sau

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

164, CSS cho phép đặt răng cưa cho các truy vấn phương tiện và tham chiếu chúng, giống như một thuộc tính tùy chỉnh

Đặt tên cho mọi thứ là rất quan trọng. nó có thể sắp xếp mục đích phù hợp với cú pháp, giúp mọi thứ dễ dàng chia sẻ hơn và dễ sử dụng hơn trong nhóm. Dưới đây là một vài custom media query theo tôi giữa các dự án

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

66

Bây giờ chúng đã được xác định, tôi có thể sử dụng một trong số chúng như thế này

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

67

Tìm một tôi sử dụng bên trong thư viện thuộc tính tùy chỉnh CSS của tôi Open Props

Tài nguyên

• Truy vấn phương tiện tùy chỉnh plugin PostCSS

Bộ chọn lồng nhau rất đẹp

Trước

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

166, có rất nhiều sự lặp lại trong biểu định kiểu. Nó trở nên đặc biệt khó sử dụng khi các bộ chọn dài và mỗi bộ chọn nhắm mục tiêu đến những khác biệt nhỏ. Sự tiện lợi của việc lồng ghép là một trong những lý do phổ biến nhất để áp dụng bộ tiền xử lý

Sau

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

166, sự lặp lại không còn nữa. Gần như mọi tính năng của việc lồng ghép hỗ trợ tiền xử lý sẽ được tích hợp vào CSS

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

68

Sử dụng cú pháp ngay hôm nay với PostCSS và plugin PostCSS Nesting

Đối với tôi, điều quan trọng nhất về việc lồng nhau, ngoài việc không lặp lại

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

168 trong bộ chọn lồng nhau, là bối cảnh tạo kiểu vẫn nằm trong một khối kiểu. Thay vì chuyển từ một bộ chọn và các kiểu của nó sang một bộ chọn khác có kiểu (ví dụ 1), người đọc có thể ở trong ngữ cảnh của một bài viết và xem bài viết sở hữu các liên kết bên trong nó. Mối quan hệ và mục đích phong cách được kết hợp với nhau, vì vậy

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

168 dường như có phong cách riêng

Quyền sở hữu cũng có thể được coi là tập trung hóa. Thay vì tìm xung quanh biểu định kiểu để tìm các kiểu có liên quan, tất cả chúng có thể được tìm thấy lồng vào nhau trong một ngữ cảnh. Điều này hoạt động với các mối quan hệ cha mẹ với con cái, mà còn với các mối quan hệ con cái với cha mẹ

Hãy xem xét một thành phần con muốn tự điều chỉnh khi ở trong ngữ cảnh cha mẹ khác, trái ngược với cha mẹ sở hữu kiểu và thay đổi con

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

69

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

166 giúp về tổng thể với tổ chức, tập trung hóa và quyền sở hữu theo phong cách lành mạnh hơn. Các thành phần có thể nhóm và sở hữu các kiểu riêng của chúng, thay vì để chúng lan truyền giữa các khối kiểu khác. Nó có vẻ nhỏ trong những ví dụ này, nhưng nó có thể có tác động rất lớn, vì cả sự thuận tiện và dễ đọc

Cảnh báo

Việc lồng nhiều hơn bốn hoặc năm cấp độ có thể trở nên rắc rối hơn so với các bộ chọn lặp lại. Chúng tôi khuyên bạn không nên lồng quá sâu, thay vào đó hãy bắt đầu một blog bộ chọn mới và lồng vào đó

Tài nguyên

• @nest đặc điểm kỹ thuật
• @nest plugin PostCSS
• Bramus. Tương lai của CSS. Bộ chọn lồng nhau

Phạm vi phong cách thực sự khó khăn

Trước

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

171, nhiều chiến lược đã tồn tại do các kiểu trong CSS xếp tầng, kế thừa và có phạm vi toàn cầu theo mặc định. Các tính năng này của CSS rất thuận tiện cho nhiều thứ, nhưng đối với các trang web và ứng dụng phức tạp, với nhiều kiểu thành phần tiềm ẩn khác nhau, không gian toàn cầu và tính chất của tầng có thể khiến các kiểu có cảm giác như chúng đang bị rò rỉ

Sau

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

171, các kiểu không chỉ có thể được đặt trong phạm vi chỉ trong một ngữ cảnh, chẳng hạn như một lớp, chúng còn có thể nói rõ nơi các kiểu kết thúc và không tiếp tục xếp tầng hoặc kế thừa

Trong ví dụ sau, phạm vi quy ước đặt tên BEM có thể được đảo ngược thành mục đích thực tế. Bộ chọn BEM đang cố định phạm vi màu của phần tử

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

173 cho vùng chứa

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

174 với các quy ước đặt tên. Điều này yêu cầu tiêu đề có tên lớp này trên đó, hoàn thành mục tiêu. Với

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

171, không cần quy ước đặt tên để hoàn thành cùng một mục tiêu mà không cần đánh dấu phần tử tiêu đề

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

10

Đây là một ví dụ khác, ít cụ thể hơn về thành phần và nhiều hơn về bản chất phạm vi toàn cầu của CSS. Các chủ đề tối và sáng phải cùng tồn tại bên trong biểu định kiểu, trong đó thứ tự đóng vai trò quan trọng trong việc xác định phong cách chiến thắng. Thông thường, điều này có nghĩa là các kiểu chủ đề tối xuất hiện sau chủ đề sáng; . Tránh cuộc chiến thứ tự và phạm vi với

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

171

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

11

Để hoàn thành câu chuyện ở đây,

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

171 cũng cho phép thiết lập nơi phạm vi phong cách kết thúc. Điều này không thể thực hiện được với bất kỳ quy ước đặt tên hoặc bộ tiền xử lý nào; . Trong ví dụ sau, các kiểu

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

178 và

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

179 chỉ được áp dụng khi con của

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

180 là anh chị em ruột hoặc cha mẹ của

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

179

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

12

Tài nguyên

• đặc điểm kỹ thuật @scope
• người giải thích @scope

Không có cách CSS nào cho bố cục khối xây

Trước CSS nề có lưới, JavaScript là cách tốt nhất để đạt được bố cục nề, vì bất kỳ phương pháp CSS nào có cột hoặc hộp linh hoạt sẽ thể hiện thứ tự nội dung không chính xác

Sau CSS nề với lưới, không có thư viện JavaScript nào được yêu cầu và thứ tự nội dung sẽ chính xác

Hình ảnh và bản trình diễn từ Tạp chí Smashing
https. //www. đập phá tạp chí. com/native-css-masonry-layout-css-grid/

Bản demo trước đạt được với CSS sau

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

13

Thật thoải mái khi biết rằng đây là một chiến lược bố cục còn thiếu trên radar, ngoài ra bạn có thể dùng thử ngay hôm nay trên Firefox

Tài nguyên

• Bố cục nề trên MDN
• tạp chí đập phá. Bố cục CSS Masonry gốc với CSS Grid

CSS không thể giúp người dùng giảm dữ liệu

Hỗ trợ trình duyệt. chrome 85, Đằng sau một lá cờ ⚑ firefox, Không được hỗ trợ × edge 85, Behind a flag ⚑ safari, Not supported ×

Trước truy vấn phương tiện

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

182, JavaScript và máy chủ có thể thay đổi hành vi của chúng dựa trên tùy chọn "trình tiết kiệm dữ liệu" của hệ điều hành hoặc trình duyệt của người dùng, nhưng CSS thì không thể

Sau truy vấn phương tiện

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

182, CSS có thể tham gia nâng cao trải nghiệm người dùng và đóng vai trò lưu dữ liệu

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

14

CSS trước đó được sử dụng trong thành phần cuộn phương tiện này và khoản tiết kiệm có thể rất lớn. Tùy thuộc vào mức độ lớn của chế độ xem truy cập, càng tiết kiệm được nhiều tiền khi tải trang. Việc lưu tiếp tục khi người dùng tương tác với thanh cuộn phương tiện. Tất cả các hình ảnh đều có thuộc tính

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

184 trên chúng và điều đó, kết hợp với việc CSS ẩn hoàn toàn phần tử, có nghĩa là một yêu cầu mạng đối với hình ảnh sẽ không bao giờ được thực hiện

Đối với thử nghiệm của tôi, trên một khung nhìn có kích thước trung bình, 40 yêu cầu và 700kb tài nguyên đã được tải ban đầu. Khi người dùng cuộn lựa chọn phương tiện, nhiều yêu cầu và tài nguyên hơn sẽ được tải. Với CSS và truy vấn phương tiện dữ liệu đã giảm, 10 yêu cầu và 172kb tài nguyên được tải. Đó là nửa megabyte tiết kiệm và người dùng thậm chí không cuộn bất kỳ phương tiện nào, tại thời điểm đó không có yêu cầu bổ sung nào được thực hiện

Trải nghiệm giảm dữ liệu này có nhiều lợi ích hơn là chỉ tiết kiệm dữ liệu. Có thể xem nhiều tiêu đề hơn và không có ảnh bìa gây mất tập trung để thu hút sự chú ý. Nhiều người dùng duyệt ở chế độ tiết kiệm dữ liệu vì họ trả tiền cho mỗi megabyte dữ liệu—thật tuyệt khi thấy CSS có thể trợ giúp tại đây

Tài nguyên

• dữ liệu ưu tiên giảm trên MDN
• ưu tiên giảm dữ liệu trong Thử thách GUI

Các tính năng chụp cuộn quá hạn chế

Trước các đề xuất chụp nhanh cuộn này, việc viết JavaScript của riêng bạn để quản lý băng chuyền, thanh trượt hoặc thư viện có thể nhanh chóng trở nên phức tạp, với tất cả người quan sát và quản lý trạng thái. Ngoài ra, nếu không cẩn thận, tốc độ cuộn tự nhiên có thể được chuẩn hóa bằng tập lệnh, khiến cho tương tác của người dùng cảm thấy hơi không tự nhiên và có khả năng trở nên lộn xộn

API mới

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

185

Ngay sau khi trình duyệt phát hành một snap con, sự kiện này sẽ kích hoạt. Điều này cho phép UI phản ánh việc thiếu snap con và trạng thái snap không xác định của thanh cuộn, vì nó hiện đang được sử dụng và sẽ hạ cánh ở một nơi mới

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

15

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

186

Ngay sau khi trình duyệt chuyển sang phần tử con mới và cuộn được đặt ở trạng thái nghỉ, sự kiện này sẽ kích hoạt. Điều này cho phép bất kỳ giao diện người dùng nào phụ thuộc vào đứa trẻ bị gãy cập nhật và phản ánh kết nối

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

16

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

187

Cuộn không phải lúc nào cũng bắt đầu khi bắt đầu. Xem xét các thành phần có thể vuốt trong đó thao tác vuốt sang trái hoặc phải sẽ kích hoạt các sự kiện khác nhau hoặc thanh tìm kiếm khi tải trang ban đầu bị ẩn cho đến khi bạn cuộn lên trên cùng. Thuộc tính CSS này cho phép các nhà phát triển chỉ định rằng một thanh cuộn sẽ bắt đầu tại một điểm cụ thể

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

17

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

188

Bộ chọn CSS này sẽ khớp các phần tử trong vùng chứa chụp nhanh cuộn hiện đang được trình duyệt chụp nhanh

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

18

Sau các đề xuất chụp nhanh cuộn này, việc tạo thanh trượt, băng chuyền hoặc thư viện dễ dàng hơn nhiều vì trình duyệt hiện cung cấp các tiện ích cho tác vụ, loại bỏ trình quan sát và mã điều phối cuộn để sử dụng API tích hợp

Vẫn còn rất sớm đối với các tính năng CSS và JS này, nhưng hãy chú ý đến các polyfill có thể giúp sớm áp dụng và thử nghiệm chúng

Tài nguyên

• Thông số kỹ thuật nháp của Scroll Snap 2
• Trình giải thích Scroll Snap 2
• Chụp bản trình diễn

Đạp xe giữa các bang đã biết

Trước

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

189, chỉ các trạng thái được tích hợp sẵn trong trình duyệt mới có thể được tận dụng để tạo kiểu và tương tác. Ví dụ: đầu vào hộp kiểm có

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

190, trạng thái trình duyệt được quản lý nội bộ cho đầu vào mà CSS có thể sử dụng để thay đổi thành phần một cách trực quan

Sau

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

189, các trạng thái tùy chỉnh có thể được tạo trên bất kỳ phần tử nào để CSS thay đổi và sử dụng để tạo kiểu. Nó cho phép các nhóm, đi xe đạp, chuyển đổi theo hướng, v.v.

Trong ví dụ sau, hiệu ứng tương tự của việc gạch ngang mục danh sách khi hoàn thành đạt được nhưng không có bất kỳ thành phần hộp kiểm nào

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

19

Và các kiểu CSS

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

189 có liên quan

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

0

Nếu bạn đã quen thuộc với các máy trạng thái, bạn có thể nhận thấy có bao nhiêu sự giao thoa với

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

189. Tính năng này sẽ cho phép các nhà phát triển xây dựng thêm trạng thái của họ vào CSS, hy vọng sẽ dẫn đến các cách phối hợp tương tác và trạng thái rõ ràng và ngữ nghĩa hơn

Tài nguyên

• đặc điểm kỹ thuật dự thảo toggle()
• Bramus. Tương lai của CSS. Chuyển đổi CSS

Tùy chỉnh các yếu tố được chọn

Trước

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

194, CSS không có khả năng tùy chỉnh các yếu tố

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

195 với HTML phong phú hoặc thay đổi nhiều về cách hiển thị danh sách các tùy chọn. Điều này khiến các nhà phát triển tải các thư viện bên ngoài đã tạo lại nhiều chức năng của

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

196, cuối cùng có rất nhiều công việc

Sau

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

194, các nhà phát triển có thể cung cấp HTML phong phú cho các thành phần tùy chọn và tạo kiểu cho chúng tùy ý, trong khi vẫn đáp ứng các yêu cầu về khả năng truy cập và cung cấp HTML ngữ nghĩa

Trong ví dụ sau, lấy từ trang giải thích

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

194, một menu chọn mới được tạo với một số tùy chọn cơ bản

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

1

CSS có thể nhắm mục tiêu và tạo kiểu cho các phần của phần tử

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

2

Bạn có thể thử phần tử

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

194 trên Chromium trong Canary khi bật cờ thử nghiệm web. Hãy chú ý vào năm 2023 và hơn thế nữa đối với các thành phần menu được chọn có thể tùy chỉnh.

Tài nguyên

• Selectmenu đặc điểm kỹ thuật
• Chọn thực đơn trình diễn

Neo một phần tử vào phần tử khác

Trước

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

400, vị trí tuyệt đối và tương đối là các chiến lược vị trí được cung cấp cho các nhà phát triển để các phần tử con di chuyển trong phần tử cha

Sau

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

400, các nhà phát triển có thể định vị các phần tử cho các phần tử khác, bất kể chúng có phải là phần tử con hay không. Nó cũng cho phép các nhà phát triển chỉ định cạnh nào sẽ định vị và các tính năng khác để tạo mối quan hệ vị trí giữa các phần tử

Người giải thích có một vài ví dụ tuyệt vời và mẫu mã được cung cấp, nếu bạn muốn tìm hiểu thêm

Khung CSS nào tốt nhất năm 2022?

CSS nào là tốt nhất?

Phiên bản hiện tại của CSS 2022 là gì?

Phiên bản CSS nào hiện tại?