İnternet tarayıcıları web geliştiricileri için önemli programlardır. Kullanım oranları, neleri destekleyip neleri desteklemedikleri, birbirleri arasındaki farklar bizim için önemlidir. Senelerce Internet Explorer 6 ile uğraştıktan sonra sırası ile ie8, ie9, ie10 ve son olarak ie11 ile uğraştık. Mobil, hayatımızda öncelikli olmaya başladıktan sonra sorun yaşadığımız tarayıcılar değişti. Artık iOS Safari veya Samsung Internet ile sorun yaşıyoruz.

Tarayıcı dünyasını ayıran önemli özellik: Otomatik güncelleme özelliği, tarayıcıların kullanıcı veya işletim sisteminin yenilenmesi beklmeden kendi kendini güncellemesi.

  • Otomatik güncellenen tarayıcılar: Chrome, Opera, Firefox, Microsoft Edge, Android Webview
  • Otomatik güncellenmeyen tarayıcılar: Safari, Samsung Internet, Internet Explorer ve Android Browser

Hızlı güncellenen standartlar karşısından tarayıcının hızlı güncelleniyor olması önemli bir özellik.

ie11 son

Geçen hafta zingat.com‘da Internet Explorer’ın tüm sürümlerine desteği sonlandırdık. Bu sayede birçok avantajı geliştiriciler olarak elde ettik. Destek verdiğimiz tarayıcı listesinde otomatik güncellenmeyen iki tarayıcı kaldı. Mobil Safari ve Samsung Internet.

Mobil dünyadaki bu iki tarayıcının bizim sitedeki kullanı oranı:

  • Mobil Safari %20
  • Samsung Internet %6.7

Toplamda %27’lik bir kullanıcı kitlesi otomatik güncellemeden uzak. Burada Mobil Safari’yi bir kenera ayırmak gerekiyor. Mobil Safari her sistem güncellemesiyle güncelleniyor. iPhone kullanıcılarının güncellemeleri yükleme hızı gayet iyi. Bizim siteden takip ettiğim kadarıyla yeni sürüme geçiş 3 aylık bir zaman alıyor. Buradaki sıkıntı Safari’nin daha doğru ifade ile Webkit’in yenilikleri biraz geriden takip ediyor olması.

Samsung Internet Chrome (Blink) alt yapısını kullanıyor. Bu güzel bir gelişme olsa da güncelleme sıklığı konusunda sorunlu olduğunu belirtmeliyim.

Yeni gelen her özelliğin tarayıcılar tarafından desteklenme oranını takip etmeye yani caniuse kullanmaya devam.

Son bir not eski Internet Explorer 6 günlerine göre çok iyi durumdayız, ama her zaman daha iyisi aramamız gerekiyor.

Kalın sağlıcakla.

zingat.com‘da kullanıcı oranı % 1.7 seviyelerine düşen Internet Explorer 11 desteğini yakın zamanda sonlandıracağız. Bunun biz kod yazarlarına bazı kazançları olacak. Bunların başında javascript ES6 standardına geçme imkanı sağlaması olacaktır. Bu geçişi Babel ile daha önce de yapabilirdik ancak nasip olmadı. Nasip IE’yi bitirme adımı sonrasınaymış. Bu geçiş sürecinde yaptığımız değişiklik ve yenilikleri buraya yazmayı düşündüm ve hayata geçiriyorum.

İlk madde: Strict Mode

ES5 ile seçmeli olarak gelen Strict Mode kullanımı ES6 ile birlikte başlangıçta geliyor. Javascript esnek bir betik dili olarak hayatına başladı. Sonra geliştikçe ve dil olmaya başladıkça diyelim kurallar gelişmeye ve insanları bu kurallara zorlamaya başladı. Şimdi bu kurallara uymak zorunlu demeye başlıyor.

Javascript katı kuralları kullan (Strict Mode) hakkında daha detaylı bilgiye kaynaklar kısmında yer verdiğim Türkçe kaynaklardan ulaşabilirsiniz.

ES5 ile birilikte eğer projemizde bu kurallara uymalısınız demek için

'use strict';

kodunu kodumuzun veya kod blokumuzun içine yazmamız gerekiyordu.

ES6 sonrası bu satırı yazmaya gerek yok. :)

Doğan‘ın uyarısıyla bir düzeltme yapacağım; ES6 sadece module kodu içinde ‘use strict’ kullanmaya gerek duymuyor. https://stackoverflow.com/questions/31685262/not-recommended-to-use-use-strict-in-es6/31685340#31685340

Kalın sağlıcakla.

Kaynaklar

İ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

chrome styles

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.

chrome full screenshot

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

chrome lokal screenshot

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.

chrome animasyon tipi degiştirmek

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 :)

devtools arttırma azaltma

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.

hata ayıklama dışında tut

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.

css seçicileri kullanma imkanı

İ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.

etiket kapma otomatik

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

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

console panelde seçilen eleman

Tıkladıktan sonra

console dan element paneline

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.

CSS durumları

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