support kuralı ile CSS özelliklerinin kontrolü

Bir özelliğin tarayıcılar tarafından desteklenip desteklenmediğini genelde javascript ile kontrol ediyoruz. @support kuralı sayesinde artık CSS ile bu kontrolü yapabiliyoruz.

@media kuralına benzer basit bir kullanımı var. Farklı tarayıcılar için kod yazmaya ihtiyaç duyan bizler için çok süper bir özellik. Modernizr’ın javascript ile yaptığını css ile yapacağız artık.

Basit Yapısı

@supports(ozellik:deger) {
    /* stilleri buraya yaz */
}

Bir örnek yapacak olursak;

@supports (display:flex) {
    section { display: flex }
}

Tarayıcı eğer display:flex’i destekliyorsa bu blok css’e eklenecektir.

@media kuralı gibi and, or ve not operatörleri kullanılabilmektedir.

ve(and) operatörü

Birden fazla koşula bağlı sorgular oluşturabiliyoruz.

@supports (display: table-cell) and (display: list-item){
    ...
}

veya(or) operatörü

Veya operatörü yardımı ile iki koşul öne sürüp birisinin gerçekleşmesi durumu için css tanımları yapılabiliyor. Örneğin farklı tarayıcı önekleri için;

@supports (display: -webkit-flex) or
           (display: -moz-flex) or
           (display: flex) {
     /* stiller buraya */
}

Olumsuzluk(not) operatörü

Desteklemiyorsa sorgusu için not operatörünü kullanabiliyoruz.

@supports not (display: flex) {
    div { float: left; } /* alternatif stil */
}

Tarayıcı Desteği

Yeni nesil tarayıcılar desteğini sunarken İnternet Explorer’ın ve mobil tarafının eksik kalması işin kötü kısmı. Asıl İnternet Explorer için gerekli bir özellik aslında :D

Tarayıcı Desteği