Geçen yazıdan önce meraklandırmak için koymuş olduğum resimden sonra (ÇN: Paul eklentiye Firefox tabanlı başlamıştı, koyduğu resimde FF üzerindeki çalışması gözüküyordu ama yazı sürpriz bir şekilde IE ile ilgili çıktı) neden IE için CSS Transformlarını yazdığımı merak edenler oldu.

Firefox için CSS Transformları ile uğraşmayı bırakmamın nedeni CSS Transformlarının büyük ihtimalle Firefox 3.1 sürümü ile birlikte gelecek olmasıdır.

Buna rağmen, çalışırken irdelediğim iki yaklaşım hala ilgi çekici, bunları sizinle tartışmak istiyorum:

Canvas Yaklaşımı

Bu yaklaşım benim CSS Transformlarını Firefox’a taşımak için kullandığım ilk girişimimdi. IE’deki Matrix Filter benzeri bir yardımcı olmayınca bunu zor yoldan yapmak zorunda kaldım. Firefox’un web içeriğini yorumlayarak (rendering) canvas’a aktarmayı uzun süredir desteklediğini biliyordum fakat güvenlik sorunları yüzünden hesaba katmadım. Bu nedenle uzun yolu yani Canvas içerisinde bana ait olan naçizane yorumlama motorunu kullandım (bazılarınızın tahmin ettiği gibi, girdi alanlarını, düğmeleri ve işletim sisteminin doğal biçimlendirdiği şeyleri şekillendirmiyor).

Şimdi bu mantıksal eklemlendirmenin nasıl göründüğüne bakalım:

1. -webkit-transform örneklerinin hepsini bulur
2. Tüm bulunan elemanlar için:
3. Aynı sınırlar içerisinde, aynı pozisyon ve orijinallikte yeni bir <canvas> elemanı yaratır
4. Transform fonksiyonlarında bulunan değerler tüm canvas’ı döndürür/düzenler/çevirir
5. Tüm alt ve canvas’taki orijinal nesneler için kenarlar, arkaplan ve metinler tam olarak çizilir (FF3′ün canvas için olan yeni metin API’si kullanılarak)
6. Bir elemanın sınırları yeniden hesaplanır ve canvas’ın sınırları başlangıç durumuna getirilir

Çok zor olmasına rağmen, başlangıçta düşündüğümden daha iyi çalıştı ve tüm alt nodlarıyla (düğüm ing:node) birlikte bir DIV yaratıp, onu yüksek hızda güzel bir animasyon içinde döndürmeyi başarabildim.

SVG Yaklaşımı

foreignObject‘i keşfedene kadar SVG ile fazla haşır neşir değildim. En basit anlamda foreignObject örneğin bir SVG canvas’ında bulunan HTML gibi “namespaced” XML dosyalarını görüntüleyebiliyor (ÇN: Burada namespaced ile Paul XML’in namespace özelliğine sahip olmasını kastediyor. Namespace hakkında Türkçe kaynak için Zafer Teker’in yazısı okunabilir).

Buradaki eğlenceli şey ise bu yaklaşımın çok umut verici olmasıydı çünkü CSS Transform API’si tamamen SVG API’den kopyalanmış, ve ona referanslamak kolay olacaktı.

Daha sonra SVG’nin sınırlarını keşfettim. Örneğin Content-Type’ı XHTML olarak sunmadığınız sürece, HTML sayfasına SVG satırlarını eklemeniz mümkün değil. Bu benim eklentim için engeldi çünkü eklentiyi kullananları CSS Transformları kullanmak istiyorlar diye XHTML kullanmaya zorlayamazdım.

Diğer taraftan, birkaç saatlik araştırmadan sonra SVG’yi HTML içerisinde gösterebilmenin bir yolunu buldum. Bununla birlikte eklemlendirme şu hali aldı:

1. -webkit-transform örneklerinin hepsini bulur
2. Tüm bulunan elemanlar için:
3. Tüm nodu (outerHTML) biçem özniteliğinde data konumlandırmadan serialize yaparak dizgi (string) haline getirir (ÇN: Serialize: Dizilerin kaydedilebilir hale getirilmesi)
4. Hazırlanmış bir SVG XML Header’ı sarmalar
5. Ayrıca Transform değeri olarak <g transform=’..’> girilir
6. Tüm dizgi base64 şeklinde şifrelenir
7. Base64 dizgisi ile data kaynağı olarak yeni bir gömülü (embed) eleman yaratılır ve bunun sayfaya uyarlanması gerçekleştirilir (geçerli <embed> üzerindeki orijinal nod’daki konum datasıyla birlikte).

Eğer (ÇN: Firefox için) eklentinin geliştirilmesine devam etseydim, bunu SVG yaklaşımına uygun şekilde yapardım. Transformasyonları FF3′teki bir foreignObject üzerinden yapmak oldukça yavaş ancak OS (İşletim sistemi) biçemlerini kaybetmiyorsunuz ve ayrıca CSS Transform API’sini farklı bir şeye yönlendirmek zorunda kalmamanız da işinizi kolaylaştırıyor.

Çok yakında heyecanlandırıcı yeni projelerde buluşmak üzere!

Orijinal Yazı için tıklayınız.