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

Chrome explorer Firefox
28 desteklemiyor 22

Mobil Tarayıcılar

Android Mobil Safari Chrome
4.4 desteklemiyor 35.0

Kaynaklar

Bower'ı kaldırdık

Arayüz geliştiricileri (Front-end) dünyası çok hızlı bir şekilde güncelleniyor. Her gün birçok kütüphane ve araç çıkıyor ve bazıları kend...… Devamını oku

HTML Öznitelikleri ve DOM özellikleri

22 November 2017 tarihinde yayınlandı.

CSS3 ile resimleri oranını koruyarak sığdırma

20 November 2017 tarihinde yayınlandı.