Tổng hợp công nghệ tuần: CSS Gap Decorations, random(), field-sizing và những đột phá mới

Tổng quan

Chào mừng bạn đến với chuyên mục "What’s !important" số 14. Dù các trình duyệt không có quá nhiều cập nhật lớn trong vài tuần qua, nhưng cộng đồng web vẫn cực kỳ sôi động với những kỹ thuật mới đầy tiềm năng. Hãy cùng hi_dev điểm qua những điểm nhấn đáng chú ý nhất.

1. Hyperblam: Sáng tạo âm nhạc bằng HTML

Heydon Pickering đã ra mắt Hyperblam, một dự án thú vị sử dụng Web Audio API kết hợp với Web Components. Điểm đặc biệt của dự án này là khả năng tạo ra âm nhạc chỉ bằng HTML mà không cần viết bất kỳ dòng mã JavaScript nào. Đây là minh chứng cho sức mạnh của các tiêu chuẩn web hiện đại trong việc mở rộng khả năng của trình duyệt.

2. CSS Quake: Đưa game huyền thoại lên trình duyệt

Sau sự thành công của CSS DOOM, cộng đồng lại được chiêm ngưỡng CSS Quake. Được xây dựng dựa trên PolyCSS bởi Layoutit, dự án này là bản port hoàn chỉnh của tựa game Quake (1996) bằng CSS. Đây không chỉ là một trò chơi, mà là một bài học sâu sắc về cách tối ưu hóa hiệu năng và khả năng xử lý đồ họa của CSS.

3. Khám phá chuyên sâu: CSS Gap Decorations

Temani Afif đã có bài phân tích chi tiết về Gap Decorations. Trong các layout như Flexbox, Grid hay Multi-column, "gap" (khoảng cách) thường bị bỏ qua về mặt thẩm mỹ. Với kỹ thuật mới này, chúng ta có thể tùy biến, trang trí các khoảng trống đó, mở ra nhiều khả năng thiết kế layout sáng tạo hơn trước đây.

4. Thử nghiệm với hàm CSS random()

Polypane đã thực hiện một loạt các thử nghiệm với hàm random() trong CSS. Mặc dù hiện tại hàm này mới chỉ được hỗ trợ bởi Safari, nhưng tiềm năng của nó là rất lớn. Các ứng dụng bao gồm:

• Hiệu ứng bokeh.
• Các phần tử rơi tự do (như cánh hoa).
• Sắp xếp ngẫu nhiên các đối tượng (ví dụ: chồng ảnh polaroid).
• Tạo hoạt ảnh aurora (cực quang) sinh động.

5. Tối ưu hóa với field-sizing Manuel Matuzović đã chia sẻ cách làm cho thẻ <select> trở nên linh hoạt hơn bằng thuộc tính field-sizing: content. Tính năng này đã đạt trạng thái Baseline kể từ Firefox 152. Cách hoạt động: Nó giúp chiều rộng của thẻ <select> tự động điều chỉnh theo nội dung của tùy chọn được chọn. Lưu ý: Khi sử dụng thuộc tính size (ví dụ: <select size="3">), field-sizing: content sẽ ghi đè và hiển thị tất cả các tùy chọn thay vì chỉ hiển thị 3 dòng như mặc định. 6. Tiêu chuẩn mới cho CSS Theming Una Kravets đã giải thích cách hoạt động của hệ thống theming hiện đại. Việc kết hợp các tính năng mới giúp việc quản lý giao diện trở nên nhất quán và mạnh mẽ hơn: @property: Định nghĩa các biến CSS có kiểu dữ liệu. light-dark(): Chuyển đổi màu sắc dựa trên chế độ sáng/tối. contrast-color(): Tự động chọn màu chữ tương phản với màu nền. @container style(): Truy vấn kiểu dáng dựa trên container. 7. Triết lý thiết kế: Website không cần phải giống nhau trên mọi thiết bị Bramus đã đưa ra một góc nhìn quan trọng về trải nghiệm người dùng: chúng ta nên từ bỏ tư duy "website phải giống hệt nhau trên mọi nền tảng". Mỗi thiết bị có phương thức nhập liệu và môi trường khác nhau. Ông nhấn mạnh vào 3 tính năng web mới cần được tối ưu riêng biệt: Interest invokers Overscroll actions Document Picture-in-Picture API 8. Web Engines Hackfest Sự kiện tại A Coruña, Galicia đã quy tụ các chuyên gia để thảo luận về tương lai của các công cụ trình duyệt (web engines) và tiêu chuẩn web. Marina Aísa đã ghi lại những ghi chú quan trọng từ sự kiện, nhấn mạnh vào việc cải thiện khả năng truy cập (accessibility) cho web trong tương lai. 9. Cập nhật nền tảng Web Firefox 152: Chính thức hỗ trợ field-sizing (Baseline). Chrome 150: Sắp sửa ra mắt với nhiều tính năng mới. Hãy tiếp tục theo dõi các bản tin Quick Hits của chúng tôi để cập nhật những thay đổi mới nhất từ các trình duyệt phát triển (developmental browsers).