Büyük, küçük ve dinamik görüntü alanı birimleri

Dinamik araç çubuklarına sahip mobil görüntü alanlarını hesaba katan yeni CSS birimleri.

Bramus

Görüntü alanı ve birimleri

Görüntü alanının yüksekliği kadar bir şeyi boyutlandırmak için vw ve vh birimlerini kullanabilirsiniz.

  • vw = Görüntü alanı boyutunun genişliğinin% 1'i.
  • vh = Görüntü alanı boyutunun yüksekliğinin% 1'i.

Bir öğeye 100vw genişliğinde ve 100vh yüksekliğinde bir öğe girdiğinizde görüntü alanını tamamen kaplar.

Görüntü alanının tamamını kaplayan ve 100 vw x 100 vh olacak şekilde ayarlanmış açık mavi bir öğe. Görüntü alanı, kesikli mavi kenarlık kullanılarak gösterilir.
100 vw x 100 vh olacak şekilde ayarlanmış ve görüntü alanının tamamını kaplayan açık mavi bir öğe.
Görüntü alanının kendisi kesikli mavi kenarlıkla gösterilir.

vw ve vh birimleri, bu ek birimlere sahip tarayıcılara yönlendirildi

  • vi = Görüntü alanının satır içi ekseninin boyutunun% 1'i.
  • vb = Görüntü alanının blok ekseninin boyutunun% 1'i.
  • vmin = vw veya vh değerinden daha küçüktür.
  • vmax = vw veya vh değerinden büyük olanıdır.

Bu birimler iyi bir tarayıcı desteğine sahiptir.

Tarayıcı Desteği

  • 20
  • 12
  • 19
  • 6

Yeni görüntü alanı birimlerine duyulan ihtiyaç

Mevcut birimler masaüstünde iyi performans gösterse de mobil cihazlarda farklı bir işleyiş şekli vardır. Görüntü alanı boyutu, dinamik araç çubuklarının varlığından veya olmamasından etkilenir. Bunlar, adres çubukları ve sekme çubukları gibi kullanıcı arayüzleridir.

Görüntü alanı boyutu değişebilir ancak vw ve vh boyutları değişmez. Sonuç olarak, yüksekliği 100vh olacak şekilde boyutlandırılmış öğeler görüntü alanının dışına taşar.

Mobilde 100 vh değeri yükleme sırasında çok yüksek.
Mobil cihazlarda 100 vh değeri çok yüksek olduğunda.

Aşağı kaydırıldığında bu dinamik araç çubukları geri çekilir. Bu durumda, yüksekliği 100vh olacak şekilde boyutlandırılmış öğeler görüntü alanının tamamını kaplar.

Kullanıcı Aracısı kullanıcı arayüzleri geri çekildiğinde mobilde 100 vh "doğru" demektir.
Kullanıcı Aracısı kullanıcı arayüzleri geri çekildiğinde mobil cihazlarda 100 vh değeri "doğru"dur.

Bu sorunu çözmek için, CSS Çalışma Grubu'nda görünümün çeşitli durumları belirtilmiştir.

  • Büyük görüntü alanı: Dinamik olarak genişletilen ve geri çekilmek üzere geri çekilen tüm UA arayüzlerinin boyutu olan görüntü alanı.
  • Küçük Görünüm: Genişletilecek şekilde dinamik olarak genişletilen ve geri çekilen UA arayüzlerinin varsayıldığı boyuta sahip görüntü alanı.
Büyük ve küçük görüntü alanlarının görselleştirilmesi.
Büyük ve küçük görüntü alanlarının görselleştirmeleri.

Yeni görüntü alanlarına da birimler atanmıştır:

  • Geniş görünümü temsil eden birimler lv önekine sahiptir. Birimler: lvw, lvh, lvi, lvb, lvmin ve lvmax.
  • Küçük görünümü temsil eden birimler sv önekine sahiptir. Birimler: svw, svh, svi, svb, svmin ve svmax.

Görüntü alanının kendisi yeniden boyutlandırılmadığı sürece, bu görüntü alanı yüzdesi birimlerinin boyutları sabittir (ve dolayısıyla sabittir).

Yan yana konumlandırılmış iki mobil tarayıcı görselleştirmesi. Bir öğenin boyutu 100 svh, diğerinin boyutu 100 lvh olur.
Birbirine yerleştirilmiş iki mobil tarayıcı görselleştirmesi.
Birinin boyutu 100 svh, diğerinin boyutu 100 lvh.

Büyük ve küçük görüntü alanlarına ek olarak, UA kullanıcı arayüzünün dinamik olarak değerlendirildiği bir dinamik görüntü alanı da vardır:

  • Dinamik araç çubukları genişletildiğinde, dinamik görüntü alanı, küçük görüntü alanının boyutuna eşit olur.
  • Dinamik araç çubukları geri çekildiğinde, dinamik görüntü alanı, büyük görüntü alanının boyutuna eşit olur.

Eşlik eden birimler dv önekine sahiptir: dvw, dvh, dvi, dvb, dvmin ve dvmax. Boyutları, lv* ve sv* eşdeğerleri arasında sabitlenir.

100dvh, kendisini büyük veya küçük görüntü alanı boyutuna uyarlar.
100 dvh, kendisini büyük veya küçük görüntü alanı boyutuna uyarlar.

Bu birimler Chrome 108 sürümünde ve halihazırda desteklenen Safari ve Firefox ile birlikte gelir.

Tarayıcı Desteği

  • 108
  • 108
  • 101
  • 15,4

Uyarılar

Görüntü Alanı Birimleri hakkında bilinmesi gereken birkaç uyarı var:

  • Görüntü alanı birimlerinin hiçbiri, kaydırma çubuklarının boyutunu dikkate almaz. Bu nedenle, klasik kaydırma çubuklarının etkin olduğu sistemlerde boyutu 100vw olan bir öğe biraz fazla geniş olur. Bu, spesifikasyona uygun olarak verilmiştir.

  • Dinamik görüntü alanı değerleri 60 fps'de güncellenmez. Tüm tarayıcılarda, UA kullanıcı arayüzü genişledikçe veya geri çekilirken güncelleme kısıtlanır. Hatta bazı tarayıcılar, kullanılan harekete (yavaş kaydırma veya kaydırma) bağlı olarak güncellemeyi tamamen tersten açar.

  • Dokunmatik klavye (sanal klavye olarak da bilinir), UA kullanıcı arayüzünün bir parçası olarak kabul edilmez. Dolayısıyla, görüntü alanı birimlerinin boyutunu etkilemez. Chrome'da, sanal klavye kullanımının görüntü alanı birimlerini etkilediği bir davranışı etkinleştirebilirsiniz.

Ek kaynaklar

Görüntü alanları ve bu birimler hakkında daha fazla bilgi edinmek için HTTP 203'ün bu bölümüne bakın. Bu görselde Bramus Jake'e çeşitli görüntü alanları hakkında bilgi veriyor ve bu birimlerin boyutlarının tam olarak nasıl belirlendiğini açıklıyor.

Ek okuma materyali:

Yeni birlikte çalışabilirlik serisinin kapsamında