İlk yazıyı yazdıktan sonra hangi özellikleri kullandığıma daha çok dikkat etmeye başladım. Hemen başlayalım. Sırayla yazalım.

1. CSS değişikliklerini geri almak

Styles sekmesinde yaptığımız değişiklikleri geri almak için alışık olduğumuz kısayolu kullanabiliyoruz.

• Cmd + Z (Windows/Linux: Ctrl + Z)

2. Ekran görüntüsü almak

Daha önce bunun için eklenti kullanıyordum. DevTools bunu kendi yapıyor artık.

Komut menüsünü açıp Cmd+Shift+P (Mac) Ctrl+Shift+P (Windows, Linux) screenshot yazınca gelen seçeneklerden “Capture full size screenshot” tıklayınca bulunduğunuz sayfanın tam sayfa ekran görüntüsünü alabiliyoruz.

3. Sadece belli alanın ekran görüntüsünü almak

Sadece sayfanın belli bir yerinin ekran görüntüsünü almak için denetle(inspect) Command+Shift+C (Mac) veya Control+Shift+C (Windows, Linux) aktifleştirdikten sonra Command (Mac) veya Control (Windows, Linux) butonuna bastıktan sonra fare ile seçmek istediğimiz alanı bir kutu içine almamız yeterli.

4. Animasyon tiplerini değiştirmek

animation-timing-function ve transition-timing-function özellikleri değerlerini DevTools üzerinden değiştirip sonuçlarını görebiliyoruz.

Solda üç adet seçim var ayrıca soldan sçeim yapınca altta sağ-sol ok çıkıyor buradan diğer değerlere geçiş yapıp sonuçlarını görebiliyoruz. Bildiğin IDE tool’u mübarek.

5. CSS değerleri arttırmak/azaltmak

DevTools Styles panelinde değişiklik yaparken çok fazla kullandığım bir özellik. İnsan değerini olmayınca anlıyor. Safari Developer Tool’unda bulmayınca çok aradım :)

Birer birer, onar onar, yüzer yüzer ve ondalık sayılarda arttırma ve azaltma kısayolları

• Yukarı/Aşağı (Mac, Windows, Linux) = +/-1
• Alt + Yukarı/Aşağı (Mac, Windows, Linux) = +/-0.1
• Shift + Yukarı/Aşağı (veya PgUp/PgDn) (Mac, Windows, Linux) = +/-10
• Cmd + Yukarı/Aşağı (Mac) Shift + PgUp/PgDn (Windows, Linux) = +/-100

6. Bazı kütüphane scriptlerini hata ayıklama dışında tutmak

Javascript kodlarımızdaki hataları ayıklarken DevTools kullandığımız harici kütüphaneleri de hata ayıklama sürecine sokar, bu gibi durumlarda hata ayıklama süreçleri gereksiz fonksiyon ve kodlarda dolaşır. Bu gibi durumları engellemek için istemediğimiz script kodlarını hata ayıklama akışı dışına çıkarma imkanımız var.

Ben genelde jQuery kütüphanesini hata ayıklama dışında tutuyorum.

7. Arama yaparken CSS selector kullanmak

Elements panelinden arama yaparken CSS seçicilerini kullanabiliyoruz.

İlk başta çok kullanmıyordum ama son zamanlarda çok işime yarıyor.

8. HTML düzenlerken kapanış etiketini otomatik değiştirmek

Chrome DevTools’u editör gibi kullandığımız için bazı editör özelliklerini görmek sevindirici. Elements panelinden bir HTML etiketini seçip değiştirdiğimde kapatma etiketini kendi otomatik değiştirmesi çok süper.

9. Console panelde yakaladığım elmanı Elements panelinde yakalamak

Başlıkta yazmışım açıklamayı :)

Tıkladıktan sonra

10. Eleman CSS durumları

İlk başta yazmam gerek özelliklerden birisi. DevTools bir elemanın farklı CSS durumlarını yakalamamıza ve bu durumlara atanan özellikleri görmemiz, değiştirmemiz ve silmemize olanak sağlar.

Yukarıda görüldüğü gibi Styles panelinde :hov bölümüne tıklayınca o elemana özel CSS durumları çıkıyor. Çıkan durumları işaretleyince altta ilgili elemanın o durmuna ait atanmış özellikler görülecektir.

Kaynaklar

• https://www.credera.com/blog/type/article/five-things-you-didnt-know-google-chrome-could-do/
• devtoolstips.com/post/101751680221/blackbox-scripts-when-youre-stepping-through
• https://umaar.com/dev-tips/7-dom-search-by-selector/
• https://umaar.com/dev-tips/17-quick-edit-element/
• https://umaar.com/dev-tips/20-reveal-in-elements/

Tipografinin web sitelerinde önemli bir yeri var. Yazı tipi tasarım ve okunabilirlik açısından bakıldığında gerekli bir öğedir.

Yazı tiplerini sistemde yüklü yazı tipleri ve özel yazı tipleri diye ikiye ayırabiliriz. Bu makalede özel yazı tipleri üzerine duracağız.

Geçmişten beri özel yazı tiplerini sayfalarımıza eklemenin farklı yöntemlerini denedik. (Örn: sFIR, cufon, resim vb. ) Günümüzde artık bu daha kolay. @font-face ile özel yazı tiplerini sayfalarımıza kolayca ekleyebiliyoruz.

Özel yazı tipleri hakkında daha fazla bilgiye sahip olmalıyız. Nasıl yüklenir? Yükleme sırası nasıldır? Bu yazıda bu konulara biraz değineceğiz.

Özel yazı tipi tarayıcılar tarafından nasıl yüklenir ve yorumlanır?

Tarayıcıların bir html dokümanı nasıl yorumladığını aşağıdaki diyagram göstermektedir.

Yukarıdaki grafikte görüldüğü gibi tarayıcılar özel yazı tiplerinin yüklenmesi için önce DOM ve CSSOM’un oluşmasını bekler. Sonra özel yazı tipini yükler ve duruma göre içeriği işler. Özel yazı tiplerinin yüklenmesine kadar geçen sürede içeriğin nasıl görüneceği konusunda tarayıcıların farklı davranışları vardır. Bu farklılıkları inceleyelim.

Özel yazı tipi yükleme farklılıkları

Yazı tiplerinin yüklenmesinde iki farklı yöntem var. Tarayıcıların tercih ettiği iki yöntemi kısaca açıklayalım.

• “flash of invisible text” (FOIT): Özel yazı tipi yüklenene kadar yazıları göstermeyen yöntem “flash of invisible text” (FOIT) baş harflerinden oluşan bir kısaltma ile anılır. Yazı tipini gösterme, yüklenince bir seferde uygula mantığı.

• “flash of unstyled text” (FOUT): Özel yazı tipi yüklenene kadar sistemde yüklü olan yazı tipini gösterip özel yazı tipi yüklenince özel yazı tipine geçen metot. Standart yazı tipi ile göster, özel yazı tipi yüklenince tekrar tara ve göster mantığı.

İlk yöntemi uygulayan tarayıcılar kullanıcıyı özel yazı tipi yüklenene kadar metni göstermemenin kullanıcı deneyimi açısından kötü bir davranış olduğuna karar verdi. Bu durumu çözmek için kullanıcıyı bekletme süresine limit getirdiler. Bekleme süresi olarak 3 saniye belirlediler. Kullanıcı 3sn içinde özel yazı tipini yüklediyse yazıları tarayıp gösteriyor, 3sn içinde hala yüklenmediyse standart yazı tipi ile gösterip yüklendikten sonra tekrar tarayıp gösteriyor. Aslında bu ara bir çözüm 3 saniyeye kadar FOIT, 3 saniyeden sonra FOUT gibi davranıyor.

Tarayıcıların bu konudaki tavırlarını gösteren liste aşağıdaki gibidir.

Özel yazı tipi yükeleme peryotları

Yukarıdaki grafikte sıra özel yazı tipine gelmesi ve içerğin işlenmesi arasındaki zaman üçe bölünür.

• Bloklama peryodu: İlk periyod bloklama peryodudur. Eğer özel yazı tipi yüklenmemişse özel yazı tipini kullanacak eleman gizlenir. Eğer özel yazı tipi bu süre zarfında yüklenirse hemen uygulanır.

• Geçiş peryodu: Bloklama peryodundan hemen sonra gelir. Özel yazı tipi bu peryodda da yüklenmemişse özel yazı tipini kullananan yerler standart yazı tipi ile işlenir. Eğer bu süre zarfında özel yazı tipi yüklenirse özel yazı tipi uygulanır.

• Başarısızlık peryodu: Geçiş peryodundan sonraki peryoddur. Bu peryod başladığında hala özel yazı tipi yüklenmediyse özel yazı tipinin bulunamadığı anlamına gelir ve tarayıcı standart yazı tipi ile içeriği işler.

font-display özelliği

font-display özelliği özel yazı tipi dosyalarının nasıl yükleneceği ve görüntüleneceğini belirler. @font-face tanımı içinde kullanılır. Özel yazı tipi peryotlarını yönetmemize olanak sağlar.

Yapısı : font-display: [ deger ]
Aldığı Değerler : auto | block | swap | fallback | optional
Başlangıç değeri: auto
Uygulanabilen elementler: Belirtilen elemana
Kalıtsallık: Yok

• auto: Özel yazı tipi yükleme stratejisine tarayıcı karar versin demektir. Çoğu zaman block değeri ile aynı davranır.

• block: Özel yazı tipi yüklenene kadar metni gizler. Daha doğru bir anlatım ile tarayıcı metinleri görünmez bir yertutucu ile çizer ve yazı tipi yüklenince yazı tipinin belirlediği şekliyle tekrar çizer. FOIT davranışı sergiler.

• swap: Blok peryodun olmadığı geçiş peryodunun süresiz olduğuğu tanım. Özel yazı tipi yüklenene kadar sisteminin standart yazı tipi ile göstermesini sağlar. FOUT davranışı.

• fallback: auto ve swap arası bir davranıştır. Tarayıcı 100ms kadar metni gizle eğer yüklenmediyse standart yazı tipi ile gösterir. Yüklendikten sonrada özel yazı tipine geç.

• optional: Tarayıcı 100ms kadar kısa bir süre özel yazı tipinin yüklenmesi bekler ve yüklenmediyse sistemde yüklü yazı tipi ile içeriği gösterir. fallback ile benzerdir. fallback’den farklı olarak geçiş süresi olmayan bir seçenektir.

font-display özelliği bize FOUT ve FOIT davranışlarını seçme ve harmanlama imkanı sağlıyor.

Test için yukarıdaki sayfayı ayrı bir pencerede açıp Chrome Dev Tools’dan bağlantı hızınızı Slow 3G yapıp sonrada Empty Cache and Hard Reload ile sayfayı yüklerseniz font-display özelliği değerleri arasındaki farkı görebilirsiniz.

Ayrıca https://font-display.glitch.me/ sitesindeki örnek ve Umar Hansa’nın https://www.youtube.com/watch?v=yRrrL0Mg1pM&t=518s anlatımı uygulamada nasıl göründüğünü görmek için güzel kaynaklar.

Tarayıcı Desteği

+	-	+

Mobil Tarayıcılar

+	11.3	6.2

Sonuç

Tarayıcı desteği kousunda sorunlu. iOS’un 11.3 ile birlikte bu özelliği desteklemesi büyük avantaj. Samsung Internet desteği de gelirse süper olur. iOS 11.3’ün yaygınlaşmasından sonra da kullanılabilir. iOS sürümlerinin yayılması 3 ay aldığı düşünülürse 3 ay sonra(Temmuz 2018) kullanabiliriz.

Sağlıcakla kalın.

Kaynaklar

• https://github.com/zachleat/web-font-loading-recipes
• https://font-display.glitch.me/
• https://css-tricks.com/almanac/properties/f/font-display/
• https://css-tricks.com/font-display-masses/
• https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
• https://developers.google.com/web/updates/2016/02/font-display
• https://www.sitepoint.com/css-font-display-future-font-rendering-web/
• https://caniuse.com/#feat=css-font-rendering-controls
• alligator.io/css/font-face/
• https://www.zachleat.com/web/comprehensive-webfonts/
• https://webkit.org/blog/6643/improved-font-loading/
• https://www.youtube.com/watch?v=yRrrL0Mg1pM&t=518s

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.

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. https://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.

Tarayıcı Desteği

+	-	+

Mobil Tarayıcılar

+	+	6.2

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

• https://css-tricks.com/snippets/css/system-font-stack/
• https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
• https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f
• https://github.com/postcss/autoprefixer/issues/762
• https://bitsofco.de/the-new-system-font-stack/
• https://www.j-david.net/2017/01/the-system-ui-font.html
• https://drafts.csswg.org/css-fonts-4/#system-ui-def
• https://flaviocopes.com/css-system-fonts/
• https://furbo.org/2018/03/28/system-fonts-in-css/