@supports (CSS)

@supports

@supports kuralı, belirli bir css özelliğinin tarayıcı tarafından desteklenip desteklenmediğini kontrol etmenizi sağlar. Böylece, özelliği destekleyen tarayıcılarda farklı stil kuralları uygulayabilirsiniz.

Mesela css grid kullanmak istediğinizi varsayalım. Ancak, bazı eski tarayıcılar Grid’i desteklemediğinden, sitenizde Grid yerine Float kullanmanız gerekebilir. Bu durumda, @supports kullanarak, Grid'i destekleyen tarayıcılarda bir stil kuralı tanımlayabilirsiniz ve Grid'i desteklemeyen tarayıcılarda Float'ı kullanabilirsiniz.

Aşağıdaki örnek, @supports kullanarak Grid'i destekleyen tarayıcılarda, Grid'i kullanan bir stil kuralı tanımlayalım:

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }
}

Destekleyemeyenlerde ise float kullan diyelim:

@supports not (display: grid) {
  .container {
    float: left;
    width: 33.33333%;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}

@supports kuralı, display: grid özelliğini destekleyen tarayıcılarda bir stil kuralı tanımlar. Ayrıca, not anahtar kelimesi, display: grid özelliğini desteklemeyen tarayıcılarda başka bir stil kuralı tanımlar.

Diğer bir örnek, modern tarayıcılarda desteklenen display: grid özelliği, tabloları sütunlara ve satırlara ayırmanıza yardımcı olurken, eski tarayıcılarda display: table özelliği kullanmanız gerekir.

@supports (display: grid) {
  table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    border-collapse: collapse;
  }
  
  th, td {
    border: 1px solid black;
    padding: 10px;
  }
}

@supports not (display: grid) {
  table {
    display: table;
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 10px;
  }
}

@supports kuralı kullanarak tabloları destekleyen farklı özellikleri kontrol ediyoruz. Modern tarayıcılarda display: grid özelliğini destekleyenlerde, tabloları sütunlara ve satırlara ayırmak için grid yapısını kullanırken, eski tarayıcılarda display: table özelliğini kullanarak normal tablo yapısını kullanıyoruz. Her iki durumda da, border-collapse özelliği kullanarak kenar boşluklarını ortadan kaldırıyor ve th ve td etiketleri için benzer bir stil uyguluyoruz.

Bu sayede, hazırladığımız web sayfalarının farklı browser testlerinde daha kullanılabilir ve okunabilir olmasını sağlıyoruz ✨