CSS Geri Dönüşlerini Hızla Test Etme | CSS-Püf Noktaları

0
41

Aptal hile uyarısı!

Tüm tarayıcılar tüm özellikleri desteklemez. Diyelim ki CSS Izgarasını desteklemeyen tarayıcılar için bir geri dönüş yazmak istiyorsunuz. Bu günlerde pek yaygın değil, ama sadece bir noktayı göstermek için.

Destekleyici CSS’yi @supports bloklarına yazabilirsiniz:

@supports (ekran: ızgara) { .blocks { ekran: ızgara; grid-template-columns: tekrar(otomatik doldurma, minmax(min(100px, %100), 1fr)); boşluk: 1rem; } }

Ardından, geri dönüşü test etmek için, @destekleri (ekran: ızgara) hızla saçma bir şeye değiştirirsiniz, örneğin bir “x” eklemek gibi @destekler (ekran: gridx). Bu hızlı bir geçiş:

Yukarıdaki örneğin çok iyi geri dönüşleri yok, değil mi?! Belki flexbox’a benzer bir şey yazmaya çalışırdım, hey, belki hala flexbox’ı destekleyen ve grid’i desteklemeyen bazı küçük tarayıcılar vardır. Daha büyük olasılıkla, bir sütun olarak her şeyin oldukça iyi görünmesini sağlayan bir geri dönüş yazardım.

Tarayıcının @supports sorgularını desteklediğinden oldukça eminsem (oh, ironi), şöyle yazabilirim:

@supports (ekran: ızgara) { /* ızgara öğeleri */ } @supports not (ekran: ızgara) { /* en azından onları biraz boşluk bırakın */ .block { kenar boşluğu: 10px } }

Bu, daha güvenli hale gelecek bir varsayım ve dürüst olmak gerekirse, muhtemelen zaten oradayız (IE desteğini bıraktıysanız).

Bu, @When sözdizimini daha da fazla istememe neden oluyor, çünkü o zaman şunu yazabiliriz:

@ne zaman destekler(ekran: ızgara) { } @else { }

…ki bu çok taze ve çok temiz hissettiriyor.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz