IP and DNS Leaks in WebKit Affecting Proxy Browsers and iCloud Private Relay

WebKit supports interactive-widget … and hopefully Safari will too?

WebKit vừa thêm hỗ trợ cho directive interactive-widget trong viewport meta, giúp lập trình viên kiểm soát cách layout và viewport thay đổi khi bàn phím ảo xuất hiện trên di động. Tính năng này bắt nguồn từ công trình viewport của Chrome Interop 2022 và đã xuất hiện trong Chrome 108 cùng Firefox 133 trên Android. Hiện tại để thử nghiệm trên WebKit, bạn cần tự build WebKit locally và chạy qua MobileMiniBrowser trên iPhone Simulator vì nó chưa xuất hiện trong Safari Technology Preview. Vẫn chưa rõ khi nào tính năng này sẽ được đưa vào bản Safari công khai, nhưng có thể sẽ xuất hiện trong Safari 27.1.

Kiến thức về tính năng interactive-widget trong WebKit giúp lập trình viên chuẩn bị cho tương lai phát triển ứng dụng di động khi Safari hỗ trợ viewport directive này.

Fixing Top-Level Await in Safari

Safari trước đây gặp lỗi khi sử dụng top‑level await vì bộ nạp module của nó còn dựa trên bản đề xuất WHATWG Loader đã bị bỏ và không tuân thủ đầy đủ spec ECMAScript. Nguyên nhân là bộ nạp cũ được viết bằng JavaScript, dẫn tới lỗi “accessed before initialization” và thứ tự đánh giá module không chính xác. Để khắc phục, nhóm WebKit đã viết lại toàn bộ bộ nạp module từ đầu bằng C++ nguyên bản và kiểm tra kỹ lưỡng bằng fuzzing, test262, WPT và các test case do Bun engineers cung cấp. Kết quả là Safari 27 beta và Safari Technology Preview 251 đã полностью hỗ trợ top‑level await mà không còn những lỗi trước đây. Bài học là đầu tư vào việc viết lại thành phần lõi bằng ngôn ngữ native và thực hiện bộ kiểm tra đa dạng giúp đạt được tuân thủ spec và ổn định lâu dài. Nhà phát triển có thể kiểm tra tính năng này ngay trong Safari Technology Preview 251 hoặc bản beta Safari 27 để xác nhận việc top‑level await hoạt động đúng như mong đợi.

Bài này giúp lập trình viên hiểu Safari đã sửa lỗi top-level await ảnh hưởng đến cách module được tải và thực thi.

I tried using one browser for work and another for everything else, and it fixed a problem extensions never did

Bối cảnh: tác giả trước đây cố gắng giảm sự phân tâm bằng cách cài đặt nhiều tiện ích mở rộng (extensions) trên trình duyệt duy nhất. Nguyên nhân kỹ thuật: các tiện ích này thường chạy trong cùng một tiến trình và chia sẻ tài nguyên, vì vậy chúng không thể hoàn toàn chặn các trang web hoặc thông báo không liên quan đến công việc. Hệ quả: khi chuyển sang sử dụng một trình duyệt riêng cho công việc và một trình duyệt khác cho các hoạt động cá nhân, sự phân tán giảm đáng kể và tập trung làm việc cải thiện rõ rệt. Điều đáng học: thay vì continually tinh chỉnh các tiện ích, việc tách môi trường bằng cách sử dụng nhiều trình duyệt có thể giải quyết vấn đề gốc hiệu quả hơn. Điều này gợi ý rằng đối với các vấn đề liên quan đến môi trường làm việc, giải pháp kiến trúc đôi khi vượt qua giải pháp dựa trên phần mềm bổ sung.

Sử dụng trình duyệt riêng cho công việc và cuộc sống riêng giúp loại bỏ sự phân tâm hiệu quả hơn bất kỳ tiện mở rộng nào.

Release Notes for Safari Technology Preview 251

Safari Technology Preview 251 được phát hành cho macOS Golden Gate và macOS Tahoe, chứa một bộ thay đổi lớn của WebKit giữa hai khoảng commit. Nguyên nhân kỹ thuật bao gồm việc bổ sung các tính năng CSS như @supports at-rule(), object-view-box, random-item(), corner-shape và multi-condition @container queries; JavaScript nhận Iterator.prototype.includes(), WebAssembly Memory64, import defer, iterator chunking và joint iteration; HTML thêm popover=hint và Navigation API. Hệ quả là Service Workers, Web Extensions và Web Inspector được mở rộng khả năng, đồng thời có hàng chục bản sửa lỗi trong rendering, SVG, media, networking, WebGPU và WebRTC. Điều đáng học là các nhà phát triển cần kiểm tra tính năng mới và lưu ý việc loại bỏ các giá trị phần trăm không chuẩn của -webkit-line-clamp, margin-trim trong flex/grid và các giao diện SVGPathSegList/SVGPathSeg để phù hợp với SVG 2. Việc theo dõi các bản preview này giúp teams sớm thích nghi với các tiêu chuẩn web đang phát triển và tránh những thay đổi phá vỡ khi phiên bản ổn định được ra mắt.

Lập trình viên nên đọc bài này để cập nhật các tính năng và thay đổi mới nhất trong Safari Technology Preview 251, giúp tối ưu hóa web app và ứng dụng của mình.

Release Notes for Safari Technology Preview 250

Bản Safari Technology Preview 250 bổ sung nhiều tính năng mới như các thuộc tính CSS (ruby-overhang, ::marker, text-decoration-inset, white-space-trim), hỗ trợ JavaScript Explicit Resource Management, WebAssembly relaxed SIMD, cùng nhiều cải tiến về accessibility, media và Web Inspector. Bản cập nhật này dành cho macOS Golden Gate và Tahoe, dựa trên WebKit từ build 317507 đến 317934.

Lập trình viên phát triển web hoặc WebAssembly nên đọc để cập nhật các tính năng mới như ruby-overhang cho CSS, hỗ trợ fetch() với ReadableStream và cải tiến SIMD trong WebAssembly, giúp tối ưu hóa hiệu suất và tương thích cho dự án của họ.

Support for `headers` Attribute

This post only covers the headers attribute in HTML tables (ARIA has no headers equivalent). My 2022 post Accessible Cart Tables? showed headers attribute support was poor. In my 2023 post Avoid Spanning Table Headers I didn’t use headers because I knew support was poor. For this post I merged…

I wanted Safari’s performance with Chrome’s extensions, and Orion gave me both

It's the best of both worlds.

Web-Perf Wednesday 008 – Good INP Rates Keep Falling – CSS Wizardry

CrUX data cho thấy tỷ lệ good INP (Interaction to Next Paint) tiếp tục giảm, đáng chú ý là đã xuống còn dưới 50% trên nhiều website. Nguyên nhân chính xuất phát từ việc browser chưa tối ưu hóa đủ tốt cho tính năng mới nhất của INP metric, đặc biệt với các interaction phức tạp. Hệ quả là trải nghiệm người dùng bị ảnh hưởng khi độ trễ interaction tăng lên, dẫn đến chỉ số Core Web Vitals không đạt yêu cầu. Điều đáng học là cần phân tích chi tiết từng interaction cụ thể thay vì chỉ dựa vào con số tổng thể để xác định đúng điểm nghẽn hiệu suất.

Bài viết này cung cấp phân tích cập nhật về xu hướng giảm tỷ lệ trải nghiệm INP tốt và cách đánh giá chính xác các chỉ số hiệu suất web.