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
https. //twitter. com/jensimmons/status/1499441043930062854
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
Trang web. dev Codepen không hỗ trợ lưới con CSS
Nó sẽ giống như vậy khi sử dụng Trình duyệt có hỗ trợ lưới con CSS [như Firefox]
Trang web. dev Codepen có hỗ trợ lưới con CSS
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