Makaleye başlamadan önce Internet Explorer 8 standart modda hasLayout kabulünün kaldırıldığını söyleyelim. IE7 uyumluluk modunda hala mevcut.

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

Firefox 12 ile birlikte gelen Sessiz Güncelleme Özelliği bana bu yazıyı yazmak için ilham verdi.  Artık tarayıcı farklılığının sorununun sonu göründü. Chrome bu özelliği ilk getiren tarayıcı ve diğerlerini peşine taktı sürüklüyor. İnternet Explorer’ında bu yönde bir tercih yapacağını duyurması(şimdilik Avusturalya ve Brezilya’da) ile birlikte gelecek için ümitli bakmamıza olanak sağlıyor.

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

CSS3 özellikleri hayatımıza girmeye başladı. Artık projelerimizde CSS3 renk geçişini, metin gölgelendirme(text-shadow), kutu gölgelendirme(box-shadow) kullanabiliyoruz. Kullandıkça görüyoruz ki yeni özellikler güzel ancak eklemek için biraz daha fazla kod yazmak gerekiyor ve bazı durumları oluşturmak için bazı araçlar gerekiyor. Örneğin CSS Gradient Generator vs. gibi

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