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