Webkit, benim pek bir sevdiğim Safari ve Chrome'un alt yapısını oluşturan tarayıcı mimarisi, geçenlerde Microsoft'un CEO'su Steve Ballmer tarafından ilgi çekici olarak yorumlanmıştı.

E doğal olarak yüreklerimiz hopladı, acaba Microsoft tüm dertlerini bir kenara koyup adam gibi bir tarayıcı mimarisini, Webkit'i mi tercih edecek diye. İlgiliyizden öte "düşünebiliriz" diye bir söylemde de bulununca webcilerin gözleri parladı, içini umut kapladı. Düşünsenize, artık IE için saç baş yolmaya gerek kalmayacaktı. Hatta neredeyse artık tarayıcı derdi diye birşey kalmayacaktı ki...

Ballmer yine açıklama yaptı ve Webkit ile ilgili öyle bir düşünceleri olmadığını söyledi. Hevesimiz kursağımızda kaldı, gerçek hayata geri döndük.

Hatırlarsanız Webkit destekli Safari'nin @font-face desteğinden bahsetmiş, bunun webde istediğimiz yazı tipini kullanabilmemiz için ne kadar önemli bir adım olduğundan söz etmiştim.

Firefox da 3.1 betasıyla artık @font-face desteğini veren tarayıcılardan. Henüz @font-face'in faydaları/zararları tam olarak kesinleşmemiş, bir standarta bağlanmamış olsa da bu tür gelişmeler ileride webde kısıtlamaların daha az olacağına işaret. Ancak yine de Firefox'un yazı tiplerini yumuşak kenarlı göstermemesinden dolayı bu özellikten Safari kadar keyif alıp alamayacağımızı merak ediyorum.

Yeni beta ile gelen bir diğer özellik ise GeoLocationverisi sağlayan Geode eklentisi. Geode basit olarak bir GPS gibi çalışıyor ve sunucuya sizin bulunduğunuz lokasyonun bilgisini gönderiyor, aynen mobil uygulamalarda olduğu gibi.

Geode sayesinde kullandığınız web uygulamaları sizin yerinizi bileceği için size daha anlamlı sonuçlar vermeye çalışacaklar. Yani GeoLocation anlamlı webin bir parçası. Örneğin Google'ın hangi şehirde/mahallede olduğunuzu bilmesi (sanki bilmiyor mu?) ve arama sonuçlarınızı daha da özel hale getirmesi gibi.

Eğer bir web sitesi/uygulaması geliştiriyorsanız özellikle geliştirme aşamasında CSS / JS dosyalarında önbellek sorunları yaşıyor olabilirsiniz. Bu sorun basit olarak, yaptığınız değişikliğin tarayıcıya yansımamasıdır. Değişiklik sunucuda bulunur lakin tarayıcı önbelleğine aldığı için görünemez. Aşmanın yolu ise genellikle Ctrl + F5 tuşudur.

Ancak böyle bir durumda ziyaretçilerinize Ctrl + F5 yapın demek kullanışsız olacağı için bunu kendi tarafınızda çözmeniz en uygunu olacaktır. Bunun için bu tür dış dosyaları çağırdığınız satırlara bir sürüm numarası ekleyebilirsiniz. Örneğin:

<link type="text/css" rel="stylesheet" media="all" href="/siberkultur.css" />

Olan satırınızı,

<link type="text/css" rel="stylesheet" media="all" href="/siberkultur.css?v=1" />

Olarak değiştirirseniz tarayıcı bunu yeni bir dosya olarak algılayacak ve yeniden çekecektir. Bu şekilde her major değişikliğinizi versiyonlarsanız kullanıcılarınız değişikliği anında görebileceklerdir. Uygulamanın bir başka alanı da arkadaşlık siteleri için kullanıcı profil fotoğraflarında olabilir.

Tarayıcılar arası farklılıkların hepimizi çıldırması konumuzun sadece minik bir bölümü. Asıl bahsetmek istediğim; tüm popüler tarayıcılar için, sadece kullanılan tarayıcıda geçerli sayılacak CSS kodları.

Yani, kullanıcınız Opera kullanıyorsa, sadece Opera tarayıcısı için bir div'in gizlenmesi veya Firefox 1 kullanıyosa, sadece Firefox 1 kullananların görebileceği bir öğenin yüksekliğinin daha fazla olması gibi hacklerden bahsediyor.

Daha iyi anlamak için şöyle bir HTML yapısı kuralım:

<p id="opera">Opera 7.2 - 9.5</p>
<p id="safari">Safari</p>
<p id="firefox">Firefox</p>
<p id="firefox12">Firefox 1 - 2 </p>
<p id="ie7">IE 7</p>
<p id="ie6">IE 6</p>


Daha sonra tüm tarayıcılarda bu elementleri gizleyelim:

<style type="text/css">
body p
{
display: none;
}
</style>


Şimdi ise her bir tarayıcı için bu divleri nasıl göstereceğimize geçelim.

Internet Explorer

IE için 2 yöntem bulunuyor, ki bunu IE ızdırabı çeken herkes ezbere biliyordur. Birinci yol, IF cümleleri:

<!--[if IE 7]>
<style type="text/css">
</style>
<![endif]-->

<!--[if IE]>
<style type="text/css">
</style>
<![endif]-->


If cümleleri arasına yazılan her türlü HTML kodu sadece IE tarafından görünebilecek ve çalıştırılabilecektir. Ancak bu işlem dışarıdan bağlanmış .css dosyalarına etki etmediği için onlarda şöyle bir method kullanıyoruz:

/* IE 7 */
html > body #ie7
{
*display: block;
}

/* IE 6 */
body #ie6
{
_display: block;
}


Firefox

Genellikle IE dışında bir tarayıcı için bu tür hacklere ihtiyaç duymacak olsak da her ihtimale karşı bahsetmekte fayda var.

/* Firefox 1 - 2 */
body:empty #firefox12
{
display: block;
}

/* Firefox */
@-moz-document url-prefix()
{
#firefox { display: block; }
}


Kodları yukarıdaki paragrafları FF sürümlerine göre gizli olmaktan çıkaracaktır.

Safari

Safari motoru olan Webkit için geçerli hackler ise şöyle:

/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#safari { display: block; }
}


Opera

Opera fanatikleri eminim bu listede Opera'yı görmeselerdi üzüleceklerdi. İşte Opera için geçerli hack. Ancak burada bir sorun var ki, Opera'nın hackinde geçen -min-device-pixel- kodu, bu özelliğin desteklendiği tüm tarayıcılarda görünecek. Yani sadece Opera'ya has olmaktan çıkacak.

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #opera { display: block; }
}


Üşengeçlere tüm kodlar


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Browser Hacks</title>

</body>
</html>


Söz konusu hacklerin hepsi Neal Grosskopf tarafından toplanmıştır, ben sadece sizlerle payşalan bir aracı oluyorum. Afiyet olsun.

W3C geçerlilik denetim sistemi, verdiğiniz bir adresteki HTML veya CSS kodlarını kontrol ederek nerelerde hata yaptığınızı ve düzeltmek için neler yapabileceğinizi söylüyor. Kodladığımız web sayfalarının standartlara uyumluluğunu kontrol ederken karşılaştığınız bu mesajları çözmeniz, eğer İngilizce'niz yeterli değilse ve bu işte yeniyseniz bir işkenceye dönüşebiliyor.

Bu gibi bir durumda başvurabileceğiniz dört kaynak bulunuyor:

1. Çevirimiçi sözlük olan Zargan İngilizce-Türkçe sözlüğü
2. GotApi.com'un HTML sayfası
3. GotApi.com'un CSS sayfası
4. Fatih Hayrioğlu'nun hazırladığı CSS kitabı

GotApi.com sayfaları her hangi bir css veya html etiketini yazdığınızda size onunla ilgili sayfayı gösterecektir. Böylece etiketin adını doğru yazıp yazmadığınızı görebilirsiniz. Aynı şekilde Fatih Hayrioğlu'nun kitabı da CSS kodları konusunda size referans olacaktır.

Tüm uğraşlarınıza rağmen sorun çözülemiyorsa bazı hata mesajlarını çözmek için şunları yapabilirsiniz:

Sık karşılaşılan HTML hata mesajları

document type does not allow element "XXXXX" here; missing one of "YYYYY" start-tag.
İçinde bir HTML etiketi olamayacak bir etiket açtığınızı söyleyen hata mesajı. Span içine Div açılamaması gibi.

there is no attribute "XXXXX"
XXXXX şeklinde bir özelliğin bulunmadığını söyleyen hata mesajı. Div içine xxxxx="132" yazmak gibi.

required attribute "alt" not specified.
Bir imaja alt özelliğini, yani resimi tanımlayıcı metin girmediğinizi söyleyen hata mesajı.

Güncelleme: Fatih Turan'ın sık karşılaşılan hata mesajları açıklaması.

Sık karşılaşılan CSS hata mesajları

Property XXXXX doesn't exist
Böyle bir CSS özelliğinin olmadığını söyleyen hata mesajı.

Property XXXXX doesn't exist in CSS level YY but exists in [ZZ]
Kullanmaya çalıştığınız CSS özelliğinin CSS YY'de olmadığını fakat CSS ZZ'de bulunduğunu söyleyen hata mesajı.

Özellikle e-bülten (newsletter) gönderimi ve e-mail marketing yaparken birçok web geliştiricinin ortak problemi nasıl kodlayıp, ne kadar az hasarla kurtarabilecekleridir. Çünkü her e-posta platformu CSS'in her özelliğini desteklemez, bizlere işkence çektirir.

Bu sorunu aşmanın, daha doğrusu en az kayıpla en fazla e-posta istemcisine ulaşmanın yolu ne yazık ki sadece neyi nasıl kodlamanız gerektiğini bilmek. Bu açıdan size oldukça yardımcı olabilecek bir kaynak A Guide to CSS Support in E-mail adıyla verilmiş. Çok detaya girmeden bu şahane kaynakta verilen CSS özelliklerini özetlemek istiyorum.

1. Asla head içinde style veya dışarıdan çekilen bir CSS dosyası kullanmayın.
2. Tüm CSS özelliklerinizi satır içi (inline) stil olarak tanımlayın (a style=) gibi
3. Asla background-image kullanmayın.
4. Asla absolute posizyonlama yapmayın.
5. font-family ve font-size yerine font kullanın, ikisini birleştirin.
6. Asla transparan özelliğini kullanmayın.
7. Asla visibility ve display ile gizli obje yaratmaya çalışmayın
8. Cursor özelliğini kullanmayın, Gmail'de çalışmayacaktır.

E-postaları kodlarken bunlara dikkat ederseniz gönderimleriniz tüm platformlarda %95 birbirine benzeyecektir. Ufak bir hatırlatma olarak, görsellik adına ağır imajlarla doldurmak yerine kullanışlılık adına sade e-posta tasarımları daima tercihiniz olsun.

Sitenizin açılış performansını hızlandırmanız için gereken adımlarda sıra CSS konusunda yapılabilecek olanlar. Bu yazıdan önce,

1. Site performans aracı
2. Sitenizin performansını artırın - İçerik

Yazılarını okuduğunuzdan emin olunuz. Yapmaya çalıştığımız şey, dosyalardan, sunucu ayarlarına kadar birçok kategoride 34 adımda sitemizin daha hızlı açılmasını sağlamak.

Devamını okuyun

SiberKültür'de minik değişiklikleri farketmişsinizdir. Bunlardan birisi de yazı bilgileri kısmındaki mini ikonlar. Verilen bilgiyi biraz daha görsel hale getirmek için uzun zamandır bu tür birşey kullanıyordum.

SiberKültür bir zamanlar aşağıdaki şekilde bilgilendirici ikonlar kullanıyordu:

Bu yazıyı tabiki de bu minik değişiklikten haberdar olmanız için yazmıyorum. Bu ikonları yerleştirirken kullandığım tekniği sizlerle paylaşmak istiyorum. Bunun neresi paylaşılabilecek demeyin, çünkü hemen yukarıda gördüğünüz 4 farklı ikon aslında bir tane resimden geliyor. Aynen şu şekilde:

4 ikonu aynı gif üzerinden vermek istememin nedeni çok basit aslında. Bir web sayfasında ne kadar çok farklı element olursa, sunucuya gönderilen istekler de buna göre artacaktır. Yani, 4 farklı imaj kullansaydım, 4 farklı imaj için sunucu 4 defa istek alacak ve bunlara ayrı ayrı karşılık verecekti. Dolayısıyla sayfanın açılışı da yavaşlayacaktı.

Tek bir imaj kullanarak ve bunları koordinatlarına göre çağırarak istekleri bire düşürüp sayfa tarama ve sunucu istek zamanını kısaltabilirsiniz. Bunun için yapmanız gerekense oldukça basit:

background: url(imajin_adi.gif) no-repeat 0px 10px;

Sırayla gidersek, css tanımlamanıza bir arkaplan imajı tanımlıyor, bunun adresini veriyor, sadece bir kere konmasını belirliyor (repeat-x ve repeat-y diyerek x/y ekseninde devamlı gelmesini sağlayabilirdik) ve son olarak da soldan ve yukarıdan kaç piksel farkla gösterileceğini belirliyoruz. Mesela ben, 4 farklı ikonum için sırasıyla şunları kullandım:

background: url(ikonlar.gif) no-repeat 0px -29px;
background: url(ikonlar.gif) no-repeat 0px 0px;
background: url(ikonlar.gif) no-repeat 0px -45px;
background: url(ikonlar.gif) no-repeat 0px -16px;

Görebileceğiniz üzere - değerler de kullanabiliyorsunuz. Böylece aşağıda kalan imajlara ulaşmanız mümkün oluyor. Benim kullandığım alanlar yanlara doğru uzadığı için ikonlarımı dikey olarak yerleştirdim. Siz tam tersine yatay olarak da kullanabilirsiniz.

Bu tekniğin bir diğer kullanım yeri de, bağlantılarınız için hover efekti olabilir. Normal ve üzerine gelecek hallerini tek bir resim içinde kullanıp, :hover ile üzerine geldiğinde arkaplanı kaydırarak kullanıcı beklemeden efekti görebilir. Eğer farklı imajlar kullansaydınız, sunucuya istek gönderilecek ve imajın gelmesi beklenecekti.

Küçük ama önemli bir not olarak, kullandığım ikonları iStockPhoto sitesinden satın aldım. Kendileri bedava olmadıkları gibi, satın alınmadan kullanıldıklarında yasal olarak başa bela olabiliyorlar. Kullanmak isterseniz siz de iStockPhoto sayfasından satın alabilirsiniz.

Biraz eğlence, biraz ciddi olarak Emil Stenström, CSS kodlayanların bilgi seviyelerini derecelendirmiş. Kendi yorumumla sizlerle paylaşıyorum.

Derece 0

CSS? Çevirimiçi bir oyun mu?

Böyle tepki veren insanlar muhtemelen hayatlarında hiç web sitesi yapmamıştır. Yaptılarsa bile, sadece HTML kullanmışlar ve ne yaptıkları bilmiyorlarmış. CSS olarak arama yaptıklarında muhtemelen CS:S bulacaklarını sanırlar.

Derece 1

Evet evet, bazen bağlantıların alt çizgilerini kaldırmak için kullanıyorum

Derece 0'dan farklı olarak bu insanlar temel olarak HTML'den anlıyorlardır. Muhtemelen birkaç sene önce öğrenmişler ve birkaç basit web sitesi de yapmışlardır. CSS bilgileri ise HTML ile yapılamayacak türde şeyleri yapmakla sınırlıdır. Mesela bağlantıların alt çizgilerini kaldırmak veya satır aralarını açmak gibi.

Derece 2

Div olayını sevmiyorum, tablolar daha kolay

Bu kişiler muhtemelen HTML konusunda gerçekten iyidir ve açtıkları milyonlarca tablo ile sitelerini şekillendirirler. Etrafındaki insanlardan tablosuz tasarım konusunu duymuşlar, birkaç saatlik uğraşın sonunda başaramayınca vazgeçmişlerdir. Bu yüzden de tehlikeli bir insan türü olarak görülürler. Çünkü senelerdir tablolarla çalıştıkları için şuan alanında kabul görülen pozisyonlarda olabilirler!

Derece 3

Duymuştum fakat, bir türlü kullanmayı beceremedim

Bu türe giren insanlar hala CSS pozisyonlamasını yapamıyordur fakat CSS'in nimetlerini biliyorlardır ve kullanmak istiyorlardır. Hatta bazıları basit CSS yapıları kurmuş ve mutlu bile olmuştur. Derece 2 bir patrona sahip oldukları için gelişimleri biraz yavaş geçiyor olabilir.

Derece 4

CSS? Tabi canım, bağımlısıyım

Bu tür insanların tüm sitelerinin div'lerden oluşması çok doğal. Her bölüm dikkatlice isimlendirilmiş bir div'den oluşabilir: #ustsolkirmiziyer gibi. Tüm div'leri piksel piksel eksenlere oturtulmuş (position: absolute) ve büyük ihtimalle doğrulayıcılardan geçer not alıyordur. Ancak CSS'i biraz hatalı kullandıklarından dolayı tüm nimetlerinden faydalanamazlar. Bu kodlamadan dolayı bazı tarayıcılar gelen içeriği doğru yorumlayamayacak, içerik tek bir blok gibi görünecektir. Kötü isimlendirilmiş div'ler ileride tasarımı değiştirirken zorluk çıkartacaktır.

Bu insanlara yanlış yolda olduklarını ve doğrusunun x şeklinde olacağını asla söylemeyin. Çünkü onlar zaten CSS nediri, nasıl kullanacağını ve nasıl doğrusunu öğreneceğini biliyordur. Onlara nedenleriyle beraber konuyu yumuşak bir dille açıklamayı deneyebilirsiniz.

Derece 5

Tabiki de CSS kullanıyorum, tablolardan daha iyi çünkü...

Uzun uzun okumalar ve bilgi paylaşımları sonrasında bu insanlar derece 5'e geçmişlerdir. Bu insanlar CSS'in ne olduğunu nedenleriyle bilir. Kodladıkları sitelerde ufak tefek sorunlar çıkabilir, ancak onlar bunun üstesinden araştırarak gelebilirler. Konuyla ilgili sorular sorduğunuzda size mantıklı cevaplar vereceklerdir.

Derece 6

Hangi sürümden bahsediyorsun? Evet. O konuda yazdığım kitabımı okudun mu?

Aşmış olarak nitelendirilebilecek bu insanlar CSS hakkında harika makaleler, hatta kitaplar yazarlar. Global bazda CSS sorunlarına çözümler üretmişler, yeni yollar geliştirmişlerdir. Bir nevi yol göstericilerdir. Bazıları tüm W3C arşivini okumuş, farklı özelliklerin hangi tarayıcılarda nasıl tepki verdiğini ezbere bilirler. Çoğu Web Standartları Projesi ile çalışır. Eğer kodlarında bir hata görürseniz, emin olun bu bilerek yapılmıştır, nedenini sorun.

Siz kendinizi hangi derecede görüyorsunuz?

Class tanımlamanıza imkan vermeyen sistemlerde veya gerçekten çok form elementi olan ve bunlara tek tek girip class tanımlamanızın çok zaman alacağı sitelerde tüm form elementlerine ulaşmanız için aslında çok kısa bir kod var:

input,select,option,textarea,button{ ... }
input[type=button],input[type=submit],button{ ... }


Birinci satırla tüm form elementlerini düzenleyebilir, ikinci satırla da sadece buton elementlerini farklılaştırabilirsiniz.

input[type=button]:hover,input[type=submit]:hover,button:hover { ... }

İle yine hover efektlerini düzenlemenize imkan sağlıyor.