Nhóm Chrome đã có sự hiện diện nổi bật tại hội nghị CSS Day năm nay. Chúng tôi đã tổ chức Trung tâm trợ giúp CSS, trả lời câu hỏi của người tham dự, nhưng cũng có một bảng trắng để hỏi mọi người những gì họ cho là CSS vẫn còn thiếu. Trong bài đăng này, tôi sẽ chia sẻ kết quả của câu hỏi đó và cũng yêu cầu bạn cho chúng tôi biết những gì bạn cho 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ự Ngày CSS không?
10 yêu cầu hàng đầu
Người tham dự được yêu cầu viết ý tưởng lên ghi chú dán 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 hình dán. Sau đây là 10 tính năng hàng đầu.
Hỗ trợ định kiểu dữ liệu đầu vào
Đây là yêu cầu về tính năng được nhiều người đồng ý nhất với 21 lượt bình chọn. Bạn thực sự muốn có cách tạo kiểu cho các thành phần giao diện người dùng phổ biến này một cách nhất quán.
Đây là một vấn đề mà chúng tôi tại Chrome nắm rõ, đồng thời là điểm đau đầu hàng đầu của 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 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í là tạo kiểu phức tạp hơn cho các tuỳ chọn. Ưu điểm của phương pháp này là sẽ dự phòng cho 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.
Ẩn hình ảnh
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à về cách thêm nội dung chỉ dành cho trình đọc màn hình. Đâ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.
Ngày nay, mọi người thường thực hiện việc này bằng cách tạo một lớp .visually-hidden để ẩn nội dung nhưng vẫn cho phép trình đọc màn hình truy cập nội dung đó.
Mặc dù đây là một yêu cầu phổ biến, nhưng có người không nghĩ rằng chúng ta nên triển khai tính năng 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 được lưu trữ và nội dung 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 điều này, mặc dù trường hợp sử dụng ban đầu của việc cho phép sử dụng overflow: hidden để xoá số thực có thể ít cần thiết hơn ngày nay, nhưng có nhiều trường hợp khác được nêu chi tiết trong chuỗi thư.
Tạo ảnh động đến height: auto
Với 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 mừng khi có thể thông báo rằng tính năng này sẽ ra mắt 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ú ý theo dõi bài đăng trong tương lai để 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 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 Ngày CSS, chúng tôi nhận được 10 phiếu bầu cho nhiều loại khác, chẳng hạn như phạm vi kép hoặc 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 có 10 lượt bình chọn là về số ngẫu nhiên thực trong CSS. Điều này đã được yêu cầu và hoạt động trong quá khứ đối với 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 thấy trong trình tiền xử lý CSS – các biến có thuộc tính tuỳ chỉnh và hiện là tính năng Lồng ghép CSS. Tuy nhiên, các thành phần kết hợp có thể sử dụng lại chưa trở thành một phần của ngôn ngữ, nhưng 7 trong số những người tham dự CSS Day rất muốn thấy các thành phần kết hợp này.
Nhóm làm việc về CSS đã đưa ra một nghị quyết để bắt đầu làm việc trên một quy cách cho tính năng này. Bạn có thể thêm suy nghĩ 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 shadow DOM
Một vấn đề khác có một 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 áp dụng kiểu CSS chung bên trong một DOM bóng, 6 người đã yêu cầu điều này tại CSS Day. Khả năng này cho phép các kiểu đặt lại toàn cục cũng áp dụng trong các thành phần web và tệp CSS đơn hoạt động trên tất cả các thành phần của trang web. Hãy xem tóm tắt các trường hợp sử dụng này và cho chúng tôi biết liệu đây có phải là tính năng mà bạn cũng muốn có hay không.
Chia các đơn vị hỗn hợp
Có một đề xuất cho Interop 2024 yêu cầu khả năng chia theo các đơn vị hỗn hợp, ví dụ: calc(100vw / 1px). Mục tiêu này được coi là quá rộng cho Interop 2024, tuy nhiên, nhiều nhà phát triển, bao gồm cả 6 người tại CSS Day, muốn thấy mục tiê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 đã gói một span 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 được áp dụng.
Danh sách đó thiếu ::nth-letter và bạn đã yêu cầu ::nth-letter khoảng 20 năm, vì vậy, chúng tôi biết rằng đây là yêu cầu lâu nay của các nhà phát triển web. Tại CSS Day, 6 người đã bỏ phiếu cho tính năng này, khiến nó trở thành tính năng cuối cùng trong 10 tính năng được mong muốn nhất.
Bạn có đồng ý với danh sách 10 đề xuất hàng đầu trong Ngày CSS không?
Chúng tôi rất muốn nghe ý kiến của nhiều người hơn về những vấn đề này. Bạn có cho rằng vấn đề nào trong số này nằm trong danh sách 10 vấn đề hàng đầu 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óm tắt các câu trả lời trong một bài đăng khác.