Yazar tanımlı CSS adları ve gölge DOM: Spesifikasyonda ve uygulamada

Noam Rosenthal

Yazar tarafından tanımlanan CSS adlarının ve gölge DOM'un birlikte çalışması gerekir. Ancak tarayıcılar, bazen birbirleriyle ve her CSS adıyla biraz farklı şekillerde spesifikasyonla tutarsızdır.

Bu makalede, yazar tarafından tanımlanan CSS adlarının gölge kapsamlarında nasıl davrandığına dair mevcut durum belgelenmiştir. Makalenin, yakın gelecekte birlikte çalışabilirliği iyileştirmek için rehberlik sağlayabileceği umulmaktadır.

Yazar tarafından tanımlanan CSS adları nedir?

Yazar tarafından tanımlanan CSS adları, başlangıçta <keyframe-name>'u özel tanımlayıcı veya dize olarak tanımlayan @keyframes kuralı için kullanıma sunulan nispeten eski bir CSS söz dizimi mekanizmasıdır. Bu kavramın amacı, stil sayfasının bir bölümünde bir şey bildirmek ve başka bir bölümde ona atıfta bulunmaktır.

/* "fade-in" is a CSS name, representing a set of keyframes */
@keyframes fade-in {
  from { opacity: 0 };
  to { opacity: 1 }
}

.card {
  /* "fade-in" is a reference to the above keyframes */
  animation-name: fade-in;
}

CSS adlarını kullanan diğer CSS özellikleri arasında yazı tipleri, özellik bildirimleri, kapsayıcı sorguları ve daha yakın zamanda görüntü geçişleri, ankraj konumlandırması ve kaydırmayla çalışan animasyonlar yer alır. Aşağıdaki kapsamlı olmayan tabloda, Chrome'un durumunu kontrol ettiği adlar bulunmaktadır.

Özellik Ad beyanı Ad referansı
Animasyon kareleri @keyframes animation-name
Yazı Tipleri @font-face { }
@font-palette-values		 font-family
font-palette
Mülk Beyanatları @property
Kayıtlı olmayan tüm özel mülk beyanları		 var()
Geçişleri görüntüleme view-transition-name
view-transition-class		 ::view-transition-* sözde öğeler
Çapa Konumlandırma anchor-name position-anchor
Kaydırma odaklı animasyon view-timeline-name
scroll-timeline-name		 animation-timeline
Liste stilleri @counter-style list-style
Sayaçlar counter-reset
counter-set
counter-increment
Container sorguları container-name @container
Sayfa page @page

Tabloda görebileceğiniz gibi, bir CSS adı genellikle karşılık gelen bir CSS referansına sahiptir. Örneğin animation-name, @keyframes adına referanstır. CSS adları, özellikler ve etiket adları gibi DOM'de tanımlanan adlardan farklıdır. Bu adlar, daha sonra stil sayfaları bağlamında referans verilir.

Adların gölge DOM ile ilişkisi

CSS adları, bir belgenin veya stil sayfasının farklı bölümleri arasında ilişki oluşturmak için tasarlanırken Gölge DOM bunun tam tersini yapmak için tasarlanmıştır. ilişkileri içine alır. Böylece kendi ad alanına sahip olması gereken web bileşenleri genelinde sızıntı olmaz.

CSS adlarını ve gölge DOM'u bir araya getirerek web bileşenleri oluşturma deneyimi, esnek olacak kadar ifade gücü sunmalı ancak kararlı olacak kadar da kısıtlayıcı olmalıdır.

Bu teoride iyi bir yöntemdir. Uygulamada, tarayıcılar CSS adlarının gölge DOM ile etkileşime geçme şekli açısından tutarsızdır. Bu tutarsızlık hem aynı tarayıcıdaki özellikler arasında hem de tarayıcılar arasında ve özellikler ile spesifikasyon arasında görülür.

Adlar ve gölge DOM'nin birlikte çalışma şekli

Sorunu anlamak için CSS'nin bu bölümlerinin teoride birlikte nasıl çalışması gerektiğini anlamak önemlidir.

Genel kural

CSS adlarının gölge ağaçlar arasında nasıl davrandığına dair genel kural, CSS Kapsamlandırma 1. Seviye spesifikasyonunda tanımlanmıştır. Özetlemek gerekirse: CSS adı, tanımlandığı kapsam içinde geneldir. Yani alt öğe gölge ağaçlarından erişilebilir ancak kardeş veya üst öğe gölge ağaçlarından erişilemez. Bunun, web platformundaki adlardan (ör. aynı ağaç kapsamı içinde yer alan öğe kimlikleri) farklı olduğunu unutmayın.

Kuraldaki istisna: @property

Diğer CSS adlarından farklı olarak CSS özellikleri gölge DOM tarafından kapsanmaz. Aksine, farklı gölge ağaçları arasında parametre aktarmanın yaygın bir yoludur. Bu, @property tanımlayıcısını özel hale getirir: Belirli bir adlandırılmış özelliğin nasıl çalıştığını tanımlayan belge-global tür bir bildirim gibi davranması gerekir. Mülklerin gölge ağaçları arasında eşleşmesi gerektiğinden, mülk beyanlarının eşleşmemesi beklenmedik sonuçlara yol açar. Bu nedenle, @property beyanlarının düzleştirilmesi ve doküman sırasına göre çözülmesi belirtilir.

Kuralın ::part ile işleyiş şekli

Gölge parçaları, gölge ağacındaki bir öğeyi üst ağacına gösterir. Bu şekilde, üst ağaç bu öğeye erişebilir ve ayrıca ::part öğesini kullanarak stilini belirleyebilir.

::part, iki ağaç kapsamının aynı öğeye stil uygulamasını sağladığından aşağıdaki basamaklı sıralama belirtilir:

  1. İlk olarak gölge bağlamındaki stili kontrol edin. Bu, parçanın "varsayılan" stilidir.
  2. Ardından, ::part içinde tanımlandığı şekilde harici stili uygulayın. Bu, parçanın "özelleştirilmiş" stilidir.
  3. Ardından, !important ile birlikte tanımlanan tüm dahili stilleri uygulayın. Bu, özel öğenin, belirli bir bölümdeki belirli bir özelliğin ::part tarafından özelleştirilemeyeceğini bildirmesini sağlar.

Bu, ::part gölge kapsamlı bir stil yerine ana makine kapsamlı bir stil olduğundan gölge DOM'sindeki adlara bir ::part'den referans verilemeyeceği anlamına gelir. Örneğin:

// inside the shadow DOM:
@keyframes fade-in {
  from { opacity: 0}
}

// This shouldn't work!
// The host style shouldn't know the name "fade-in"
::part(slider) {
  animation-name: fade-in;  
}

Kuralın satır içi stillerle çalışma şekli

::part'ten farklı olarak, style özelliğine sahip satır içi stiller veya stili komut dosyası kullanarak programatik olarak ayarlayan stiller, öğenin kapsamına göre kapsamlandırılır. Bunun nedeni, bir öğeye stil uygulamak için öğe tutamacına ve dolayısıyla gölge köküne erişmeniz gerekmesidir.

CSS adları ve gölge DOM'nin gerçekte birlikte işleyiş şekli

Yukarıdaki kurallar iyi tanımlanmış ve tutarlı olsa da mevcut uygulamalar her zaman bu durumu yansıtmıyor. Pratikte @property, tarayıcılar arasında tutarlı bir şekilde spesifikasyondan farklı çalışır ve diğer özelliklerin çoğunda açık hatalar vardır (bazı özellikler henüz kullanıma sunulmadığından bunları düzeltmek için zaman vardır).

Bu özelliklerin pratikte nasıl çalıştığını test etmek ve göstermek için şu sayfayı oluşturduk: https://css-names-in-the-shadow.glitch.me/. Bu sayfada, her biri özelliklerden birine odaklanan ve altı senaryoyu test eden birkaç iFrame vardır:

  • Dış ada dış referans: Gölge DOM kullanılmaz, bu yöntem işe yarar.
  • İç ada dış referans: Gölge bağlamda tanımlanan adın sızdığı anlamına geleceği için bu çalışmaz.
  • Dış ada iç referans: Ağ kapsamlı adlar gölge kökler tarafından devralındığından bu yöntem işe yarayacaktır.
  • İç ada iç referans: Referansın adı aynı kapsamda olduğu için bu işlem işe yarayacaktır.
  • ::part dış ada referans: Hem ::part hem de ad aynı kapsamda tanımlandığı için bu işe yarar.
  • İç ada ::part referansı: Dış kapsam, gölge DOM'de tanımlanan adlar hakkında bilgi edinmemelidir. Bu nedenle bu komut çalışmayacaktır.

@keyframes

Spesifikasyonda tanımlandığı gibi, @keyframes kuralı bir üst kapsamda yer aldığı sürece gölge kökünden animasyon karesi adlarına başvuruda bulunabilmeniz gerekir. Uygulamada hiçbir tarayıcı bu davranışı uygulamaz ve animasyon karesi tanımlarına yalnızca tanımlandıkları kapsamda referans verilebilir. 10540 numaralı soruna bakın.

@property

Spesifikasyonda tanımlandığı gibi, @property bildirimi doküman kapsamına düzleştirilir. Ancak günümüzde tüm tarayıcılarda @property'yi yalnızca doküman kapsamında tanımlayabilirsiniz ve gölge köklerdeki @property tanımları yoksayılır.
10541 numaralı sorunu inceleyin.

Tarayıcıya özgü hatalar

Diğer özellikler tarayıcılar arasında tutarlı bir davranış göstermez:

  • @font-face, Safari'de kök kapsama dahil edilecek.
  • Chromium, gölge kökte anchor-name kurallarının devralınmasına izin vermiyor
  • scroll-timeline-name ve view-timeline-name, ::part'de (Chromium'da da) doğru şekilde kapsamlandırılmamıştır.
  • Gölge köklerinde @font-palette-values tanımlanmasına hiçbir tarayıcı izin vermiyor.
  • view-transition-class, gölge kökü içinde tanımlanabilir (geçişin kendisi gölge kökünün dışındadır).
  • Firefox, ::part ürününün iç gölge adlarına (kapsayıcı sorguları, animasyon kareleri) erişmesine izin verir.
  • Firefox ve Safari, gölge kökünde @counter-style yönergesini dikkate almaz.

counter-reset, counter-set, counter-increment öğelerinin dolaylı adlar oldukları ve CSS özelliklerini bildirmelerinin yerleşik ve iyi test edilmiş bir kural grubu olduğundan biraz farklı kurallara sahip olduğunu unutmayın.

Sonuç

Kötü haber ise CSS adları ve gölge DOM ile ilgili mevcut birlikte çalışabilirlik durumunun anlık görüntüsünü incelediğimizde deneyimin tutarsız ve hatalı olması. Burada incelediğimiz özelliklerin hiçbiri tarayıcılar arasında ve spesifikasyona göre tutarlı bir şekilde davranmıyor. Neyse ki deneyimi tutarlı hale getirmek için gereken fark, sınırlı sayıda hata ve spesifikasyon sorunundan oluşuyor. Bu sorunu çözelim. Bu süre zarfında, bu makalede açıklanan tutarsızlıklarla ilgili sorun yaşıyorsanız bu genel bakış size yardımcı olabilir.