- Firefox 150 Stable (21/04/2026) mang tới một loạt web platform features mới cho dev: sizes="auto" cho lazy-load, light-dark() nhận ảnh, revert-rule, ariaNotify() cho screen reader, và bộ media pseudo-classes :playing/:paused/:buffering.
- Chưa baseline — kiểm MDN trước khi ship.
TL;DR
Firefox 150 Stable phát hành ngày 21/04/2026 với 5 web platform features đáng chú ý cho front-end dev: sizes="auto" cho ảnh lazy-load, light-dark() nhận giá trị hình ảnh, keyword CSS revert-rule, API ariaNotify(), và nhóm media pseudo-classes (:playing, :paused, :buffering, :muted, :seeking, :stalled, :volume-locked). Không có feature nào trong số này đạt Baseline toàn bộ trình duyệt — luôn check MDN hoặc caniuse trước khi đưa vào production.
What's new
Mozilla bump version từ 149 lên 150 chỉ sau gần một tháng (beta bắt đầu 25/03, stable ngày 21/04). Bản release dày đặc CSS/HTML/API mới, DevTools update, và hàng loạt bug fix phần đông đến từ partnership với Anthropic theo xác nhận của Mozilla. Dưới đây là 5 highlight dev sẽ dùng sớm nhất.
Technical facts
1. sizes="auto" trên <img>
Với loading="lazy" + srcset, trình duyệt tự tính layout width sau khi CSS áp xong và chọn ảnh phù hợp — bỏ được đống media query trùng lặp trong HTML.
<img src="fallback.jpg"
srcset="small.jpg 500w, large.jpg 1000w"
sizes="auto"
loading="lazy" alt="Hero">2. light-dark() nhận ảnh
Trước đây chỉ chấp nhận màu, giờ nhận cả <image> — gradient, URL, pattern. Gộp light + dark asset vào một rule, không cần @media (prefers-color-scheme: dark).
.hero {
background-image: light-dark(
url('light-banner.jpg'),
url('dark-banner.jpg')
);
}3. Keyword revert-rule
Giá trị property hoạt động như thể style rule hiện tại không tồn tại — rule matching khác thắng. Clean hơn initial/unset khi muốn rollback chỉ một rule cụ thể.
.custom-box { background-color: blue; }
.custom-box.override { background-color: revert-rule; }4. ariaNotify()
Method mới trên Document và Element, queue string để screen reader đọc. Thay thế gọn gàng cho pattern ARIA live regions thao tác DOM.
document.ariaNotify('Changes saved successfully.');5. Media pseudo-classes
Style <audio>/<video> theo trạng thái phát thật — không cần JS event listener toggle class.
video:paused { opacity: 0.5; }
video:playing { box-shadow: 0 0 10px #0f0; }
video:buffering::after { content: 'Loading…'; }Đầy đủ 7 pseudo-classes: :buffering, :muted, :paused, :playing, :seeking, :stalled, :volume-locked.
Comparison
Không feature nào trong 5 cái này đạt Baseline across browsers tại thời điểm release:
| Feature | Firefox 150 | Chrome/Edge | Safari |
|---|---|---|---|
sizes="auto" | ✅ | ✅ (đã có) | ⚠️ kiểm MDN |
light-dark() images | ✅ | ⚠️ base color only | ⚠️ base color only |
revert-rule | ✅ | ❌ chưa ship | ❌ chưa ship |
ariaNotify() | ✅ | ⚠️ behind flag | ❌ chưa ship |
| Media pseudo-classes | ✅ | ⚠️ behind flag | ⚠️ partial |
Cột Chrome/Safari là trạng thái tham khảo — đừng copy bảng này vào production check, luôn verify trên MDN hoặc caniuse.com tại thời điểm ship.
Use cases
- Responsive gallery lazy-load: dùng
sizes="auto"cho feed dài hàng trăm ảnh — bỏ được đống media query trùng lặp, browser tự tính. - Theme-aware hero/banner:
light-dark(url(...))inline cả hai asset trong một rule, giảm CSS và tránh FOUC khi đổi theme. - SPA accessibility:
ariaNotify()thay pattern "insert text vào hidden live region" cho toast, form save, async status — ít boilerplate hơn. - Custom media player: toàn bộ trạng thái play/pause/buffering style bằng CSS thuần, JS chỉ còn mỗi việc gắn source.
- Design system overrides:
revert-rulerollback riêng một rule mà không đụng đến các giá trị inherit / initial khác.
Limitations & availability
Firefox 150 miễn phí, tải tại mozilla.org. Một số lưu ý:
- Drop support: Windows 8.1 trở xuống, macOS 10.14 trở xuống — người dùng được hướng về Firefox ESR.
- Không baseline: cả 5 features vẫn đang roll out, ship production cần fallback + feature detection.
- Experimental behind flag (cần bật trong
about:config): namespacedattr(), scoped custom element registries, multiple import maps, fragmentainer-aware positioning. - Local network access prompt cho toàn bộ user dạng progressive rollout — app dev internal tools cần test lại permission flow.
What's next
Ajit Varma (head of Firefox) gọi roadmap sắp tới là "most exciting in quite a while". Firefox 151+ dự kiến: UI refresh với theme mới và icon redesign, cải tiến hiệu năng Gecko, thêm open web standards, tiếp tục partnership Anthropic để quét bug. Mozilla cũng vừa ra mắt mascot mới tên Kit.
Hiện tại, action cho dev: mở MDN release notes, pick feature khớp stack của bạn, thêm progressive enhancement + fallback, và bắt đầu thử trên Firefox 150.
Nguồn: MDN Firefox 150, firefox.com 150 beta notes, Phoronix, @FirefoxWebDevs.
