#safari

How to Use the Fullscreen API in JavaScript (and Keep the Screen Awake with the Wake Lock API)

Các nhà phát triển front-end thường nhận yêu cầu triển khai chế độ fullscreen cho ứng dụng như slide deck, video player hoặc game. Để đạt được điều này, bạn có thể sử dụng Fullscreen API trong JavaScript, cung cấp phương thức element.requestFullscreen() để kích hoạt chế độ toàn màn hình. Vấn đề phát sinh khi thiết bị tự động tắt màn hình, cần sử dụng Wake Lock API với phương thức navigator.wakeLock.request() để ngăn điều này xảy ra. Hai API này kết hợp tạo giải pháp hoàn chỉnh cho trải nghiệm fullscreen ổn định, đặc biệt hữu ích cho các ứng dụng cần màn hình luôn bật như lớp học trực tuyến hoặc trạm giám sát.

Bài viết hướng dẫn bạn triển khai tính năng toàn màn hình và giữ màn hình luôn sáng với JavaScript API cho các ứng dụng đa dạng.

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ọ.

wpe-android: Skia deferred display lists (DDL) – Tech comments and notes

Trên Pixel 7 với WPE WebKit, các lỗi hiển thị như nội dung tile cũ, góc đen và hình ảnh nhiễu được truy vết đến lỗi driver GPU Mali khi đồng bộ ngữ cảnh giữa rasterization và worker threads. Giải pháp sử dụng Skia's deferred display lists (DDL) để ghi nhận công việc raster trên worker threads mà không cần GPU context, chỉ thực thi GPU submission trên compositor thread. Bài viết còn đề cập lỗi hình chữ nhật đen do vấn đề định dạng texture upload của Android và fix cache render target để phục hồi performance regression. Lưu ý MotionMark benchmark bị ảnh hưởng do đường render Mali lỗi trước đây.

Bài viết này giúp lập trình viên hiểu cách tối ưu hóa hiệu năng GPU và khắc phục lỗi đồng bộ hóa trong trình duyệt WPE WebKit trên Android.

WebKit Igalia Periodical #79

Trong tuần từ 21-28/9, WebKit phát hành bản vá bảo mật WSA-2026-0006 cho phiên bản stable 2.54.0, lần đầu tiên bao gồm lỗ hổng trong các thư viện ANGLE và Skia. SharedArrayBuffer đã được kích hoạt lại cho các port WPE và GTK với hỗ trợ cross-origin isolation. Đội ngũ sửa lỗi đồ họa đã khắc phục các vấn đề về rendering 3D-transform, damage region clipping, artifacts trong Skia compositor và offset input touch cho GTK port. WPE Platform API build option đã bị loại bỏ vì giờ đây luôn được kích hoạt mặc định.

Lập trình viên nên đọc bài này để cập nhật những thay đổi và lỗi quan trọng trong WebKit, bao gồm bản vá bảo mật mới và các sửa đồ họa quan trọng.

Release Notes for Safari Technology Preview 253

Safari Technology Preview 253 đã ra mắt cho macOS Golden Gate và macOS Tahoe, bao gồm các thay đổi trong WebKit từ commit 320113 đến 321067. Bản cập nhật này tích hợp style-originated scroll timelines khớp toàn cầu, CSSContainerRule.conditions, sibling-index()/sibling-count() trong container queries, QuotaExceededError như một lớp con của DOMException, thuộc tính path SVG 2 trên textPath, và thuật toán nhân BigInt Toom-3 nhanh hơn trong JavaScriptCore. Phiên bản này cũng khắc phục hàng chục lỗi liên quan đến accessibility, animations, CSS layout, JavaScript regex, WebGPU, WebRTC và nhiều lĩnh vực khác. Với những cải tiến đáng kể về hiệu năng và tương thích web tiêu chuẩn mới, đây là bản cập nhật quan trọng cho các developer đang làm việc với công nghệ web Apple.

Bài này cung cấp cái nhìn chi tiết về các tính năng mới và lỗi đã được sửa trong Safari Technology Preview 253, giúp lập trình viên cập nhật công nghệ mới nhất để phát triển ứng dụng web hiệu quả hơn.

Stop buttons triggering zoom when they’re double tapped

Nguy cơ gây zoom khi nhấn nút đôi trong trình duyệt gây khó chịu cho người dùng. Nguyên nhân là do sự kiện dblclick (double click) mặc định của trình duyệt kích hoạt tính năng zoom. Để giải quyết, bạn chỉ cần thêm thuộc tính CSS touch-action: manipulation vào element, điều này ngăn chặn hành động zoom mà vẫn giữ nguyên chức năng nhấn đơn. Phương án này hiệu quả hơn nhiều so với việc sử dụng meta tag viewport để vô hiệu hóa hoàn toàn tính năng zoom.

Tìm hiểu cách ngăn chặn trình duyệt phóng to khi nhấp đúp vào nút mà không cần dùng meta tag.

Web-Perf Wednesday 010 – Safari Keeps Scrolled Content in Place – CSS Wizardry

Safari 27 adds scroll anchoring, tighter HTTP caching, and static Service Worker routes, while Chrome improves performance tooling.

Enhance Your HDR Experience: Bright Images in Chrome & Safari

Discover how to enhance HDR displays with vibrant images using gain maps and CSS techniques. Learn more about this fun technology!

WebKit Igalia Periodical #78

WebKit vừa phát hành phiên bản ổn định WebKitGTK 2.54.0 và WPE WebKit 2.54.0 với Skia-based compositor thay thế TextureMapper. API nhúng WPEPlatform đã đạt ổn định với tài liệu hướng dẫn và hướng di chuyển từ libwpe cũ. Các bản vá trong tuần này tập trung vào sửa lỗi Sysprof trace timing, CSS filter/backdrop-filter trên phần tử bị biến đổi, và clipping rasterization tile trong backing store Skia. Hiệu năng của compositor mới được cải thiện đáng kể với xử lý damage handling chính xác hơn.

Bài viết cập nhật những sửa lỗi và cải tiến quan trọng trong WebKit cùng với việc ra mắt phiên bản ổn định 2.54.0 có compositor dựa trên Skia mới mang lại hiệu năng vượt trội.

Igalia celebrates "Twenty-Five Years Upstream"

Igalia, a worker-owned open-source consultancy, marked 25 years of upstream FOSS work with an announcement highlighting projects it has contributed to for clients, including WebKit, mobile browser rendering on Maemo, Moblin, MeeGo, and Tizen, Linux kernel CPU and GPU scheduling, 3D graphics drivers, the Orca screen reader, and GStreamer. The company frames its business model around doing paid work directly in upstream projects so fixes and features ship in future releases and benefit the wider community rather than just the paying client.

Igalia Celebrates 25 Years Of Advancing Linux & Open-Source

Igalia, the worker-owned Linux and open-source consultancy based in A Coruña, Spain, marks its 25th anniversary since founding in September 2001. Now with over 200 employees globally, the firm has become a major contributor to the Linux kernel, browser engines (WebKit, Chromium, Servo), Mesa, GStreamer, and LLVM. Recent work includes Wayland and AMD color management for Valve, Raspberry Pi and Qualcomm Adreno graphics driver improvements, GPU scheduler fairness in the Linux kernel, and enhancements to the FEX emulator.

Skia compositor for WPE WebKit and WebKitGTK

WPE WebKit and WebKitGTK 2.54 ship a new Skia-based compositor that replaces the long-standing TextureMapper implementation, which used OpenGL ES with a large custom set of shader programs and was largely unmaintained. Igalia's WebKit graphics team details the multi-stage effort: a SkiaCompositingLayer class to iterate the layer tree, simplified filter implementation avoiding intermediate surfaces, more efficient mask handling via clipShader/clipPath, fixed z-ordering bugs in 3D contexts, new blend mode support, batched painting to reduce GPU command queue overhead, promise images to avoid redundant texture wrapping, and Deferred Display Lists (DDL) for a cleaner multithreaded Ganesh usage. The new compositor is enabled by default in 2.54, is 45% faster on a new composition test suite and 35% faster on MotionMark 1.3.1, though it trails TextureMapper by 26% and 10% on two MotionMark 1.3 15fps tests due to the DDL trade-off. TextureMapper is now disabled by default at build time on the main branch and will be removed for GTK and WPE ports, though 2.54 still allows falling back via the WEBKIT_USE_SKIA_FOR_COMPOSITION=0 environment variable.

Bringing damage to the Skia compositor

Teaching the new Skia compositor to recomposite only what changed

WebKit Igalia Periodical #77

Trong tuần từ 7-14/9, WebKit đã có các bản sửa đồ họa và rendering quan trọng, bao gồm việc dọn dẹp PNG decoder loại bỏ hỗ trợ libpng cũ hơn phiên bản 1.5.0. Đội ngũ sửa lỗi assertion failure trong Layer-Based SVG Engine (LBSE) liên quan đến scrolling, filters và compositing, đồng thời khắc phục việc phân lớp không chính xác cho layer có clipping/masking. Các sửa quan trọng khác bao gồm giảm unnecessary repaints cho CSS-filtered composited layers trên Skia compositor và fix white noise artifacts trên Intel Arc với i915 driver. Bài viết còn có blog cộng đồng về sử dụng WPE Platform API trên Raspberry Pi với branch mới nhất của WebKit main.

Lập trình viên nên đọc bài này để cập nhật các bản vá và cải tiến quan trọng trong WebKit liên quan đến đồ họa, rendering và hiệu suất.

Issue #758: When CSS could run JavaScript — Frontend Focus

Frontend Focus Issue #758: When CSS could run JavaScript

Web-Perf Wednesday 009 – CrUX Makes Ad Weight Public – CSS Wizardry

Chrome User Experience Report (CrUX) mới đây đã công bố các chỉ số về quảng cáo như số lượng quảng cáo, mật độ quảng cáo, CPU và network metrics. Thông tin này cung cấp cho cả nhà xuất bản và nhà quảng cáo một góc nhìn chung về thực tế ad weight. Việc theo dõi các chỉ số này giúp đo lường hiệu suất thực tế khi website chứa quảng cáo. Đây là bước tiến quan trọng cho việc minh bạch hóa hiệu suất web trong ngành quảng cáo trực tuyến.

CrUX cung cấp công cụ đo lường hiệu suất và khối lượng quảng cáo thực tế, giúp lập trình viên tối ưu hóa trải nghiệm người dùng.

How Solaris' Turnstile Influenced the Modern System Designs of Web Browsers and Language Runtimes

Solaris đã định hình kỹ thuật hệ thống hiện đại với các đổi mới như Slab Allocator cho quản lý bộ nhớ hiệu quả, OpenZFS cho lưu trữ nâng cao và DTrace cho khả năng quan sát. Tác động lớn nhất đến từ Turnstile - cơ chế lock nhẹweight giúp giảm tranh chấp tài nguyên, đạt tới 20.000 ops/sec trên nhiều core. Các trình duyệt web và runtime ngôn ngữ hiện đại như Chromium, V8 và .NET Core đã kế thừa nguyên tắc này thông qua các lock-spin và futex. Bài viết phân tích chi tiết cách Solaris giải quyết vấn đề contention trong hệ thống đa core, kỹ thuật vẫn còn giá trị trong kỷ nguyên cloud và container ngày nay. Nếu bạn đang thiết kế hệ thống cần hiệu năng cao trên nhiều core, bài gốc cung cấp case study thực tế về kiến trúc lock đáng tham khảo.

Solaris Turnstile giúp lập trình viên hiểu ảnh hưởng của hệ điều hành hiện đại đến thiết kế trình duyệt web và runtime ngôn ngữ.

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

It's the best of both worlds.

Release Notes for Safari Technology Preview 252

Safari Technology Preview 252 hỗ trợ macOS Golden Gate và Tahoe, tập trung vào sửa lỗi WebKit và bổ sung tính năng mới. Phiên bản này cải thiện CSS với API @supports, CSSMediaRule/CSSConditionRule, sửa lỗi corner-shape và calc(), đồng thời thay đổi tên thuộc tính margin-trim thành fit-tolerance. JavaScript được nâng cấp với Promise.try, sửa regex và Uint8Array, trong khi WebAssembly hỗ trợ memory64 với nhiều bộ nhớ. Bài viết chi tiết các sửa lỗi SVG, WebGPU, WebGL, WebRTC, Web Audio, hành vi focus của HTML dialog và fix bảo mật cho subframe navigation, rất hữu ích cho developer làm việc với các công nghệ web này.

Lập trình viên nên đọc bài này để cập nhật những tính năng và sửa lỗi mới nhất trong Safari Technology Preview 252 giúp tối ưu hóa website của mình.

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.

Support for `headers` Attribute

Bối cảnh của bài viết tập trung vào hỗ trợ thuộc tính headers trong HTML tables, vì không có tương đương trong ARIA. Nguyên nhân kỹ thuật là hỗ trợ cho thuộc tính này rất kém, như đã được chứng minh trong bài viết 2022 "Accessible Cart Tables?". Hệ quả là tác giả phải tránh sử dụng headers trong bài viết 2023 "Avoid Spanning Table Headers" vì biết rõ hỗ trợ yếu kém. Điều đáng học là việc thiếu hỗ trợ cho các thuộc tính quan trọng như headers đang ảnh hưởng đến khả năng tiếp cận của table HTML, buộc nhà phát triển phải tìm giải pháp thay thế.

Bài viết này giúp lập trình viên cập nhật tình hình hỗ trợ thuộc tính headers trong bảng HTML để cải thiện tính tiếp cận của website.

Issue #801: When 8 chunks weigh more than 355 — JavaScript Weekly

JavaScript Weekly Issue #801: When 8 chunks weigh more than 355

SwiftUI has a native WebView in iOS 26

iOS 26 introduces a native WebView type for SwiftUI, built directly on WebKit, eliminating the need for the UIViewRepresentable wrapper developers have hand-written for years. WebView(url:) covers simple cases like showing a terms page, while the companion WebPage model (Observable) exposes title, loading progress, back/forward history, and async JavaScript execution. WebView only appears when both SwiftUI and WebKit are imported since it ships via a cross-import overlay. The .webViewContentBackground(.hidden) modifier fixes the old white-flash-on-load issue from WKWebView's opaque background. Apps supporting pre-iOS 26 targets still need to keep the old UIViewRepresentable wrapper alongside the new API.

Submit your ideas for Interop 2027

WebKit đang nhận đề xuất cho dự án Interop 2027, sáng kiến hàng năm giúp các nhà cung cấp trình duyệt và nhà phát triển web xác định lĩnh vực cải thiện khả năng tương tác đa trình duyệt. Các đề xuất cần nhắm đến công nghệ có tiêu chuẩn web đã hoàn thiện như W3C hay TC39, để có thể kiểm tra qua Web Platform Tests, trong khi ý tưởng thiếu kiểm thử đủ đầy có thể đề xuất như Interop Investigations. Để đề xuất được chấp nhận, bạn cần đảm bảo tính cụ thể, tác động, giá trị, ổn định và đã được kiểm thử, kèm liên kết đến tiêu chuẩn và WPT coverage. Tất cả đề xuất sẽ được nộp qua GitHub issues và khuyến khích hợp tác thay vì tạo đề xuất trùng lặp.

Lập trình viên nên đọc bài này để nắm bắt cơ hội đóng góp vào cải thiện tương thích đa trình duyệt cho các công nghệ web chuẩn mực.

Web-Perf Wednesday 007 – Chrome Makes Busy Workers Measurable – CSS Wizardry

Chrome phiên bản 153 bắt đầu đo lường tình trạng quá tải của dedicated worker trong RUM (Real User Monitoring). Điều này cho phép đo lường hiệu suất của web applications khi worker threads bị quá tải do xử lý các tác vụ nặng. Giải pháp này đặc biệt hữu ích cho các ứng dụng sử dụng JavaScript-heavy applications và Web Workers. Việc triển khai này giúp các nhà phát triển xác định điểm nghẽn hiệu suất mà trước đây khó phát hiện. Đây là một bước tiến quan trọng trong việc tối ưu hóa web performance trong bối cảnh các trình duyệt ngày càng siết chặt chính sách bảo mật.

Bài viết giúp lập trình viên đo lường và tối ưu hiệu năng web worker trong Chrome 153.

Reduce clutter and distractions with Ad Blocker for Firefox on iOS

Firefox trên iOS vừa tích hợp một tiện ích chặn quảng cáo tùy chọn, cho phép người dùng kích hoạt hoặc tắt theo nhu cầu. Công cụ này hoạt động bằng cách sử dụng danh sách lọc để chặn các yêu cầu tải về từ các domain quảng cáo và tracker bên thứ ba, ngăn chặn chúng trước khi được hiển thị trong trang web. Kết quả là lượng quảng cáo hiển thị giảm đáng kể, làm giảm độ hỗn loạn trên giao diện và giảm lượng dữ liệu theo dõi được gửi về các mạng quảng cáo. Điều đáng học là việc tích hợp chặn quảng cáo trực tiếp vào trình duyệt trên thiết bị di động có thể cải thiện trải nghiệm người dùng mà không cần phần mở rộng bên thứ ba, nhưng cần cân nhắc về sự tương thích với các trang web phụ thuộc vào quảng cáo để tài trợ.

Lập trình viên nên đọc bài này để tăng hiệu suất làm việc bằng cách loại bỏ quảng cáo và trình theo dõi trên Firefox trên iOS.

Let’s Use the Emergent CSS random() Function in all the Browsers

The journey to create a polyfill for the upcoming CSS random() function that works in all browsers.

Web-Perf Wednesday 005 – RUM Needs More Than a Percentile – CSS Wizardry

Web-Perf Wednesday 005 thảo luận về việc RUM cần hơn các giá phần trăm thông qua LUX Sidecar cung cấp bối cảnh và browser-tool fixes nhấn mạnh tầm quan trọng của điều kiện đo lường và chi tiết gỡ lỗi.

Bài viết này giúp lập trình viên hiểu được tại sao việc đo lường hiệu năng web cần nhiều hơn chỉ phần trăm và điều kiện đo lường chi tiết quan trọng thế nào.