Site hızının gittikçe önemini arttırmasıyla birlikte web sitesi geliştiricileri sitelerinin kullandığı her kaynağı iki kere sorgulamaya başladı. Tüketilen her kaynak üzerinde kar/zarar hesabı yapılarak artık web sitelerine ekleniyor. Bu kaynaklardan bir tanesi olan yazı tipi hakkında olacak bu makale.

Yazı tipi seçimi ilk başlarda çok zor bir tercih değildi.

Dreamweaver yazı tipi ekleme

Yukarıdaki ekran eskilerden DW’da yazı tipi seçim ekranı. Tanım şu şekildeydi.

font-family: Arial, Helvetica, sans-serif;

Burada birincil fontumuz Arial’dir alternatifi Helvatica ve yazı tipi ailesi sans-serif olduğunu belirtiyoruz. Normalde sadece Arial yazmamız da yeterlidir, ancak kullanıcının bilgisayarında bu yazı tipinin olmaması durumu düşünülerek alternatif yazı tipi ve yazı tipi ailesi yazılmıştır. http://fatihhayrioglu.com/css-ve-tipografi/

Aynı yazıda farklı yazı tiplerini kullanmak için Adobe Flash yardımıyla sFIR yöntemini kullanabilirsiniz diye bir paragrafta var. Evet o zamanlar farklı yazı tipini kullanmak için genelde resim, sFIR veya cufon gibi dolambaçlı yollar kullanırdık.

Sonra font-face tanımı çıktı ve artık kullanıcının bilgisayarına istediğimiz yazı tipini ekleyebiliyoruz. Sonrasında kullanılan yazı tipi çeşitleri artmaya başladı ve web için yazı tipi çeşidi olan woff yazı tipi ve sonrasında ikinci sürümü olan woff2 çıktı. woff2 ile birlikte özel yazı tipleri daha optimize. Ama bu bile yetmeyebiliyor.

Makalenin başında da yazdığım gibi her kaynak kullanılırken iki kere düşünülüyor diye. İşte bir çok popüler site GitHub, Wordpress, Bootstrap, Medium, Ghost gibi siteler özel yazı tipi kullanımını sorguladı ve sistem yazı tipi dediğimiz kullanıcının aracında kullandığı yazı tiplerine yöneldi. Dikkat ediyorsanız bilgisayarındaki demedim, çünkü zaman değişti ve bir çok araçtan internete erişim var artık. Yazımın başında verdiğim

font-family: Arial, Helvetica, sans-serif;

Kodu artık aşağıdaki hali aldı.

font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;

Evet liste bayağı uzadı. Artık sadece bilgisayar değil farklı araçlardan internete erişebiliyoruz. Sonuç olarak her araç için bir sistem yazı tipi var ve onu ekleyince de yukarıdaki kod ortaya çıkıyor.

Sonra standart geliştiriciler bu işe bir çözüm bulalım dedi ve genel bir tanım yazsak ve her araç bu tanıma göre kendi sisteminde olan yazı tipini gösterse diye bir çözüm atıldı ortaya ve CSS4 ile birlikte standartlaştırılmaya başlandı. Son olarak karar verilen standart;

font-family: system-ui;

Kısa ve net. Süper

Tarayıcı desteği konusunda gayet güzel yerde Türkiye’de %88 civarında. Windows üzerinden Edge ve Firefox’a (sorunları var) da tam desteği gelince kullanılabilir.

Can I Use font-family-system-ui? Data on support for the font-family-system-ui feature across the major browsers from caniuse.com.

Sonuç

system-ui hakkında bir iki tane sorun olduğu konusunda yazı okudum. Çoklu dil desteği olan sitelerde sıkıntılar çıktığından bahsediyor. Güzel bir özellik umarım yakın zamanda desteği genişlerde kullanırız.

Yazı tipi ile alakalı güzel özellikler çıkıyor. font-display, değişken fontlar gibi güzel gelişmeler var. Umarım tüm yazı tipi ihtiyaçlarımızı başka birşeye ihtiyaç kalmadan css ile çözüm sağlarız.

Kalın sağlıcakla.

Kaynaklar

Büyük çaplı projelerde bir elemana çok fazla olay tanımı yapılıyor. Sonra bir hata yakalamak için uğraşırken o elemana tanımlanmış olayları bulmak zaman alıyor bazen çile oluyor. Ben daha önce Firebug kullanırken bu iş için jQuery olaylarını yakayan bir eklenti kullanıyordum. Bazen iş görse de çok iyi çalışmıyordu.

Chrome Dev Tools’da keşfettiğimden beri bu özelliği severek kullanıyorum. Aşağıdaki gibi bir eleman seçip Event Listeners sekmesini açınca (cmd+shift+p gelen panelde show Event Listeners) o elemana ve yukarıda doğru tüm elemanlara tanımlı olan olayları görüntüler.

tüm olaylar

Sadece seçtiğim eleman tanımlı olayları görmek istiyorum derseniz. Ancestors işaretini kaldırmanız yeterli.

sadece seçili elemanın olayları

Sadece elemana tanımlı olayı görüyoruz. Listelenen olayın solundaki oka basarak elemanı ve bu elemana tanımlı kodun hangi dosyada ve hangi satırda olduğunu görebiliriz.

jquery sorunu

jQuery kullanıyorsanız veya başka kütüphaneler içinde geçerli aynı durum size jQuery veya kullandığınız kütüphanenin olay tetikleyen kodunun yerini gösterir. Ancak bizim istediğimiz kendi kodumuzu bulmak. Bunun içinde Framework listeners işaret kutusunu işaretlememiz yeterlidir.

son olay listesi

Dosya ismi ve satır numarasını gösteren kısıma tıklayınca bizi aradığımız kod blokuna götürecektir.

kodu bulduk

Google Dev Tools ipuçları hakkında Umar Hansa‘nın sitesi güzel bir kaynak takip etmenizi öneririm.

Kalın sağlıcakla.

Kaynaklar

Daha önce bu konuda bir makale yazmıştım. 100% Genişlik ve 100% Yükseklite Sayfa İskeleti Hazırlama bağlantısını tıklayarak makaleye erişebilirsiniz. Aynı yapıyı flex ile yapsam nasıl olur bir bakalım.

Bu yapının bize sağladıklarını listelersek.

  • Esnek iç alan ve sabit yan kolonlarımız var
  • Eşit kolon yüksekliğimiz var
  • Sticky footer özelliği var

Flex ile bu işi yapalım.

HTML kodu;

<header>Üst alan</header>
<div class="kapsayici">
  <main class="iceri-alani">There are many variations of passages of Lorem Ipsum available, but the majority...
  </main>
  <nav class="menu">Sol Menü</nav>
  <aside class="reklam">Sağ alan</aside>
</div>
<footer>Alt Alan</footer>

Flex ile sayfa dibine yapışık alt alanlar (sticky footer) yapmak yazısında gördüğümüz gibi orta alanın tam sayfayı kaplaması ve alt alanın dibe yapışması için:

body {
  display: flex;
  margin: 0;
  flex-direction: column;
  min-height: 100vh;
  text-align: center;
}

.icerik-alani-kapsayici {
  display: flex;
  flex: 1;
}

Tanımlarını yapıyoruz.

Menü ve reklam alanlarını eşit kolonlu yapmak ve menü kısmını sol tarafa koymak için:

.icerik-alani {
  flex: 1;
}

.menu, .reklam {
  flex: 0 0 12em;
}

.menu {
  order: -1;
}

Uyumlu web kısmını ve mobili önceliklendirdiğimiz de şöyle bir kod ortaya çıkıyor.

.kapsayici {
		display: flex;
 	flex: 1 0 auto;
		flex-direction: column;
}

.menu {
 	order: -1;
 	background-color: #449fdc;
}

@media (min-width: 768px) {
  .kapsayici {
  	flex-direction: row;
  }
  .iceri-alani {
    flex: 1;
    padding: 20px;
    margin: 0;
  }
  .menu, .reklam {
    flex: 0 0 12em;
  }
}

Sonuç

Eski koda göre flex ile kodladığımız sayfanın eskiye göre çok fazla avantajı var.

  • Daha az kod
  • Daha sade kod
  • Uyumlu web desteği ve mobil önceliği
  • SEO açısından daha avantajlı kod

Kalın sağlıcakla.

Kaynaklar

zingat.com listeleme sayfalarının mobil görünümünde kullandığımız Filtrele butonunun daha fazla dikkat çekmesi için bir animasyon uygulayalım diye karar verdik.

Animasyon olarak kalp atışı (pulse) şeklinde bir animasyona seçtik. Animasyon 3 kere tekrarlayacak ve bitecekti. İstek güzel hoş örnekleri de var. Yapalım dedik ve yaptık. Animasyon mantığı şöyle; Butona bir box-shadow tanımlayalım ve bu box-shadow‘u yayılan bir dalga gibi büyütelim.

Sonra bu animasyon 3 kere tekrar etsin dursun 5sn sonra tekrar 3 kere tekrar etsin isteği geldi. Aklıma çoklu animasyon desteği geldi. Aynı animasyonu çoklu olarak tanımlarsam olur dedim.

chrome devtools amination

İkinci animasyon tanımında ilk animasyon süresi ve 5sn ekleyip tanımlarsam gayet güzel ve temiz bir çözüm olur dedim. Bu arada Chrome DevTools’un Animation sekmesi bu konuda çok yardımcı oldu.

Yaptım oldu herşey ta ki Safari’de örneğe bakana kadar. Safari’de aynı isimde iki animasyonu ard arda çalıştırmıyor. Bunun için aynı animasyonu farklı isimle tekrar oluşturdum. Çok çakma bir çözüm ama benim işime yaradı.

Not: Ben başka bir sorun daha yaşadım ama tekrarlayamadığım için ve sadece zingat.com’da olduğu için buraya yazmadım. Animasyon normalde çalışmadı, javascript ile sayfa yüklendiğinde ilgili elemana bir sınıf tanımladım ve CSS’te bu sınıf varsa animasyonu uygula dedim.

Safari can sıkıyor.

Kalın sağlıcakla.

Kaynak

CSS geçiş efekti özelliği güzel bir özellik. Bir çok basit animasyon işinde kullanılan geçiş efekti özelliğinin bir elemanı gizle/göster (toggle) ettirmek istediğimizde bazı sorunları var. Çözüm aradığımda bir kaç yöntem karşıma çıktı. Bu sorun ile ilk karşılaştığımda sahibinden.com’da bana özel sol menüsü yapıyorduk, çözümü bulunca ben bunun bir makalesini yazmalıyım demiştim ancak nasip değilmiş olmadı. Kısmet şimdiye imiş.

Elemanı gizle/göster yapmak için ilk düşündüğümüz geçiş efekti yükseklik değerini başlangıçta sıfır verelim tıklanınca veya üzerine gelince auto‘ya çevirelim. Sorun burada başlıyor CSS height değerini sıfırdan auto’ya çekemiyor.

MDN bu konuda ki açıklaması bu işin zor bir iş olduğu yönünde. Tarayıcılarda sıkıntıya girmektense desteklemeyelim sonucuna varmışlar :)

Bu sorunu çözmek için iki yöntem var.

max-height çözümü

Çözüm için height yerine max-height kullanmak.

  • max-height değerini iyi tanımlamak gerekiyor. Verilen değer Açılış/kapanış animasyonunu etkiliyor. Yüksek değerler animasyonun hızlı olmasını veya anlaşılmamasına neden oluyor. Küçük değerlerde içeriğin aktif olarak geldiği yerlerde içeriğin bazı kısımlarının görünmemesine neden olabilir.
  • max-height değeri tanımlanan elemana padding, margin değeri tanımlamayın animasyonda zıplamalara neden oluyor.
  • Gizle/göster yaptığımız elemana padding ve margin tanımlamak yerine içine bir tane daha eleman atayıp padding ve margin değerlerini bu yeni eleman tanımlayarak çözebiliriz.

scaleY ile çözmek

transform: scaleY yardımıylada bir çzöm mümkün. Başlangıçta değer sıfır (0) iken seçili durumda veya üzerine geldiğimizde değeri bir (1) yaparakta bir çözüm oluşturabiliriz.

Gayet kolay bir çözüm. Animasyonun açılış şekli bazı durumlarda istenmeye bilir. Tercih sizin.

Kalın sağlıcakla.

## Kaynaklar