Gần đây, Chromium đã triển khai một tính năng mới từ biểu định kiểu HTML5: biểu định kiểu theo phạm vi, còn gọi là.
<style scoped>. Tác giả web có thể giới hạn các quy tắc tạo 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>. Đây 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. Việc này khiế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.
Ví dụ:
Dưới đây là một tài liệu đơn giản sử dụng kiểu tiê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ì phương thứ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à mọi nội dung bên trong <div> đó. Chúng tôi gọi trạng thái này là "có phạm vi" và kết quả sẽ có dạng như sau:
một div! một khoảng!
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 cứ đâu trong mã đánh dấu. Vì vậy, nếu thích phiêu lưu, bạn có thể lồng các kiểu theo phạm vi trong các phần phạm vi khác của mã đánh dấu tuỳ thích để có thể kiểm soát chi tiết vị trí áp dụng kiểu.
Trường hợp sử dụng
Lợi ích của việc này là gì?
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 là tác giả web muốn kết hợp nội dung của một bên thứ ba, bao gồm tất cả các kiểu của bên thứ ba đó, nhưng lại không muốn các kiểu đó “gây ô nhiễm” những phần không liên quan khác 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. thành một trang duy nhất mà không cần tách biệt chúng bằng cách sử dụ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 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 hiển thị trên trang 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 đối với wiki.
Khi bạn muốn soạn thảo mã minh hoạ đẹp mắt trên một trang, bạn có thể dễ dàng giới hạn kiểu cho nội dung minh hoạ. Điều đó cho phép bạn sử dụng CSS trong bản minh hoạ, nhưng không có yếu tố 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ó 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 định kiểu đó sẽ không có hiệu lực khi hiển thị các phần khác của trang, điều này sẽ giữ chúng tách biệt vớ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 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 đó với 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 vào một ứng dụng web phong phú. Chúng tôi dự định sẽ sử dụng <style scoped> nhiều với 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 kiểu chỉ giới hạn ở 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ư định kiểu cùng dòng. Vì vậy, kiểu theo phạm vi là lựa chọn hoàn hảo.
Tại sao nên thêm phần tử mẹ?
Cách tự nhiên nhất là thêm phần tử mẹ để các quy tắc <style scoped> có thể đặ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 biểu định kiểu theo phạm vi "phòng vệ" cho các 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 một bộ chọn lớp hoặc mã nhận dạng để 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 kèm theo 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 thú vị là phương pháp này cho phép áp dụng 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ộ chọn mã nhận dạng có thể bị loại bỏ.
Trạng thái
Do việc triển khai biểu định kiểu theo phạm vi vẫn còn mới nên các biểu mẫu này hiện bị ẩn sau cờ thời gian chạy trong Chrome. Để bật các tiện ích này, bạn cần tải phiên bản Chrome có số phiên bản 19 trở lên (Chrome Canary ngay bây giờ), sau đó tìm mục "Enable <style scoped>" trong chrome://flags (ở cuối), nhấp vào "Enable" (Bật) rồi khởi động lại trình duyệt.
Hiện không có lỗi nào đã biết, nhưng @global và 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, hiện tại, @font-face sẽ bị bỏ qua vì có khả năng cao là thông số kỹ thuật sẽ thay đổi.
Chúng tôi mong 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 trải nghiệm của bạn: tốt, xấu và (có thể) bị lỗi.