Yeni CSS Viewport Birimleri: svh, lvh, dvh

 (ishadeed.com)
21 puan yazan xguru 2023-07-14 | 4 yorum | WhatsApp'ta paylaş
  • Viewport genişliği/yüksekliğine göre ayarlamak kullanışlıdır, ancak vh mobilde birçok hataya yol açar
    → bunun nedeni viewport boyutunun tarayıcının adres çubuğu arayüzünü içermemesidir
  • 100vh mobilde tam viewport yüksekliği kadar olmalıdır, ancak kaydırma sırasında arayüzü gizleyen Safari/Chrome (Android)'da sorun ortaya çıkar
  • Bu nedenle CSS Working Group yeni birimler olan svh, lvh, dvh birimlerini tanıttı
    • svh Small Viewport: adres çubuğu arayüzü küçülmemiş durumdaki viewport yüksekliği
    • lvh Large Viewport: adres çubuğu arayüzü küçülmüş durumdaki viewport yüksekliği
    • dvh Dynamic Viewport: svh / lvh arasında dinamik olarak değişir
  • 100dvh kullanılırsa en alttaki düğmenin her zaman görünür olması sağlanabilir
    • Ancak performans sorunları olabileceği için dikkatli olunmalıdır

İlgili okumalar

4 yorum

 
hided62 2023-07-19

Vay! Firefox for Android'de position:fixed, bottom: 0 kullanırken korkunç derecede garip çalışan şeyler vardı; çözülüp çözülmediğine bakmam gerekecek gibi görünüyor.
 
tobyyun 2023-07-14

https://caniuse.com/viewport-unit-variants
iOS 15.4'ten itibaren, Android ise 114'ten itibaren destekliyor gibi görünüyor.
 
tomriddle7 2023-07-14

Viewport Unit çok fazla oldu, kafa karıştırmaya başladı.
 
carnoxen 2023-07-14

Tarayıcının çözmesi gereken bir sorunken bunun sorumluluğunu standart grubunun üstlenmesindeki ironi...