🗓️ Cập nhật HTML / CSS / JS — Tuần 39 (23–29/09/2025)

Chào mừng bạn đến với bản cập nhật kỹ thuật frontend tuần này! Dưới đây là những thay đổi và điểm mới đáng chú ý trong thế giới HTML, CSS và JavaScript.

🧱 HTML

Không có thay đổi lớn, nhưng thẻ <dialog> đang ngày càng phổ biến vì được nhiều trình duyệt hỗ trợ tốt hơn.

Tìm hiểu về <dialog> trên MDN

🎨 CSS

Mới! @starting-style đã được Safari 17.2 beta hỗ trợ – cho phép bạn định nghĩa trạng thái ban đầu của phần tử khi animation bắt đầu.

@keyframes fade-in {
		from { opacity: 0 }
		to { opacity: 1 }
	}
	.element {
		animation: fade-in 1s ease;
		@starting-style {
			opacity: 0;
		}
	}

🔥 Firefox đang thử nghiệm :has() với Shadow DOM – mở ra tiềm năng mới khi kết hợp với Web Components!

🧠 JavaScript

Stage 3 Proposal Array.prototype.groupBy() đã gần hoàn tất và chuẩn bị được hỗ trợ trong trình duyệt!

const animals = [
		{ type: 'mammal', name: 'dog' },
		{ type: 'bird', name: 'parrot' },
		{ type: 'mammal', name: 'cat' }
	];
	const grouped = Array.prototype.groupBy.call(animals, a => a.type);
	/*
	{
		mammal: [{...}, {...}],
		bird: [{...}]
	}
	*/

Xem chi tiết proposal tại GitHub

📌 Gợi ý học nhanh trong tuần

• 💡 CSS: Học về @starting-style để mượt hiệu ứng
• 🧠 JavaScript: Thử dùng groupBy() để xử lý mảng nhóm
• 📦 HTML: Tận dụng <dialog> cho popup nhẹ, không cần JS

Hẹn gặp lại bạn vào đầu tuần sau với bản cập nhật mới! 🔄

Đọc thêm: Cốt lõi của một dự án website thành công