CSS'yi At-Rule Desteğine Göre Koşullu Olarak Uygulama

Belirli CSS kurallarını veya bildirimlerini yalnızca belirli bir at kuralı tarayıcı tarafından destekleniyorsa koşullu olarak uygulamak için @supports at-rule(@<at-rule name>) {…} kullanın. Bu, kuralların tamamını içerebilir veya belirli bildirimleri koşullu olarak uygulamak için CSS iç içe yerleştirme ile birlikte kullanılabilir.

.foo {
  background: var(--accent-color);

  @supports at-rule(@property) {
    background-image: var(--rainbow-gradient);
    animation: sliding-rainbow 1s linear infinite;
  }
}

Yalnızca algılanan @ kuralını koşullu olarak uygulamak için @supports at-rule() kullanmayın.

/* BAD: CSS already ignores rules the browser doesn't understand, so this is unnecessary */
@supports at-rule(@starting-style) {
  @starting-style {
    /* ... */
  }
}

@supports at-rule() uygun olmadığında @-kuralları için destek algılama

Tarayıcı desteği nedeniyle veya daha ayrıntılı algılama gerektiği için at-rule() kullanılamadığında aşağıdaki kılavuzdan yararlanabilirsiniz.

Önce özellikleri, değerleri veya seçicileri deneyin

@supports; özellikleri, değerleri ve seçicileri (@supports selector(...) aracılığıyla) zaten algılayabilir. Çoğu durumda, kuralın kendisini kontrol etmenize gerek kalmadan bir özelliğin desteklenip desteklenmediğini tespit etmek için bunları kullanabilirsiniz.

Örneğin, özel işlevlerin desteklenip desteklenmediğini tespit etmek için @supports at-rule(@function) yerine @supports (color: --foo()) kullanabilirsiniz.

Diğer durumlarda, yalnızca belirli bir kural desteklendiğinde kullanılabilen ve desteği algılamak için kullanılabilen sözde sınıflar veya sözde öğeler olabilir.

Kapsayıcı sorgu türlerini algılama

at-rule(), kural tanımlayıcıların yalnızca ada göre algılanmasına izin verir. Diğer söz dizimlerinin veya tanımlayıcıların algılanmasına izin VERMEZ. Örneğin, şu yöntem işe yaramaz:

@supports at-rule(@container style(--a: 1)) {
  /* ... */
}

Birçok kapsayıcı sorgusu türü için uygun bir değerle container-type kullanabilirsiniz. Örneğin, kaydırma durumu sorguları için @supports (container-type: scroll-state) veya @supports (container-type: size)container-type: anchoredforanchored()` sorguları.

Ancak stil sorguları için container-type yoktur. ÖNEMLİ: Stil sorguları için desteği algılamak üzere @supports (container-type: style) kullanmayı DENEMEYİN. Bu yöntem işe yaramaz.

Bunun yerine, her zaman doğru olan bir stil sorgusu deneyebilirsiniz:

@container style(--a: 1) or (not (style(--a: 1))) {
  /* Rules here will only be applied if style queries are supported */
}

Bu, kullandığınız özellik adı veya değerinden bağımsız olarak, her ikisinde de aynı olduğu sürece stil sorgularını destekleyen tüm tarayıcılarda eşleşir.

Kayıtlı özel nitelikler (@property)

Bazı durumlarda, uygulanacak koşullu CSS tek bir özelliğe indirgenebiliyorsa bu amaçla kaydedilmiş özel bir özel özellik kullanabilirsiniz:

/* Use a custom property to conditionally include the dash animation */
@property --progress-dash-animation {
  syntax: "*";
  inherits: false;
  initial-value: , progress-dash 3s ease-in-out infinite;
}

.spinner {
  /* The dash animation is only included if @property is supported */
  animation:
    progress-spin var(--_used-spinner-duration) linear infinite
    var(--progress-dash-animation, );
}

Daha genel amaçlı bir çözüm için devralmayan bir özellik kaydedebilir ve bunu kök öğede (boşluk) olarak ayarlayabilirsiniz:

{# Testcase: https://codepen.io/leaverou/pen/KwWzpVr #}

@property --supports-atproperty {
    syntax: "*";
    inherits: false;
}

:root {
    --supports-atproperty: ;
}

body {
  /* The background is only applied if @property is supported */
    background: var(--supports-atproperty, green);
}

Notlar:

• Bu yöntemlerin her ikisi de yalnızca boşluk karakterinin kabul edilebilir bir alternatif olduğu durumlarda işe yarar. Diğer durumlarda, aşağıda açıklandığı gibi JS kullanmanız gerekir.
• Genel amaçlı çözüm, devralmama özelliğine bağlı olduğundan kök öğedeki bildirimlerde çalışmaz.

Son çare olarak JavaScript kullanma

Tüm @ kuralları için JavaScript'te belirli arayüzlerin olup olmadığını kontrol edin. Örneğin, globalThis.CSSFunctionRule tanımlanmışsa @function desteklenir.

Daha ayrıntılı test yapmanız gerekiyorsa (ör. belirli girişler, iç içe yerleştirilmiş kurallar, tanımlayıcılar için) bir test oluşturup nasıl ayrıştırıldığını kontrol edebilirsiniz:

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @page {
    @top-left {
      content: "test";
    }
  }
`);
const SUPPORTS_PAGE_MARGINS = Boolean(sheet.cssRules[0]?.cssRules?.[0]);

ÖNEMLİ:

• CSS özelliklerinin desteklenip desteklenmediğini tespit etmek için JS kullanırken stilleri doğrudan JS'den uygulamayın. Bunun yerine, kök öğeye bir sınıf uygulayın ve CSS'de bu sınıftan dallandırın.
• Giriş tanınmasa bile kapsayıcı sorgularının ayrıştırıldığını ve CSSOM yapısından belirli kapsayıcı sorgusu türleri için desteği algılamanın bir yolu olmadığını unutmayın.
• @property desteğini tespit etmek için CSS.registerProperty kullanmayın. desteği biraz daha geniştir.

Yedek stratejiler

Destek hedefiniz dahilinde değilse @supports (at-rule()) özelliğinin kendisinden daha dar bir desteğe sahip kural dizilerini tespit etmek için YALNIZCA @supports (at-rule()) özelliğini kullanın.

CSS'yi bu özellikten önce sunulan @ kuralları desteğine göre koşullu olarak uygulamak için yukarıdaki bölümdeki yönergeleri kullanın.

@supports at-rule() özelliğinin kendisi için desteği algılamak üzere @supports at-rule() özelliğini destekleyen tüm tarayıcılarda (ör. @supports at-rule(@media) { ... }) bulunması garanti edilen bir kural kullanabilirsiniz.