SiberKültür 101: Internet kültürü, web dedikoduları ve web tasarımı ve geliştirme konusundaki tüm açlığınızı giderir.
Bir rüya gibi geldi geçti: Microsoft & Webkit
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.
- 1 yorum
Tüm tarayıcılar için CSS hackleri
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 6]>
<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>
<style type="text/css">
body p
{
display: none;
}
/* Opera */
html:first-child #opera
{
display: block;
}
/* IE 7 */
html > body #ie7
{
*display: block;
}
/* IE 6 */
body #ie6
{
_display: block;
}
/* Firefox 1 - 2 */
body:empty #firefox12
{
display: block;
}
/* Firefox */
@-moz-document url-prefix()
{
#firefox { display: block; }
}
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#safari { display: block; }
}
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #opera { display: block; }
}
</style>
</head>
<body>
<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>
</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 kontrolüne takılan hataları nasıl düzeltirsiniz?
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:
- Çevirimiçi sözlük olan Zargan İngilizce-Türkçe sözlüğü
- GotApi.com'un HTML sayfası
- GotApi.com'un CSS sayfası
- 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ı.
Anlık / satır içi düzenleme ve kolaylıkları
Her yeni teknoloji beraberinde yeni zorlukları ve yeni kolaylıkları getiriyor. Sorun, herkesin bunlara yabancı olmasından dolayı iyi mi yoksa kötü mü bunu ayırt etmekte. Web, tüm dünyanın anlık olarak deneyimini yaşadığı, herkesin beraber karar verdiği yeni mecra. Dolayısıyla bir şeyin iyi veya kötü olduğunun kararı, anlık deneyimlerle, topluluklarca karar veriliyor.
SiberKültür bunu yazsın için gelen başvurulardan birisi de sevgili Burak'ın kendisinin geliştirdiği sayfa içi düzenleme methoduydu (inline editing). Javascript ile geliştirilmiş sistem basit olarak bir web sayfasında, izin verilen alanlarda anlık düzenleme yapılmasına imkan sağlıyor. Aynen Web sitelerini görürken düzenleyin yazısında olduğu gibi, ancak bu sefer yaptığımız değişiklikler sunucuya da kaydediliyor.
Satır içi düzenleme aslında çok da yabancı olduğumuz bir uygulama değil. Mesela Flickr bunu senelerdir yapıyor:
Flickr örneğinde, bir fotoğrafınıza açıklama eklemek istediğinizde sayfa içinde, yeni sayfaya, yeni bir forma gitmeden anında değişikliğinizi yapıp kaydedebiliyorsunuz.
Daha gelişmiş bir arayüz olan Google Maps ise yine satır içi düzenlemeyi kullanan uygulamalardan birisi:
Google Maps'de yol rotası belirlerken, rotalardan birisini değiştirmek istediğinizde tüm sayfanın değişmesine gerek kalmadan, anında değişikliği yapabiliyorsunuz.
Ayrıca oldukça popüler proje yönetim uygulaması olan Basecamp de, uygulamanın birçok yerinde satır içi düzenleme metoduna başvuruyor.
Bu tür yeni kullanım alışkanlıkları getirecek uygulamalar tercih edilirken bence şunlara dikkat edilmeli:
- Kullanıcı tarafından anlaşılması zor mu?
- Kullanıcı tarafında ekstra bir gereksinimi var mı? (applet gibi)
- Kullanıcıya zaman mı kazandırıyor, yoksa aksini mi yapıyor?
Satır içi düzenleme için konuşacak olursak, bu 3 maddeyi de olumlu olarak yerine getiriyor. Dolayısıyla -bildiğim kadarıyla- uygulanması kolay bu metodu, uygulamalarınızda kullanmak hem kullanıcılarınız için hem de sizin için (bu sayede ayrıca form sayfaları tasarlamak zorunda kalmazsınız) bir artı olacaktır.
Microformats nedir?
Bilgi, webde şu sıralar yönetilmesi en zor şey. Eğer böyle devam ederse gelecekte bir kaos görünüyor. Elimizde yığınla bilgi var, fakat bu ham bilgiyi düzenleyip, organize etmek oldukça zor. Sorun burada başlıyor.
Microformats, bir topluluk olarak bu karmaşayı gidermek için kafa yoruyor ve bazı standartlar yaratıyor. Kullanılan dil yine HTML ve tüm web standartlarına uyuyor. Sadece verilerinizi girerken bazı formatlamalar yaparak microformats'a destek olabiliyor ve öncelikle bilgisayarların, ardından insanların bu bilgileri doğru yorumlayabilmesini sağlayabiliyorsunuz.
Örnek olarak, kurumsal sitenizde firma adres bilgilerinizi <p> veya <address> arasında yazabilirsiniz. Bunda bir sakınca yok, ancak bu veri bir arama motoru tarafından adres bilgisi olarak algılanamayacaktır. <address> içinde yazdığınızda dahi, neresi firma ismi, neresi telefon bilgisi bunu ayırt ettirebilecek bir isimlendirme mevcut olmadığı için bilgi anlamsız olacaktır.
Microformats burada devreye girerek bizlere oluşturdukları standartları kullanmamızı söylüyor. Böylece Microformats'ı yorumlayabilen uygulamaların (arama motorları, Firefox eklentileri) veriyi doğru yorumlayabilmesini ve kategorizasyonunu yapabilmesini sağlayacak.
Örnek bir Microformats hCard
<div id="hcard-Eren-Emre-Kanal" class="vcard"> <a class="url fn n" href="http://www.erenemre.com"> <span class="given-name">Eren</span> <span class="additional-name">Emre</span> <span class="family-name">Kanal</span> </a>
<div class="org">SiberKültür</div>
<a class="email" href="mailto:e-at-deneysel.net">e-at-deneysel.net</a>
<div class="adr">
<div class="street-address">Adres satırım No: 13</div>
<span class="locality">Ankara</span> , <span class="region">Eryaman</span> , <span class="postal-code">06000</span> <span class="country-name">Türkiye</span> </div>
<div class="tel">0312 282 0000</div>
</div>
Bu örnekte benim bilgilerim id ve class'larla etiketlendi. Böylece bir arama motoru bu bilgiyi gerçekten yorumlayabilecek, neyin ne olduğunu anlayabilecek.
Microformats tipleri
Microformats şuanda 9 şablon oluşturmuş, 12 şablon üzerinde de çalışmakta.
- hCalendar, belirli tarihlerde yapılan/yapılacak etkinlikleri (konferans, randevu, toplatı, vs) etiketlemek için kullanılıyor. Çevirimiçi hCalender yaratıcı.
- hCard, kişisel/firma adres, telefon, e-posta ve benzeri bilgilerinizi yukarıdaki örnekte olduğu gibi etiketlemek için kullanılıyor. Çevirimiçi hCard yaratıcı.
- rel="license", bir içeriğin lisans bilgilerini etiketlemek için kullanılıyor.
- rel="nofollow", aslında bir çoğumuzun bildiği gibi bir bağlantıyı arama motorlarının takip etmemesini istediğimiz zaman kullanılıyor.
- rel-tag, bir bağlantının etiket olduğunu ve bu etiketlerin toplandığı sayfayı belirtmek için kullanılıyor.
- XFN, Xhtml Friends Network, yani XHTML arkadaşlar ağı bir bağlantı verirken, yazdığınız adresin sizinle olan ilişkisini etiketlemek için kullanılıyor. Yani ben SiberKültür üzerinde arkadaşımın bloguna bağlantı verdiğimde bu bağlantının sahibinin benim arkadaşım olduğunu belirtebiliyorum (veya aileden birisi, iş arkadaşım, okulan arkadaşım, vs). Çevirici XFN yaratıcı.
Genellikle en çok tercih edilen Microformats standartları bunlar. Daha fazlasını buradan, henüz taslak olanları ise buradan görebilirsiniz.
Microformats'ın geleceği
Microformats alacağı destek kesinlikle kaderini belirleyecek. Şu anda Technorati dahil bir çok web sitesi desteğini veriyor. Ayrıca Wordpress de destekleyenler arasında. Geleceğin anlamlı web üzerine kurulduğunu düşünürsek, Microformats anlamlı web içeriklerini etiketlemek adına önemli bir rol oynuyor olacak.
HTML bilgi düzeyleri
CSS için bilgi düzeyleri belirlenir de, HTML için belirlenmez mi? Emil'in makalesi üzerine 456 Berea Street'ten güzel bir karşılık geldi. Roger Johansson'ın yazdığı HTML bilgi seviyeleri yine ciddi yüzünü biraz eğlenceli bir şekilde gösteriyor.
Derece 0
Heyt-ti-em-ne?
Kazara bile olsa HTML'i görmemiş, duymamış insan türüdür. Bu insanlar asla web sektöründe çalışmamışlardır, büyük ihtimalle çalışmayacaklardır da. Hatta bu yazıda bulunma nedenleri de en alt seviyeyi göstermek içindir.
Derece 1
HTML mi? Hani kalın felan yazıyosun?
Bu insanlar web'de üreticiden çok tüketici konumundadırlar. Veya üreticilerse de yaptıkları herşey görsel editörler (WYSIWYG) sayesindedir. Bu editörler olmadan elleri kolları bağlıdır. Düşük bir ihtimal olsa da web site editörleri de bu kategoride olabilir. Yaptıkları iş sadece güncelleme olduğu için bir sonraki dereceye geçmek pek de umurlarında değildir.
Derece 2
Editörde sürükle bırak yaparak koyduğum elementler Internet Explorer'da çalışıyor, HTML'e neden bakayım ki?
Çok sıkıştıkları takdirde HTML kodlarını açıp, kaybolarak da olsa birşeyleri anlayabilirler. Fakat asla HTML kodlarına elle müdahale etmek istemezler. Çünkü kullandıkları program herşeyi yapıyordur. Genellikle programcı olurlar ve HTML'i kendileri için çok basit gördükleri için öğrenmezler. Ancak basit gördükleri dilde bir yerde 8 saat boyunca takılı kaldıklarında tüm egoları yerlebir olacaktır.
Derece 3
Evet şu ul, h1 gibi şeyleri duydum. Ne gerek var ki ben tablolarımla, imajlarımla, br'lerimle mutluyum zaten.
90'lardan bu yana çalışan birçok web geliştiricisi bu kategoride olabilir. Başlarda herşeyi elle yaparken, sonradan Dreamweaver gibi editörlerin çıkmasıyla artık daha fazla HTML öğrenmeye gerek duymamışlar ve oldukları yerde kalmışlardır. Bütün kodları da eski bir alışkanlık olarak tablolar ve spacer.gif'lerden oluşur. Artık editörler herşeyi yaptığına göre, arkaplanda ne olduğunu anlamak yerine yeni birşeyler öğrenmeye başlamışlardır.
Derece 4
Veri tablosunu nasıl div'lerle yaratabilirim?
Bu derecedeki insanlar doctype'ları artık bilerek kullanmaya başlamışlardır. O kadar bilirler ki onlar için XHTML 1.1 en iyisidir, çünkü en son sürüm her zaman iyidir. Çevrelerinden site yapısı için tablo kullanmamaları gerektiğini duyunca artık herşeyi div'lerle yapmaya başlamışlardır. Hatta verilerin gösterildiği tabloları bile!
Çoğunlukla gelişmeye açık insanlardır, araştırırlar, nasıl yapılacağını öğrenirler. Fakat asla neden böyle yapıldığını bilmezler.
Derece 5
Hmm, acaba hangi anlamlı yol, benim dökümanım için daha uygun olacak?
Bu insanlar öncelikle yapıyı ve anlamlılığı düşünürler, ardından sunumu. Genellikle tam doctype'ları kullanırlar. Bazı derece 5 insanlar, XHTML'in kullanımını sorgularlar ve bu konuda sonsuz tartışmalara girebilirler. Çoğunlukla verecekleri class isimleri hakkında ve kodlarını organize etmekle vakit harcarlar. Eğer bu dereceye geldiğinizi düşünüyorsanız, gayet iyi gidiyorsunuz demektir.
Derece 6
Bence HTML 4.01 ve XHTML 2 özellikleri anlamsal olarak çok kısıtlı, yeni bir biçimleme dili üzerinde çalışıyorum...
Bu insanlar endüstride söz sahibi kişilerdir. Şuan için değil de, ilerisi için neler daha kullanışlı olacak bunu düşünürler. Yaptıkları şeyler ise yakın zamanda ortalama geliştiricilerin işine yaramayacaktır. Bu dereceye geldiyseniz artık bazı şeyleri aşmışsınızdır, sitelerden çok kuralları siz yazıyorsunuzdur.
Web sitemin standartlara uyumluluğunu nasıl test ederim?
Web standartları; senelerdir yakındığımız, üzerinde defalarca durduğumuz dolayısıyla önemli bir husus. Zira web standartlarına uyarak hem tarayıcı uyumsuzluğunu ortadan kaldırıyor, hem de yaptığımız işin daha kaliteli ve doğru çıkmasını sağlıyoruz.
Eğer bu işe yeni başlamış ve web standartlarından bihaberseniz okumaya devam edin.
Web standartları nedir?
Web standartları, W3C tarafından belirlenen, her işte olduğu gibi web geliştiriciler için bir standart belirlemeyi hedef edinmiş kişilerin oluşturduğu kurallardır. W3C, HTML'den CSS'e, XML'den PNG ye kadar bir çok konuda standartları belirlemeyi görev edinmiştir.
Temel olarak hangi kodu, hangi özelliklerle, nasıl ve nerede kullanmanız gerektiğini anlatır. Yani tabloları nasıl, div'leri neden, alt özelliğini ne için kullanmanız gerektiği gibi birçok bilgiyi W3C'den edinebilirsiniz.
Standartlara neden ve nasıl uymalıyım?
Standartlara uymanız, yazdığınız kodların daha kaliteli olmasını, ne yaptığınızı bilerek yapmanızı, web sitenizin kullanılabilirliğine farkında olmadan önem vermenizi, arama motorları ve insanlar tarafından saygı görmenizi sağlar.
Web standartlarına uymanız için yapmanız gereken tek şey, html vs css öğelerini iyi tanımak, neyin nerede kullanılacağını bilmektir.
Eğer gerçekten çok yeniyseniz işte sizin için birkaç tavsiye:
- Adobe Dreamweaver programını kullanın. Bu program ile kod yazmak, kod açıklamaları ve yönlendirmeleri sayesinde oldukça kolaydır. Ancak mümkün olduğunca tasarım görünümünde çalışmayın, bu tembelliğe itecektir.
- HTML ve CSS'i iyice öğrenin, neyi neden yazdığınızı bilin. HTML ve CSS'i öğrenmek için SiberKültür'ü takip edebilir, eğer İngilizce'niz biraz el veriyorsa W3C'nin kendi sitesine veya daha basit anlatımlı olan W3Schools'a bakabilirsiniz. Altı Üstü Tasarım'ın eski makalelerini okumak da size yol gösterecektir.
- Takıldığınız yerde, sorunu çözerken mutlaka arama motorlarından faydalanın. Böylece sorunu yanlış bir yoldan çözmektense doğru yolu öğrenebilirsiniz.
- Her yazdığınız kodu test edin.
Yazdığım kodu nasıl test ederim?
HTML ve CSS kodlarınızı test etmeniz için elinizde iki gerçek kaynak var. Bunlar:
HTML Doğrulayıcı
W3C'nin HTML Validator aracı sayesinde html kodlarınızda hangi hataları yapmışsınız ve bu hataları nasıl düzeltebilirsinizin cevabını bulabilirsiniz.
CSS Doğrulayıcı
Yine W3C'nin CSS Validator aracı sayesinde aynı HTML'de olduğu gibi iki soruya yanıt bulacaksınız: Nerede hata yaptım ve Nasıl düzeltebilirim?
Her zaman yazacağınız yorumlarda sorularınızı sormaktan çekinmeyin, buradan da takıldığınız yerlerde yardım alabilirsiniz.
Bilmediğiniz 12 HTML elementi
Çoğumuzun bilmediği ancak gerektiğinde hayat kurtarabilecek, işleri kolaylaştıracak ve hatta arama motoru optimizasyonunuzu destekleyecek bir sürü HTML elementi bu yazının konusu. Arkanıza yaslanın, gereksiz seslerden kurtulun ve okumaya başlayın derim.
abbr
Tek başına kullanıldığında hiç birşey ifade etmezken, title özelliğiyle kullanıldığında gerek arama motorları gerekse de kullanıcılar için büyük bir fayda sağlıyor. Çünkü <abbr title="Vesaire...">vs...</abbr> gibi bir kullanımda vs... kelimesinin üzerine geldiğinizde bir açıklama metini göreceksiniz.
acronym
abbr gibi, fakat bu sefer yapacağınız açıklamalar bir kısaltmayı tanımlıyor olmalı. Örneğin <acronym title="Cascading Style Sheets">CSS</a> yazarak kullanıcı CSS kelimesinin üzerine geldiğinde kelimenin açılımını görebiliyor.
address
Şahsen daha önce hiç kullanmadığım ancak oldukça yararlı olduğunu düşündüğüm bir element bu. Bir kullanıcının farkedemeyeceği birşey olsa da arama motorları için tadından yenmeyecek bir bilgi. Düşünsenize, firmanızın adresini bu şekilde yazdığınızda, arama motorundan XYZ Firması adres şeklinde aradığında tam olarak istediği yere düşecek. <address>Eren Emre Kanal<br />Zincirlikuyu / İSTANBUL</address> gibi bir kullanımı var.
Tüm Tarayıcılar İçin Transparanlık
Tarayıcılarda transparan elementler yaratmak başlı başına bir sorun. Zira neredeyse tüm tarayıcıların algılayışları birbirinden farklı.
Ancak aşağıdaki 4 satır tanımlama, bir objeyi her tarayıcıda %45 oranında saydam yapacaktır:
.saydam {
opacity: 0.45;
filter:alpha(opacity=45);
-moz-opacity:0.45;
-khtml-opacity: 0.45;
}
Bu css tanımlaması yapılmış bir imaj aynen şu şekilde görülecektir:
opacity: 0.75 W3C tarafından standart olarak kabul edilmiş saydamlık tanımlaması (güncel firefox, safari ve opera'larda çalışıyor),
filter:alpha(opacity=75); Internet Explorer için geçerli olan kod,
-moz-opacity:0.5 eski tip mozilla tarayıcılar için,
-khtml-opacity: 0.75; bu ise, eski tip safari tarayıcılar için geçerli.
Güncelleme:
Eğer bu kodların IE6'da çalışmadığını görürseniz sakın şaşırmayın. Zira IE6 için bir deveyi hendekten atlatmamız gerekiyor. Bu sefer böyle bir css yapısı ve bir adet transparan png dosyası kullanmamız gerekiyor:
*html .ie6saydam{
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘images/ie6_transparan.png’, sizingMethod=’scale’);
}
IE6 Transparan PNG'yi buradan indirebilirsiniz.
Siz Hala spacer.gif mi Kullanıyorsunuz?
Web sitelerini kodlarken insanların vazgeçemediği iki şeyden birisi, tüm siteyi tablolarla kodlamaksa bir diğeri de boşluk vermek, boyutlandırmak için spacer.gif kullanmaktır heralde.
Tabloların kabusuna şimdi girmeyeceğim ancak spacer.gif gerçekten kurtulmamız gereken bir hastalık. Kısaca anlatmak gerekirse, bu minicik bomboş imaj ne kadar çok kullanırsanız sayfanızı o kadar da ağırlaştıran bir gereksiz icattır. Aslında spacer.gif kullanarak:
- 1kb'dan bile küçük olsa da her seferinde bu dosyayı çağırmanız gerekir
- Her çağırışınızda bu gif kadar img elementi kullanmaız gerekir
- Internet tarayıcılar yüklenen her resmi sayfada göstermek için bir güç harcar, bu da "render" zamanını artırır, her ne kadar küçük de görünse
- Spacer.gif yüzünden html dosyası dışında sunucuya bir istek gönderilmek zorunda kalınır
Ufacık birşeyin yarattığı kabusa bakın! Spacer.gif'in mucidi David Siegel keşke 1996 yılında bu müthiş icadı gerçekleştirmeseydi.
Neden Bunu CSS ile Çözmüyorsunuz?
Spacer.gif'i kullanma amacı genellikle boşlukları, yükseklikleri vs ayarlamaktır. CSS bize bu konuda bir sürü nimet sunmuşken neden bir resime ihtiyacımız olsun ki?
margin ve padding özellikleri bu işler için biçilmiş kaftan!
Hiç olmadı bir html elementi kullanabilirsiniz:
<spacer type="block" width="40" height="15">