: dir () - CSS Hileleri

Anonim

:dir()CSS sözde sınıfı HTML işaretlemesi belirlenen elemanları, dil yönüne göre seçilmesine olanak tanır. Bir belgede aslında soldan sağa ve sağdan sola olmak üzere yalnızca iki yön dili vardır. Bunu, farklı dil yönlülüğü ile ayırt edilen öğeleri biçimlendirmenin bir yolu olarak düşünün.

 
.item:dir(rtl) ( background: red; color: #fff; )

Sözde sınıf yalnızca tek bir değeri kabul eder ve birden fazla değer girilirse boş döndürür.

CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Pen: dir sözde seçicisine bakın.

:dir(rtl) vs. (dir=rtl)

Bir eşleşme sorgusu seçici kullanarak bir öğeyi dil yönüne göre de seçebiliriz:

.item(dir=rtl) ( background: red; color: #fff; )

Bu gerçekten işe yarıyor, ancak :dir(rtl)bir öğeyi yalnızca HTML biçimlendirmesinde kesin olarak tanımlanmış olana göre seçmesi bakımından farklıdır . Kapak tarafında, :dir(rtl)kullanıcı aracısının dil tercihlerini bulacak ve HTML'de açıkça belirtilmeden öğeyi seçecektir.

Bu büyük bir mesele çünkü dilin yönünü açıkça belirtmeyen öğeler dir, bir içeren en yakın atasının özniteliğini miras alacak . Bu, kullanmanın (dir=rtl)amaçladığınızdan daha fazla öğe seçtiği bir senaryoya yol açabilir .

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom Firefox IE Kenar Safari
Hayır 17 * Hayır Hayır Hayır

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
Hayır 85 Hayır Hayır

Daha fazla bilgi

  • Seçiciler Seviye 4 Özellikleri
  • Chromium Sorunu # 576815
  • WebKit Hatası # 64861
  • Mozilla Belgeleri
  • Microsoft Edge Özellik İsteği
  • Chromium Platform Durumu
  • PostCSS :dir()polyfill