Các tính năng mới của CSS

Tất cả các trình duyệt chính đã thống nhất về một bộ tính năng cụ thể sẽ triển khai vào năm 2022. Tiến trình của cái gọi là “Interop 2022” có thể được theo dõi tại đây. https. //wpt. fyi/interop-2022?ổn định. Tôi sẽ cho bạn biết các tính năng được mong đợi nhất của tôi sẽ xuất hiện trong Interop 2022

Thẻ HTML mới. Phần tử hộp thoại

Tôi đã viết một bài báo về nó rồi;

Cuối cùng, bạn có thể sử dụng phần tử hộp thoại HTML

Các phiên bản safari mới hỗ trợ nó ngay bây giờ

đối với dev. com

TLDR; . Trong hầu hết các dự án, chúng ta phải triển khai Modal. Thông thường, chúng tôi sẽ sử dụng một div và thêm một số logic đóng/mở vào nó. Điều này đã trở thành một khuôn mẫu phổ biến đến mức chúng tôi có một Phần tử mới cho nó. hộp thoại. Xem hỗ trợ trình duyệt tại đây. https. // caniuse. com/?search=hộp thoại. Khả năng thích ứng bây giờ thực sự tốt; . 4

Đơn vị khung nhìn mới

Nếu bạn đã từng viết một ứng dụng web di động đa nền tảng, thì bạn sẽ biết sự khó khăn. Chiều cao của khung nhìn thực tế của người dùng là bao nhiêu? . Nhưng đừng sợ, nhà phát triển đồng nghiệp của tôi. Có hy vọng, cuối cùng. Kìa các Đơn vị Viewport mới. dvh, lvh và svh

Hình ảnh tự giải thích. Tôi cho rằng dvh sẽ là cứu tinh. Thật không may, nó chưa cập bến Chrome. https. // caniuse. com/?search=dvh

Lưới con CSS

Tôi thích cách hiển thị dạng lưới ngày càng được chú ý nhiều hơn. Nó luôn ở trong bóng tối của flexboxes. Tuy nhiên, nó có thể mạnh hơn nhiều khi được sử dụng đúng cách.

Khi làm đánh giá, tôi được hỏi điều này rất nhiều. “Khi nào nên sử dụng flex vs. lưới?”
Tôi đã trả lời câu hỏi này trong một bài viết khác về Mẫu bố cục RAM. TLDR; . Đôi khi nó có thể đơn giản như vậy

RAM — Mẫu bố cục CSS

Tìm hiểu về Mẫu bố cục RAM

đối với dev. com

Hai điều nổi tiếng là khó giải quyết khi sử dụng lưới CSS

Cái đầu tiên là lưới nề. Thật không may, thực sự không thể thực hiện chúng với các giải pháp chỉ dành cho CSS và có thể sẽ không sớm thay đổi

Cái thứ hai là xử lý các lưới con, vì vậy một lưới trong một lưới. Hãy xem xét ví dụ sau (ví dụ gốc của web. nhà phát triển)

Nếu nó trông giống như vậy trên trình duyệt của bạn thì có thể bạn đang sử dụng Chrome hoặc Safari

Nó sẽ giống như vậy khi sử dụng Trình duyệt có hỗ trợ lưới con CSS (như Firefox)

Như bạn có thể thấy, đây có thể là cứu tinh. Việc có các cột riêng lẻ có cùng chiều cao cho bố cục của chúng vẫn khó thực hiện trong CSS. Đây là hỗ trợ trình duyệt hiện tại. https. // caniuse. com/?search=subgrid

Hàm màu CSS cấp 5

Tính năng mà bạn sẽ tìm hiểu bây giờ có vẻ không hữu ích bằng các tính năng khác mà tôi đã chỉ cho bạn. Nhưng tôi chắc chắn cũng có thể tìm thấy một số trường hợp sử dụng cho trường hợp này

Có ít nhất hai chức năng màu mới được thêm vào CSS trong năm nay, chức năng mà tôi mong đợi nhất là color-mix. Đây là cú pháp

div {
  background-color: color-mix(in hsl, red 50%, yellow 50%);
}

color-mix mong muốn tham số đầu tiên là một không gian màu (chẳng hạn như RGB, hsl, lch hoặc oklch). Tham số thứ hai và thứ ba là màu sắc với tỷ lệ của chúng tính bằng phần trăm. Kết quả sẽ là một màu được pha trộn với các phần đã cho trong không gian màu mong muốn của bạn

Nếu bạn muốn tìm hiểu thêm về tính năng cụ thể này, đây là thông số kỹ thuật chính thức https. // bản nháp. csswg. org/css-màu-5/

Bạn có thể dùng thử Firefox nightly hoặc Safari beta. https. // caniuse. com/?search=color-mix

tầng lớp

Cuối cùng nhưng không kém phần quan trọng. Tất nhiên, các lớp xếp tầng. Tôi đề cập đến chúng ngay bây giờ vì chúng đã xuất hiện trên nhiều trình duyệt và có lẽ bạn đã thấy chúng hoạt động (e. g. , khi sử dụng Tailwind)

Cú pháp cơ bản là thế này

@layer name {
  /* rules */
}

Vì vậy, đây sẽ là một lớp xếp tầng hợp lệ

@layer utilities {
  .padding-sm {
    padding: .5rem;
  }

  .padding-lg {
    padding: .8rem;
  }
}

(Ví dụ từ MDN)

Các lớp là một chủ đề phức tạp. Nếu bạn muốn tìm hiểu thêm về chúng, hãy đọc tài liệu MDN (tôi sẽ liên kết nó bên dưới). Tuy nhiên, tôi sẽ cung cấp cho bạn TLDR; . Thứ tự mà chúng được xác định là quan trọng. Vì vậy, các quy tắc trong lớp được xác định cuối cùng là quan trọng nhất. Vì vậy, chúng được ưu tiên. Điều này có thể giúp bạn giải quyết các vấn đề về tính đặc hiệu

đọc tiếp. https. // nhà phát triển. mozilla. org/en-US/docs/Web/CSS/@layer

Thế thôi nhé mọi người

Cảm ơn bạn đã đọc;

Thêm nội dung tại PlainEnglish. io. Đăng ký nhận bản tin hàng tuần miễn phí của chúng tôi. Theo dõi chúng tôi trên Twitter và LinkedIn. Kiểm tra Sự bất hòa trong cộng đồng của chúng tôi và tham gia Tập thể tài năng của chúng tôi

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

Có CSS4 không?

CSS mới nhất là gì?

CSS vẫn đang được cập nhật chứ?