Gần đây, Chromium đã triển khai một tính năng mới từ HTML5: các bảng định kiểu theo phạm vi, còn gọi là
<style scoped>. Tác giả trang web có thể giới hạn các quy tắc kiểu chỉ áp dụng cho một phần của trang bằng cách đặt thuộc tính "scoped" (có giới hạn) trên phần tử <style> là phần tử con trực tiếp của phần tử gốc của cây con mà bạn muốn áp dụng kiểu. Điều này giới hạn các kiểu chỉ ảnh hưởng đến phần tử là phần tử mẹ của phần tử <style> và tất cả phần tử con của phần tử đó.
Ví dụ:
Dưới đây là một tài liệu đơn giản sử dụng kiểu chuẩn:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
Các quy tắc kiểu được chỉ định sẽ tô màu văn bản trong bất kỳ <div> nào bằng màu đỏ và trong bất kỳ <span> nào bằng màu xanh lục:
một div! một span!
một div! một span!
một div! một span!
Tuy nhiên, nếu chúng ta đặt scoped trên phần tử <style>:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style scoped>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
thì quy tắc kiểu sẽ bị hạn chế để áp dụng cho <div> bao quanh là phần tử mẹ của phần tử <style scoped> và mọi thứ bên trong <div> đó. Chúng tôi gọi đây là "có giới hạn" và kết quả sẽ có dạng như sau:
một div! một span!
một div! một span!
một div! một span!
Tất nhiên, bạn có thể thực hiện việc này ở bất kỳ vị trí nào trong mã đánh dấu. Vì vậy, nếu muốn thử nghiệm, bạn có thể lồng các kiểu có phạm vi trong các phần có phạm vi khác của mã đánh dấu theo ý muốn để có quyền kiểm soát chi tiết hơn đối với vị trí áp dụng kiểu.
Trường hợp sử dụng
Vậy điều này có ích gì?
Một trường hợp sử dụng phổ biến là nội dung được phân phối: khi bạn là một tác giả web muốn kết hợp nội dung của bên thứ ba, bao gồm cả tất cả các kiểu của nội dung đó, nhưng không muốn các kiểu đó có nguy cơ "làm ô nhiễm" các phần khác không liên quan của trang. Một lợi thế lớn ở đây là khả năng kết hợp nội dung từ các trang web khác như yelp, twitter, ebay, v.v. vào một trang duy nhất mà không cần tách riêng các trang web đó bằng <iframe> hoặc chỉnh sửa nội dung bên ngoài ngay lập tức.
Nếu bạn đang sử dụng một hệ thống quản lý nội dung (CMS) gửi cho bạn các đoạn mã đánh dấu được kết hợp với nhau thành một trang hiển thị cuối cùng, thì đây là một tính năng tuyệt vời để đảm bảo mỗi đoạn mã được tạo kiểu riêng biệt với mọi nội dung khác trên trang. Điều này cũng có thể hữu ích cho một trang wiki.
Khi bạn muốn viết một số mã minh hoạ đẹp mắt trên một trang, bạn có thể dễ dàng giới hạn các kiểu chỉ cho nội dung minh hoạ. Điều đó cho phép bạn thoải mái sử dụng CSS trên bản minh hoạ, nhưng không có nội dung nào khác trên trang sẽ bị ảnh hưởng.
Một trường hợp sử dụng khác chỉ đơn giản là đóng gói: ví dụ: nếu trang web của bạn có một trình đơn bên, bạn nên đặt các kiểu dành riêng cho trình đơn đó vào phần <style scoped> trong phần đó của mã đánh dấu. Các quy tắc kiểu đó sẽ không có hiệu lực khi hiển thị các phần khác của trang, giúp tách biệt chúng khỏi nội dung chính!
Có thể một trong những trường hợp sử dụng hấp dẫn nhất là cho mô hình thành phần web. Thành phần web sẽ là một cách tuyệt vời để tạo các thành phần như thanh trượt, trình đơn, bộ chọn ngày, tiện ích thẻ, v.v. Bằng cách cung cấp các kiểu trong phạm vi, nhà thiết kế có thể tạo một tiện ích và đóng gói tiện ích đó bằng các kiểu của họ dưới dạng một đơn vị độc lập mà người khác có thể lấy và kết hợp vào một ứng dụng web đa dạng. Chúng tôi dự định sử dụng <style scoped> nhiều với các thành phần Web và shadow DOM (bạn có thể bật tính năng này bằng cách đặt cờ "shadow DOM" thử nghiệm trong chrome://flags). Hiện tại, không có cách nào thực sự hiệu quả để đảm bảo rằng các kiểu chỉ được giới hạn ở Thành phần web mà không cần sử dụng các phương pháp không tốt như tạo kiểu cùng dòng, vì vậy, kiểu trong phạm vi là lựa chọn phù hợp nhất cho việc này.
Tại sao phải đưa phần tử mẹ vào?
Cách tự nhiên nhất là đưa phần tử mẹ vào để các quy tắc <style scoped> có thể đặt màu nền chung cho toàn bộ phạm vi. Phương thức này cũng cho phép bạn viết các trang kiểu có giới hạn một cách "phòng thủ" cho những trình duyệt chưa hỗ trợ <style scoped>, bằng cách thêm tiền tố cho các quy tắc bằng bộ chọn mã nhận dạng hoặc lớp làm phương án dự phòng:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
Điều này mô phỏng hiệu ứng của việc sử dụng kiểu khi triển khai "có giới hạn" nhưng có một số hình phạt về hiệu suất trong thời gian chạy do bộ chọn phức tạp hơn. Điều hay của phương pháp này là cho phép phương pháp dự phòng linh hoạt cho đến ngày <style scoped> được hỗ trợ rộng rãi và bạn chỉ cần bỏ bộ chọn mã nhận dạng.
Trạng thái
Do việc triển khai trang kiểu theo phạm vi vẫn còn mới, nên các trang kiểu này hiện đang ẩn sau một cờ thời gian chạy trong Chrome. Để bật các tính năng này, bạn cần tải một phiên bản Chrome có số phiên bản là 19 trở lên (hiện tại là Chrome Canary), sau đó tìm mục "Bật <style scoped>" trong chrome://flags (ở cuối trang), nhấp vào "Bật" rồi khởi động lại trình duyệt.
Hiện chưa có lỗi nào được ghi nhận, nhưng @global và các phiên bản có giới hạn của @keyframes và @-webkit-region vẫn đang trong quá trình triển khai. Ngoài ra, @font-face sẽ bị bỏ qua trong thời gian này vì có khả năng thông số kỹ thuật sẽ thay đổi.
Chúng tôi khuyến khích những người quan tâm đến tính năng này dùng thử và cho chúng tôi biết trải nghiệm của bạn: những điểm tốt, điểm xấu và (có thể) điểm lỗi.