Seçici ve @-kuralı kombinasyonları

Sorun

Farklı türlerdeki filtreleme ölçütlerini (ör.seçiciler + medya sorguları, medya sorguları + kapsayıcı sorguları vb.) birleştirmemiz gerekir.

Örneğin, renk şemasının nasıl ayarlandığından bağımsız olarak açık/koyu modda belirli stilleri uygulamak için (prefers-color-scheme: dark), renk şeması geçersiz kılmalarını hedefleyen bir seçiciyle (ör. :root:has(> head > meta[name="color-scheme"][content="dark"]) veya :root.dark) birleştirilebilir.

Basit yaklaşım, kodun kopyalanmasına neden olur:

/* Light mode styles */
.card.featured {
  font-weight: 400;
}

#logo-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  /* Dark mode styles */
  :root:not(.light) {
    .card.featured {
      font-weight: 300;
    }

    #logo-dark {
      display: inline;
    }

    #logo {
      display: none;
    }
  }
}

/* Dark mode styles, again */
:root.dark {
  .card.featured {
    font-weight: 300;
  }

  #logo-dark {
    display: inline;
  }

  #logo {
    display: none;
  }
}

Bunun yerine ne yapmalısınız?

Birleştirilmiş filtrenin sonucunu özel bir özellikte depolayın, ardından bu özelliğe göre kurallar belirlemek için kapsayıcı stili sorgularını kullanın.

ÖNEMLİ: Kapsayıcı sorgularının işleyiş şekli nedeniyle bu teknik, yalnızca eşleşmesi gereken kuralların bir üst öğesinde özel niteliği ayarlayabiliyorsak çalışır.

1. Seçim mantığını uygulanan kurallardan ayırma

:root {
  --color-scheme: light;

  @media (prefers-color-scheme: dark) {
    --color-scheme: dark;
  }

  &:has(> head > meta[name="color-scheme"][content="dark"]) {
    --color-scheme: dark;
  }

  &:has(> head > meta[name="color-scheme"][content="light"]) {
    --color-scheme: light;
  }
}

2. Uygulanan kurallar için özel nitelikteki anahtar

@container not style(--color-scheme: dark) {
  .card.featured {
    font-weight: 400;
  }

  #logo-dark {
    display: none;
  }
}

@container style(--color-scheme: dark) {
  .card.featured {
    font-weight: 300;
  }

  #logo {
    display: none;
  }
}

3. İSTEĞE BAĞLI: Görünürlüğü açıp kapatmak için yardımcı sınıflar

Çok yaygın bir kullanım alanı, görünürlüğü ölçütlerin eşleşip eşleşmediğine göre açıp kapatmaktır. Yardımcı sınıflar, rastgele bileşen stillerine (bu nedenle !important) göre öncelikli olmalıdır ve gösterilen display bilinmediğinden geçersiz kılma işlemlerini kullanamazlar. Bu nedenle, bunları not style(...) ile sınırlayın:

@container not style(--color-scheme: dark) {
  .if-dark {
    display: none !important;
  }
}

@container not style(--color-scheme: light) {
  .if-light {
    display: none !important;
  }
}

Yedekler

Dallanmanın ne kadar kritik olduğuna ve kabul edilebilir bir yedeğin ne olduğuna bağlı olarak iki tür yedek vardır.

1. Stil sorguları desteklenmese bile tüm durumların doğru şekilde çalışması gereken kritik dallanma için stil sorgularını kullanamazsınız. Bunun yerine, yukarıdaki basit yaklaşımı kullanarak her eyalet için kuralları kopyalayın. Yardımcı sınıflar da bu şekilde tanımlandıkları sürece kullanılabilir.
2. Varsayılan durumun kabul edilebilir olduğu kritik olmayan dallanma için temel stilleri herhangi bir @container kuralının dışında tanımlayabilir ve stil sorgularını yalnızca geçersiz kılma olarak kullanabilirsiniz. Bu, yaklaşımın ruhunun çoğunu korur. Ana dezavantajı, geçersiz kılmaların getirdiği değerlerin birleştirilmesidir.

#logo-dark {
  display: none;
}

@container style(--color-scheme: dark) {
  #logo-dark {
    display: inline; /* override */
  }

  #logo {
    display: none;
  }
}