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
![]() |
![]() |
![]() |
---|---|---|
28 | desteklemiyor | 22 |
Mobil Tarayıcılar
![]() |
![]() |
![]() |
---|---|---|
4.4 | desteklemiyor | 35.0 |
Kaynaklar
- http://www.w3.org/TR/css3-conditional/#at-supports
- https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
- https://dev.opera.com/articles/native-css-feature-detection/
- http://caniuse.com/#search=@support
- http://davidwalsh.name/css-supports
- http://www.sitepoint.com/supports-native-css-feature-detection/
- http://www.inserthtml.com/2012/09/css3-conditional-statements/
- http://docs.webplatform.org/wiki/css/atrules/@supports