Merhaba Turkish jQuery Community!

Avrupa ve Asya’nın bir parçası olan topraklarda jQuery’e bu kadar büyük ilginin olduğunu bilmek çok güzel.

Bundan sonra, jQuery ve jQuery UI’nin dünya genelinde yaygınlaşması çabalarımıza, Altan tüm blog yazılarımı Türkçe’ye çevirme nezaketini göstererek büyük bir katkıda bulunacak.

Aynı zamanda orijinal bloğuma yorumlarınızı bırakabilirsiniz, sizin deneyimleriniz, kullanım şekilleriniz ve fikirlerinizi duymak için çok hevesliyim.
Teşekkürler!

Paul Bakaus
UI Architect
–
http://paulbakaus.com
http://www.linkedin.com/in/paulbakaus

Transformie: CSS Transform’larını Internet Explorer’a taşımak (Orijinal Yazı)

Umarım küçük ipuçları ile sizi biraz heyecanlandırmışımdır, ve evet, ikinci sekme tahmin ettiğiniz gibi bilinçli olarak açılmıştı. Gerçekten CSS Transform‘larını ve onların başarıyla Firefox’a eklemlenmesini ima etmiştim. (ÇN: Paul bu yazıdan önce konu ile ilgili bir resim koyup, yazıyı sonra yazacağını iletmişti. Bu resme ve yazının ne hakkında olabileceğine ilişkin gelen yorumlara cevaben bu notu düşüyor.)

Bu eklemlenme ile ilgili detaylara henüz girmeyeceğim ama sizi temin ederim ki ekstra bir eklenti (plugin) kullanmıyor. Herneyse, CSS transformalarının diğer tarayıcılara eklemlenmesi hakkında araştırmamı yaparken, hiç beklemediğim, tamamen farklı bir durum ile karşılaştım: Internet Explorer zaten yıllardır CSS Transform’larını çeşitli yollardan destekliyormuş!

…

Matrix Filter IE içerisinde, sizin döndürme, yeniden boyutlandırma veya her ne isterseniz onu yapmanıza izin veriyor.

…

Fakat Matrix Filter o kadar popüler değil(di) sonuçta. Bunca yıl bundan uzak durduğum için kendimi aptal gibi hissettim ve bununla uğraşmaya başladım.

Transformie!

Bu uğraş sonucunda 5k’dan daha küçük olan yeni jQuery eklentim (Diğer kütüphanelere de kolayca uyarlanabilir) ortaya çıktı: “Transformie“. Transformie javascript eklentisini web sitelerine ekleyerek WebKit’lerin önerdiği gibi IE Filter API’lerini CSS geçişlerine (transition) yönlendirebilirsiniz. (ÇN: Webkit web tarayıcı için kullanılan açık kaynaklı web içeriğini görüntüleme teknolojisidir.)

Transformie, Webkit sentaks içerisinde aşağıdaki fonksiyonları desteklemektedir (açılar, radyanlar veya dereceler içerisinde):

• Döndürme (rotate)
• Yeniden boyutlandırma (scale, scaleX, scaleY)
• Eğme, Çarpıklaştırma (skew, skewX, skewY)
• Matris-Dizey (matrix) (son iki niteleyici hariç: tx ve ty)

Bazı fonksiyonların çevrilmemesinin nedeni IE’nin Matrix fonksiyonunun Webkit’inki kadar esnek olmamasından kaynaklıdır. Bu nedenle tx ve ty, matris içerisindeki üçüncü sütunun ilk satır değeri ile ikinci satır değerini açıkca kullanamayacaksınız. (bir yolu var, fakat otomatik yeniden boyutlandırma özelliğini bozduğundan pek yardımcı olmuyor).

Lakin, çeviri fonksiyonlarını ve matrisin bu iki kayıp değerini top/left değerlerini değiştirerek kolayca ekleyebiliriz. Buradaki tek problemimiz Webkit’inkinden  biraz farklı hareket etmeleridir. Webkit çevirisi çıktıyı düzenleyemeyecektir.

Bu aynı zamanda Webkit içerisindeki eleman merkezini varsayılan konuma getiren -webkit-transform-origin css fonksiyonunu anlamamız için birebir. IE’de ve şu anki durumda benim eklentimde üst sol köşe hesaplamaların merkezini oluşturuyor. Bu da pozisyon değerlerini düzeltmede işleri oldukça kolaylaştıracaktır.

Esas konuya gelelim. Transformie ile çalışmanın ne kadar kolay olduğunu göstermek için Transformie, onun çalışması için gerekli olan Sylvester’ı (süper bir javascript programcığı ve matrix çoğaltma için çok yararlı!) ve jQuery’i ekliyorum size kalan sadece IE’yi çalıştırmak ve CSS transform’larına merhaba demek!

Göze çarpan bir eklemlenme ise hemen hemen DOMAttrChanged gibi davranan fakat ondan daha iyi düzenlenmiş “onpropertychange“. Bir eleman üzerindeki DOM özelliğinin (property) değişme zamanını size bildirme kapasitesine sahip. Ve siz stil niteliklerini izlerken, olay (event) ile birlikte değişen mevcut stili taşıyor.

…

Transformie Internet Explorer 6 - 7 ile test edildi ve diğer tarayıcılarda hiçbir işlem gerçekleşmiyor (ÇN: Paul burada diğer tarayıcılarda hataya yol açmayacağını kastediyor). Aşağıdakiler scripti kullanırken ayarlama yapmanızı sağlayacaklardır.

Dökümantasyon

• Transformie.inlineCSS = jQuerySelector (varsayılan: “*”, sayfa yüklenmesi sırasında satır arası stillerin parse edilmesi gerektiğini belkirtir. [daha iyi performans için pasifleştirin veya iyi tanımlayın])
• Transformie.stylesheets = Boolean (varsayılan: true, sayfa yüklenirken stil dosyasının parse edileceğini belirtir.)
• Transformie.trackChangesFor = jQuerySelector (varsayılan: “*”, hangi eleman değişikliklerinin izleneceğini belirtir [daha iyi performans için pasifleştirin veya iyi tanımlayın])

Eğer kullanmaya hazırsanız kolay bir şekilde stil dosyanıza veya stil etiketinize -webkit-transform veya sadece transform eklemeniz yeterli (İpucu için John Resig‘e teşekkürler!).

Yükleme Adresleri:

• Transformie 0.2 (tam paket, jQuery ve Sylvester dahil)
• Transformie 0.2 (5k, tek dosya)
• Transformie 0.2 (3k, tek dosya, minimize edilmiş)

Transformie jQuery gibi MIT/GPL çifte lisansına sahiptir.

Tadına çıkarın ve yorumlarınızı bana iletin!

Not (Altan): Çevirinin birebir yapılması zaten zor olan bir konunun daha da karmaşıklaşmasına neden olacaktı. Onun için mümkün olduğunca anlaşılır bir çeviri yapmaya çalıştım. Örnekleri de incelediğinizde konu oldukça anlaşılır olacaktır. Verilen örnekleri IE ile incelediğinizde web elemanları üzerinde örneğin ilk örnekteki gibi 45 derece döndürme gibi çeşitli manüplasyonların yapılmasının sağlandığını göreceksiniz.

Bunu yanında bize oldukça tanıdık olmayan bir kavrama, CSS Transform’larına giriş yapmış olacaksınız. Herhangi bir sorunuz olursa yorum olarak iletebilirsiniz. Sorularınız bilgimiz dahilinde cevaplandırılacaktır. Eğer gerekirse sorularınızı Paul’a ileteceğim. İyi kullanımlar!