Nhóm Chrome đã có mặt tại hội nghị CSS Day năm nay. Chúng tôi đã điều hành Bộ phận trợ giúp CSS, trả lời câu hỏi của người tham dự, đồng thời có một bảng trắng để hỏi mọi người về những gì họ cho là vẫn còn thiếu trong CSS. Trong bài đăng này, tôi sẽ chia sẻ kết quả của câu hỏi đó, đồng thời yêu cầu bạn cho chúng tôi biết những gì bạn nghĩ là còn thiếu trong HTML và CSS bằng cách hoàn thành bản khảo sát ngắn này. Bạn có đồng ý với những người tham dự CSS Day không?
Mười yêu cầu hàng đầu
Người tham dự được yêu cầu viết ý tưởng lên giấy nhớ và thêm vào bảng. Mọi người cũng có thể bình chọn cho ý tưởng bằng cách thêm một hình dán. Sau đây là 10 tính năng hàng đầu.
Hỗ trợ việc tạo kiểu cho dữ liệu đầu vào
Đây là tính năng được yêu cầu nhiều nhất với 21 phiếu bầu. Bạn thực sự muốn có cách tạo kiểu cho các phần tử phổ biến này trên giao diện người dùng một cách nhất quán.
Đây là một lĩnh vực mà chúng tôi nhận thức rõ tại Chrome, vì đây là một điểm hạn chế lớn đối với các nhà phát triển. Chúng tôi đang nỗ lực tạo ra các giải pháp tốt hơn cho nhà phát triển. Ví dụ: các phần tử chọn có thể tuỳ chỉnh nhằm cung cấp một cách để chọn sử dụng hành vi tạo kiểu mới. Sau đó, bạn có thể làm những việc như thêm hình ảnh hoặc thậm chí tạo kiểu phức tạp hơn cho các lựa chọn. Ưu điểm của phương pháp này là nó sẽ quay lại một trình đơn chọn thông thường, cho phép đây là một tính năng nâng cao dần.
Bị ẩn
Với 19 phiếu bầu tại CSS Day, đây là yêu cầu phổ biến thứ hai. Yêu cầu này là để thêm nội dung chỉ được trình đọc màn hình sử dụng. Đây có thể là một phần tử HTML, trong đó nội dung không hiển thị và chỉ được trình đọc màn hình đọc to.
Thông thường, mọi người đạt được điều này bằng cách tạo một lớp .visually-hidden để ẩn nội dung nhưng vẫn giúp trình đọc màn hình truy cập được.
Mặc dù đây là một yêu cầu phổ biến, nhưng có những người không cho rằng nên triển khai yêu cầu này. Để biết thông tin chi tiết, hãy đọc bài viết Nội dung ẩn bằng hình ảnh là một thủ thuật cần được giải quyết, chứ không phải là một quy tắc bất di bất dịch và cuộc thảo luận này về vấn đề 560 của Nhóm công tác CSS.
position: sticky inside overflow:hidden
Yêu cầu này nhận được 16 lượt bình chọn. Hiện tại, position: sticky chỉ hoạt động khi tất cả các thành phần mẹ đều là overflow: visible.
Có một vấn đề chưa được giải quyết từ năm 2017 yêu cầu tính năng này, và mặc dù trường hợp sử dụng ban đầu là cho phép sử dụng overflow: hidden để xoá các thành phần nổi có thể ít cần thiết hơn hiện nay, nhưng có nhiều trường hợp khác được nêu chi tiết trong chuỗi thảo luận.
Tạo ảnh động cho height: auto
Khi có 12 phiếu bầu, nhiều người tham dự muốn chuyển sang height: auto. Chúng tôi rất vui khi có thể thông báo rằng tính năng này sẽ có trên nền tảng web với thuộc tính interpolate-size và hàm calc-size() của CSS.
Các tính năng này sẽ có trong Chrome 129.
Hãy chờ đợi bài đăng tiếp theo để biết thêm thông tin về những thay đổi này.
Các loại dữ liệu đầu vào khác
HTML5 mang đến cho bạn nhiều loại khác nhau cho phần tử <input> – ví dụ: type="email" cho địa chỉ email hoặc type="range" cho thanh trượt phạm vi.
Tại CSS Day, chúng tôi nhận được 10 phiếu bầu cho các loại này, ví dụ: dải ô kép hoặc tính năng tự động hoàn thành bằng danh sách dữ liệu tuỳ chỉnh.
Số ngẫu nhiên thực trong CSS
Một yêu cầu khác với 10 phiếu bầu là về số ngẫu nhiên thực sự trong CSS. Điều này đã được yêu cầu và giải quyết trong quá khứ cho một animation-duration ngẫu nhiên.
Lớp kiểu Mixin
CSS đã thêm một số tính năng từng xuất hiện trong các trình tiền xử lý CSS – các biến có thuộc tính tuỳ chỉnh và giờ là tính năng Lồng CSS. Tuy nhiên, các mixin có thể dùng lại chưa trở thành một phần của ngôn ngữ, nhưng 7 người tham dự CSS Day rất muốn xem chúng.
Nghị quyết của Nhóm công tác CSS đã được đưa ra để bắt đầu xây dựng một quy cách cho tính năng này. Bạn có thể thêm ý kiến và trường hợp sử dụng của mình vào cuộc thảo luận trong vấn đề đó.
Kiểu chung trong DOM bóng
Một vấn đề khác có chuỗi thảo luận lớn về các trường hợp sử dụng là yêu cầu cho phép các kiểu CSS chung áp dụng bên trong một DOM bóng, 6 người đã yêu cầu điều này tại CSS Day. Tính năng này sẽ cho phép các kiểu đặt lại trên toàn cầu cũng áp dụng trong các thành phần web và các tệp CSS đơn lẻ hoạt động trên tất cả các thành phần của một trang web. Hãy xem bản tóm tắt các trường hợp sử dụng này và cho chúng tôi biết nếu bạn cũng muốn có tính năng này.
Chia các đơn vị đo lường hỗn hợp
Đã có đề xuất cho Interop 2024 yêu cầu khả năng chia theo các đơn vị hỗn hợp, chẳng hạn như calc(100vw / 1px). Tuy nhiên, yêu cầu này được coi là quá rộng đối với Interop 2024. Mặc dù vậy, nhiều nhà phát triển (bao gồm cả 6 người tại CSS Day) muốn yêu cầu này được triển khai.
nth-letter
CSS có một số phần tử giả hoạt động như thể bạn đã bao bọc một khoảng xung quanh một số phần nội dung. Ví dụ: phần tử giả ::first-letter nhắm đến chữ cái đầu tiên của dòng đầu tiên trong vùng chứa khối mà phần tử giả này được áp dụng.
::nth-letter là một thành phần còn thiếu trong danh sách đó. Bạn đã yêu cầu ::nth-letter trong khoảng 20 năm, vì vậy chúng tôi biết đây là yêu cầu đã được các nhà phát triển web đưa ra từ lâu. Tại CSS Day, 6 người đã bình chọn cho tính năng này, khiến tính năng này trở thành tính năng cuối cùng trong số 10 tính năng hàng đầu mà chúng tôi muốn có.
Bạn có đồng ý với danh sách 10 CSS hàng đầu trong ngày không?
Chúng tôi rất mong nhận được ý kiến của nhiều người hơn về những vấn đề này. Bạn có gặp phải vấn đề nào trong số này không? Nếu không, bạn có muốn thấy điều gì khác trong CSS và HTML không? Hãy cho chúng tôi biết bằng cách điền vào biểu mẫu ngắn này. Chúng tôi sẽ tổng hợp các câu trả lời trong một bài đăng khác.