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

• http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/
• http://code.google.com/p/html5shiv/
• http://ejohn.org/blog/html5-doctype/
• http://ejohn.org/blog/html5-shiv/
• http://www.pcpro.co.uk/blogs/2011/03/07/making-html5-work-in-old-versions-of-internet-explorer/
• http://drupal.org/project/remysharp_html5shim
• http://debeterevormgever.nl/en/articles/html5-elements-ie-without-javascript (js siz çözüm.)
• http://paulirish.com/2011/the-history-of-the-html5-shiv/ (html5 shiv in geçmişi)
• http://viget.com/inspire/html5-elements-irresponsible-choice-right-now

Uygularımızda CSS3 renk geçişini uyguladıkça filtre uygulamalarında yaşanan sorunlar ortaya çıkmaya başladı. Daha önce bu konuda “İnternet Explorer’da Renk Geçişi Sorunu ve Çözümü” bir sorun ve çözümü yazmıştım.

Bu seferki sorunu şöyle tanımlayabilirim. Renk geçişi uygulanan alanın içindeki bir elemana position:absolute tanımı yapıp kapsayıcı eleman dışına çıkarmak istediğimizde dışa çıkan kısım ie6/ie7 (ie7 beni ilgilendiriyor artık :) görünmüyor.

Araştırdığım kadarı ile bir çözüm yok. Bulabilen varsa yazarsa çok sevinirim. Ben kaçak bir çözüm buldum :D

ie7 için filtre tanımı kaldırarak sorunu giderdim. Ancak diğer ie sürümlerin için bir çözüm oluşturmam gerekti. Bunun için -ms-filtre özelliğini kullanmak bana mantıklı geldi. İnternet Explorer 7’nin %5’in altına düşmüş oranı ile görmezden gelinebileceğini düşünüyorum. :D

IE7 masum görünüyor ama bizi uğraştırmıyorda değil. Yakınsa son bulacak olması bizi sevindiriyor.

Kaynak

• http://clogsandmills.com/blog/ie6-ie7-filter-bug/
• http://www.briangervais.com/blog/css-gradients-with-internet-explorer-ie6-10
• http://brian.pontarelli.com/2011/09/20/ie-filter-gradient-and-positioning-bug/

Bu makalede CSS3 transform 2 Boyutlu Dönüştürme konusunu inceleyeceğiz. 3 Boyutlu Dönüştürme konusuna daha sonra değineceğim.

2 Boyutlu Dönüştürme(2d Transform)

CSS 2d Transform özelliği  iki boyutlu düzende elemanları dönüştürmeye olanak sağlıyor. Tabi böyle tanımlama yaparak anlamak zor en kolayı özellikleri tanımlayıp örnek yapmak.

Dönüştürme tanımları 3 bölümde inceleniyor.

• transform Özelliği
• transform-origin özelliği
• Dönüştürme fonksiyonları (transform özelliği değerleri – translate, rotate, scale ve skew)

Aslında transform özelliği ve değerleri bir kabul edilirse iki adet genel tanımımız var. Bu özellikler bize çok büyük kolaylık sağlıyor. Dönüştürme özellikleri desteğini her tarayıcı kendi ön eki ile sağlamaktadır. Ben burada tanımlamalarımı standart olan özellik ile göstereceğim, tabi örneklerde tüm tarayıcı kodlarını kullanacağım.

transform Özelliği

transform özelliği none, bir veya daha fazla transform değeri alır. Genel kullanımı

Aldığı değerleri dönüşüm fonksiyonları bölümünde detaylı bir şekilde inceleyeceğiz.

p{
	transform: translate(-150px, 75px);
}

Uygulandığı paragrafı kendi orijin noktasına göre 75px sağa ve 150px aşağıya öteleyecektir. Göreceli bir tanımda(örn: % gibi) referans olarak elemanın kapsayıcısını değil kendi orijinini alacaktır.

transform-origin Özelliği

Dönüşümün orjin olarak nereye referans alacağını tanımlamamızı sağlar.

Başlangıç değeri olarak 50% 50% gelir. Bu elemanın tam ortasını gösterir.(Bundan dolayı elemanı ölçeklendirdiğimizde veya döndürdüğümüzde elmanın ortasında göre işlem yapar.) Üstten 50% soldan 50%. Biz bu değeri değiştirebiliyoruz. Değer olarak CSS değerleri tanımlanabilir. İlk değeri X ekseninden mesafesini, ikinci değer Y sekseninden mesafesini tanımlar.

p{
	transform-origin:0, 0;
}

Yüzde değerlerinde referans olarak elemanın kutu alanı alınır.

Daha iyi anlamak için aşağıda da göreceğimiz döndürme(rotate) uygulayarak görelim.

transform: rotate(-10deg);

Yukarıda görsel olarak verilmiş örnekte kırmızı olanlar normal halleri, gri olanlar ise dönüşüm uygulanmış hallerini göstermektedir. İlk eleman başlangıç değeri olan center center uygulanmıştır, bu nedenle eleman mutlak konumuna göre hareket etmiştir. İkinci eleman left center tanımlanmıştır, bu nedenle eleman sol tarafın dikey ortasına göre dönmüştür. En son örnekte 100% 50% tanımı yapılmıştır, bu nedenle bu örnek sağ tarafa dualı dikeyde ortalı bir şekilde döndürülmüştür.

Dönüşüm Fonksiyonları

Dönüşüm fonksiyonlar translate(değiştir – dönüştür), rotate(döndürme), scale(ölçeklendirme) ve skew(eğme) olmak üzere 4 adettir. Birde rotate hariç bunların X ve Y için ayrı tanımlarıda var. Aşağıda detaylı incelemede göreceğiz.

translate(değiştir – dönüştür)

CSS3 sayesinde javascript veya flash’a gerek kalmadan animasyon veya dönüştürme işlemlerini yapabiliyoruz. Biz burada bir CSS3 transform özelliği ile nasıl sayfa içindeki elemanları taşıyacağımızı göreceğiz.

translate değeri elemanı bir noktadan başka bir noktaya taşımamızı sağlıyor.

  translate (x, y)

Bu sayede biz elemanı orijinal konumundan x-ekseninde soldan mesafesi ve y-ekseninde üstten mesafesini tanımlayarak taşıyabiliyoruz. Basit bir kullanımı vardır.

Bir örnek yapalım;

  #tasinan{   
      transform:translate(150px,100px);  
  }

- Eksene Özgü Yöntemler

Elemanları sadece bir eksen hareket ettirmek için translateX ve translateY özelliklerini kullanabiliriz.

Yukarıdaki örneği

  #tasinan{   
      transform:translateX(150px);   
  }

aynı şekilde y ekseninde hareket için

  #tasinan{   
      transform:translateY(100px);   
  }

şeklinde uygulanabilir.

- Animasyon Yardımlı Örnek

İleride göreceğimiz transition özelliği yardımı ile ufak bir kod ile animasyon oluşturabiliriz. Hem translate özelliğini daha iyi anlamış oluruz.

  #tasinan{       
      transition: all 5s;   
  }

Fare imlecinin mavi alan üzerine getirdiğimizde animasyonlu bir şekilde kutu translate komutu ile atadığımız yeni yerine hareket edecektir. İleride CSS3 transition konusunda daha detaylı göreceğiz.

rotate(Döndürme)

rotate değeri yardımı ile sabit bir noktaya göre elemanı belirlenen açı ile döndürebiliyoruz. Bu sabit nokta transform-origin tanımı ile değiştirilebiliyor.

  rotate(<açı>)

Bir örnek ile konuyu daha iyi anlayalım.

  .deneme{
      transform:rotate(45deg);
  }

Yukarıdaki kod ile tanımlanan HTML elemanını 45 (deg-degrees)derece döndürdük. Saat yönüne çevirdiğimiz gibi, eksi değer vererek saat yönünün tersinede döndürme işlemi yapabiliyoruz.

Döndürme tanımlarında 4 adet değer var. deg(açı), grad(gradyen), rad(radyen) ve turn.

turn değerini biraz daha inceleyelim. turn değeri dairenin etrafını gösteriyor.

  .deneme{
      transform:rotate(.5trun);
  }

0.5 olarakta tanımlanabilecek bu değer elemanımızı yarım daire kadar döndürecektir.

- Animasyon Yardımlı Örnek

Bir örnekte animasyonlu yapalım.

  .deneme{
      transition: all 0.5s;
  }

  .deneme:hover{
      transform:rotate(45deg);
  }

Yukarıdaki örnektede görüldüğü gibi birçok güzel uygulama bu yöntem ile yapılabilir.

scale(Ölçekleme)

scale değeri yardımı ile belirlene elemanın X ve Y ekseninde ölçeğini büyütebilir veya küçültebiliriz.

3 adet ölçeklendirme fonksiyonu vardır.

• scale(<sayı>[, <sayı>])
• scaleX(<sayı>)
• scaleY(<sayı>)

Bir örnek ile konuyu daha iyi anlayalım.

  .denemeBuyut{
      transform:scale(1.5);
  }

Daha iyi bir anlatım için örnekte iki kutu kullandım birisi kutunun normal hali(mavi kutu), diğer ise kutunun ölçeklenmiş hali(kırmızı kutu). Altta kalan kutunun görünmesi için üstteki kutuya saydamlık verdim.

- Eksene Özgü Yöntemler

Elemanları sadece bir eksen ölçeklemek için scaleX ve scaleY özelliklerini kullanabiliriz.

Yukarıdaki örneği

  .denemeBuyut{
      transform:scaleX(1.5);
  }

aynı şekilde y ekseninde hareket için

  .denemeBuyut{
      transform:scaleY(2);
  }

şeklinde uygulanabilir.

- Animasyon Yardımlı Örnek

Bir tanede animasyonlu bir örnek yapalım.

skew(eğme)

skew ile eleman veya eleman gruplarına X ve Y eksenin için belirli açılar verilerek eğiklik ve yamukluk elde edebiliyoruz. 3 adet skew tanımımız vardır;

• skew(<açı> [, <açı>])
• skewX(<açı>)
• skewY(<açı>)

Eğiklik tanımı yaparken tek tanım yapabildiğimiz gibi iki tanım ile x ve y için farklı açı değerleride belirleyebiliyoruz.

Bir örnek yapalım.

  .deneme{
      transform: skew(10deg, 20deg);   
  }

- Eksene Özgü Yöntemler

Elemanları sadece bir eksen eğmek için skewX ve skewY özelliklerini kullanabiliriz.

Yukarıdaki örneği

  .denemeBuyut{
      transform:skewX(10deg);
  }

aynı şekilde y ekseninde eğiklik için

  .denemeBuyut{
      transform:skewY(20deg);
  }

şeklinde uygulanabilir.

- Animasyon Yardımlı Örnek

Bir tanede animasyonlu bir örnek yapalım.

Çoklu Değer Kullanımı

Dönüşüm fonksiyonları yukarıda tanımladığımız gibi tek tek tanımlanabildiği gibi kısaltma olarak arada boşluk bırakılarak birliktede tanımlanabilir.

  div {
       transform: translate(10px 30%) scale(2.0) rotate(45deg) skew(5deg, 20deg);
  }

Böylece kodlamamızda bayağı bir kısaltmaya gitmiş oluruz. Çoklu tanım uygulandığında bu fonksiyonlar soldan sağa doğru sırası ile uygulanacaktır.

Matris Sistemi

w3c’nin geliştirmekte olduğu matris sistemi ile transform tanımı yapımı karmaşık bir yapıya sahiptir. Muhtemelen kullanmayacağımız bir yapı yada belirli araçlar ile oluşturulacak bir kod yapısına sahip. Dönüştürme fonksiyonlarının her biri matriste kendine bir yer edinerek oluşturulan değerdir. Örneğin scale(1.5,1.2) tanımı matris olarak aşağıdaki şekilde gösterilir

1.5    |    0    |    0
0    |    1.2    |    0
0    |    0    |    1

Bu yazımı css koduna çevirirsek;

  transform: matrix(1.5, 0, 0, 1.2, 0, 0)

Matris değerleri hakkında daha fazla bilgi için http://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace inceleyin.

Çevrimiçi Dönüşüm Aracı

CS3 bize birçok kolaylık sağlamaktadır. Bununla birlikte kodlama biraz karmaşık hal almaktadır. Bu karmaşayı engellemek amacı ile de çeşitli araçlar geliştirilmektedir. CSS3 2B dönüştürme için http://westciv.com/tools/transforms/index.html  sayfasındaki araç kullanılabilir. Bize bir çok bakımdan kolaylık sağlayan bir araç, denemeye değer.

ie6-8 için çözüm http://www.useragentman.com/IETransformsTranslator/ sitesindeki araç ile üretilmiştir. Dönüştürme kadar esnek olmasada çok acil ihtiyaçlar için kullanılabilir.

Sonuç

CSS3 ile web sayfası öğelerinin görünümünü değiştirebileceğimizi gördük. Daha önce javascript yardımı ile yaptığımız bu işleri artık CSS3 yardımı ile yapacağız. CSS3 ile yeni gelen bu özellikleri bazı sorunları olsa da zamanla bu sorunlarında aşılması ile çok büyük bir kolaylıklar sağlayacaktır.

Kaynaklar

• http://www.vanseodesign.com/css/transforms/
• http://gazpo.com/2011/02/css3-transforms/ (güzel)
• http://www.westciv.com/tools/transforms/index.html (çevrimiçi araç)
• http://www.w3.org/TR/css3-2d-transforms/
• http://24ways.org/2009/going-nuts-with-css-transitions
• http://www.the-art-of-web.com/css/css-animation/
• http://css3.bradshawenterprises.com/
• http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
• http://www.shayhowe.com/tutorial/css3-animated-owl-tutorial/
• http://www.t-infection.com/css3de-transforms-donusturme-islemleri/ (Türkçe kaynak)
• http://www.useragentman.com/IETransformsTranslator/ (ie için çözüm)
• http://www.standardista.com/css3-transforms
• http://www.webdesigncreare.co.uk/blog/html-css/css3-transforms.html
• http://professionalaspnet.com/archive/2011/03/17/IE9-Supports-CSS3-Transforms_2100_.aspx
• http://www.sitepoint.com/a-primer-on-css3-transforms/
• https://developer.mozilla.org/en/css/-moz-transform
• http://blog.typekit.com/2011/01/25/case-study-getting-hardboiled-with-css3-2d-transforms/
• http://css3.bradshawenterprises.com/transforms/
• http://doctype.com/javascript-image-zoom-css3-transforms-calculate-origin-example
• http://designshack.co.uk/articles/css/achieving-multi-step-animations-with-css-transitions/
• http://www.impressivewebs.com/css3-transitions-without-hover/ (güzel animasyon olmuş)
• http://speckyboy.com/2011/08/15/how-to-build-a-fully-functional-css3-only-content-slider
• http://www.impressivewebs.com/replace-flash-with-css3-animation/
• http://www.netmagazine.com/tutorials/masterclass-css-animations
• http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/
• http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/ (çok güzle menü örnekleri)
• http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css3-transitions-and-transforms-from-scratch/
• http://www.dynamicdrive.com/style/csslibrary/item/spinning_icons_using_css3_transform/
• http://designshack.net/articles/css/mastering-mouse-enter-and-exit-events-with-css-transitions/
• http://www.splashnology.com/article/cross-browser-2d-transformations-with-animation/1827/
• http://www.htmlgoodies.com/html5/css/learn-css3-from-a-z-2d-transformations.html#fbid=CH7CpzZeM2i
• http://johnbhall.com/iphone-4s/ iphone 4s örnek
• http://www.dynamicdrive.com/style/csslibrary/item/spinning_icons_using_css3_transform/ Basit döndirme örneği
• http://css3.bradshawenterprises.com/transforms/
• http://css3playground.com/slinky.php
• http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ rotate ie için
• http://www.impressivewebs.com/alternative-units-css3-rotate-transforms/ (farklı değerler)
• http://www.html5rocks.com/en/tutorials/webgl/webgl_transforms/
• http://ricostacruz.com/jquery.transit/ (jquery yardımı ile test)
• http://www.blackinci.com/css/59-css3-ile-2ci-boyuta-gecis-transform.html
• http://www.developerdrive.com/2012/02/moving-web-page-elements-using-the-css3-translate-transform/
• http://www.developerdrive.com/2012/02/scaling-web-page-elements-using-the-css3-scale-transform/
• http://www.developerdrive.com/2012/02/skewing-web-page-elements-using-the-css3-skew-transform/
• http://www.developerdrive.com/2012/05/rotating-web-page-elements-using-the-css3-rotate-transform/
• http://www.webdirections.org/blog/2d-transforms-in-css3/
• http://www.impressivewebs.com/alternative-units-css3-rotate-transforms/ (rotate değerleri)
• http://msdn.microsoft.com/en-us/magazine/gg709742.aspx
• http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

Biraz araştırınca bu sorunun hasLayout’tan kaynaklanan bir sorun olduğunu gördüm.

CSS3 ile renk geçişi için http://www.colorzilla.com/gradient-editor/ sitesini kullanıyorum.

Sorunu görmek için aşağıdaki gibi bir örnek yaptım;

#test{
    padding:10px;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
    background: linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}

ie7’de(6’yı kâle bile almıyorum :D) renk geçişinin uygulanmadığını görüyoruz.

Çözüm ise bir önceki hasLayout makalesinde olduğu gibi sadece zoom:1 eklemek.

Ben tüm renk geçişi kodlarımın sonuna unutmazsam zoom:1 ekliyorum sizede öneririm.

Kaynaklar

• http://stackoverflow.com/questions/7257170/background-gradient-ie7-css-problem
• http://stackoverflow.com/questions/213750/gradient-colors-in-internet-explorer
• http://www.fatihhayrioglu.com/internet-explorer-haslayout-kabulu-ve-sorunlari/

hasLayout özelliği hakkında bir şeyler bilmememiz normal çünkü biz daha çok sorun kısmını görüyoruz. Aslında bazı kaynaklarda “Boyutlandırma Hatası” olarak da geçiyor bu sorunlar. hasLayout Internet Explorer’un yorumlayıcı motorunun bir kabulü olarak tanımlanabilir. Internet Explorer Eski bir yorumlayıcıyı(Mosaic) kullanıyordu. Bu yorumlayıcı her bir elemanı(satıriçi elemanlar dahil) bir kutu olarak kabul eder ve kutunu dışına çıkışa izin vermez. Bir hücrenin tablonun dışına çıkmasına izin vermediği gibi. Bildiğimiz tablolu kodlama mantığı yani.

Yıllar sonra Microsft CSS için Trident motorunu adapte etmeye başladı. Ancak CSS ile birlikte her şeyin dikdörtgen bir yapı içinde olduğu kabulü eskimeye başlar. CSS elemanın dışına taşmayı destekliyor. float uygulanmış elemanlar veya içeriği kapsayıcısından uzun olan elemanlarda türetilmeye başlandı.

Micrsoft bu sorunu düzeltmek için bir yama yapmayı planladı. Sonuç olarak hasLayout özelliğini türettiler. Her element için hasLayout değeri true veya false olarak ayarlanır. Eğer true olarak tanımlandı ise kutu kendini kapsar. Yani içinde float uygulanmış bir eleman veya dışarı taşan bir eleman varsa bunların hepsini kapsar. Eğer hasLayout değeri false ise, eleman kendini kapsamaz ve kapsama işini üst elementin yapmasını bekler. İşte sorunda tam burada başlar.

hasLayout özelliği bir CSS özelliği değildir, yani biz hasLayout:true diye bir tanım yaparak bu sorunları halledemiyoruz.

• <html>, <body>
• <table>, <tr>, <th>, <td>
• <iframe>, <embed> (non-standard element), <object>, <applet>
• <img>
• <hr>
• <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
• <marquee> (don’t ever use this one, non-standard and annoying)

Etiketlerinin başlangıç hasLayout değeri true olarak geliyor.

Ayrıca bazı özellikler tanımlandığında hasLayout true olur;

• position: absolute
• float: left veya right
• display: inline-block
• width: herhangi bir değer veya auto
• height: herhangi bir değer veya auto
• zoom: herhangi bir değer
• writing-mode: tb-rl

ie7 ile gelen yeni özellikler;

• overflow: hidden veya scroll veya auto
• overflow-x: hidden veya scroll veya auto
• overflow-y: hidden veya scroll veya auto
• min-width: herhangi bir değer veya auto
• max-width: herhangi bir değer veya auto
• min-height: herhangi bir değer veya auto
• max-height: herhangi bir değer veya auto

Microsoft IE 8 standart modda bu sorunu çözdü.

Yukarıdaki özellikleri  atamak her zaman mümkün olmuyor ama sadece Internet Explorer’a özel olan zoom ve writing-mode özellikleri kullanılabilir. Tabi bu özelliklerin standartlar dahilinde değildir.

zoom özelliği sayfanın yakınlaştırmak için kullanılır. 2 değeri sayfayı iki kat büyüterek gösterecektir. 1 değer ise sayfanın normal boyutlarda görünmesini sağlayacaktır. zoom: 1 değeri hasLayout değerini true yaparak bize çözüm sağlayacaktır.

Bu özellik sadece Internet Explorer için geçerlidir.

Sonuç

Bu yazıyı yazmamdaki ana nedenlerden birisi İnternet Explorer 7’nin yorumlayıcı motorunun ne kadar eski bir teknoloji kullandığını göstermek. Yakın zamanda ie6’yı öldürdük. Gerçi hala ie6 için kod yazan arkadaşlar var galiba bu yönde mesajlar geliyor bana, onlar için yapacak pek bir şeyim yok(Allah kurtarsın!). Benim sorunum ie7’nın o kadarda masum olmadığını göstermek. ie7’nin kullanım yüzdesi %7(makaleyi yazdığımda idi şimdi %4,5 kadar düştü) civarında ve hızla düşüyor. Normalde %5’in altına inen tarayıcıların desteğini kaldırmakta sorun yok, tabi büyük çaplı sitelerde bu oran biraz daha düşüyor. İnternet Explorer’ın tüm sürümleri sorunlu evet biliyorum. İnternet Explorer desteğini tümden kaldırsak en iyisi ama bunun imkanı yok maalesef.

Bu sene ortası veya sonuna doğru ie7 desteğini kaldıracağız inşallah. Ancak her şey bitmiyor. CSS3’ün birçok özelliği kodlama hayatımıza girmiş durumda ve İnternet Explorer’un mevcut sürümlerinden ie8 ve ie9’un CSS3 desteği yok denecek kadar az. Farklı tarayıcılar için kod yazma serüvenimiz devam edecek yani.

Bir sonraki yazım İnternet Exlorer 7’nin kaybettirdikleri olacak.

Kalın sağlıcakla

Kaynaklar

• http://haslayout.net/haslayout (site)
• http://www.satzansatz.de/cssd/onhavinglayout.html (detaylı)
• http://reference.sitepoint.com/css/haslayout
• http://msdn.microsoft.com/en-us/library/bb250481(v=vs.85).aspx (detaylı, kaynağından)
• http://css-class.com/articles/explorer/guillotine/ (hasLayout hatası)
• http://www.alsacreations.com/article/lire/76-haslayout-internet-explorer.html (farklı dil)
• http://jaspan.com/ie-inherited-margin-bug-form-elements-and-haslayout (hasLayour ve sorun)
• http://onwebdev.blogspot.com/2011/02/css-internet-explorer-bugs-and.html (hasLayout ve sorun)
• http://stackoverflow.com/questions/1794350/what-is-haslayout
• http://stackoverflow.com/search?q=hasLayout
• http://www.webmasterworld.com/forum83/6999.htm
• http://msdn.microsoft.com/en-us/library/ms533776.aspx

Arayüz geliştiricileri olarak bizler en büyük zaman kaybını yazdığımız kodu farklı tarayıcılar için düzenlenmesinde yaşıyoruz. İnternet Explorer 6 ile uğraşan bizler neler çektiğimizi çeşitli makalelerde paylaşmıştım. Mevcut durumda bizler ie7, ie8, ie9, Firefox, Chrome testlerini yapıyoruz. Şu an ki durumda Chrome’un yükselişi ve İnternet Explorer’ın da Sessiz Güncelleme Özelliğini şimdilik Brezilya ve Avustralya da ama bu sene içinde tüm dünyada devreye alması ile bu sorunda yıl sonunda ciddi bir azalma yaşayacağını düşünüyorum.

Pazarın büyük oyuncularının bu yönde bir tercih yapması bizleri sevindirdi. Microsoft yine ağırdan alıyor ama olsun bu kadarınada şükür.

Ben tarayıcıların antivirus programları gibi sessiz güncelleme özelliğine sahip olmalarını düşünmüşümdür baştan beri. Gelinen bu nokta bu nedenle beni çok sevindiriyor. Çünkü son kullanıcılar tarayıcının sürümünün farkında bile değil hatta hangi tarayıcı kullandığının farkında değil. Son kullanıcının internete çıkış noktası olan tarayıcılar çok önemli bir araç. Bu araçları otomatik güncellemek insanlara yenlikleri otomatik takip imkanı sağlamak bir avantaj bence. Eğer bu otomatik güncellemeden rahatsızsanız bu durumu kaldırmak için çözümde sunuyor tarayıcılar.

Tarayıcı farklılıkları için harcadığımız zamanı artık HTML5 ve CSS3 yeniliklerini kullanmak için ayıracağız.

Kaynaklar

• http://robertnyman.com/2011/04/14/web-browser-versions-are-dead-automatic-updates-is-the-future/
• http://lea.verou.me/2009/02/silent-automatic-updates-are-the-way-to-go/
• http://www.sitepoint.com/microsoft-adds-ie-auto-update/#fbid=qIRziNGN-f6
• http://venturebeat.com/2012/04/24/firefox-12/
• http://www.teknoblog.com/internet/internet-explorera-getirilen-otomatik-guncelleme-ozelligi-ie9un-kullanimini-artiriyor.html?
• http://davidwalsh.name/silent-browser-upgrades

Benzer bir durum kutu gölgelerinde(box-shadow) karşılaştım. Bazı kutu gölgeleme işlerini bir köşeye kaydetmeye başladım çünkü kodu o kadarda akılda kalıcı değil.

Sonra bunu yazı haline getirmek istediğimde gördüm ki zaten birçok kişi bu konuda yazı yazmış. Bende bunları toparlayıp bir yazı çıkarayım dedim. Bu yazıyı bir yere kaydedin lazım olacak muhakkak. Aslında bu örnekler yakında editörler tarafından sunulacaktır diye düşünüyorum.

kutulara gölge verme yazımızı okursanız kutu gölgeleri hakkında bilgi sahibi olabilirsiniz. Kutuları 4 köşe olduğunu düşünürsek.

4 Köşeye gölge vermek

Normal box-shadow değerleri dikey ve yatayda değerler verilince hep açılı gölgeler veriyor. Biz tüm kutunun etrafına gölge vermek için; blur değeri ve spread  değerini kullanıyoruz.

div {
-webkit-box-shadow: 0 0 6px 4px black;
-moz-box-shadow: 0 0 6px 4px black;
box-shadow: 0 0 6px 4px black;
}

blur değeri spread  değerinden büyük ise farklı,

div {
-webkit-box-shadow: 0 0 4px 6px black;
-moz-box-shadow: 0 0 4px 6px black;
box-shadow: 0 0 4px 6px black;
}

blur değeri spread  değerinden küçük ise farklı bir gölge efekti görüyoruz.

Çoklu Kenar Çizgisi Oluşturmak

Önceki makalede bahsettiğimiz gibi, çoklu kenar çizgileri oluşturmak için; spread  değeri yardımı ile yapılan bu etki için diğer değerler sıfırlanmalıdır.

div {
border: 3px solid orange;
-webkit-box-shadow: 0 0 0 3px black, 0 0 0 6px red;
-moz-box-shadow: 0 0 0 3px black, 0 0 0 6px red;
box-shadow: 0 0 0 3px black, 0 0 0 6px red;
}

Tek Köşeye Gölge Vermek

Kutuların sadece x veya y köşelerinden göstermek için box-shadow tanımının sınırlarınız zorlamamız gerekiyor. Bu iş için bir kaç yöntem mevcut, ben burada hepsini paylaşıyoruz avantaj ve dezavantajlarını görerek karar vermek size kalmış.

1. Yöntem bir köşeye gölge verirken aynı zamanda diğer köşelere kenar çizgisi atayarak.

div {
-webkit-box-shadow: 1px 0 2px black;
-moz-box-shadow: 1px 0 2px black;
box-shadow: 1px 0 2px black;
}

2. Yöntem Diğer köşelere herhangi bir kenar çizgisi veya gölge atamadan sadece bir köşeye gölge tanımlamak;

div {
 width:250px;
 height:250px;
 background: white;
 -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
 -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
    box-shadow: 0 0 0 4px white, 0 6px 4px black;
}

Mantık olarak iki gölge tanımı yapıyoruz, birincisi spread ile kutu ardalan rengi ile aynı renkte 4px bir alan oluşturuyoruz, ikinci gölge tanımı ile de bu tanımladığımız boş alanın dışına çıkacak köşeye daha fazla değer verip dışarı çıkmasını sağlıyoruz.

3. Yöntem Bu örnekte kenar çizgisi oluşturulan yeni kutunun biraz içinde kalır.

div {
 width:250px;
 height:250px;
 background: white;
 -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
 -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
    box-shadow: 0 0 0 4px white, 0 6px 4px black;
    border:1px solid #f00;
}

Eğer kenar çizgisi kullanılacaksa;

div {
 width:250px;
 height:250px;
 background: white;
 -webkit-box-shadow: 0 8px 6px -6px black;
 -moz-box-shadow: 0 8px 6px -6px black;
 box-shadow: 0 8px 6px -6px black;
    border:1px solid #f00;
}

Blur değeri kadar eksi spread değeri atayarak bu çözüm oluşturulmuştur.

4. Yöntem :before seçicisi yardımı ile absolute tanımlı gölge eklenir.

div {
 width:250px;
 height:250px;
    position: relative;
    padding: 0 7px 0 0;
    overflow: hidden;
}

div:before {
  position: absolute;
  content: ' ';
  top: 0px;
  right: 7px;
  bottom: 0;
  left: 0;
  background-color: transparent;
  box-shadow: 0 0 5px black;
  border: 1px solid red;
}

Çıkmasını istediğimiz kenara padding tanımı yapılır, :before seçicisi ile o köşeye ait kenar değeri padding ile aynı tanımlanır. :before seçicisine box-shadow tanımı yapılır yapılan padding tanımından fazla değer içermelidir.

3 Köşeye Gölge Tanımlama

Yukarıdaki 4.yönteme benzer bir kullanım ile yapılır.

div {
width:250px;
height:250px;
position: relative;
padding: 7px 0 7px 7px;
overflow: hidden;
}

div:before {
  position: absolute;
  content: ' ';
  top: 7px;
  right: 7px;
  bottom: -7px;
  left: 7px;
  background-color: transparent;
  box-shadow: 0 0 5px black;
  border: 1px solid red;
}

Yukarıdaki yöntemin tersi yapılır ve kaldırılacak köşeye eksi değer atanır.

Sonuç

CSS3 bizi resim yönetme araçlarına bağlı olmaktan olduğunca kurtarmaya çalışıyor. Box-shadow bu kurtarma yöntemlerinin en güzellerinden birisi. Ben yukarıda genelde iş yaparken lazım olan örnekleri sergiledim. Kaynaklardaki linklerde box-shadow özelliği ile yapılmış çok farklı gölge uygulamaları mevcut, bu uygulamaları incelemekte yarar var. Tasarımları HTML’e çevirirken bu örneklerin aklımızın bir yanında durmasında fayda var. Tasarımda gördüğümüz birçok gölge uygulamasını box-shadow ile halledebiliyoruz. Birçoğunu diyorum, ama hepsi diyemiyorum, çünkü tasarımcıların sınırları belli olmadığı için hepsi demek zor.

box-sahdow müşteriyi patronu ikna edebildiğimiz yerlerde uygulayabildiğimiz özellikler, ama gerçekten arayüz geliştiriciye büyük kolaylıklar sağlıyor.

Kaynaklar

• http://theburningmonk.com/2010/12/having-fun-with-css3-box-shadow-property/ (box-shadow özelliği)
• http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
• http://matthamm.com/box-shadow-curl.html (kelebek köşe örneği)
• http://www.webdesignshock.com/css3-box-shadow/
• http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow
• http://www.viget.com/inspire/39-ridiculous-things-to-do-with-css3-box-shadows/
• http://erenemre.com/556
• http://blog.syndicate-fx.com/code-snippets/css3-boxshadow-effects/
• http://www.ballyhooblog.com/realistic-css3-box-shadows/
• http://www.sitepoint.com/pure-css3-paper-curl/
• http://www.css3.info/preview/box-shadow/
• http://www.wewillbeok.com/likeacastshadow/ (farklı bir örnek)
• http://toolboxdigital.com/2011/03/css3-3d-gradient-box/
• http://daneden.me/2011/11/a-non-scientific-box-shadow-experiment/
• http://www.paulund.co.uk/creating-different-css3-box-shadows-effects
• http://blog.w3conversions.com/2011/09/css3-spread-value-and-box-shadow-on-one-side-only/ (makaleye örnek)
• http://starikovs.com/2011/11/09/css3-one-side-shadow/
• http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ Örnekler Sayfası
• http://translate.google.com/translate?hl=en&sl=auto&tl=en&u=http%3A%2F%2Fwww.alsacreations.com%2Ftuto%2Flire%2F1338-css3-box-shadow-ombre.html (box-shadow güzel)
• http://www.creativejuiz.fr/blog/tutoriels/ombre-avancees-avec-css3-et-box-shadow (güzel incele)

Geçen seneye şöyle bir bakalım;

HTML5 ve CSS3 kendini iyice hissettirmiş. CSS3 konuları hakkında birçok makale yazmışım. Önümüzdeki sene inşallah CSS3 konularını tamamlamak amaçlarımdan biri. Bir diğeride HTML5 konularını tamamlamak.

Geçen sene bir başka önemli gelişme ise ie6′dan kurtulmuş olmak ve yeni nesil tarayıcıların(Chrome, Firefox ve Opera) kullanım oranlarının artmış olması.

Son olarak farklı mecralardan internete erişim arttı. Ben bu konuda pek bir şeyler yazmasam da gelişmeyi görmek lazım.

Ne diyelim.

Allah sağlık ve sıhhat verdikçe devam edeceğiz.

Internet Explorer 6 Sonrası Hayat yazısı ie6 özelinde aslında tarayıcı desteği konusunu ele almaktadır.

Daha önce benzer bir yazı yazmıştım ama bu sefer kod yazdıktan sonraki durumuda anlattım.

CSS’de de benzer şekilde nadiren kullandığımız özellikler var. İşin özüne gelelim. Ben şimdiye kadar hiç kullanmadığım Genel Kardeş Seçicilerini kullanma imkanı buldum. Kullandığım yerde bana çok büyük kolaylık sağladığı için sizlerle paylaşmak istedim.

Genel Kardeş Seçicileri; aynı seviyedeki elemanları yakalamak için CSS2.1’in bize sunduğu güzel özelliklerde güzel bir özellik. ie6’nın desteklememesi en büyük sorun idi. İnternet Explorer 6 sürümü desteğini kaldırdıktan sonra bu seçiciyi rahat rahat kullanabiliyoruz artık.

Karşıma çıkan iş ve Genel Kardeş Seçicisinin bana sağladığı kolaylık.

Şeklinde bir liste veya menümüz var. Burada her üç öğenin olduğu durumlarda var, sadece bir tanenin olduğu durumlarda. Tek bir eleman olduğunda aradaki çizgi yok. İki veya daha fazla eleman olduğunda iki eleman arasında bir çizgi konuyor.

Tam bu noktada Genel Kardeş Seçicileri devreye giriyor.

li  ~ li {
border-top:1px solid #f00;
padding-top:5px;
margin-top:5px;
}

Tanımı tüm dertlerimize son veriyor. Eğer tek eleman varsa bu seçici es geçiliyor. Ama iki veya daha fazla eleman var ise bu seçici devreye giri""yor ve ilk eleman hariç tüm elemanların üstünü çiziyor ve mesafeleri ayarlıyor.

Daha önceleri javascript veya dinamik bir dil ile çözüm ürettiğimiz bu durum için CSS ile çözüm bulmak süper bir duygu.

Aynı sorunu first-child ile çözebileceğim aklıma geldi akşam bir an. Tabi iki satır kod bloğu oluyor. Minimum kod ile çözmek istersek Genel Kardeş Seçicilerini tercih edeceğiz.  :D

Kalın sağlıcakla.