tarihinde Fatih Hayrioğlu

Bakış Alanı Değerleri (View Port) konusunu 2013 yılında yazmıştım. Uzun süredir kullanılan birimler. Masaüstünde güzel bir şekilde çalışırken mobilde sorunları vardı. Telefonun ekranı sabit bir yükseklikte değil. İlk durumda adres çubuğu ve altta gezinme menüsünün olduğu durumlarda vh tanımı ihtiyacı karşılamıyordu. Çözüm için Javascript ile yan yollara sapıp hallediyorduk.

CSS ile bu sorunu çözmek için dinamik bakış alanı çıktı. Bu yazıda sizlere bu yeni dinamik bakış alanı birimlerini anlatmaya çalışacağım.

css dvh birimi Resim kaynağı: https://web.dev/blog/state-of-css-2022

Resimden de görüleceği gibi sadece dinamik bakış alanı değeri değil mobil tarayıcıların tam boy birimleri(lvh) ve küçük boy birimleri(svh) de geldi.

  • Tamboy bakış alanı(Large viewport): Tarayıcının tüm araçlarının gizlendiği durumdaki yüksekliği temsil eder. Örneğin üstteki adres barı ve alttaki sekme menüsünün kullanıcının scroll’u aşağı kaydırmasıyla kaybolmasıyla oluşan alan. Bakış alanı birimlerinin bir benzere bu tanım için de geçerlidir. lvw, lvh, lvi, lvb, lvmin ve lvmax
  • Küçük bakış alanı(Small Viewport: Tarayıcının genelde başlangıç durumundaki araçların açık olduğu durumlardaki bakış alanı birimidir. Bakış alanı birimlerinin bir benzere bu tanım için de geçerlidir. svw, svh, svi, svb, svmin ve svmax.
  • Dinamik bakış alanı birimleri: Adındanda anlaşılabileceği gibi dinamik bir birimdir. Mobil tarayıcının başlangıçta görünen adres alanı ve altta görünen sekme menüsünün olduğu durumlarda bu alanların dışında kalan alanı temsil ederken, kullanıcının scroll etmesi ile adres çubuğunun ve sekme menüsünün kaybolmasıyla oluşan tam boy alanı temsil eder. Bakış alanı değerlerinin hepsi bu birim içinde türetilmiştir. dvw, dvh, dvi, dvb, dvmin ve dvmax. Burada şöyle bir güzellikte sağlıyor bu tanımlara bize: Mobildeki farklı tarayıcıların farklı arayüzleri olabiliyor. Mesela birinde hem adres çubuğu hem de altta sekme menüsü olurken bazılarında sadece adres çubuğu olabiliyor. Bu gibi farklılıkları da içeren bir birim olduğu için bu gibi durumları dert etmeye gerek kalmadan işimizi çözüyor.

Yukarıdaki kodu bir mobil tarayıcıda açıp aşağı doğru kaydırdığımızda değerler daha anlaşılır oluyor.

Bakış alanı değerleri

Burada belirtmemiz gereken bir kaç nokta var:

  • Bakış alanı değerleri kaydırma çubuğunu hesaba katmaz.
  • Dinamik bakış alanı değerinin dinamik geçişi 60fps olmadığı için geçişte zıplamalar olabilir.
  • Klavyenin açık olma durumu da bakış alanı değerlerince değerlendirilmez.

Bu notları da aklımızda tutarak projelerimizde bu değerleri kullanabiliriz.

webflow‘un youtube kanalında kaydırma çubuğu akışkanlığı için svh kullanımının daha güzel sonuçlar verdiğini söylüyor. Yazdığınız projeye göre tercihler değişebilir.

Tarayıcı Desteği

Türkiye için %92’lik güzel bir desteği var.

Tarayıcı Desteği

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + +

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

Responsive(uyumlu) web kodlarken en büyük yardımcımız olan medya sorguları hakkında güzel bir gelişme var. Responsive(uyumlu) web kodlarken kullandığımız minimum genişlik ve maksimum genişlik kullanımının sonuna geldik, zaten kullanırken de çoğu zaman kafa karışıklığına neden oluyorlardı.

Artık javascript’te kullandığımız matematiksel işaretler yardımı ile genişlik sorgularını kullanabiliyoruz. Bu işaretler şunlar;

  • <
  • <=
  • >
  • >=
  • =

Şimdi eski veyi karşılaştırması için örneklere bakalım.

Eskiden;

@media (min-width: 1100px)  {
	// bir şeyler yaz
}

Cihaz genişliği 1100 piksel ve üzeri olduğunda CSS devreye giriyor. Yeni kullanım

@media (width >= 1100px)  {
  // bir şeyler yaz
}

böylelikle kafa karışıklığı da olmayacaktır.

Bir diğer kullanım şekli de;

@media (max-width: 480px)  {
  // bir şeyler yaz
}

Cihaz genişliği 480 piksel ve altında olduğunda CSS devreye giriyor. Yeni kuralla birlikte

@media  (width <= 480px)  {
  // bir şeyler yaz
}

Son olarak bir aralığı belirtmek için

@media (min-width: 480px) and (max-width: 1100px) {
  // bir şeyler yaz
}

Cihaz genişliği 480 piksel ile 1100px arasında olduğunda CSS devreye giriyor. Yeni kuralla birlikte

@media (480px <= width <= 1100px) {
  // bir şeyler yaz
}

Süper.

Tarayıcı Desteği

Yeni yeni çıkmasına rağmen yüzdesi gayet güzel.

Tarayıcı Desteği

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+117 + +

Sonuç

Sonuç olarak yeni tanımlar daha basit ve anlaşılabilir. Bence CSS bir sorununu daha düzeltti ve geliştirdi. Zamanında yavaşlıklarından dolayı eleştirdiğim W3C’yi tebrik ediyorum.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

CSS’in son yıllardaki atağından önceki en önemli gelişme grid özelliğiydi. Grid çıkarken subgrid‘ide içeren bir standart ile çıkacakken tam olgunlaşmadığı için bir sonraki adıma bırakılmıştı. Şuan grid iyice yerleştiğine göre artık subgrid‘i de ekleyelim dedi W3C. Chrome’un geçen hafta desteğini açıklamasıyla tüm tarayıcıların desteklediği bir tanım oldu artık.

CSS Grid Modülü terimleri Kapsayıcı elemana display: grid tanımı yapıldığında grid sadece bir seviye alttaki elemanları grid ögesi yaparak onlara erişir. Onlarında altındaki ikinci seviye ögelere erişemez. Torun ögelere de erişimi bize subgrid sağlıyor.

İçiçe grid kullanımlarında alttaki grid üst elemandan ayrı bir şekilde hareket eder. Ana grid’in tanımlarını alt grid’e de kalıtsal olarak etkilemesini sağlamak için subgridtanımını kullanırız.

Burada şöyle bir çözüm de var display: contentsile de aynı çözüm sağlanıyor fakat arada farklar var. subgrid‘in avantajları grid özelinde daha çok.

Nasıl kullanılır

Subgrid, içiçe kullanılmış grid elemanlarından iki alt seviyedeki elemanların üstteki tanımları alsın mı almasın mı kararını vermemizi sağlar. grid-template-columns ve grid-template-rows özelliklerine atanabilen bir tanım subgrid.

Örnekle anlaması daha kolay olacak.

Kart örneği

Subgrid’i anlatan makalelerde çok fazla karşılaştığımız kart örneğini yapalım. Daha önce kodladığım bir sitede benzer bir yapıyı flex ile yapmıştım ve tabi çözemediğim için sabit bir yükseklik verip geçtiğim örnek aklıma geldi.

Sayfa üç kolonlu ana yapıdan oluşuyor. Ama bizim odaklanacağımız kısım sağdaki main alanı. main alanı içinde 4 kart var ve bunların içeriği değişkenlik gösterebiliyor. Tabi biz burada sabit bir yükseklik kullandığımız için gelen içeriğe göre bu yükseklik değerini değiştirmemiz gerekiyordu. Bu örnek için bu çok sorun olmadı çünkü içerik çok fazla değişmiyordu. Daha dinamik olan benzer örneklerde çözüm bulmak büyük sıkıntı.

Gelelim subgrid ile olan çözüme;

  • mainana grid tanımımızın olduğu kısım grid-template-columns: repeat(4, 1fr); ile 4 kolonlu bir grid üretiyor.
  • İçteki section alanı alt grid display: grid;
  • sectioniçeriğini oluşturacak satırları tanımlıyoruz grid-row: span 4;
  • Son olarakta sectionkısmının yatayda bir subgrid olduğu bildiriyoruz grid-template-rows: subgrid;

Bu kod ile biz içiçe iki grid kullandığımızı ve section kısmının satırlarının da bu subgrid’in satırları olduğunu belirtiyoruz. Böylece satırların içeriğine göre yatayda dengelemiş oluyoruz. Mükemmel değil mi?

Form örneği

Bir diğer örnekte Miriam Suzanne‘ın kaynaklar kısmında verdiği form örneği. Başka yerlerde de bu örnek kodlanmış ancak ben ilk olarak Miriam’ın anlatımında gördüğüm için onun örneği üzerinden gideceğim.

Bu örnekte subgrid’in kolonlarda dengelemesine bir örnek.

  • formelemanına grid-template-columns: max-content 1fr; tanımı yapıyoruz. Bu ana grid tanımımız.
  • .field alt grid elemanı
.field {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid;
}

tanımı yaparak dikeyde dengeleme yapıyoruz.

gap değeri

İçteki grid ana grid’den farklı gap değeri alabilir. Subgrid tanımı yapıldığında içteki grid ana grid’in gap değerini alır. Biz bunu değiştirmek istediğimizde gap tanımı (column-gap veya row-gap) değiştirebiliriz.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.card {
  grid-row: auto / span 2;
  display: grid;
  grid-template-rows: subgrid;
  gap: 1px;
}

şeklinde bir kodlama ile üstteki grid’in gap değeri 20px iken içerdeki grid’in değerini 1px olarak tanımlayabiliyoruz.

Devtools görünümü

Bu tip tanımların geliştirici araçlarında gösterilmesi güzel bir standart haline geldi. Firefox ve Chrome tabanlı tarayıcılarda subgridetiketi ile gösteriliyor.

subgrid chrome

Firefox subgrid

Bu subgrid etiketini tıkladığımızda grid etiketine tıkladığımız gibi etkisi var.

Tarayıcı desteği

En son Chrome’un desteğinin gelmesiyle Türkiye’deki desteği %85’lere yükseldi. Yakın zamanda %95’leri görürüz.

Tarayıcı Desteği

Chrome explorer Firefox
+117 +117 +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+117 + -

Kaynaklar