Yapılandırılabilir Stil Sayfaları

Sorunsuz 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 kullanarak stil sayfaları oluşturmak her zaman mümkündü. Ancak, geçmişte bu işlem için <style> öğesi document.createElement('style') kullanılarak oluşturulur ve ardından temel CSSStyleSheet örneğine referans almak için bu öğenin sheet özelliği erişilir. Bu yöntem, CSS kodunun yinelenmesine ve şişmesine neden olabilir. Ayrıca, ekleme işlemi, şişme olsun veya olmasın, biçimlendirilmemiş içeriğin bir anlık olarak görünmesine yol açar. CSSStyleSheet arayüzü, CSSOM olarak adlandırılan bir CSS gösterim arayüzleri koleksiyonunun köküdür. Bu arayüz, stil sayfalarını programatik olarak değiştirmenin yanı sıra eski yöntemle ilişkili sorunları da 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öküne veya belgeye kolayca ve tekrarlama olmadan uygulamayı mümkün kılar. Paylaşılan bir CSSStyleSheet'te yapılan güncellemeler, benimsendiği tüm köklere uygulanır. Stil sayfası benimseme, sayfa yüklendikten sonra hızlı ve senkronize bir işlemdir.

Oluşturulabilir stil sayfaları tarafından oluşturulan ilişkilendirme, çeşitli uygulamalarda kullanılabilir. 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. Temada yapılan güncellemeler, bileşenlere otomatik olarak yayılır. CSS özel özellik değerlerini basamaklandırmaya güvenmeden 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 bile 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, Constructable StyleSheets spesifikasyonu, CSSStyleSheet() oluşturucusu çağrılarak stil sayfalarının zorunlu olarak oluşturulmasını mümkün kılar. Elde edilen CSSStyleSheet nesnesinde, Stilsiz İçerik Flaşını (FOUC) tetiklemeden stil sayfası kurallarını eklemeyi ve güncellemeyi daha güvenli hale getiren iki yeni yöntem bulunur. replace() ve replaceSync() yöntemleri, stil sayfasını 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ı 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

Constructable StyleSheets tarafından sunulan ikinci yeni özellik, Shadow Roots ve Documents'ta kullanılabilen bir adoptedStyleSheets özelliğidir. Bu, CSSStyleSheet tarafından tanımlanan stilleri belirli bir DOM alt ağacına açıkça uygulamamıza olanak tanır. Bunu yapmak için özelliği, söz konusu öğeye uygulanacak bir veya daha fazla stil sayfası dizisi olarak ayarlıyoruz.

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

Constructable StyleSheets ile web geliştiriciler 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 semantiğini kullanan bir CSS kaynağı dizesinden stil sayfalarını yüklemek için yeni bir Promise tabanlı API'miz var. Son olarak, bir StyleSheet'in tüm kullanımlarına stil sayfası güncellemeleri uygulamak için bir mekanizmamız var. Bu mekanizma, tema değişiklikleri ve renk tercihleri gibi işlemleri basitleştirir.

Demoyu görüntüleyin

Geleceğe dönük olarak

Constructable Stylesheets'in ilk sürümü burada açıklanan API ile birlikte gönderildi ancak kullanımı kolaylaştırmak için çalışmalar devam ediyor. Dizi klonlamaya gerek kalmaması ve olası yinelenen stil sayfası referanslarının önlenmesi için stil sayfalarını eklemeye ve kaldırmaya yönelik özel yöntemlerle adoptedStyleSheets FrozenArray'in genişletilmesine yönelik bir öneri var.

Daha fazla bilgi

• Chrome Platform Status
• Örnek
• API
• Açıklayıcı
• Uygulama Amacı
• Kargoya verme amacı
• Discourse