Ngày xuất bản: 6 tháng 12 năm 2024
Kết quả cho Trạng thái của CSS 2024 và Trạng thái của HTML 2024 hiện đã có. Bài đăng này sẽ xem xét sơ bộ một số phát hiện thú vị nhất trong các cuộc khảo sát đó.
Tích cực về nền tảng web
Trước khi xem xét một số vấn đề mà mọi người gặp phải với HTML và CSS, các cuộc khảo sát cho thấy nhiều người rất lạc quan về nền tảng này. Khi được hỏi liệu nền tảng web có đang đi đúng hướng hay không, 58% số người tham gia cuộc khảo sát về Trạng thái của HTML đã đồng ý với câu nhận định đó, trong đó 18% đồng ý hoàn toàn.
Đối với CSS, :has() đã trở thành tính năng CSS mới được yêu thích nhất với 36% người dùng xếp hạng tính năng này là tính năng mới tốt nhất. Thứ hai là @container với 17%, ngang bằng với việc lồng CSS.
Bạn đang sử dụng phiên bản nào?
Dữ liệu CSS có một số điều bất ngờ. Ví dụ: hơn 75% người dùng đã sử dụng hiệu ứng bộ lọc CSS, khiến đây trở thành tính năng được sử dụng nhiều nhất. Xét số lượng khiếu nại về hiệu ứng này trong những năm qua, điều thú vị là chỉ 18,9% người dùng sử dụng lớp dạng thác nước. Có thể có mối liên kết ở đây để sử dụng các công cụ như Tailwind giúp mọi người ít gặp phải các vấn đề liên quan đến thác nước.
Các phần tử điểm đánh dấu như <main> và <nav> đứng đầu bản khảo sát về HTML đối với những nội dung bạn đang sử dụng. Thật tuyệt khi thấy nhiều người sử dụng tính năng tải từng phần và các kỹ thuật hình ảnh thích ứng.
Các vấn đề hàng đầu về hỗ trợ trình duyệt
Các vấn đề về khả năng tương tác hoặc hỗ trợ trình duyệt cho các tính năng luôn xuất hiện khi chúng tôi trao đổi với nhà phát triển. Bản khảo sát đã trực tiếp hỏi bạn về những vấn đề bạn gặp phải. Sau đây là 10 tính năng có vấn đề hàng đầu, được xếp hạng theo tỷ lệ phần trăm số người chọn tính năng đó.
- Popover API
- Vị trí neo
- Truy vấn vùng chứa
:has()- Chế độ xem lồng ghép CSS
- API chuyển đổi
- Lưới con
- Lưới
<dialog>- Ứng dụng web tiến bộ
Vị trí neo đạt điểm 11% trong cả hai cuộc khảo sát, View Transition API đạt 9% trong Trạng thái của CSS và 8% trong Trạng thái của HTML, cho thấy các nhà phát triển đánh giá các tính năng này có giá trị như thế nào.
Điều thú vị là một số tính năng có thể tương tác với nhau. Truy vấn vùng chứa, :has(), lồng CSS và lưới con là Đường cơ sở mới có sẵn, API cửa sổ bật lên sẽ có, nhưng đối với vấn đề về việc đóng nhẹ trên iOS. Phần tử <dialog> hiện được cung cấp rộng rãi, cũng như bố cục lưới CSS. Bạn nên tìm hiểu kỹ những kết quả này để biết mọi người đang gặp vấn đề gì. Ví dụ: các câu trả lời cho lưới thường đề cập đến việc khó học, thay vì trích dẫn vấn đề tương tác thực tế.
Chúng tôi hy vọng Baseline sẽ giúp nhà phát triển hiểu được trạng thái của mọi thứ và biết được vấn đề họ đang gặp phải là do thiếu khả năng tương thích với trình duyệt hay do nguyên nhân nào khác. Thật tuyệt khi thấy các bản khảo sát này nêu bật trạng thái Cơ sở của các tính năng. Bạn cũng có thể xem trạng thái hoạt động trên các trình duyệt đối với các vấn đề hàng đầu về CSS trên webstatus.dev.
Tính năng còn thiếu
Bản khảo sát cũng hỏi những tính năng và chức năng còn thiếu trên nền tảng. Điều này giúp chúng tôi biết được những vấn đề còn khó khăn. Tỷ lệ phản hồi cho câu hỏi này thấp hơn, tuy nhiên trong bản khảo sát về Trạng thái của CSS, mọi người thường hỏi về mixin, logic có điều kiện và bố cục kiểu xếp kề.
Điều thú vị là mọi người cũng yêu cầu một bộ chọn mẹ (:has() cung cấp chức năng đó) và tính năng lồng nhau – tính năng này đã có và là tính năng mới trong Đường cơ sở.
Câu hỏi mà những người trả lời cuộc khảo sát về Trạng thái của HTML được đặt là "Nếu bạn có thể thêm 3 phần tử vào HTML, đó sẽ là những phần tử nào?" 51% người dùng yêu cầu bảng dữ liệu, các lựa chọn phổ biến khác bao gồm thẻ và thành phần bật/tắt.
Bạn muốn tìm hiểu thêm về nội dung gì?
Các bản khảo sát có một tính năng cho phép bạn thêm các mục vào danh sách đọc nếu bạn muốn tìm hiểu thêm về các mục đó sau khi hoàn tất bản khảo sát. Đây là dữ liệu có giá trị, đặc biệt là nếu bạn đang tham gia vào việc tạo nội dung cho nhà phát triển. Danh sách sau đây là 10 tính năng hàng đầu trong cả hai cuộc khảo sát, được xếp hạng theo tỷ lệ phần trăm người trả lời đã thêm các tính năng đó vào danh sách của họ.
- CSS
hanging-punctuation - CSS
offset-path @scope- Vị trí neo
- Tuỳ chỉnh lựa chọn
view-timelinescroll-timelinefocusgroupthuộc tính- Ảnh động thuộc tính riêng biệt
image()
Hãy xem kết quả đầy đủ bằng danh sách đọc CSS và danh sách đọc HTML.
Một tín hiệu từ cộng đồng web
Chrome hỗ trợ các bản khảo sát này vì đây là một cách để chúng tôi có thể nhận được thông tin về những vấn đề lớn nhất của bạn và những điều bạn quan tâm nhất trên nền tảng web. Đây không phải là tín hiệu duy nhất mà chúng tôi sử dụng, nhưng là nơi bạn có thể trực tiếp cho chúng tôi biết suy nghĩ của mình. Cảm ơn bạn nếu bạn đã điền vào một hoặc cả hai bản khảo sát này! Bạn đang giúp chúng tôi cải thiện web theo cách bạn muốn. Nếu bạn muốn giúp đỡ, bạn vẫn còn thời gian để tham gia Trạng thái của JS.