Yeni CSS Viewport Birimleri: svh, lvh, dvh

• 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

[hided62]

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]

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

[tomriddle7]

Viewport Unit çok fazla oldu, kafa karıştırmaya başladı.

[carnoxen]

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