Yapılandırılabilir Stil Sayfaları

Sorunsuz şekilde yeniden kullanılabilir stiller.

Jason Miller

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

JavaScript kullanılarak stil sayfaları oluşturmak her zaman mümkün olmuştur. Ancak, geçmişte bu işlem document.createElement('style') kullanarak bir <style> öğesi oluşturmak ve ardından temel CSSStyleSheet örneğine referans almak için sayfa mülküne erişmek şeklindeydi. 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 stil uygulanmamış içeriğin kısa bir süre gösterilmesine neden olur. CSSStyleSheet arayüzü, CSSOM olarak adlandırılan bir CSS temsil arayüzü koleksiyonunun köküdür. Bu arayüz, stil sayfalarını değiştirmenin programatik bir yolunu sunmanın yanı sıra eski yöntemle ilişkili sorunları ortadan kaldırır.

Oluşturulabilir stil sayfaları, paylaşılan CSS stillerini tanımlayıp hazırlamayı ve ardından bu stilleri birden fazla gölge köke veya dokümana kolayca ve kopya oluşturmadan uygulamayı mümkün kılar. Paylaşılan bir CSSStyleSheet'deki güncellemeler, benimsendiği tüm köklere uygulanır ve stil sayfasını benimseme işlemi, sayfa yüklendikten sonra hızlı ve senkronize bir şekilde 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. Temadaki güncellemeler, bileşenlere otomatik olarak dağıtılır. CSS Özel Mülk değerlerini dönüşüm kullanmadan belirli DOM alt ağaçlarına dağıtmak için kullanılabilir. Hatta tarayıcı CSS ayrıştırıcısına doğrudan bir arayüz olarak kullanılabilir. Bu sayede stil sayfalarını DOM'a eklemeden önceden yüklemek kolaylaşır.

Stil sayfası oluşturma

Bunu yapmak için yeni bir API sunmak 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ı referansları desteklenmez. @import kuralları yoksayılır ve uyarı gösterilir.

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öklerinde ve dokümanlarda kullanılabilen adoptedStyleSheets mülküdür. 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 mülkü, ilgili öğeye uygulanacak bir veya daha fazla stil sayfası dizisi olarak 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);

Tüm unsurların birleşimi

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 açık bir çözüme sahip. Tarayıcının yerleşik ayrıştırıcısını ve yükleme anlamlarını kullanan bir CSS kaynak dizesinden stil sayfalarını yüklemek için yeni bir Promise tabanlı API'miz var. Son olarak, stil sayfası güncellemelerini bir stil sayfasının tüm kullanımlarına uygulamak için bir mekanizmamız var. Bu mekanizma, tema değişiklikleri ve renk tercihleri gibi işlemleri basitleştiriyor.

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 gönderildi ancak kullanım kolaylığı sağlamak için çalışmalar devam ediyor. adoptedStyleSheets FrozenArray sınıfını, stil sayfaları eklemek ve kaldırmak için özel yöntemlerle genişletmek üzere bir öneri var. Bu öneri, dizi klonlama ihtiyacını ortadan kaldırır ve yinelenen stil sayfası referanslarının oluşmasını önler.

Daha fazla bilgi

• Chrome Platform Durumu
• Örnek
• API
• Açıklayıcı
• Uygulama Niyeti
• Gönderim Amacı
• Discourse