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

tarihinde Fatih Hayrioğlu

Tipografi çok önemli ve eski bir alan web’in bu konudaki gelişmeleri mevcut yazılı mecraya göre geride kalıyor. Tabi tarayıcı geliştiricileri olabildiğince bu alanın ihtiyaçlarını görmek için çabalıyor. Metinlerdeki dul (widow) ve yetim (orphan) sorunları tipografinin sorunları ve bunlara çeşitli çözümler üretiliyor. Web’de bu konuya el atma gerekiği hissederek bizlere yeni özellikler kazandırıyor.

Paragraf diziliminde yapılan yanlışlardan biri de dul (widow) ve yetim (orphan) sözcüklerdir. Paragraf veya kolon sonlarındaki oldukça kısa sözcüklere ya da hecelere dul sözcükler, paragraf veya kolonların başlangıç satırında görülen kısa sözcüklere ya da hecelere yetim sözcükler denilmektedir. Bu iki sorun da yarattıkları fazla boşluk nedeniyle okuyucunun gözünü rahatsız edip okumanın akışını bozmaktadır. - KİTAP ve e-KİTAP TASARIMININ TARİHSEL GELİŞİMİ ve GRAFİK TASARIM İLKELERİ ÜZERİNDEN İNCELENMESİ

text orpham & widow

Genelde bu sorunla tasarımcıların gönderdiği tasarımların güzel ancak kodladıktan sonra o kadar da güzel görünmeyen başlıklarında karşılaşıyorduk.

Tasarımcı sadece statik bir başlık ile tasarımı hazırladığı için orada sorun oluşmazken kod yazıp içerik dinamik hale gelince beklenenden farklı bir durumla karşılaşırız. Tabi gelen “acaba ne yapabiliriz?” sorusuna genelde yapacak bir şey yok CSS ve tarayıcıların bu konuda yetenekleri sınırlı deyip geçiyorduk.

Yazı alanlarının önemli olduğu projelerde ise eğer içerik statik ise <br> ile çözüm oluştururken dinamik çözümler için Javascript’i tercih ediyorduk.

Konuyu araştırırken React için React Wrap Balancer çözümü olduğunu gördüm. Mevcut durumda tarayıcı desteği gelene kadar kullanılabilir.

İşin geçmişi uzun hikaye okumak isteyen için kaynaklardaki https://www.ctrl.blog/entry/text-wrap-balance.html makalesine göz atabilirsiniz. Özetlersem; Adobe bir algoritma geliştiriyor, sonra New York Times’ın daha basit bir algoritma üretiyor. En son gördüğüm kadar Knuth-Plass‘ın algoritmasının daha iyi olduğu yazılıyor.

Tarayıcılar başta bu hesabın maliyetinden kaçınıyor ve kapsayıcı genişliğine kadar sığan kelimeleri sıralayıp sığmadığı yerden itibaren aşağı atıyor. (Bu şu anda text-wrap: auto davranışı) Tarayıcılar bu konuya eğiliyor ve text-wrap: balance; tanımı ortaya çıkıyor.

Yukarıdaki örnekte görüldüğü gibi eğer tarayıcınız destekliyorsa fark açık. Uygulamalarda ortalı başlıklarda güzel sonuçlar veriyor. Sola yaslı başlıklarda sağ taraf çok boş kalıyor bence çok hoş durmuyor.

6 satırlık bir kısıtlama var. En fazla 6 satıra kadar olan metinlerde çalışıyor. Bu sınırdan dolayı sadece başlıklarda kullanmak öneriliyor.

Başlıklar için ideal bir çözüm. Peki normal metinlerde nasıl bir çözüm olacak? Burada Chrome ekibinden bir çözüm önerisi olarak yeni bir tanım geldi.

text-wrap: pretty

Chrome ekibi text-wrap: pretty tanımını çıkardı. Çıkardı diyorum çünkü fırından yeni çıktı. Yazıyı yazdığımda Chrome 117 ile birlikte çıkan özellikler arasında. Bu özellikte aşağı kayan bir kelime sorunlarını çözüyor. Aşağıda bir kelime kaldığı durumlarda iki veya daha fazla kelime kalmasını sağlıyor.

text-wrap balance pretty Yukarıdaki örnekte normalde “çözüm” kelimesi aşağıda kalırken pretty tanımınlandığında “pratik çözüm” alt satıra atılarak bir denge sağlanmış.

Bu öğrendiklerimizden sonra aşağıdaki gibi kod önerisi mantıklı görünüyor.

* {
	text-wrap: pretty 
}

h1, h2, h3 {
	text-wrap: balance; 
}

Kaynak: https://x.com/belldotbz/status/1671545872838979586?s=20

Bu tanımların bize kazandırdıklarını sıralarsak;

  • Daha okunabilir başlıklar ve metinler oluşturmamızı sağlıyor.
  • Esnek yapılarda(responsive) metinlerimiz daha uyumlu davranmasını sağlıyor.
  • Bunu sadece bir satır CSS kodu ile yapma kolaylığını bize sunuyor

Bu konu için her ne kadar çözümler çıksa da tam net çözüm için biraz daha geliştirme gerekiyor. Tarayıcıların geliştirmelerini bekleyip göreceğiz.

Kalın sağlıcakla.

Kaynaklar