tarihinde Fatih Hayrioğlu

CSS mantıksal tanımları Arapça, Çince, İbranice vb. diller için kodlama yaparken büyük avantaj sağlıyor. Bu konuda Ahmad Shadeed’in güzel biz yazısı (Digging Into CSS Logical Properties) var. Detayları bu yazıdan öğrenebilirsiniz.

Burada size bu özellikleri farklı bir amaç için kullanımını anlatacağım. Genelde dikeyde veya yatayda bir tanım yapacaksak özelliklerin dörtlü kısaltmalarını kullanırız. Sadece yatay veya sadece dikey tanımlama yapamıyorduk. İşte burada yardımımıza koşuyor mantıksal tanımlar. Örneğin klasik ortalama yöntemi margin: 0 auto aslında amaç sadece yatayda auto tanımı yapmak ama bunu yapamıyorduk.

.kapsul {
    width: 800px;
    margin: 0 auto;
}

Evet şimdi bu kodu sadece şöyle yazabiliyoruz.

.kapsul {
    width: 800px;
    margin-inline: auto;
}

Süper değil mi?

Benzer şekilde padding, margin, border tanımlarında aynı şeyi yapabiliyoruz.

Örneğin bir elemanın sadece dikey kenarlarına kenarlık tanımlamak için

.liste-ogesi {
    border-top: 1px solid blue;
    border-bottom: 1px solid blue;
}

gibi iki tanım yazmamız gerekirken

.liste-ogesi {
    border-block: 1px solid blue;
}

şeklinde bu işi tek satırda yapabiliyoruz.

Dikey için block yatay için ìnline eklemesi yeterli.

tarihinde Fatih Hayrioğlu

CSS ile resim, video ve iframe yapılarını uyumlu web gereği genişlik/yükseklik oranına (aspect ratio) göre küçültmek veya büyültmek için farklı bir yöntem kullanıyorduk. Artık aspect-ratio tanımı ile alternatif çözüme gerek kalmadı. Ayrıca bu tanım ile Chrome ekibinin performans kriterlerinden Cumulative Layout Shift (CLS): sorununu da çözebiliyoruz.

Şimdi özelliğin bize kazandırdıklarına bir göz atalım.

Eski çözüm yolları

Uyumlu(responsive) web hayatımıza girdiğinden beri bazı sorunlarla karşılaşıyoruz. Bunlardan en önemlisi galiba kullandığımız resimlerin boyutlarının istediğimiz oranda küçülmesi olabilir. Bu sorunu aşmak için çeşitli yöntemlerimiz vardı.

Bunlardan birisi resimlere width: 100%; verip yüksekliğinide height: auto; tanımlayıp esnek bir resim el etmekti.

Ancak bu yöntem ardalan resimlerinde işe yaramıyordu.

Mavi kutunun sağ alt kısmındaki boyutlandırma ikonundan büyültüp küçülterek sonucu görebilirsiniz.

Bir diğer yöntem de yüzde padding-top değeri kullanımıdır.

  • 1:1 aspect ratio = 1 / 1 = 1 = padding-top: 100%
  • 4:3 aspect ratio = 3 / 4 = 0.75 = padding-top: 75%
  • 3:2 aspect ratio = 2 / 3 = 0.66666 = padding-top: 66.67%
  • 16:9 aspect ratio = 9 / 16 = 0.5625 = padding-top: 56.25%

Yukarıdaki gibi bir hesaplama ile resimlerin belli bir boy/en oranıyla küçülmesini sağlayabiliyorduk.

aspect-ratio tanımı

Tabi sonra bu işi kökten çözen aspect-ratio özelliği çıktı ve bir satır CSS kodu ile çözüm oluşturdu.

Aynı örneği aspect-ratio ile yaparsak.

Bu tanımı sadece resim, video ve iframe’de değil normal bir etikete de uygulayabiliriz. Örneğin üç kolonlu bir içeriğin div‘lerine uygulayabiliriz.

Tabi içerik eğer en/boy oranını bozacak şekilde uzunsa oran bozuluyor. Ancak normal şartlarda en/boy oranını koruyor.

aspect-ratio medya sorguları

aspect-ratio medya sorgularında da kullanılabiliyor.

@media (aspect-ratio: 1/1) {
  body {
    background: lightblue;
  }
}

gibi sadece o orana göre kod yazıldığı gibi min-aspect-ratio ve max-aspect-ratio gibi daha geniş yelpazeye göre de medya sorgusu ekleyebiliyoruz.

performansa aspect-ratio’lu çözüm

Yazının başında da belirttiğimiz gibi aspect-ratio tanımı CLS çözümü olarakta kullanılabilmektedir. Aşağıda görüldüğü gibi resmin sonradan yüklenmesiyle layout zıplaması oluyor.

enter image description here

Cumulative Layout Shift (CLS): Tarayıcı ek veriler yüklendikçe sayfada meydana gelen zıplamayı (shift) ölçer.

Bu sorunu aşmak için resimlerimize aspect-ratio tanımlamamız yeterli. Performans açısından süper bir kolaylık.

Tarayıcı desteği konusunda da gayet iyi bir durumda.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

Yukarıda bahsedildiği gibi web sayfalarında kullanılan bileşenleri HTML karşılamalı bence. Tabi burada şöyle bir şey var, CSS ile de bu bileşenin her yerine stil verebilelim. <progress> elementi aslında tam bu kapsamda bir element. Her projede bir şekilde ürettiğimiz bu bileşenin standart hali.

Bu makalede <progress> elementini inceleyeceğiz. <progress> elementi kullanıcıya bir işlemin ilerleme durumu hakkında bilgi vermek için kullanılan yapılardır.

Hiç bir özniteliği (attribute) yoksa kara şimşek efekti ile görünür.

Öznitelikler

<progress> elementi iki adet öznitelik alır.

  • max özniteliği ilerleme çubuğunun en fazla alacağı değeri tanımlamamızı sağlıyor
  • value özniteliği ilerleme çubuğunun mevcut değerini göstermemizi sağlıyor

Stil vermek

Eğer Chrome Developer Tools’da “Show user agent shadow DOM” özelliği açıksa <progress> elementini incelediğinizde aşağıdaki gibi bir görüntü ile karşılaşacaksınız. Aslında bu bizim bu elemanın hangi alanlarına müdahale edebileceğimizi de gösteriyor.

Show user agent shadow DOM

Webkit tabanlı tarayıcılarda (Safari, Chrome, Opera, Edge, Samsung Internet) iki adet sözde sınıfı var. ::-webkit-progress-bar ve ::-webkit-progress-value Mozilla tabanlı tarayıcı (Firefox) da ::-moz-progress-bar sözde sınıfı var.

Tabi tasarım olarak daha güzel sonuç veren örnekler de yapılabilir.

Örneğin kaynağı Kaynaklar kısmında farklı örnekler de var.

Sonuç

HTML’de artık sabitleşmiş bileşenlerin çözümlerinin olması çok güzel. Bu elementin benzeri <meter>elementi de var. <progress> ile <meter> arasındaki fark basitçe şöyle tanımlanabilir; <progress> dinamik <meter> statik sonuçları göstermek için kullanılıyor.

Kalın sağlıcakla.

Kaynaklar