tarihinde Fatih Hayrioğlu

“IE6 Sonrası Kod Yazma Alışkanlıklarımızı Güncellemek” yazısından sonra ie7 istatistikleri daha çok ilgimi çeker oldu. Şu anki istatistiklere bakarsak %4 civarında(makaleye başladığımda %10 idi.) ie7 kullanan kullanıcı var, peki biz bunları yoksayabilirmiyiz ve yok sayarsak bize neler kazandırır bu makalemde bunları irdeleyeceğim.

İnternet Explorer 7. sürümünü bundan yaklaşık 5 sene önce çıkardı. Genelde ie6’nın kötü namının yanında iyi olarak görünse de Microsoft’un işi düzeltemediği ara sürümlerden biri oldu hep. Windows Vista’nın Windows Xp ve Windows 7 arasında kalması ile pek rağbet görmedi dersek yeridir.

kaynak: http://blogs.msdn.com/b/ie/

Yukarıdaki grafiği Microsoft’un kendi blog sitesinden aldım. Bir çok şeyin göstergesi aslında yukarıdaki resim. CSS2.1 tam desteğini ancak ie8 ile veren Microsoft ne kadar geride olduğunuda gösteriyor.

hasLayout Sorunları: Geçenki makalemde genel olarak bahsettiğim hasLayout sorunları sayfa yapılarının yerleşiminde çok sık rastladığımız sorunların ana kaynağı.

:before ve :after desteği:Çoklu kenar çizgisi kullanımı, css3 renk geçişi kullanılan elementlere ikon eklemek istediğimizde, resimsiz tooltip oluşturmak istediğimizde vb birçok kullanım alanı olan bu iki özelliği kullanabileceğiz artık. Önemli bir konu Murat Çorlu‘nun bu konuda bir makale hazırlığı var. Dört gözle bekliyoruz.

content değeri desteği: CSS ile html içine içerik ekleme imkanı sağlayan güzel bir özelliği artık kullanabileceğiz.

outline desteği: Odaklanılan alanları belirlemek için kullanılan bu özelliği erişebilirlik açısından önemli. Artık Standart çizgilerin dışında istediğimiz görüntüyü veribileceğiz.

Performans farkı:İnternet Explorer’un kendi günlük sitesinden öğrendiğimize göre ie7 ile ie8 arasında en az 2,5 katlık bir performans farkı var.

  • Ağ İyileştirmeleri: ie7 ve altı tarayıcılarda bir sunucudan en fazla 2 öğe indirilebilirken ie8’de bu sayı 6’ya çıkarılmıştır. Buda sırada az sayıda bekleme ve site açılış hızının artması demek oluyor.

  • Script Geliştirmeleri: Sayfadaki script yorumlamada ciddi hızlanmalar olmuş. SunSpider test aracına göre ie7 ile ie8 arasında %400’lık hız farkı var.

  • Bellek Kullanımında İyileştirmeler:ie8’de bellek ile alakalı 400’den fazla iyileştirme yapılmış.

  • Yorumlayıcı Motor Yenilikleri: Yeni CSS2.1’e tam uyumlu yorumlayıcı ile daha az hatalı bir yorumlayıcıya kavuştu.

  • Native Json Desteği: ie8 ile birlikte gelen native jSON desteği ile daha hızlı işlem yapabiliyoruz. Ajax isteklerimiz daha hızlı artık.

HTML5 Selector API Desteği: Javascript ile element bulmak için getElementById(), getElementsByName() and getElementsByTagName() metotlarını kullanıyoruz. HTML5 Selector API desteği ile querySelector() ve querySelectorAll() diye iki adet metot daha gelmektedir. jQuery’den aşina olduğumuz bu seçiciler bize çok büyük avantajlar sağlıyor.

localStorage Özelliği:Kısaca çerezlerin(cookies) daha gelişmiş sürümü olarak tanımlayabiliriz bu özelliği.

:focus desteği: Klavyeden elementlere odaklanmamızı sağlayan ve erişebilirlik için önemli olan bu özelliği artık uygulayabiliyoruz.

Data URI Desteği:Internet Explorer 8 ile birlikte DATA URI desteği geliyor. DATA URI kısaca html dosyasından ayrı yapıların yani resimlerin html içine gömme imkanı verir bize. internet Explorer 8 sadece css dosyalarına eklenmesine izin veriyor ayrıca bir kısıtlama var ie8 en fazla 32kb boyutuna kadar destekliyor.

box-sizing: box-sizing özelliği bize kutunun genişliğinin border ve padding değerlerinin içerip içermemesi gerektiğini tanımlama imkanı sağlıyor. Detaylı bilgi için tıklayınız.

:active Sözde sınıfıişlevselliği arttı ie7’de sadece bağlantılara(<a>) verilirken artık tüm HTML elementlerini kapsıyor.

IE8 Geliştirici Aracı geldi: Firebug kadar olmasada ie içinde böyle bir aracın olması büyük bir avantaj. CSS özelliklerini görebilmek ve değiştirme imkanı bile yeter. İnternet Explorer 7’den daha gelişmiş bir geliştirici aracı ile javascript hatalarımızı görmek büyük avanataj. Geliştirici Aracının diğer özellikleride ie8’de geliştirilmiş durumda.

Yazı ve Metin Özellikleri: Yazı ve metin özellikler için CSS2.1 için tam destek geliyor. font-weight, white-space (pre-wrap ve pre-line değerleri destekleniyor), word-spacing. Ayrıca text-decoration özelliğinin overline değeride destekleniyor.

Test Zamanı: Bir çok arayüz geliştirici yazdığı kodları farklı tarayıcılar ile test eder. Şu an benim test ettiğim tarayıcılar (ie7, ie8, ie9, Chrome ve Firefox) bunların arasında en fazla zamanımı ie7 testleri alıyor. İnternet Explorer 7 sonrasında test sürelerimde ciddi azalma olacağını düşünüyorum.

onhashchange özelliğini ie8+ https://developer.mozilla.org/en/DOM/window.onhashchange

Diğer Kazanımlar

Sonuç

Microsoft’un tarayıcı üretimindeki umursamaz tutumu sonucu oluşmuş ie7 tarayıcısının kullanım oranının hızla düştüğü bu günlerde ie7 sonrası neler kazanacağımızı görmek arayüz geliştiriciler için önemlidir. ie6’nın yanında ufak görünse bile aslında bir çok uğraştan bizi kurtardığını yukarıda gördük. Benim tahminim yaz aylarında ie7 desteğini keseceğiz gibi görünüyor. Sene sonu olarak güncelliyorum.

sahibinden.com Haziran istatistiklerine göre %4 olan ie7’nin normal kullanıcılar için %5’in altına indiğinde bırakılması sorun oluşturmayacaktır. Ancak büyük kullanıcı kitlelerine erişim sağlayan sitelerde %2’nin altına inmeden desteği kaldırmak mantıklı görünmüyor.

  • Google uygulamalarında geçen sene ie7 desteğini kaldırdı.
  • Facebook yeni zaman tünelinde ie7 desteğini kaldırdı.
  • Drupal 8 ile ie7 desteğini kaldırdı.
  • wordpress 3.3 veya 3.4’den itibaren ie7 desteğini kaldırmayı düşünüyor.

Son olarak Internet Explorer 8′i 7 gibi yorumlama kodu eklediğiniz sitelerden kaldırmayı unutmayın.

Kaynaklar

tarihinde Fatih Hayrioğlu

CSS3’ün güzel özelliklerini yavaş yavaş kullanmaya başladık. CSS3’ün yeniliklerinin yanında önek karmaşası gibi sorunlarımızda var. CSS3’de kodlarımı yazarken farklı tarayıcılar için önek ile kullanmak durumundayız.

Farklı Tarayıcı önekleri;

  • Chrome ve Safari (-webkit-)
  • Firefox (-moz-)
  • Opera (-o-)
  • Internet Explorer (-ms-)

Bu sorunun nedeni CSS3 özelliklerinin hala geliştirilmekte olması ve tarayıcıların geliştirme aşamasında bu özellikleri daha standartlaşmadan kullanmaya ve kullanıcılara kullandırtmaya başlamasından kaynaklanmaktadır. Bu durumu başlangıçta(belki hala) sorun olarak tanımlamasak da çok yoğun kullanımında bir sorun olarak karşımıza çıktığı kesin.

Firefox ve İnternet Explorer9 bu konuda tam onaylanmış özellikler için öneklerden vazgeçip standart kullanımı geçiş yaparak bir nebze olsun sorunu gideriyorlar.

Bir örnek vererek işin ne kadar kötü göründüğüne bakabiliriz. CSS renk geçişi özelliğini tanımlamak için bir kod yazmamız gerektiğinde aşağıdaki gibi bir kod bloğunu eklememiz gerekiyor.

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

Şeklinde bir renk geçişi tanımı göz korkutuyor. Bu kod aslında tek satır

background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

Ancak farklı tarayıcılar için kod yazınca yukarıdaki hali alıyor.

Burada gördüğümüz ve genelde önek sorunları;

  • Çok fazla kod mevcut kodumuzun yığın halini almasına neden oluyor,
  • Düzenlemesi zorlaşıyor,
  • Farklı tarayıcılar için üretilen önekler nedeni ile kod çoğalıyor ve performansı düşürüyor.

gibi sorunlara neden oluyor.

Önek Sıralaması

Burada yazılan öneklerde sıralamanın önemi vardır. Standart dışı önekler önce yazılır, standart önek sona yazılır. Bunun tersi durumlarda bazen sorun yaşayabilirsiniz. Standardın sona yazılmasındaki mantık; farklı tarayıcılar için yazılan önek sonradan kaldırılabilir ve kaldırıldığında sonradan gelen standart tanım daha baskın olması istenir.  

Standart dışı öneklerde ilk -webkit önekinin yazılmasının kesin olamasa da bir avantajı olabilir.

  • -webkit-
  • -moz-
  • -o-
  • -ms-
  • standart

şeklinde bir sıralamayı uygulayabiliriz.

Önek karmaşasını çözmek için bir iki yöntem var. Bunları burada basitçe inceleyeceğiz.

Çevrimiçi Araçlar İle Kod Üretmek

Çözüm önerilerinden birisi kodlamamızı standart tanımlar ile yapıp en son kodu çevrimiçi araçlar yardımı ile

  • http://cssprefixer.appspot.com/
  • http://prefixmycss.com/
  • prefixr.com

tüm tarayıcılar için üretmek olabilir.

prefixr.com’in farklı editörler için api çözümü de var prefixr.com/api/usage/  sitesinden kendi editörünüze uygun apiyi yükleyerek direk editörünüzde(kısayol tuşları yardımı ile) bu işi yapabiliyorsunuz.

Dinamik Olarak(SASS ve LESS) Önek Sorununa Çözüm Üretmek

Öneklere SASS ve LESS ile çözümler üretebiliriz. Bu gibi dinamik yapılır CSS üreten yapılarda başlangıçta bir tanım yapılıp daha sonraki tanımlarımızı bu tanım üzerinden yaparak önek sorununu halledebiliriz.

SASS

@mixin border-radius($values) {
    -webkit-border-radius: $values;
    -moz-border-radius: $values;
    border-radius: $values;
}

div {
	@include border-radius(10px);
}

ve

.border-radius(@values) {
	-webkit-border-radius: @values;
	-moz-border-radius: @values;
	border-radius: @values;
}

div {
	.border-radius(10px);
}

sonuç olarak üretilen CSS

div {
 	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

LESS ve SASS gibi yapıları sitenizde kullanıyorsanız sorunun çözümü için güzel bir seçenek bunlar.

-prefix-free

Ayrıca yine dinamik yapı içine koyabileceğimiz free-prefix yöntemide mevcut. Javascript yardımı ile çözüm üretilen bu yöntemde incelemeye değer. Ben bunun için js eklemeyi pek mantıklı bulmasam da, yerine kullanılabilir diye düşünüyorum.

Sonuç

Sonuç olarak belli bir süre bizim için sıkıntı oluşturabilecek bir sorun olarak görünüyor. LESS ve SASS ile olan çözümler mantıklı geliyor bana. Tabi hepsinin standardı desteklemesi güzel olur :D

Yakın zamanda tarayıcı temsilcileri bu konu hakkında bir toplantı düzenleyerek bir çözüm yolu bulmaya çalışmışlar. 7 çeşit çözüm önerisi sunulan toplantıdan şimdilik bir çözüm çıkmamış gibi görünmüyor. En azından böyle bir sorunu kabul edip çözüm üretmek için toplanılması da bir ilerlemedir.

Toplantıdan çıkan en ciddi çözüm önerisi -webkit- önekinin tüm tarayıcılar tarafından test öneki olarak kabul görmesi isteği. Opera bu konuda bir adım dahi atmış diyorlar. -webkit- in mobil araçlardaki yaygınlığı ve CSS3 özelliklerinin birçoğunu çıkardıklarını düşünürsek mantıklı gibi.

Zamanla göreceği bakalım neler olacak.

Kaynaklar

tarihinde Fatih Hayrioğlu

HTML5 ve özellikleri hayatımız gireli bayağı bir zaman oluyor. Ancak uygulamalara yansıması o kadarda çok değil. Bende bir kaç projede HTML5 uyguladım. HTML5 yenilikleri ve anlamlı etiketleri ile bizlere avantaj sağlıyor.

Kodlamaya başlamadan hemen bir sorun ile karşılaşıyoruz.

Sorun = Internet Explorer

Eşitliği gerçeğe dönüşüyor. Internet Explorer 9’dan önceki sürümlerde HTML5’in yeni etiketlerini ve özelliklerini desteklemiyor. ie6/ie7/ie8 gibi %28 kullanım oranı sahip tarayıcılar için bir çözüm üretmeliyiz. Biraz araştırınca çeşitli çözüm önerileri ile karşılaşıyoruz.

Javascript ile üretilen güzel bir çözüm mevcut. html5shiv olarak adlandırılan bu teknik temel mantık olarak

document.createElement("section");

ile HTML5 eleman desteği olmayan tarayıcılar için js yardımı ile eleman oluşturarak çözüyor. Birde <section> ve diğer blok-level etiketler için display: block eklemesini yapıyor.

Javascript’i pasif yapan kullanıcılar için bazı çekinceleri olan insanlar olsa da, genel olarak gözardı edilebilecek oranda bir yüzde olması nedeni ile HTML5shiv gayet mantıklı bir çözüm bence.

Kullanımı çok basit. Internet Explorer 9 öncesi için şartlı yorumlar ile kontrolü koyup diğer tarayıcılarda yüklenmesini engelleyerek daha mantıklı bir işlem yapıyoruz.

<!--[if lt IE 9]> <script src="dist/html5shiv.js"></script> <![endif]-->

Ayrıca google hostunda da barındırılıyor bu kod

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Bu şekilde daha hızlı bir erişim sağlanmış olur. Tabi büyük projelerin kendilerinde barındırmaları daha mantıklı.

HTML5shiv HTML5’in yeni etiketlerinin desteğini sağlıyor. Diğer api desteği için Modernizr incelemekte yarar var.

Kaynaklar