CSS3’ten önce kısaca CSS’ten bahsetmek isterim. CSS (Cascading Style Sheets)’in geliştirilme serüveni 1999 yılına kadar uzanmaktadır. CSS’in ortaya çıkmasının sebebi, Web’de girilen içeriklerin göze daha hoş gelmesini sağlamaktı. 1999 yılında CSS geliştirici ekibi tarafından geliştirildi.
CSS’i geliştirmek, elbette ki önem arz eden bir adımdı fakat CSS’in tarayıcılarla uyumluluğunu sağlamak en az geliştirmek kadar hatta belki de daha fazla önemli bir adımdı. 2000 yılında CSS I ilk defa tam olarak Microsoft tarafından Macintosh‘a üretilen IE 5 tarafından desteklendi. 2006 yılında ise IE 7 ile beraber İnternet tarayıcılarının önemli bir kısmı CSS2’yi destekler oldu.
CSS3, Web dünyasına çok etkin ve aktif girdi. CSS3, artık anlık hareket etmekle, yanıp sönmekle kalmayıp soft geçişlerle Web sitelerinin ziyaretçilerine görsel olarak hoş görüntüler sunuyordu. CSS3 ile birçok basit animasyon, yazıların istenildiği gibi gölgelendirilmesi, kutulara yeni şekillerin verilmesi, fare hareketlerinden çeşitli animasyonlar sergilenmesi yapılabiliyor.
Hız açısından da CSS3, birçok kalabalık JavaScript kodlarını ve resim dosyalarının yüklenmesi gibi vakit kayıplarını ortadan kaldırdı. Bu da, ziyaretçilerin Web sitesinde daha çok kalması ve içerisindeki bilgiyi iyi bir şekilde elde edebilmesini sağladı. Örneğin; bir Web sitesinde köşe yuvarlamak için imaj dosyaları kullanılıyordu. CSS3 sayesinde, yazılan stil kodları doğrultusunda gölge, köşe yuvarlama, renk geçişleri gibi parçacıkları okuyarak vakit kaybını en aza indiriyor.
Tarayıcı uyumluluğuna gelince; işte bu, önemli bir sorun teşkil ediyor. Hatta çoğu yerde CSS3’ün kullanılmama sebebi oluyor. Google Chrome, gördüğüm kadarıyla CSS3’ü en iyi sergileyen tarayıcı oluyor. Chrome‘un ardından ise Safari geliyor. Malumunuz; Apple görsellik konusunda hassas olduğundan CSS3 desteğini güncellemeleriyle hemen uyguluyor. Ardından Opera ve Mozilla Firefox tarayıcıları geliyor. Mozilla’da birkaç eksik görmeme rağmen kullanıcı bakımından fark edilir hataları yok. Yazımın ilerleyen satırlarında bu tarayıcılara özgü kodlardan bahsedeceğim.
Türkiye’mizde en çok kullanılan tarayıcı malumunuz, Internet Explorer fakat IE 9’a kadar hiçbir IE CSS3 desteği vermiyor. Aynı şekilde HTML 5 desteği de vermiyor. IE zaten 9. sürümünü piyasaya sürmede epey geç kalmış bir tarayıcı olmakla beraber çıkardığı sürümünü de iyi bir şekilde uygulayamadı. Kullanıcının bundan bihaber olması IE için büyük bir eksi. Bu konuda, reklamlarla veya Türkiye’deki haber ve alışveriş sitelerinin tavsiyeleriyle güçlenebilir. En azından bu gerekmektedir. Çünkü PNG resimleri dahi çalıştıramayan IE 6 kullanım oranı ülkemizde %3. Bu azımsanamayacak bir oran. Bu yüzden Web site tasarımcıları hala içleri yanarak CSS3’ü kullanamamaktadırlar. Tabii, genellikle tasarımcılara hitap eden yabancı kaynaklı sitelerde kullanılıyor.
Peki ya Google! Google CSS3‘e nasıl bakıyor? Bu yönde kesin bir kanıya varamıyoruz ne yazık ki, çünkü artısı da eksisi de var bu konuda. Google yeni teknolojilerin kullanılmasından her zaman hoşnut kalmıştır. Üstelik CSS3’ü Google da pek sevmiştir. Bunu bazı Doodle’larında (önemli günlerde günün anlam ve önemine göre koyulan Google logoları) kullanmaktadır. Gel gelelim, konu yine dönüp dolaşıp tarayıcı sorununa geliyor. Malum W3C standartları gereğince sitenizin her tarayıcıda aynı şekilde davranması gerekiyor ve W3C standartları, Google’ın da önem verdiği bir nokta. Ama CSS3 küçük rötuşlar için kullanılabilir. Bence çok büyük değişiklikler yapmadan kullanmak mantıklıdır. Bundan kaynaklanan validator hatalarını da dikkate almayıp es geçebilirsiniz.
CSS3’te başka neler yapılabilir? Katıldığım bir seminerde bahsedilen, özellikle iPhone Web uygulamalarında yaygın olarak kullanılan bedava bir yazılım vardı. Bu nadide programın adı “Sencha”. http://www.sencha.com/ ‘dan indirebileceğiniz 20 MB’lık bir program. Bu program biraz Flash kurcalayanlar için gerçekten kolay bir program. Flash ortamı gibi bir workspace üzerinde yaptığınız bir animasyonu CSS3 kodlarına dökerek, adeta duygularınıza tercüman oluyor ve size kodu sunuyor. Bu programın CSS3 yaygınlaştıktan sonra lisanslı olacağı kanaatindeyim fakat şimdilik bedava dağıtıyorlar. Sencha’nın sitesinden birçok demoya ulaşabilirsiniz.
Yazıların tümünü seçilmiş bir demodan aldığım ekran görüntüsünü paylaştım. Grimsi kısım animasyon alanı ve yazılar sürekli hareketli.
Son olarak CSS3 ile ilgili birkaç kod örneği paylaşalım. Kenar yuvarlama birçok teknikten sonra CSS3’te oldukça kolay.
Webkit-border-radius: size;
Border-radius: size;
“Webkit” , “-o-“, “-moz-” gibi operatörler Chrome, Safari, Mozilla, Opera için yazılmış kodlardır. Kodlar çalışmadığında bu kodlar eklenir.
Size, burada kodları uzun uzun yazmak istemedim, daha çok kaynak önermek istedim. CSS3’e en güzel kaynak tabii kihttp://www.w3schools.com/css3/ adresidir. Gayet güzel ve anlaşılır bilgiler verilmiş. Ayrıca CSS3.info gibi siteler de size yardımcı olabilir. Tabii ki ilk W3Schools’dan temel bilgileri aldıktan sonra, Google’dan güzel örnekler bulup onlar üzerinden çalışabilirsiniz.
CSS3, yenilikleriyle, güzellikleriyle masaüstü ve dizüstü bilgisayarlar dışında mobil uygulamalar için de büyük bir avantaj. Mobil konusunda geliştirme yapanların vazgeçilmezi olmuş durumda.