Web tốt hơn nữa với Interop 2024

 (webkit.org)
2 điểm bởi GN⁺ 2024-02-03 | 1 bình luận | Chia sẻ qua WhatsApp
  • Interop 2024 là dự án hợp tác nhằm đồng bộ để các nhóm phụ trách những engine trình duyệt lớn triển khai cùng một tính năng web theo cách nhất quán hơn, và năm nay được tiến hành với 17 lĩnh vực trọng tâm cùng 3 dự án khảo sát
  • Việc cải thiện khả năng tương thích được đo bằng các bài kiểm thử tự động như Web Platform Tests, và WPT có hơn 1,8 triệu bài kiểm thử với tỷ lệ vượt qua trên 95% ở toàn bộ các trình duyệt lớn
  • Interop 2023 đã nâng tỷ lệ cùng vượt qua của 3 engine trình duyệt lớn đối với các bài kiểm thử được chọn từ 48% lên 95%, đồng thời căn chỉnh đáng kể hỗ trợ cho P3 color, Subgrid, Container Queries, :has(), Web Components và Media Queries 4
  • Năm nay, 16 mục được chọn từ 96 đề xuất và tiếp nối một phần công việc của năm 2023 để tập trung vào 17 lĩnh vực gồm Accessibility, CSS Nesting, Custom Properties, IndexedDB, Layout, Popover, URL và nhiều nội dung khác
  • Microsoft Edge được thêm vào bảng điều khiển Interop dưới dạng một cột riêng, giúp có thể so sánh tiến độ giữa các trình duyệt trực tiếp hơn

Cách đồng bộ khả năng tương thích giữa các trình duyệt

  • Web được thiết kế để hoạt động trên nhiều loại thiết bị, nhờ đó hàng tỷ người có thể dùng để cộng tác, học tập và kết nối
  • Để nhà phát triển mang lại cùng một trải nghiệm cho mọi trình duyệt và mọi người dùng, cách các trình duyệt triển khai công nghệ web phải tương đồng với nhau
  • Tính nhất quán trong triển khai được hình thành trong quy trình tiêu chuẩn web, nơi hành vi của công nghệ web mới được định nghĩa bằng các tài liệu kỹ thuật chi tiết
  • Việc trình duyệt có tuân theo tiêu chuẩn web hay không được xác nhận bằng các bài kiểm thử tự động
    • Web Platform Tests có hơn 1,8 triệu bài kiểm thử
    • Hơn 95% số bài kiểm thử WPT vượt qua trên toàn bộ các trình duyệt lớn

Những thay đổi do Interop 2023 tạo ra

  • Interop 2023 bắt đầu với trạng thái 48% các bài kiểm thử được chọn vào tháng 1 năm 2023 đều vượt qua trên cả 3 engine trình duyệt lớn
    • Các trình duyệt làm mốc khi đó là Chrome và Firefox desktop Linux đã phát hành cho người dùng, cùng Safari trên macOS Monterey
  • Một năm sau, tỷ lệ vượt qua tăng lên 95%
    • Các trình duyệt làm mốc là Chrome Dev, Firefox Nightly trên desktop Linux và Safari Technology Preview trên macOS Ventura
  • Hỗ trợ giữa các trình duyệt cho nhiều tính năng web đã được cải thiện
    • P3 color được hỗ trợ đầy đủ trên mọi trình duyệt sau 7 năm kể từ khi bắt đầu được phát hành
    • Form controls lần đầu tiên trong lịch sử web hỗ trợ chế độ viết dọc
    • CSS border-image giờ hoạt động đúng như mục đích ban đầu
    • Subgrid, Container Queries, :has(), Motion Path, CSS Math Functions, inert, @property được hỗ trợ trên mọi trình duyệt hiện đại
    • Các Web API như Offscreen Canvas, Modules in Web Workers, Import Maps, Import Assertions, JavaScript Modules được cải thiện
    • Toàn bộ đặc tả Media Queries 4 được hỗ trợ ở mọi nơi cùng cú pháp dễ dùng hơn
    • Web Components được cải thiện ở adoptedStyleSheets, ElementInternals, Form-Associated Custom Elements, Shadow DOM và hành vi cơ bản của Custom Elements
    • Giờ đây có thể kỳ vọng hỗ trợ trình duyệt nhất quán cho các pseudo-class CSS như :nth-child(), :nth-last-child(), :modal, :user-valid, :user-invalid
    • Feature queries mới hỗ trợ phát hiện tính năng phông chữ
    • Font Palettes tăng cường hỗ trợ phông chữ màu
    • Cũng có tiến triển đáng kể ở CSS Masking, HTML Forms, Pointer and Mouse Events, Scrolling, Transforms, URL, WebCodecs và nhóm lỗi tương thích web
  • 20 trong số 26 lĩnh vực trọng tâm của Interop 2023 đã kết thúc thành công
  • Sang năm 2024, công việc về Custom Properties, Pointer and Mouse Events, URL, và Layout gộp Flexbox·Grid·Subgrid sẽ tiếp tục

Cấu thành của Interop 2024

  • Trong năm 2024, 96 đề xuất lĩnh vực trọng tâm đã được xem xét và cuối cùng 16 mục được chọn
  • Khi gộp một số đề xuất mới và tiếp nối một phần công việc của năm 2023, Interop 2024 có tổng cộng 17 lĩnh vực trọng tâm
  • Tính theo các trình duyệt bản ổn định, điểm tổng thể của Interop 2024 tình cờ lại bắt đầu từ 48%
  • Từ năm nay, Interop dashboard có thêm cột riêng của Microsoft Edge
    • Hiện tại cột này thể hiện Edge và Edge Dev chạy trên Windows 10

Các lĩnh vực trọng tâm năm 2024

  • Accessibility

    • Trong dự án khảo sát Accessibility của Interop 2023, nhóm accessibility của Apple đã xây dựng hạ tầng kiểm thử accessibility cho WPT và viết hơn 1.300 bài kiểm thử accessibility
    • Các bài kiểm thử này được đưa vào lĩnh vực trọng tâm của Interop 2024 để thúc đẩy cải thiện hỗ trợ accessibility của trình duyệt
    • Phần lớn các bài kiểm thử accessibility mới tập trung vào WAI-ARIA
    • Đặc biệt tập trung vào Roles Model và Accessible Name and Description Computation
    • Chúng cung cấp cơ chế nhất quán để người dùng công nghệ hỗ trợ hiểu được mục đích của phần tử và những gì họ có thể làm
    • Cũng bao gồm các bài kiểm thử liên quan đến HTML Accessibility API Mappings specification
    • Tài liệu này định nghĩa ý nghĩa accessibility mặc định của các phần tử HTML và quy tắc hành vi của trình duyệt cho các tính năng như <label> và văn bản alt của hình ảnh
    • Các bài kiểm thử accessibility cho display: contents cũng mới được thêm vào
    • Chế độ hiển thị CSS này hữu ích khi cần loại bỏ hộp bao quanh nội dung lúc điều chỉnh quan hệ cha·con·cháu cho Flexbox hoặc Grid
    • Ở các bản triển khai ban đầu, khi hộp bị loại bỏ thì nội dung cũng biến mất hoàn toàn khỏi cây accessibility, gây vấn đề cho người dùng công nghệ hỗ trợ
    • Phần lớn vấn đề đã được sửa trong các trình duyệt, nhưng vẫn chưa được giải quyết hoàn toàn trong mọi trường hợp

  • CSS Nesting

    • CSS Nesting được đưa vào Interop 2024 để giảm khác biệt giữa các bản triển khai và giúp nhà phát triển có thể tin tưởng, sử dụng
    • Tính năng lồng CSS đã được phát hành trên cả 4 trình duyệt lớn trong năm 2023
    • Chrome, Edge và Safari phát hành trước vào tháng 4 và tháng 5
    • Firefox phát hành vào tháng 8
    • Chuẩn web đã thay đổi nhẹ trong khoảng từ tháng 5 đến tháng 8, nới lỏng yêu cầu ban đầu rằng mọi bộ chọn lồng đều phải bắt đầu bằng ký hiệu
    • Nhà phát triển có thể dùng article thay cho & article
    • Tất cả các bản triển khai đã được cập nhật, nhưng vẫn còn dư địa để cải thiện khả năng tương tác khi CSS Working Group tiếp tục hoàn thiện các chi tiết hành vi phức tạp của Nesting
    • Phần lớn các bài kiểm thử thất bại của Safari liên quan đến cách CSS lồng tương tác với Shadow DOM và :host

  • Custom Properties

    • at-rule @property mới bắt đầu được phát hành trên các trình duyệt trong vài năm gần đây
    • Ở hạng mục Custom Properties của Interop 2023, tỷ lệ vượt qua bài kiểm thử chung của tất cả trình duyệt ổn định đã tăng từ 4% lên 7,6%, còn toàn bộ trình duyệt preview đạt 90,7%
    • Firefox là trình duyệt cuối cùng bổ sung hỗ trợ và hiện đang được phát triển trong Firefox Nightly
    • Vì công việc vẫn chưa hoàn tất nên tiếp tục là lĩnh vực trọng tâm trong năm 2024
    • Với @property, có thể khai báo cú pháp, hành vi kế thừa và giá trị khởi tạo của CSS custom property theo cách tương tự như cách engine trình duyệt định nghĩa thuộc tính CSS
    • Nhờ đó có thể tạo các animation trước đây không thể làm bằng CSS, như gradient hoặc một số phần cụ thể của transform

  • Declarative Shadow DOM

    • Declarative Shadow DOM là API khai báo cho phép tạo widget và component có thể tái sử dụng chỉ bằng HTML, không cần JavaScript
    • Safari 16.4 hỗ trợ từ tháng 3 năm 2023, còn Chrome 90 hỗ trợ từ tháng 4 năm 2021
    • Firefox đã có bản triển khai trong Firefox Nightly
    • Đây là một trong những tính năng được yêu cầu nhiều trong khảo sát State of HTML 2023, và được đưa vào Interop 2024 để đảm bảo khả năng tương tác trên mọi trình duyệt

  • Font size adjust

    • font-size-adjust là ví dụ cho thấy giá trị thực tiễn của việc tập trung vào công nghệ lâu đời
    • Firefox lần đầu triển khai vào năm 2008, nhưng gần như không được sử dụng hay thảo luận giữa giới thiết kế và phát triển web
    • Đặc tả ban đầu theo thời gian đã hỗ trợ thêm nhiều ngôn ngữ thông qua cú pháp hai giá trị, đồng thời cải thiện tính tiện dụng với giá trị from-font
    • Nhóm WebKit đã triển khai phiên bản cơ bản trong Safari 16.4 và bổ sung cập nhật trong Safari 17.0
    • Mozilla đã cập nhật bản triển khai trong Firefox 118, và hiện Safari cùng Firefox đều vượt qua 100% bài kiểm thử
    • Chrome bắt đầu triển khai thử nghiệm từ năm 2015 nhưng vẫn chưa phát hành
    • Font size adjust cung cấp cách căn chỉnh để nhiều phông chữ trong một chuỗi văn bản trông có cùng kích thước trực quan
    • Ví dụ, trong văn bản 1.4rem có thể căn chỉnh x-height, cap height, độ rộng ch, độ rộng ic, và chiều cao ic
    • Tính năng này hữu ích khi trộn mã với văn bản thường hoặc trộn nhiều ngôn ngữ trong cùng một câu

  • HTTPS URLs for WebSocket

    • WebSocket API có đặc điểm là phải dùng các scheme không phải HTTP(S) là ws: và wss:
    • Vì hành vi URL gần như giống hệt URL HTTP(S), điều này có thể khiến việc dùng API trở nên bất tiện
    • Dựa trên phản hồi từ nhà phát triển web, nhóm WebKit đã cho phép API hỗ trợ cả URL HTTP(S) và phát hành trong Safari 17.0
    • Trước đây cần viết mã chuyển sang wss: hoặc ws: tùy theo location.protocol, nhưng giờ có thể dùng như new WebSocket(path)
    • Mục tiêu là đưa nội dung này vào Interop 2024 để các trình duyệt khác cũng áp dụng

  • IndexedDB

    • IndexedDB là API lưu trữ dữ liệu phía client dưới dạng cơ sở dữ liệu hướng đối tượng
    • Tính năng này bắt đầu được phát hành trên các trình duyệt từ năm 2011, và chuẩn web vẫn tiếp tục phát triển
    • version 2 và version 3 đều được tất cả các trình duyệt lớn hỗ trợ
    • version 2 đã hoàn toàn tương thích, nhưng version 3 vẫn cần thêm công việc để đồng đều chất lượng triển khai

  • Layout

    • CSS Grid và Flexbox đã được đưa vào dự án Interop ban đầu từ năm 2021
    • Subgrid được thêm vào Interop 2023
    • Cả ba phương thức layout đều đang ở trạng thái tốt, nhưng vẫn chưa hoàn hảo hoàn toàn
    • Trong năm 2024, các bài kiểm thử của cả ba hạng mục được gộp lại thành một lĩnh vực trọng tâm duy nhất là Layout
    • Công việc nâng cao khả năng tương tác ở các trường hợp biên phức tạp vẫn đang tiếp tục
    • Nhà phát triển có thể tin tưởng và sử dụng cả Flexbox, Grid và Subgrid, với sự hỗ trợ vững chắc từ mọi trình duyệt

  • Pointer and Mouse Events

    • Pointer events xử lý các thiết bị nhập trỏ như chuột, bút·stylus, hoặc chạm bằng một hay nhiều ngón tay trong một mô hình sự kiện DOM duy nhất
    • API này bắt đầu được phát hành trên các trình duyệt từ năm 2012 và đã có mặt trên mọi trình duyệt vào năm 2019, nhưng khả năng tương tác vẫn thiếu ổn định

  • Nhóm Interop đã khởi động dự án khảo sát Pointer and Mouse Events vào năm 2022 để làm rõ đồng thuận và viết các bài kiểm thử phản ánh điều đó

    • Trong Interop 2023, các bài kiểm thử này được đưa vào nhóm trọng tâm, và tỷ lệ vượt qua đã tăng từ 34% lên 81%
    • Vẫn còn việc phải làm nên nội dung này tiếp tục là lĩnh vực trọng tâm trong năm 2024

  • Popover

    • Thuộc tính popover của HTML cung cấp một cách tích hợp sẵn trong trình duyệt để hiển thị phần tử ở lớp trên cùng của trang
    • Khi cần tạo overlay phủ toàn bộ trang web, phần tử dialog là lựa chọn phù hợp nhất
    • Khi muốn biến các phần tử khác thành thông báo bật lên, giao diện người dùng, hoặc nội dung xuất hiện rồi biến mất, popover cung cấp một framework cho việc đó
    • Hỗ trợ popover đã được phát hành trên Chrome 114 và Safari 17.0 trong năm 2023
    • Firefox đang triển khai hỗ trợ trong Firefox Nightly

  • Relative Color Syntax

    • Relative Color Syntax là một cách mới để định nghĩa màu CSS bằng cách tham chiếu đến màu khác
    • Có thể làm một màu hiện có sáng hơn hoặc tối hơn một lượng nhất định, hoặc điều chỉnh độ bão hòa của biến màu rồi gán vào biến thứ hai
    • Điều này có thể đặc biệt mạnh mẽ khi xây dựng design system
    • Safari 16.4 là trình duyệt đầu tiên phát hành hỗ trợ vào tháng 3 năm 2023
    • Chrome 119 và Edge 119 đã phát hành hỗ trợ vào tháng 10 và 11 năm 2023
    • Hiện chưa có bản triển khai nào hỗ trợ việc dùng currentcolor cùng với Relative Color Syntax
    • Phần Relative Color Syntax của Interop 2024 tập trung hẹp vào hỗ trợ currentcolor và kiểm thử hành vi ngoài dải màu, thay vì toàn bộ mức độ hỗ trợ
    • Nội dung này kiểm tra điều gì xảy ra trên các màn hình không hỗ trợ màu P3

  • requestVideoFrameCallback

    • Phần tử <video> cung cấp khả năng mạnh mẽ để nhúng video trên web
    • HTMLVideoElement cung cấp các thuộc tính và phương thức để thao tác đối tượng video trong JavaScript
    • requestVideoFrameCallback() cho phép thực hiện hiệu quả các tác vụ theo từng khung hình video
      • xử lý hoặc phân tích video
      • vẽ lên canvas
      • đồng bộ với nguồn âm thanh
    • Được hỗ trợ từ Chrome 83 và Safari 15.4
    • Việc được đưa vào Interop 2024 giúp hoàn thiện và tinh chỉnh các bản triển khai của trình duyệt

  • Scrollbar Styling

    • Lĩnh vực Scrollbar Styling bao gồm hai thuộc tính CSS có thể dùng để tạo kiểu thanh cuộn
    • scrollbar-width cung cấp ba giá trị auto, thin, none
      • auto là độ rộng mặc định
      • thin cung cấp thanh cuộn mảnh hơn
      • none ẩn thanh cuộn nhưng vẫn giữ khả năng cuộn nội dung
    • Firefox 64 đã triển khai hỗ trợ vào tháng 12 năm 2018, và Chrome 121 cùng Edge 121 cũng vừa phát hành hỗ trợ
    • scrollbar-gutter đặt trước không gian cho thanh cuộn để giữ nguyên cùng một layout bất kể có thanh cuộn hay không
    • scrollbar-gutter: stable hướng dẫn trình duyệt dành sẵn không gian ngay cả khi chưa có thanh cuộn
    • Điều này có thể ngăn layout shift khi trạng thái cần thanh cuộn thay đổi
    • Được phát hành trên Chrome 94, Edge 94, Firefox 97 trong giai đoạn 2021~2022
    • Safari là trình duyệt còn nhiều việc nhất để hoàn thành lĩnh vực trọng tâm này
    • Chrome và Firefox đã vượt qua 100% bài kiểm thử
    • Safari từng là trình duyệt đầu tiên cung cấp khả năng tạo kiểu thanh cuộn vào năm 2009 với 9 pseudo-element ::-webkit-scrollbar-*, nhưng cách này không trở thành tiêu chuẩn web CSS chính thức
    • CSS Working Group đã chọn một cách tiếp cận đơn giản hơn nhiều

  • @starting-style and transition-behavior

    • Lĩnh vực này tập trung vào hai tính năng mới để kiểm soát animation
    • Cả hai đều được phát hành trên Chrome 117 và Edge 177 vào tháng 9 năm 2023
    • @starting-style cho phép định nghĩa giá trị khởi đầu của một phần tử cụ thể
    • Điều này cần thiết khi phần tử sắp trải qua transition
    • Nó cũng cung cấp cách chuyển đổi khi vào hoặc ra khỏi display:none
    • transition-behavior mở rộng việc xử lý các thuộc tính có thể animate theo kiểu rời rạc, vốn trước đây chỉ làm được trong animation, sang CSS transition
    • Nó mở ra cách chuyển đổi thuộc tính display khi hiển thị hoặc ẩn phần tử

  • Text Directionality

    • Hướng dòng chảy của văn bản là một yếu tố quan trọng trong dàn chữ trên web
    • Một số ngôn ngữ chạy từ trái sang phải, một số khác từ phải sang trái
    • dir attribute cho phép đánh dấu hướng của phần tử HTML là left, right, auto
    • auto yêu cầu trình duyệt suy đoán hướng dựa trên ký tự đầu tiên
    • Tương tác giữa tính định hướng và shadow tree cho đến gần đây vẫn chưa được định nghĩa rõ
    • Vấn đề này đã được xử lý ở cấp độ tiêu chuẩn, và việc đưa vào Interop 2024 xác nhận sự đồng bộ giữa các bản triển khai

  • text-wrap: balance

    • Các web designer từ lâu đã muốn có cách ngăn những dòng quá ngắn hoặc chỉ có một từ
    • Thiết kế web responsive và việc thiếu kiểm soát độ rộng cột khiến vấn đề này càng khó hơn
    • text-wrap cung cấp nhiều tùy chọn để cho trình duyệt biết cách tính xuống dòng phù hợp với từng trường hợp sử dụng
    • text-wrap: balance là một giải pháp phù hợp cho tiêu đề
    • Nó cân bằng vài dòng văn bản để mỗi dòng có lượng chữ tương tự nhau
    • Đã phát hành trên Chrome 114 và Firefox 121, và được triển khai trong Safari Technology Preview
    • Interop 2024 cũng bao gồm kiểm thử hành vi của text-wrap-mode, text-wrap-style, và white-space-collapse
    • CSS Working Group gần đây đã thay đổi cách các longhand này tương tác với nhau, nên mức hỗ trợ giữa các trình duyệt hiện chưa đồng đều

  • URL

    • URL là một trong những yếu tố nền tảng nhất của web, và không có URL thì web không tồn tại
    • Giống như nhiều thứ được phát minh trong giai đoạn đầu của lịch sử web, hỗ trợ URL vẫn chưa hoàn toàn tương thích liên trình duyệt
    • WHATWG đã biên soạn URL Living Standard mô tả chi tiết chính xác cách URL phải hoạt động
    • Các bài kiểm thử hỗ trợ tiêu chuẩn này là một lĩnh vực trọng tâm của Interop 2023, và tỷ lệ vượt qua đã cải thiện từ 77% lên 85%
    • Công việc tiếp tục trong năm 2024 để đảm bảo tính tương tác
    • Safari vượt qua 99.7% bài kiểm thử

Dự án khảo sát và theo dõi tiến độ

  • Interop 2024 cũng bao gồm 3 lĩnh vực khảo sát
    • Accessibility Testing
    • Mobile Testing
    • WebAssembly Testing
  • Các lĩnh vực khảo sát là nhiệm vụ để đội ngũ Interop viết thêm nhiều bài kiểm thử hơn và giúp chúng có thể chạy được
  • Dự án khảo sát Mobile Testing đặt mục tiêu hoàn thiện hạ tầng cần thiết trong WPT để có thể kiểm thử trình duyệt trên các hệ điều hành di động
    • Trong tương lai, cũng có khả năng điểm số di động sẽ được đưa vào bảng điều khiển dự án Interop
  • Hai trong số ba cuộc khảo sát là các dự án được tiếp nối từ năm ngoái, nhưng trong năm 2024 tất cả đều bắt đầu ở trạng thái hoàn thành 0%
  • Các nhóm tham gia đặt ra mục tiêu mới cho năm nay và bảng điều khiển sẽ hiển thị tiến độ so với các mục tiêu đó
  • Có thể theo dõi tiến độ Interop 2024 tại Interop 2024 dashboard
  • Khả năng tương tác là một trong những trụ cột nền tảng tạo nên thành công của web, và dựa trên công việc của Interop 2022 và 2023, sự hợp tác vẫn tiếp tục trong năm 2024

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-02-03
Ý kiến trên Hacker News

  • Rõ ràng có những thay đổi rất hay ở đây, và thật đáng mừng khi mức hỗ trợ được cải thiện
    Ví dụ, CSS nesting là một trong những lý do cốt lõi khiến SASS và LESS hữu ích, nên đây là một thay đổi lớn. Thực ra nó vốn phù hợp để trở thành tính năng cốt lõi của CSS hơn là một tính năng tiền xử lý như biến
    Việc có thể làm gì với custom properties cũng luôn thú vị, và trông như bước tiếp theo sau Shadow DOM và custom elements. Popover cũng tốt một cách bất ngờ; việc giờ đây có thể tạo những thứ như popup modal mà không cần JavaScript là rất hữu ích. Nó có thể giúp giảm thời gian lãng phí vào các modal tùy chỉnh, menu dropdown, nút hamburger, v.v.
    Tuy vậy, mong các dự án kiểu này cũng chú ý hơn đến form. Nhiều field từ thời HTML 5 khác nhau quá nhiều giữa các trình duyệt, phải dựa vào styling bằng các pseudo-class riêng để hiển thị, và nhìn chung khó tùy biến; tình trạng hiện tại trông cũ kỹ đến ngạc nhiên đối với một nền tảng gần như có thể làm mọi thứ

    • Nếu UI designer được tự do làm theo ý mình, họ thường không muốn các modal・menu・button mặc định mới như thế này, dù trước đây có thể họ từng thích
      Thay đổi này sẽ có ích, nhưng trong UI, sự nhất quán dường như bị xem là điểm yếu hơn là một tính năng mà mọi người nên hướng tới
    • CSS nesting là lý do cuối cùng để dùng CSS preprocessor
      Khi Safari 17.2+ phổ biến hơn, có thể dùng CSS thuần luôn
      Ngoài ra còn có biến cho truy vấn @media, nhưng nhu cầu này ít phổ biến hơn

  • Rốt cuộc có vẻ JPEG XL vẫn không được đưa vào. Xét việc đây là định dạng ảnh đầu tiên sau rất lâu mang lại cải thiện rõ rệt trên diện rộng, điều đó khá khó hiểu
    Tôi đã hy vọng Interop sẽ chấm dứt tình trạng Google trên thực tế đang chặn việc áp dụng, nhưng có lẽ chúng ta còn phải chờ thêm trong khi những phương án thay thế vụng về cho các định dạng cũ phổ biến cứ tiếp tục chồng chất

    • Điểm này tôi cũng thấy tiếc
      Không rõ Google không hài lòng điều gì ở JPEG XL

  • Câu “tất cả trình duyệt đã hỗ trợ đầy đủ màu P3” thực ra hơi không đúng
    Firefox vẫn clamp tất cả màu về sRGB trước khi gửi màu tới thiết bị. https://bugzilla.mozilla.org/show_bug.cgi?id=1626624#c16

  • Tôi chỉ thỉnh thoảng mới làm việc với web nên chắc không phải đối tượng chính, nhưng tính năng thiếu nổi bật nhất trong WebKit là không hỗ trợ SVG favicon
    Thật sự khó hiểu, và việc phải lo đủ mọi icon riêng cho Apple với các kích thước khác nhau khá phiền với một web developer nhẹ nhàng như tôi

    • Giờ thì bạn sẽ vui vì không còn như trước nữa. Hiện chỉ cần một icon riêng cho Apple là đủ [1]:
      [1]: https://evilmartians.com/chronicles/how-to-favicon-in-2021-s...
    • Hơi liên quan: nếu có ico favicon, Chrome sẽ không dùng SVG favicon. (https://bugs.chromium.org/p/chromium/issues/detail?id=145085...) Vì vậy tôi triển khai cả PNG favicon lẫn SVG favicon
    • Để tham khảo, Safari có hỗ trợ SVG favicon đơn sắc dạng này
      Nếu dùng thứ như Vite, bạn cũng có thể tự động hóa toàn bộ việc tạo favicon và icon màn hình chính từ một ảnh nguồn duy nhất
    • SVG không scale theo cách bạn muốn. Ví dụ, dù bạn tạo ảnh vuông 256px dưới dạng vector, chỉ riêng phép biến đổi vector cũng không thể làm nó trông đẹp ở 24px
    • Đúng vậy. Không nên cần phải tạo tất cả những icon này
      Và sẽ tốt nếu cũng có thể styling danh sách. Chẳng hạn như gắn thứ gì đó như lá cờ vào phần tử
      CSS page transitions hay scroll-driven animations cũng không được nhắc tới, dù chúng cũng có thể giảm JavaScript boilerplate

  • Không ngờ đọc bài này xong tôi lại hào hứng hơn nhiều
    Tôi thắc mắc vì sao trong liên minh tham gia lại không có mảng trọng tâm PWA

    • Về mặt lịch sử, Interop thường tập trung hơn vào CSS, nhưng điều đó đang dần thay đổi
      Dù vậy, nhiều mảng kiểm thử có bao gồm các bài kiểm thử worker, nên tình trạng PWA cũng sẽ được cải thiện. Năm 2023 có hẳn một phần Modules, và đã kiểm thử nhiều tính năng chuyên biệt cho PWA/worker. Khá nhiều API thuộc diện được kiểm thử/khảo sát, như OffscreenCanvas hay kiểm thử trên di động, cũng rất liên quan đến nhiều ứng dụng PWA
      Năm nay là kỳ Interop ít tập trung vào CSS nhất, tương tự năm ngoái. Theo tôi thấy, có các phần IndexedDB, WebSocket mà PWA chủ yếu phụ thuộc vào, cùng với những cải thiện quan trọng về accessibility. Ba mảng khảo sát là WebAssembly, accessibility và kiểm thử trên di động cũng đều liên quan nhiều đến PWA
      Tôi tò mò cụ thể bạn muốn họ tập trung hơn vào API nào
    • Theo tôi nhớ, liên minh này có khoảng 12 người, và những người này cũng làm việc tại các công ty trình duyệt
      Mục tiêu là ngồi lại với nhau, xét đến lộ trình hiện tại và khối lượng công việc, để tìm các tính năng có thể cùng làm hoặc cải thiện trong vòng một năm. Có thể xem Interop như những ticket bổ sung nhỏ có thể xử lý xen giữa việc phát triển các tính năng chính trong công việc thường ngày
      Cho đến nay, trọng tâm nằm ở các chi tiết mức rất thấp trong cách trình duyệt render nội dung. Vì JavaScript API nhìn chung đã được chuẩn hóa và hợp nhất ở “thượng nguồn”, đây là khu vực còn nhiều dư địa cải thiện nhất
      Trước khi xuất hiện xu hướng triển khai đồng thời các tính năng mới trên mọi engine, có lẽ sẽ tiếp tục có nhiều việc hơn nhằm lấp các khoảng trống giữa các trình duyệt
      Tuy nhiên, khi Apple cuối cùng cũng thêm web push vào Safari di động, chúng ta đã tiến khá gần đến những gì hầu hết web app muốn hưởng lợi từ tính năng PWA cần đến. Tôi tò mò bạn muốn dùng tính năng nào hiện vẫn chưa có chung trên các trình duyệt
    • Tôi tò mò bạn cho rằng mảng trọng tâm PWA sẽ bao gồm những gì
      Ở chỗ khác tôi đã dẫn link https://web.dev/learn/pwa/capabilities và https://whatpwacando.today, nhưng tôi nghĩ khá nhiều tính năng trong đó về bản chất khó có thể xem là tính năng PWA. Rất nhiều tính năng được dùng rộng rãi cả bên ngoài PWA, nên việc gom chúng vào nhóm “PWA” làm ý nghĩa trở nên mờ nhạt. Với nhà phát triển web, các nhóm như “storage” hay “media” có lẽ có ý nghĩa hơn
      Nếu nhìn vào định nghĩa cơ bản của PWA, nó chủ yếu xoay quanh manifest và service worker, cùng việc kết hợp chúng với web platform
      Manifest khó kiểm thử tự động. Nội dung của nó được hiển thị ở các phần khác nhau trong UI trình duyệt, mà UI thì nhìn chung không được quy định trong tiêu chuẩn web. Lý do là các vendor muốn có quyền tự do đưa ra quyết định UI riêng. Vì vậy rất khó đưa vào, và cũng không rõ có bao nhiêu vấn đề về khả năng tương tác
      Service worker thì có thể được đề xuất. Vài năm gần đây nó không được đề xuất, nhưng tôi cũng không thấy gần đây mảng này có quá nhiều vấn đề về khả năng tương tác
    • PWA đi vòng qua mô hình app store. Có thể cài ứng dụng trực tiếp từ trình duyệt
      Vì vậy, kéo dài vấn đề này và cố tình làm trải nghiệm PWA kém hấp dẫn hơn là có lợi cho họ
      Tôi không rõ vì sao Firefox bỏ hỗ trợ PWA, nhưng có lẽ là do chi phí bảo trì
    • Vì so với mục đích rộng hơn rất nhiều là “hiển thị nội dung”, PWA là một trường hợp sử dụng ngách

  • Phông chữ
    Tôi mong có thêm nhiều nỗ lực hơn cho typography trong CSS
    Đặc biệt cần leading-trim và margin-trim
    https://medium.com/microsoft-design/leading-trim-the-future-...
    https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim

  • Thành quả lớn nhất là các bản cập nhật Safari không còn bị gắn với cập nhật hệ điều hành

    • Trên macOS thì có thể
      Nhưng trên iOS thì không
      Và vì iOS có bản cập nhật mới mỗi 3–4 tháng, nên thực tế trên iOS đây không phải vấn đề

  • Tôi tự hỏi liệu đây có phải tín hiệu cho thấy WebKit bắt đầu bắt kịp các tính năng WebAssembly hay không
    Hiện nó tụt lại khá xa so với Chrome và Firefox, và thiếu các tính năng lớn, quan trọng như multiple memories hay garbage collection

    • Cả hai vẫn chưa nằm trong đặc tả Wasm và đang trong quá trình chuẩn hóa
      Google gần với kiểu “sẵn sàng! bắn! ngắm! bắn lại!” nên dễ tung ra các triển khai đặc tả chưa hoàn thiện hơn, còn Apple gần với kiểu “sẵn sàng! ngắm! ngắm! bắn!” nên nhìn chung không thích làm vậy. Với Firefox thì khó nói

  • Thật khó tin là Cookie Store API vẫn chưa được triển khai chính thức
    Đã là năm 2024 mà chỉ để lấy một cookie theo tên vẫn phải phân tích một chuỗi khổng lồ, lộn xộn thì có hợp lý không

    • Chẳng phải vì đã có HTML 5 localStorage rồi sao

  • Tôi không hiểu lắm vấn đề với giao thức WebSocket
    Sau khi upgrade, kết nối không còn là giao thức http(s) nữa, nên việc cho phép dùng http hoặc https ở đây chẳng phải dễ gây hiểu lầm sao? Dùng toán tử ba ngôi, hoặc có một giá trị khác với giá trị mà trang hiện tại đã chuyển sang, có thực sự tệ đến vậy không? Tôi hoan nghênh việc chuẩn hóa hành vi giữa các trình duyệt, nhưng mục này có vẻ có mức ưu tiên khá thấp, dù có thể đáng để thay đổi