Kapsayıcı Stili Sorgularının İlk Günleri

Konteyner sorguları konusunda hala ilk günlerdeyiz. Geniş tarayıcı desteği için henüz çok erken, ancak Chromium bunu zaten destekliyor, Safari sürüm 16'da desteklemeye başladıve Firefox muhtemelen çok geride değil.

Kapsayıcı sorgular etrafında dönen ilk günlerin çoğu konuşmaları genellikle sözdizimini medya sorgularıyla karşılaştırır.

/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}

/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}

Bunların her ikisi de sorgu yapıyor min-width: 600. Aradaki fark, medya sorgusunun bu stil değişikliklerini tetiklemek için görünüm genişliğine bakması, konteyner sorgusunun ise görünüm alanının hesaplanan genişliğine bakmasıdır. .posts eleman. Tatlı!

Ama dinledikten sonra CSS Podcast Bölüm 59, Una ve Adam konteyner sorgularının geleceğine değindiler: stil sorguları! CSS Sınırlama Modülü Düzey 3 spesifikasyonunun mevcut çalışma taslağı kapsayıcı stili sorgularını tanımlar:

A kapsayıcı stili sorgusu sorgulanmasını sağlar hesaplanan değerler arasında sorgu kapsayıcısı. Bu, bireysel sayıların boolean birleşimidir. stil özellikleri () her biri sorgu kapsayıcısının tek ve belirli bir özelliğini sorgular.

Ancak henüz sözdizimiyle ilgili örnek yok; yalnızca kısa bir açıklama:

Bir söz dizimi  bir için olanla aynıdır beyanname, ve sorgu kapsayıcısında verilen özelliğin hesaplanan değeri verilen değerle eşleşiyorsa sorgu doğru olur (ki bu aynı zamanda sorgu kapsayıcısına göre hesaplanır), özellik veya değeri geçersiz veya desteklenmiyorsa bilinmiyor ve aksi takdirde false olur . Boolean sözdizimi ve mantığın birleştirilmesi stil özellikleri bir içine stil sorgusu ile aynı CSS özellik sorguları. (Görmek @destekler.)

Yani evet, zaman verildiğinde şunun gibi bir şeyin üstesinden gelmeyi beklemeliyiz:

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

Bu oldukça aptalca bir örnek. Dikkat edilmesi gereken bir husus, container-type artık konteynerin temeline dayalı değil inline-size ama tarafından style. Bunu şu şekilde açıklayabiliriz:

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

…fakat tüm kapsayıcı sorguları style varsayılan olarak sorgular. Kuyu. en azından bugünkü haliyle. Miriam Suzanne'ın hoş bir hali var ortaya çıkabilecek olası sorunların ana hatları Bununla.

Bir kapsayıcının stillerini sorgulamak nerede işe yarayabilir? Henüz bilmiyorum! Ama aklım birkaç yere gidiyor:

• Özel özellik değerleri: Durum göstergeleri gibi kullanılan özel özellikleri gördük. Ana'nın bir süre önce KURU anahtarlama yöntemini ele aldığı. Değer değişir ve stiller de değişir.
• Alternatif karanlık mod yaklaşımı: Her şeyi özel özellik değerlerini yeniden atayan bir gövde sınıfı değişikliğine dayandırmak yerine, örneğin gövde arka planının rengi değişirse belki renk paletinin tamamını değiştirebiliriz.
• Daha karmaşık sorgu koşulları: Örneğin, stilleri uygulamak istediğimizde size ve style Bir konteynerin koşulları karşılanmıştır.

Una ayrıca CSS Podcast'inde kapsayıcı stili sorgularının, zaten italikleştirilmiş bir metinde italikleştirilmiş bir metne sahip olmamız gibi bazı garip stillendirme durumlarını önlemeye yardımcı olabileceğinden bahsetti. blockquote:

blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}