Yapılandırılabilir Stil Sayfaları

Sorunsuz şekilde yeniden kullanılabilir stiller.

Jason Miller

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

JavaScript kullanarak 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 stilsiz 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ı uygulamaya 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ükleyebilirsiniz.

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. Ortaya çıkan CSSStyleSheet nesnesi, Stilsiz İçerik Flash'ı (FOUC) tetiklemeden stil sayfası kurallarının eklenmesini ve güncellenmesini daha güvenli hale getiren iki yeni yönteme sahiptir. 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

Constructable Style Sheets sayesinde, web geliştiricileri artık CSS Style Sheets oluşturmak ve bunları DOM ağaçlarına uygulamak için açık bir çözüme sahiptir. Tarayıcının yerleşik ayrıştırıcısını ve yükleme semantiklerini 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 uygulayarak tema değişiklikleri ve renk tercihleri gibi işlemleri basitleştiren bir mekanizmamız vardır.

Demoyu görüntüleyin

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