Google’ın Les Paul Doodle’ı

Google son zamanlarda ilginç doodle’lar yaparak ulaştıkları noktayı gözler önüne seriyor. Genellikle CSS3, HTML5 gibi öncü teknolojilerin uygulamalarını sunan Google, bugünkü Les Paul Doodle’ı ile de HTML5 ve Canvas teknolojileriyle ilgili güzel bir çalışma sunmuş oldu.

İsterseniz lafı fazla uzatmadan nasıl bir doodle’dan bahsediyorduk hemen izleyelim:

İlk başta basit bir flash animasyonuymuş gibi görünse de dikkatlice baktığımızda sadece mp3 dosyalarının çalışması amacıyla küçük bir swf dosyası olduğunu görüyoruz . Bu videoda gördüğünüz her bir öğe sprite adı verilen bir tek dosyada bulunuyor. Doodle çalıştığında ihtiyaç duyduğu bölümleri sprite dosyasından kopyalayıp ekrana yerleştiriyor.

Kopyalama ve yerleştirme işlemi javascript kütüphanesi ile yapılırken, çizim işlemi ise HTML 5’in yeniliklerinden canvas öğesi içinde yapılıyor. Yine Javascript marifetiyle öğelerin yani bu doodle’a göre tellere tıkladığımızda bir javascript event handler’ı çalışıyor ve titreşmiş tel animasyonunu oynatıyor. Aynı zamanda Flash’ın javascript callback özelliği sayesinde oraya ilgili notanın çalınması emri gönderiliyor.

Bu konudaki ekstra bilgileri Google Blog’undan alabilirsiniz:

http://googleblog.blogspot.com/2011/06/doodle-for-instrumental-inventor.html

Importance of !Important

CSS ile uğraşan güruhun ara sıra görüp de üstüne fikri olmadığı bir CSS özelliğinden bahsedelim: Important. Özellikle gelişmiş CSS çalışmaları ile uğraşıyorsanız mutlaka bilmeniz gerekenlerin arasındaki özelliklerden biridir.

Important Nedir?

Important, bir CSS özelliğinin(property) önceliğini(priority) yükselten bir özelliktir. Bir diğer değişle inheritance yani miras alma yoluyla CSS’e gelen özellikleri devre dışı bırakarak important kullandığınız satırdaki özelliği öncelikli olarak uygular.

Important’a Neden İhtiyaç Duyuyoruz?

Örneğin aynı HTML tagına iki duruma göre farklı özellik vermemiz gerektiğini düşünelim:

Buton isimli bir div’imiz olduğunu ve bununda varsayılan özelliğinin kapalı olduğunu vurgulayan gri bir fon resmi olsun:

[php]<div class="buton"></div>[/php]

[css].buton {width:100px; height:20px; background: url(‘images/gray.png’);}[/css]

Bu butonun fon resmini aşağıdaki gibi değiştirmeye çalıştığımızda istediğimiz sonucu alamayabiliriz:

[php]<div class="buton acik"></div>[/php]

[css].acik {background: url(‘images/green.png’);}[/css]

Bu durumlarda important özelliği devreye girmelidir. Öncelikli olan stilinize aşağıdaki gibi !important özelliğini eklediğinizde sorun çözülecektir.

[css].acik {background: url(‘images/green.png’)!important;}[/css]