LESS ile hiyerarşik ve fonksiyonel css yazmak

LESS bir çeşit css derleyicisi ve aslında css sytax’ı üstüne ek özelliklerin eklenmiş olduğu bir araç. Çıktığı dönemden beri bütün projelerimde less dosyaları ile çalışıyorum ve son dönemdeki birkaç uygulama sayesinde çok daha kolay kullanılabilir olmasından dolayı herkese öneriyorum.

Neden LESS kullanmalısınız?

Aslında LESS kullanmak için genel ve çok önemli ihtiyaç yok bana kalırsa. Fakat artık web uygulamaları eskisi gibi basit veya küçük css dosyaları ile şekillendirilen uygulamalar olmaktan çıktılar. Güçlü css seçicileri olsa bile her (grup) element için bir sınıf tanımladığınızı düşünürseniz orta ölçekli bir stil dosyası binlerce satıra ulaşması çok normal.

Dosyanızın uzunluğundan çok iç içe tanımlı grup tanımlaları arasında kaybolmak çok kolay. Dolayısıyla css dosyanızı hiyerarşik bir şekilde organize edecek bir araca sahip olmak her zaman bir artı. Sadece bu ihtiyacınızı kullandığınız gelişitirici uygulamayı degiştirerek sağlamak da mümkün.

Örneğin çok basit bir css dosyanızda

Böyle bir CSS yapısı sık sık yazdığınız bir navigasyon kodu olabilir. Böyle bir yapı, tipik hiyerarşik modele uygun bir örnek. Böyle bir yapıyı LESS ile daha anlaşılır yazmak mümkün:

Gördüğünüz gibi herşey doğru şekilde indent edilmiş ve & gibi referanslar ile bütün css kurallarınızı hiyerarşik hale getirmeniz kolay. Böyle bir yapının sınıf isimlerinden bağımsızlaşması da işinizi kolaylaştıracaktır.

LESS’in diğer birkaç özelliği gercekten alışkanlık yapmaya yeterli. Eğer bir arayüz tasarımcısıysanız genelde matematiksel veya mimari modellere, gridlerle calışıyor olmalısınız. Aynı şeyler tipografi kuralları için de geçerli. Görsel her öğe bir şekilde birbirleriyle çok doğru orantılılar. Font boyutları, renkler vs.

Mesela font boyutunuz 16px iken satır aralığınız bunun 1.5 katı, padding’leriniz 1.5 katı belki koyduğunuz arayüz kuralına göre de kenarlıklarınız 0.2 katı olabilir veya ürettiğiniz grid arayüzünde bir grid genişliğini tanımlayıp sidebarınızı 2 kolon, ana içerik alanınızı 10 kolon olarak ayarlamış olabilirsiniz. Bunları düz CSS’de hesaplayıp tanımlamak durumundasınız.

Kuralların bu kadar net belirlenebildiği bir ortamda CSS’de statik renk kodlarına, sürekli hesaplama yaparak font boyutu, padding, margin, border radius hesaplamak zorunda kalıyor olabilirsiniz. LESS size bu matematiği LESS dosyanız içinde yapmanızı sağlıyor. Bir rengi belli bir contrast değeriyle daha açık veya daha koyu bir renge dönüştürebilir, matematiksel değerleri formülasyona sokabilir veya başka sınıfları kendi sınıfınıza dahil edebilirsiniz.

Örnek vermek gerekirse siteniz için genel bir oran ve başlangıç rakamı belirleyebilirsiniz, veya 3-4 renkten oluşan bir renk paletiniz var olabilir. Düz CSS’de her varyasyonu hesaplayarak yazmak zorunda kalabilirisiniz:

Yorumlarda kurallari yazmaya çalıştım ve normalde bir arayüz tasarımcısı böyle arayüzler geliştirirken bu tarz kurallara sahiptir, en büyük örnegini Apple arayüzlerinde görebilirsiniz. Mimari bir ürün gibidir.

Böyle kurallarla donatılmış bir arayüzün css’lerini yazarken her değeri hesaplamak zorunda kalabilirsiniz fakat LESS ile bu işlemlerin hepsini matematiksel olarak hesaplatmanız mümkün. Yukarıdaki örnek çok küçük bir örnek ama büyük bir css dosyasını düşünürseniz başa çıkılamaz bir iş haline gelebilir.
Ayrıca kuralları matematiksel yazmanın ikinci avantajı, bütün parametreleri birkaç değişken ile yönetip değiştirebilme olanağına sahip olmanızdır. Yukarıdaki örneğin LESS ile yazılmış hali:

Bu özellikleri çok kullanabilirsiniz fakat daha hiyerarşik bir yapıda ortak kullanılan parçaları gruplamak isteyebilirsiniz hatta bazı grupları parametrik olarak değiştirebilmeyi isteyebilirsiniz.

Örneğin bir kutu modeli ürettiniz, kenarları köşeli, içindeki h1 başlığını şekillendirdiniz ve bu kutu modelinin farklı boyutlarını ve renklerini üretiyorsunuz sürekli. Genel kutu modelinizde kullandığınız tipografik tanımlamaları, kenar boşluğu kurallarını tekrar tekrar yazmak istemiyorsunuz.

Ya da CSS3 kurallarının farklı tarayiıcılarla çalışması için yazmanız gereken 4 farklı kuralı farklı değerlerle sürekli tekrarlamak yerine fonksiyon şeklinde tanımlayıp LESS’e ürettirebilirsiniz.

Bunu açıklamak için CSS örnegi yazacağım son olarak.

Bu ornegin LESS ile hazirlayabileceginiz versiyonu.

Bu örnek yukarıdaki CSS’i üretecektir. Gördüğünüz gibi borderRadius tanımlarını da bir fonsiyon olarak tanımlayıp kullandım. Bunu yapmadan doğrudan kutu tanımlaması içinde de kullanabilirdim. Fakat uygulamanız içindeki tüm border radius kullanımınızı bu fonksiyon üzerinden ürettirebilirsiniz.

Son olarak, yazdığınız LESS dosyalarınızı css’e render ettirmenin bir çok yolu olduğunu unutmayın. Bunun için kullanıcının tarayıcısında javascript ile derletebilir, php veya diğer sunucu taraflı kütüphanelerle sunucunuzda derletip css’leri sunabilir veya LESS.app gibi uygulamalarla masaustünüzde yazarken eş zamanlı olarak css’lere derletip kullanabilirsiniz.

Less CSS

LESS CSS ile çalışmak oldukça keyifli. Kesinlikle herkese öneririm. Özellikle de sürekli php veya javascript gibi dillerle çalışan programcılar bunu seveceklerdir. Çünkü CSS yazarken değişken, kontroller gibi program yapıları kullanamıyorsunuz. Eğer sistematik bir css geliştiriyorsanız, mesela gridlerle çizilen, belli bir paleti olan veya pozisyon, kenarlıklar gibi değerleriniz sürekli tekrar eden değerler ise LESS CSS kullandığınız zaman aradaki farkı çok daha iyi hissedeceksiniz.

Örnek veriyorum, CSS3 ile daha çok tekrar etmeye başladığım border-radius için aynı değeri 3 satırda giriyorsunuz, eğer aynı radius değerini mesela 4 sınıf için tanımlamanız gerekiyorsa 12 kere bu satırları tekrar etmeniz gerekiyor. Less’de sadece border radius için parametrik çalışan fonksiyon tanımlayarak her yerde bu fonksiyonu çağırabilirsiniz.

Çok basit bir şekilde tek javascript dosyasıyla çalışıyor, eğer isterseniz sunucunuzda da less dosyalarınızı derleyip javascript bagımlılığı olmadan css olarak sunabilirsiniz.

Kesinlikle denemeye değer: http://lesscss.org/

Development sürecinde css ve js dosyalarının cachlenmesini engelleyin

Projenizi geliştirirken en büyük problemlerden biri olan cache sorununu apache sunucularda kolayca çözebilirsiniz. Tüm geliştirme süresince projenizin root’undaki htaccess dosyanıza css ve js dosyalarının cachelenmemesi için gerekli header’ları tarayıcıya gönderebilirsiniz.

Bu sayede tarayıcı bu dosyaları her aldığında expire olduklarını anlayacak ve her sayfa yenilendiğinde sunucudan tekrar isteyecektir.

Bunun için proje root klasörünüzdeki htaccess dosyanıza (yoksa oluşturun)

satırlarını ekleyin.

Web İkonları

v0.7’de sitenin alt kısmına yerleştirmek üzere tasarladığım, web 2.0 button görünümüne sahip ikonları Dosyalar bölümünde Grafik dizininde “rss_xhtml_icons.psd” ve “valid_css_xhtml_icons.psd” dosyaları olarak bulabilirsiniz. (Her ne kadar sayfalar valid olmasa da 🙂 )

http://www.mfyz.com/Files/Grafik

Kullanımı Creative Commons 4.0 lisansına uygun olmalıdır. Lisans hakkında bilgi almak için de http://www.mfyz.com/lisans/ adresini ziyaret edebilirsiniz.

(Fatih Hayrioğlu’nun) CSS Kitabı

Fatih Hayrioğlu 2 gün önce güzel bir css kitabı bitirdi. Çok detaylı olmasada biraz inceledim. Kitap oldukça profesyonel hazırlanmış, gayet sade ve öz şekilde neredeyse tüm css özniteliklerinden bahsedilmiş. Akış şemaları ile görsel ve gerçek kitaplar kadar kaliteli ~250 sayfa civarında bir şey çıkmış ortaya.

Kitabı indirmek için şu adresi izleyin :

in-app-purchases

CSS ve Transparanlık

CSS’de kullanacağınız transparanlık kuralları web standartlarına göre geçersizdir. Bu kurallar css dosyanızın geçersiz sayılmasına neden olacaktır. Eğer transparanlık kullanmak zorundaysanız javascript ile ayarlayarak css dosyalarınızın stabilitesini korur ve transparanlığı uygulamış olursunuz. En pratik çözüm olarak mootools’u öneriyorum.

Bazı web sayfalarında scriptler ile veya bazı nesnelerin yarı-saydam olduğunu görmüşsünüzdür. Bakınız sitedeki hata pop-upları, ipucu kutucukları (fade-in ve fade-out olması da bu methodla yapılıyor).

Bu nitelik, yani objelerin transparan olması tarayıcıların destekledikleri filtrelerdir. Modern internet tarayıcıları şu an bu niteliği barındırıyorlar. Mozilla, Firefox, Safari (KHTML motoru olduğundan Konqueror da destekler), Internet Explorer (5.5’den sonra desteklemeye başladı) ve Opera (9’dan sonra desteklemeye başladı).

Fakat tarayıcılar kendi filtre erişimlerine göre farklılık göstrerir. Fakat bazıları da ortak.

Bu nitelik tabiki CSS ile yönetiliyor ve biz de kullanırken CSS ile yapacağız. Fakat biliyorsunuz ki javascript ile css stilleri ile oynayabilirsiniz, dökümanın ilerleyen kısımlarında JavaScriptlerinizde transparanlığı yöneterek nasıl geçiş efektleri uygulayacaksınız onu göstereceğim.

CSS ile class atanmış bir objenin saydamlığını değiştirelim :

Bu kodda “transparan” sınıflı nesneler 50% saydam görünecektir. Tabiki block level elementler olması gerekir bu objelerin.

filter : alpha( Opacity=50 );
Internet Explorer ve Opera 9+ tarayıcılarda transparanlığı sağlayacaktır.

opacity : 0.5;
Mozilla, Firefox, Safari, Konqueror tarayıcılarında transparanlığı sağlayacaktır.

-moz-opacity : 0.5;
Bu gereksiz bir koddur fakat bilmeniz açısından yer veriyorum, Mozilla ve türevi tarayıcılar daha önceden böyle transparanlık sağlıyordu. Artık doğrudan “opacity” özniteliğini de destekliyor.

JavaScript ile nasıl?

Kodunuzda interval koyarak belirli sürede 1’er 1’er veya 5’er 5’er opacity düştüğünüzü varsayarsak

nesne adreslemeleri ile obenin anlık transparanlığını değiştirebilirsiniz. Interval’in boyutuna göre nesne o hızda ya kaybolur ya da oluşur.

Mootools?

Transparanlığı javascript ile yapabiliyoruz fakat mootools ile tabiki hepsinden daha kolay yapılıyor 🙂

Aynı zamanda Fx.Style ve çoğu Fx sınıfı fonksiyonlarında da rahatlıkla opacity tanımı kullanabilirsiniz.