Yeni deneysel özellik - kapsamlı stil sayfaları

Alex Danilo

Chromium yakın zamanda HTML5'teki yeni bir özelliği uyguladı: Kapsamlı stil sayfaları olarak da bilinir. <style scoped>. Bir web yazarı, stillerin uygulanmasını istediğiniz alt ağacın kök öğesinin doğrudan alt öğesi olan <style> öğesinde "kapsamlı" özelliğini ayarlayarak stil kurallarını yalnızca bir sayfanın bir bölümüne uygulanacak şekilde sınırlayabilir. Bu, stilleri yalnızca <style> öğesinin üst öğesi ve tüm alt öğelerini etkileyecek şekilde sınırlandırır.

Örnek

Standart stili kullanan basit bir dokümanı burada 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ı, tüm <div> kırmızı ve <span> yeşil içindeki metni renklendirir:

bir div! bir aralık!
bir div! bir span!
bir div! bir 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>

daha sonra, stil kurallarını, <style scoped> öğesinin üst öğesi olan çevreleyen <div> öğesine ve yalnızca bu <div> içindeki her şeye uygulanacak şekilde kısıtlar. Buna "kapsamlı" adını veririz ve sonuç şu şekilde görünür:

bir div! a span!
bir div! bir span!
bir div! a span!

Bu elbette işaretlemenin herhangi bir yerinde yapılabilir. Böylece, stillerin uygulanacağı yerler üzerinde ayrıntılı kontrol sahibi olmak için, kapsamlı stilleri işaretlemenin diğer kapsamlı kısımlarına istediğiniz kadar yerleştirebilirsiniz.

Kullanım alanları

Şimdi bunun faydası nedir?

Ortak kullanılan içerik de yaygın kullanım örneklerinden biridir. Web yazarı olarak, üçüncü tarafa ait içeriği, tüm stilleriyle birlikte dahil etmek istiyor ancak bu stillerin sayfanın alakasız diğer bölümlerini "kirletmesine" yol açma riskiyle karşı karşıya olmak istemediğinizde. Bunun büyük bir avantajı, yelp, twitter, ebay gibi diğer sitelerdeki içeriği bir <iframe> kullanarak veya harici içeriği anında düzenleyerek tek bir sayfada birleştirebilmektir.

Hepsi bir son sayfa görüntüsünde bir araya getirilmiş işaretleme snippet'lerini size gönderen bir içerik yönetim sistemi (İYS) kullanıyorsanız bu, her snippet'in sayfadaki diğer her şeyden ayrı bir şekilde biçimlendirildiğinden emin olmak için harika bir özelliktir. Bu, bir wiki için de aynı şekilde 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 demoda CSS'yi çılgınca kullanabilirsiniz, ancak sayfadaki diğer hiçbir şey etkilenmez.

Başka bir kullanım örneği ise yalnızca kapsüllemedir: Örneğin, web sayfanızın bir yan menüsü varsa, o menüye özgü stilleri işaretlemenin ilgili 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ümlerini oluştururken herhangi bir etkisi olmaz. Böylece, ana içerikten güzel bir şekilde ayrı tutulurlar!

Muhtemelen en cazip kullanım alanlarından biri web bileşeni modelidir. Web bileşenleri kaydırıcılar, menüler, tarih seçiciler, sekme widget'ları ve benzeri öğeler oluşturmak için mükemmel bir yol olacak. Kapsamlı stiller sağlayarak bir tasarımcı widget oluşturabilir ve diğerlerinin alıp zengin bir web uygulamasında birleştirip birleştirebileceği bağımsız bir birim olarak widget'ı kendi stilleriyle paketleyebilir. <style scoped> ürününü yoğun bir şekilde Web Bileşenleri ve gölge DOM (chrome://flags'de deneysel "gölge DOM" bayrağı ayarlayarak etkinleştirebilirsiniz) ile kullanmayı planlıyoruz. Ş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 yoktur. Dolayısıyla, kapsamlı stiller bunun için mükemmel uyum sağlar.

Neden üst öğe eklenmelidir?

En doğal yol, üst öğeyi dahil etmektir. Böylece <style scoped> kuralları, örneğin tüm kapsam için ortak bir arka plan rengi ayarlayabilir. Ayrıca, kuralların önüne yedek olarak bir kimlik veya sınıf seçici ekleyerek henüz <style scoped>'yi desteklemeyen tarayıcılar için kapsamlı stil sayfalarının "defansif" şekilde yazılmasına olanak tanır:

<div id="menu">
    <style scoped>
    #menu .main { … }
    #menu .sub { … }
    …

Bu durum, "kapsam" uygulandığında stilleri kullanma etkisini taklit eder ancak daha karmaşık seçici nedeniyle bir takım çalışma zamanı performans cezası verir. Bu yaklaşımın iyi tarafı, <style scoped> hizmetinin yaygın olarak desteklendiği ve kimlik seçicilerin kaldırılabileceği güne kadar zarif bir yedek yaklaşımına olanak tanımasıdır.

Durum

Kapsamlı stil sayfaları henüz yeni uygulandığı için bunlar Chrome'daki bir çalışma zamanı işaretinin arkasında gizlidir. Bunları etkinleştirmek için Chrome'un sürüm numarası 19 veya üzeri olan (şu anda Chrome Canary) bir sürümünü edinmeniz, ardından chrome://flags'de (sonda) "Etkinleştir <style scoped>" girişini bulmanız, "Etkinleştir"i tıklamanız ve daha sonra, tarayıcıyı yeniden başlatmanız gerekir.

Şu anda bilinen bir hata yoktur ancak @keyframes ve @-webkit-region'nin @global ve kapsamlı sürümleri hâlâ uygulanma aşamasındadır. Ayrıca, spesifikasyonun değişme olasılığı yüksek olduğundan şu an için @font-face yoksayılıyor.

Özelliğe ilgi duyan herkesi bu özelliği denemeye teşvik etmek istiyoruz ve olumlu, kötü ve (belki) araçla ilgili deneyimlerinizi bize bildirmenizi rica ediyoruz.