Chromium kısa süre önce HTML5'teki yeni bir özelliği kullanıma sundu: kapsamlı stil sayfaları.
<style scoped>. Web yazarı, stil kurallarının yalnızca bir sayfanın bir bölümüne uygulanacak şekilde sınırlandırılması için stillerinin uygulanmasını istediği alt ağacın kök öğesinin doğrudan alt öğesi olan bir <style> öğesinde "kapsamlı" özelliğini ayarlayabilir. Bu, stilleri yalnızca <style> öğesinin üst öğesi olan öğeyi ve tüm alt öğelerini etkileyecek şekilde sınırlandırır.
Örnek
Standart stilin kullanıldığı basit bir dokümanı aşağıda görebilirsiniz:
<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ı, <div> içindeki metni kırmızı, <span> içindeki metni ise yeşil renkte gösterir:
a div! a span!
a div! a span!
a div! a span!
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>
<style scoped> öğesinin üst öğesi olan kapsayıcı <div>'ye ve yalnızca bu <div>'nin içindeki öğelere uygulanacak şekilde stil kurallarını kısıtlar. Buna "kapsamlı" diyoruz ve sonuç şöyle görünür:
bir div! bir span!
bir div! bir span!
bir div! bir span!
Bu işlem, işaretlemenin herhangi bir yerinde yapılabilir. Bu nedenle, maceracıysanız stilin uygulandığı yerler üzerinde ayrıntılı kontrol sahibi olmak için kapsamlı stilleri, işaretlemenin diğer kapsamlı bölümlerinin içine istediğiniz kadar yerleştirebilirsiniz.
Kullanım alanları
Bu ne işe yarar?
Sık kullanılan bir kullanım alanı, sendikasyonlu içeriktir: Web yazarı olarak, tüm stilleri dahil olmak üzere üçüncü taraf içeriğini dahil etmek istediğiniz ancak bu stillerin sayfanın alakasız diğer bölümlerini "kirletme" riskini almak istemediğiniz durumlar. Buradaki en büyük avantaj, yelp, twitter, ebay gibi diğer sitelerdeki içerikleri <iframe> kullanarak ayırmak veya harici içeriği anında düzenlemek zorunda kalmadan tek bir sayfada birleştirebilmenizdir.
Size nihai sayfa görüntüsünde bir araya getirilen işaretleme snippet'leri gönderen bir içerik yönetim sistemi (İYS) kullanıyorsanız her snippet'in sayfadaki diğer öğelerden ayrı olarak biçimlendirilmesini sağlamak için bu özellikten yararlanabilirsiniz. Bu, wiki için de yararlı olabilir.
Bir sayfada güzel bir demo kodu yazmak istediğinizde stilleri yalnızca demo içeriğiyle sınırlamak kolaydır. Bu sayede, demodaki CSS'yi dilediğiniz gibi değiştirebilirsiniz. Ancak sayfadaki diğer hiçbir şey bu değişiklikten etkilenmez.
Başka bir kullanım alanı da basitçe kapsüllemedir: Örneğin, web sayfanızda bir yan menü varsa bu menüye özgü stilleri, işaretlemenin ilgili bölümündeki bir <style scoped> bölümüne yerleştirmek mantıklıdır. Bu stil kuralları, sayfanın diğer bölümleri oluşturulurken hiçbir etki etmez. Böylece, ana içerikten güzelce ayrılmış olurlar.
Muhtemelen en ilgi çekici kullanım alanlarından biri web bileşeni modelidir. Web bileşenleri; kaydırma çubukları, menüler, tarih seçicileri, sekme widget'ları gibi öğeleri oluşturmanın mükemmel bir yolu olacak. Tasarımcılar, kapsamlı stiller 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 stilleriyle birlikte paketleyebilir. <style scoped>'ü Web Bileşenleri ve gölge DOM ile yoğun şekilde kullanmayı planlıyoruz (chrome://flags adresinde deneysel "gölge DOM" işaretini ayarlayarak etkinleştirilebilir). Şu anda satır içi stil gibi kötü uygulamalara başvurmadan stillerin Web bileşenleriyle sınırlı olmasını sağlamanın iyi bir yolu yok. Bu nedenle, kapsamlı stiller bunun için mükemmel bir seçimdir.
Üst öğe neden dahil edilir?
En doğal yöntem, <style scoped> kurallarının örneğin tüm kapsam için ortak bir arka plan rengi belirleyebilmesi amacıyla üst öğeyi dahil etmektir. Ayrıca, kuralların yedek olarak bir kimlik veya sınıf seçiciyle ön eklenmesi sayesinde, kapsamlı stil sayfalarının henüz <style scoped>'ü desteklemeyen tarayıcılar için "koruyucu" bir şekilde yazılmasına olanak tanır:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
Bu, "kapsamlı" uygulandığında stil kullanmanın etkisini taklit eder ancak daha karmaşık seçici nedeniyle çalışma zamanında performans cezası alır. Bu yaklaşımın güzel yanı, <style scoped>'ün yaygın olarak destekleneceği ve kimlik seçicilerinin kolayca bırakılabileceği güne kadar sorunsuz bir yedek yaklaşım sunmasıdır.
Durum
Kapsamlı stil sayfalarının uygulanmasının henüz yeni olması nedeniyle, bu sayfalar şu anda Chrome'da çalışma zamanındaki bir işaretin arkasına gizlenmiştir. Bu özellikleri etkinleştirmek için Chrome'un 19 veya daha yeni bir sürümünü (şu anda Chrome Canary) edinmeniz, ardından chrome://flags adresinde "<style scoped>'ü etkinleştir" girişini (sürümün sonuna doğru) bulup "Etkinleştir"i tıklamanız ve tarayıcıyı yeniden başlatmanız gerekir.
Şu anda bilinen bir hata yoktur ancak @global ve @keyframes ile @-webkit-region'nin kapsamlı sürümleri hâlâ uygulama sürecindedir. Ayrıca, spesifikasyonun değişme olasılığı yüksek olduğundan @font-face şu anda yoksayılır.
Bu özellikle ilgilenen herkesi denemeye ve iyi, kötü ve (belki) hatalı olan deneyimlerinizi bize bildirmeye teşvik etmek isteriz.