Yapılandırılabilir stil sayfaları

Yeniden kullanılabilir stiller.

Jason Miller

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

Browser Support

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

Source

JavaScript kullanarak stil sayfası oluşturmak her zaman mümkündü. Ancak geçmişte bu işlem, document.createElement('style') kullanarak bir <style> öğesi oluşturup ardından temel CSSStyleSheet örneğine referans almak için sayfa özelliğine erişerek yapılıyordu. Bu yöntem, yinelenen CSS koduna ve buna bağlı şişkinliğe neden olabilir. Ayrıca, ekleme işlemi, şişkinlik olsun veya olmasın, stil uygulanmamış içeriğin yanıp sönmesine neden olur. CSSStyleSheet arayüzü, CSSOM olarak adlandırılan CSS temsil arayüzleri koleksiyonunun köküdür. Stil sayfalarını programatik olarak değiştirme imkanı sunar ve eski yöntemle ilişkili sorunları ortadan kaldırır.

Oluşturulan CSS'den örneklendirmeye ve uygulamaya geçiş akışını gösteren diyagram.

Oluşturulabilir Stil Sayfaları, paylaşılan CSS stillerini tanımlayıp hazırlamayı ve ardından bu stilleri birden fazla gölge köküne veya belgeye kolayca ve kopyalamadan uygulamayı mümkün kılar. Paylaşılan bir CSSStyleSheet'te yapılan güncellemeler, bu stil sayfasının uyarlandığı tüm köklere uygulanır. Stil sayfası yüklendikten sonra stil sayfasını uyarlama işlemi hızlı ve eşzamanlı olarak gerçekleşir.

Oluşturulabilir Stil Sayfaları tarafından oluşturulan ilişkilendirme, birçok farklı uygulama için uygundur. Birçok bileşen tarafından kullanılan merkezi bir tema sağlamak için kullanılabilir: Tema, bileşenlere iletilen bir CSSStyleSheet örneği olabilir ve temada yapılan güncellemeler bileşenlere otomatik olarak yayılır. CSS özel nitelik değerlerini, basamaklı düzene bağlı kalmadan belirli DOM alt ağaçlarına dağıtmak için kullanılabilir. Hatta tarayıcının CSS ayrıştırıcısına doğrudan arayüz olarak kullanılabilir. Bu sayede, stil sayfalarını DOM'a eklemeden önceden yüklemek kolaylaşır.

Stil sayfası oluşturma

Oluşturulabilir Stil Sayfaları spesifikasyonu, bunu gerçekleştirmek için yeni bir API sunmak yerine CSSStyleSheet() oluşturucusunu çağırarak stil sayfalarını zorunlu olarak oluşturmayı mümkün kılar. Elde edilen CSSStyleSheet nesnesinin, Stilsiz İçerik Parlaması'nı (FOUC) tetiklemeden stil sayfası kurallarını eklemeyi ve güncellemeyi daha güvenli hale getiren iki yeni yöntemi vardır. replace() ve 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ı referansları desteklenmez. Tüm @import kuralları yoksayılır ve uyarı oluşturur.

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

Oluşturulabilir Stil Sayfaları tarafından sunulan ikinci yeni özellik, Gölge Kökleri ve Belgeler'de kullanılabilen bir adoptedStyleSheets özelliğidir. Bu sayede, CSSStyleSheet tarafından tanımlanan stilleri belirli bir DOM alt ağacına açıkça uygulayabiliriz. Bunu yapmak için özelliği, ilgili öğeye uygulanacak bir veya daha fazla stil sayfasından oluşan bir diziye ayarlarız.

// 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);

Özet

Oluşturulabilir Stil Sayfaları sayesinde web geliştiricileri artık CSS Stil Sayfaları oluşturmak ve bunları DOM ağaçlarına uygulamak için net bir çözüme sahip. Tarayıcının yerleşik ayrıştırıcısını ve yükleme semantiğini kullanan bir CSS kaynağı dizesinden StyleSheet'leri yüklemek için Promise tabanlı yeni bir API'miz var. Son olarak, stil sayfası güncellemelerini bir StyleSheet'in tüm kullanımlarına uygulayarak tema değişiklikleri ve renk tercihleri gibi işlemleri basitleştiren bir mekanizmamız var.

Demoyu Görüntüle

Geleceğe dönük olarak

Oluşturulabilir Stil Sayfaları'nın ilk sürümü, burada açıklanan API ile birlikte sunuldu ancak kullanımı kolaylaştırmak için çalışmalar devam ediyor. adoptedStyleSheets FrozenArray'i, stil sayfaları eklemek ve kaldırmak için özel yöntemlerle genişletmeye yönelik bir teklif vardır. Bu yöntem, dizi klonlama ihtiyacını ortadan kaldırır ve olası yinelenen stil sayfası referanslarını önler.

Daha fazla bilgi