Chromium yakın zamanda HTML5'ten yeni bir özellik uyguladı: kapsamlı stil sayfaları, yani
<style scoped>. Bir web yazarı, stillerin uygulanmasını istediğiniz alt ağacın kök öğesinin doğrudan alt öğesi olan bir <style> öğesindeki "kapsamlı" özelliğini, stil kurallarını sayfanın yalnızca bir bölümüne uygulanacak şekilde sınırlandırabilir. Bu, stilleri yalnızca <style> öğesinin üst öğesi olan öğeyi ve tüm alt öğelerini etkileyecek şekilde sınırlar.
Örnek
Aşağıda, standart stil kullanan basit bir doküman verilmiştir:
<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>
Belirtilen stil kuralları, herhangi bir <div> kırmızı ve herhangi bir <span> içindeki metni yeşil renklendirir:
div! aralık!
bir div! aralık!
bir div! aralık!
Ancak <style> öğesinde scoped değerini ayarlarsak:
<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>
ardından stil kurallarını kısıtlar, <style scoped> öğesinin üst öğesi olan kapsayan <div> öğesine ve yalnızca bu <div> içindeki her şeye uygulanacak şekilde kısıtlanır. Buna "kapsamlı" adını veririz ve sonuç şu şekilde görünür:
bir div! aralık!
bir div! aralık!
bir div! aralık!
Bu, işaretlemenin herhangi bir yerinde yapılabilir. Bu nedenle, maceracıysanız stillerin uygulandığı diğer yerleri ayrıntılı olarak kontrol edebilmek için kapsamlı stilleri işaretlemenin diğer kapsamlı kısımlarına istediğiniz kadar iç içe yerleştirebilirsiniz.
Kullanım alanları
Bunun ne işe yarıyor?
Yaygın kullanım alanlarından biri, ortak kullanılan içeriktir: Bir web yazarı olarak, tüm stilleri de dahil olmak üzere bir üçüncü taraftan içerik eklemek istediğinizde, ancak bu stillerin sayfanın diğer, alakasız bölümlerini "kirletme" riskini almak istemediğinizde. Yelp, twitter, ebay vb. diğer sitelerdeki içeriği bir <iframe> kullanarak veya dış içeriği anında düzenlemek zorunda kalmadan tek bir sayfada birleştirebilmenin önemli bir avantajı vardır.
Size, son sayfa görüntüsü halinde birleştirilmiş işaretleme snippet'leri gönderen bir içerik yönetim sistemi (İYS) kullanıyorsanız bu, her snippet'in sayfadaki diğer her şeyden ayrı olarak biçimlendirilmesini sağlayan harika bir özelliktir. Bu, bir wiki için de aynı derecede yararlı olabilir.
Bir sayfada güzel bir demo kodu yazmak istediğinizde, stilleri yalnızca demo içeriğiyle kolayca sınırlandırabilirsiniz. Böylece demoda CSS'yle oynayabilirsiniz ancak sayfadaki diğer hiçbir şey bundan etkilenmez.
Başka bir kullanım alanı, basitçe kapsamadır: Örneğin, web sayfanızda bir yan menü varsa, o menüye özgü stilleri, işaretlemenin söz konusu bölümündeki bir <style scoped> bölümüne yerleştirmek anlamlı olur. Bu stil kurallarının, sayfanın diğer bölümleri oluşturulurken herhangi bir etkisi olmaz. Böylece, bu kurallar ana içerikten güzel bir şekilde ayrılır.
En ilgi çekici kullanım alanlarından biri büyük olasılıkla web bileşeni modelidir. Web bileşenleri; kaydırıcılar, menüler, tarih seçiciler, sekme widget'ları vb. oluşturmak için harika bir yol olacaktır. Tasarımcı, kapsamlı stilleri sağlayarak bir widget oluşturabilir ve bunu diğer kullanıcıların alıp zengin bir web uygulamasında birleştirebileceği bağımsız bir birim olarak kendi stilleriyle paketleyebilir. <style scoped> öğesini Web Bileşenleri ve gölge DOM (gölge DOM'u, chrome://flags'de deneysel "gölge DOM" işareti ayarlanarak etkinleştirilebilir) ile yoğun bir şekilde kullanmayı planlıyoruz. Şu anda stillerin web bileşenleriyle sınırlı olmasını sağlamanın ve satır içi stil oluşturma gibi kötü uygulamalara başvurmadan emin olmanın gerçekten iyi bir yolu yoktur. Bu nedenle, kapsamlı stiller bunun için mükemmel bir seçenektir.
Neden üst öğe eklemelisiniz?
En doğal yöntem, üst öğeyi dahil ederek <style scoped> kurallarının tüm kapsam için ortak bir arka plan rengi ayarlayabilmesidir. Ayrıca, yedek olarak bir kimlik veya sınıf seçicinin önüne kurallar ekleyerek kapsamlı stil sayfalarının henüz <style scoped> eklentisini desteklemeyen tarayıcılar için "savunma amaçlı" olarak yazılmasını sağlar:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
Bu, "kapsamlı" uygulandığında stilleri kullanmanın etkisini gösterir ancak daha karmaşık seçici nedeniyle çalışma zamanının performansını olumsuz etkiler. Bu yaklaşımın iyi yanı, <style scoped> yaygın olarak desteklendiği ve kimlik seçicilerin çıkarılabildiği güne kadar sorunsuz bir yedek yaklaşımına olanak tanımasıdır.
Durum
Kapsamlı stil sayfaları hâlâ yeni olduğundan, bu sayfalar şu anda Chrome'daki çalışma zamanı işaretinin arkasında gizlenmektedir. Bunları etkinleştirmek için Chrome'un sürüm numarası 19 veya daha yeni olan bir sürümünü (şu anda Chrome Canary) edinmeniz, ardından chrome://flags'de (sona doğru) "<style scoped> ürününü etkinleştir" girişini bulmanız, "Etkinleştir"i tıklamanız ve ardından tarayıcıyı yeniden başlatmanız gerekir.
Şu anda bilinen bir hata yok ancak @global ve @keyframes ile @-webkit-region kapsamlı sürümleri hâlâ uygulanma aşamasında. Ayrıca, spesifikasyonun değişme olasılığı yüksek olduğundan @font-face, şimdilik yoksayılmıştır.
Bu özelliğe ilgi duyan herkesi denemeye ve iyi, kötü ve (belki de hatalı) deneyimlerinizi bize bildirmeye teşvik ediyoruz.