Yapılandırılabilir Stil Sayfaları

Yeniden kullanılabilir stiller.

Jason Miller

Oluşturulabilir stil sayfaları, Gölge DOM kullanılırken yeniden kullanılabilir stiller oluşturmanın ve dağıtmanın bir yoludur.

Tarayıcı desteği

  • Chrome: 73.
  • Kenar: 79.
  • Firefox: 101.
  • Safari: 16.4

Kaynak

JavaScript kullanarak stil sayfaları oluşturmak her zaman mümkün olmuştur. Ancak eskiden bu işlem bir <style> öğesi oluşturmaktı. document.createElement('style') ve ardından sayfa özelliğine erişmek için temel çizgisini gösteren CSSStyleSheet örneğidir. Bu yöntem, yinelenen CSS kodu ve buna bağlı şişme oluşturabilir. Ayrıca, ekleme işlemi, şişme olup olmadığına bakılmaksızın stilsiz içeriğin kısa bir süre gösterilmesine neden olur. CSSStyleSheet arayüzü, bir CSS koleksiyonunun köküdür olarak adlandırılan temsil arayüzleri CSSOM, Stil sayfalarını değiştirmek için programatik bir yöntem sunarken aynı zamanda sorunları çözebilir.

CSS&#39;nin hazırlanmasını ve uygulanmasını gösteren şema.

Yapılandırılabilir Stil Sayfaları, paylaşılan CSS'leri tanımlamayı ve hazırlamayı mümkün kılar stillerini ayarlayın ve bu stilleri birden çok Gölge Köküne veya Dokümana kolay ve tekrarlamaya gerek yoktur. Paylaşılan bir CSSStyleSheet'te yapılan güncellemeler, ve bunların benimsenmesini stil sayfası Sayfa yüklendikten sonra hızlı ve eşzamanlıdır.

Oluşturulabilir Stil Sayfaları tarafından oluşturulan ilişkilendirme, farklı uygulamalar vardır. Merkezi bir tema sağlamak için kullanılabilir birçok bileşen tarafından kullanılır: Tema, bir CSSStyleSheet veya bileşenlerine yayarak temada yapılan güncellemelerle otomatik olarak oluşturur. CSS özelini dağıtmak için kullanılabilir. Tesis değeri bağlı olmadan belirli DOM alt ağaçlarını cascade. Hatta bir sürü tarayıcının CSS ayrıştırıcısına doğrudan bir arayüz olarak kullanılmalıdır. Böylece, stil sayfalarını DOM'ye yerleştirmeden önceden yükleyebilirsiniz.

Stil sayfası oluşturma

Bunu yapmak için yeni bir API tanıtmak yerine ConstructableStyleSheets spesifikasyonu, CSSStyleSheet() kurucusunu çağırarak zorunlu olarak stil sayfaları oluşturmayı mümkün kılar. Oluşturulan CSSStyleSheet nesnesinde, stillendirilmemiş içeriğin gösterilmesini (FOUC) tetiklemeden stil sayfası kuralları eklemeyi ve güncellemeyi daha güvenli hale getiren iki yeni yöntem bulunur. Hem replace() hem de replaceSync() yöntemleri, stil sayfasını bir CSS dizesiyle değiştirir ve replace() bir Promise döndürür. Her iki durumda da harici stil sayfası başvuruları desteklenir: Tüm @import kuralları yok sayılır ve uyarı üretir.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// replace all styles:
sheet.replace('a { color: blue; }')
  .then(() => {
    console.log('Styles replaced');
  })
  .catch(err => {
    console.error('Failed to replace styles:', err);
  });

// Any @import rules are ignored.
// Both of these still apply the a{} style:
sheet.replaceSync('@import url("styles.css"); a { color: red; }');
sheet.replace('@import url("styles.css"); a { color: red; }');
// Console warning: "@import rules are not allowed here..."

Oluşturulan stil sayfalarını kullanma

Constructable Style Sheets tarafından kullanıma sunulan ikinci yeni özellik, adoptedStyleSheets Gölge'de bulunan özellik Kökler ve Belgeler. Bu, CSSStyleSheet tarafından tanımlanan stilleri belirli bir DOM alt ağacı için açıkça uygulamamıza olanak tanır. Bunu yapmak için, özelliği bir veya daha fazla stil sayfasından oluşan bir dizi olarak geçerli olur.

// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');

// Apply the stylesheet to a document:
document.adoptedStyleSheets.push(sheet);

// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(sheet);

Tüm unsurların birleşimi

Constructable Style Sheets sayesinde, web geliştiricileri artık web için oluşturma ve bunları DOM ağaçlarına uygulama. Yeni bir Style Sheets'i kullanan bir CSS kaynağı dizesinden yükleme için Promise-tabanlı API tarayıcının yerleşik ayrıştırıcısı ve yükleme semantiğini kullanır. Son olarak da Stil Sayfası güncellemelerinin, Stil Sayfası'nın tüm kullanımlarına uygulanmasını tema değişiklikleri ve renk tercihleri gibi şeyleri basitleştirme imkanı tanıyor.

Demoyu görüntüleyin

Geleceğe dönük olarak

Oluşturulabilir Stil Sayfaları'nın API ile gönderilen ilk sürümü hepsinin kullanımını kolaylaştıracak çalışmalar yapılmaktadır. Evet, bir teklifi adoptedStyleSheets FrozenArray ekleme ve yerleştirme için özel yöntemler dizi klonlama ihtiyacını ortadan kaldıracak ve aynı zamanda yinelenen stil sayfası referansı olabilir.

Daha fazla bilgi