CSS3 Renk Geçişinin body elemanına uygulamasındaki sorun ve çözümü

CSS3 yeniliklerinde yaralanıyoruz, tabi bazı sorunlar ortaya çıkıyor. Hatasız kod olmayacağı için, hata olur ama bir çözümüde vardır elbet diye düşünmemiz lazım.

Sorun tam olarak bir sayfanın ardalanının tamamına renk geçişi uygulamak istediğimizde belli bir yere kadar uygulayıp kalan kısmını tekrar ettirerek istemediğimiz bir durum oluşmasına neden oluyor.

Sorunun çözümünü aradığımda ilk sonuç http://stackoverflow.com/ sitesinde buldum biraz daha araştırınca benzer cevaplar gördüm ve sizlerle paylaşmak istedim.

background-image özelliğine eklenen renk geçişi kodu tekrar edecektir, biz bu tekrarı istemediğimiz için.

background-repeat: no-repeat;

ekledik. Ayrıca uygulana renk geçişinin sayfa zemininde sabitlenmesi için

background-attachment: fixed;

kodunu ekledik.

Diğer kod eklemeleri farklı tarayıcılar içindir.

Kaynaklar

CSS3 ile nesnelere gölge ekleme (box-shadow)

CSS3 özellikleri hayatımıza girmeye başladı. Artık projelerimizde CSS3
renk geçişini, metin gölgelendirme(text-shadow), kutu
gölgelendirme(box-shadow) kullanabiliyoruz. Kullandıkça görüyoruz ki
yeni özellikler güzel ancak eklemek için biraz daha fazla kod yazmak
gerekiyor ve bazı durumları oluşturmak için bazı araçlar gerekiyor.
Örneğin CSS Gradient Generator vs. gibi

Benzer bir durum kutu gölgelerinde(box-shadow) karşılaştım. Bazı kutu
gölgeleme işlerini bir köşeye kaydetmeye başladım çünkü kodu o kadarda
akılda kalıcı değil.

Sonra bunu yazı haline getirmek istediğimde gördüm ki zaten birçok kişi
bu konuda yazı yazmış. Bende bunları toparlayıp bir yazı çıkarayım
dedim. Bu yazıyı bir yere kaydedin lazım olacak muhakkak. Aslında bu
örnekler yakında editörler tarafından sunulacaktır diye düşünüyorum.

kutulara gölge verme yazımızı okursanız kutu gölgeleri hakkında
bilgi sahibi olabilirsiniz. Kutuları 4 köşe olduğunu düşünürsek.

4 Köşeye gölge vermek

Normal box-shadow değerleri dikey ve yatayda değerler verilince hep
açılı gölgeler veriyor. Biz tüm kutunun etrafına gölge vermek için; blur
değeri ve spread  değerini kullanıyoruz.

div {
	-webkit-box-shadow: 0 0 6px 4px black;
	-moz-box-shadow: 0 0 6px 4px black;
	box-shadow: 0 0 6px 4px black;
}

blur değeri spread  değerinden büyük ise farklı,

div {
	-webkit-box-shadow: 0 0 4px 6px black;
	-moz-box-shadow: 0 0 4px 6px black;
	box-shadow: 0 0 4px 6px black;
}

blur değeri spread  değerinden küçük ise farklı bir gölge efekti görüyoruz.

Çoklu Kenar Çizgisi Oluşturmak

Önceki makalede bahsettiğimiz gibi, çoklu kenar çizgileri oluşturmak
için; spread  değeri yardımı ile yapılan bu etki için diğer değerler
sıfırlanmalıdır.

div {
	border: 3px solid orange;
	-webkit-box-shadow: 0 0 0 3px black, 0 0 0 6px red;
	-moz-box-shadow: 0 0 0 3px black, 0 0 0 6px red;
	box-shadow: 0 0 0 3px black, 0 0 0 6px red;
}

Tek Köşeye Gölge Vermek

Kutuların sadece x veya y köşelerinden göstermek için box-shadow
tanımının sınırlarınız zorlamamız gerekiyor. Bu iş için bir kaç yöntem
mevcut, ben burada hepsini paylaşıyoruz avantaj ve dezavantajlarını
görerek karar vermek size kalmış.

1. Yöntem bir köşeye gölge verirken aynı zamanda diğer köşelere
kenar çizgisi atayarak.

div {
	-webkit-box-shadow: 1px 0 2px black;
	-moz-box-shadow: 1px 0 2px black;
	box-shadow: 1px 0 2px black;
}

2. Yöntem Diğer köşelere herhangi bir kenar çizgisi veya gölge
atamadan sadece bir köşeye gölge tanımlamak;

div {
	width:250px;
	height:250px;
	background: white;
	-webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
	-moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
	box-shadow: 0 0 0 4px white, 0 6px 4px black;
}

Mantık olarak iki gölge tanımı yapıyoruz, birincisi spread ile kutu
ardalan rengi ile aynı renkte 4px bir alan oluşturuyoruz, ikinci gölge
tanımı ile de bu tanımladığımız boş alanın dışına çıkacak köşeye daha
fazla değer verip dışarı çıkmasını sağlıyoruz.

3. Yöntem Bu örnekte kenar çizgisi oluşturulan yeni kutunun biraz
içinde kalır.

div {
	width:250px;
	height:250px;
	background: white;
	-webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
	-moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
	box-shadow: 0 0 0 4px white, 0 6px 4px black;
	border:1px solid #f00;
}

Eğer kenar çizgisi kullanılacaksa;

div {
	width:250px;
	height:250px;
	background: white;
	-webkit-box-shadow: 0 8px 6px -6px black;
	-moz-box-shadow: 0 8px 6px -6px black;
	box-shadow: 0 8px 6px -6px black;
	border:1px solid #f00;
}

Blur değeri kadar eksi spread değeri atayarak bu çözüm oluşturulmuştur.

4. Yöntem :before seçicisi yardımı ile absolute tanımlı gölge
eklenir.

div {
	width:250px;
	height:250px;
	position: relative;
	padding: 0 7px 0 0;
	overflow: hidden;
}

div:before {
	position: absolute;
	content: ' ';
	top: 0px;
	right: 7px;
	bottom: 0;
	left: 0;
	background-color: transparent;
	box-shadow: 0 0 5px black;
	border: 1px solid red;
}

Çıkmasını istediğimiz kenara padding tanımı yapılır, :before seçicisi
ile o köşeye ait kenar değeri padding ile aynı tanımlanır. :before
seçicisine box-shadow tanımı yapılır yapılan padding tanımından fazla
değer içermelidir.

3 Köşeye Gölge Tanımlama

Yukarıdaki 4.yönteme benzer bir kullanım ile yapılır.

div {
	width:250px;
	height:250px;
	position: relative;
	padding: 7px 0 7px 7px;
	overflow: hidden;
}

div:before {
	position: absolute;
	content: ' ';
	top: 7px;
	right: 7px;
	bottom: -7px;
	left: 7px;
	background-color: transparent;
	box-shadow: 0 0 5px black;
	border: 1px solid red;
}

Yukarıdaki yöntemin tersi yapılır ve kaldırılacak köşeye eksi değer
atanır.

Sonuç

CSS3 bizi resim yönetme araçlarına bağlı olmaktan olduğunca kurtarmaya
çalışıyor. Box-shadow bu kurtarma yöntemlerinin en güzellerinden birisi.
Ben yukarıda genelde iş yaparken lazım olan örnekleri sergiledim.
Kaynaklardaki linklerde box-shadow özelliği ile yapılmış çok farklı
gölge uygulamaları mevcut, bu uygulamaları incelemekte yarar var.
Tasarımları HTML’e çevirirken bu örneklerin aklımızın bir yanında
durmasında fayda var. Tasarımda gördüğümüz birçok gölge uygulamasını
box-shadow ile halledebiliyoruz. Birçoğunu diyorum, ama hepsi
diyemiyorum, çünkü tasarımcıların sınırları belli olmadığı için hepsi
demek zor.

box-sahdow müşteriyi patronu ikna edebildiğimiz yerlerde
uygulayabildiğimiz özellikler, ama gerçekten arayüz geliştiriciye büyük
kolaylıklar sağlıyor.

Arayüz Geliştiriciler İçin Paket Yönetimi – Bower

Nodejs ve npm’i anlattıktan sonra Bower’ı anlatmamak olmaz. Bower için npm’in arayüz geliştiriciler için olanı demek yanlış olmaz herhalde. Javascript’in sunucu tarafına geçmesi ile arayüz geliştiriciler daha çok otomatize olmaya başladı.

Birçok projemizde javascript ve css kütüphaneleri ve eklentileri kullanıyoruz. Kullandığımız bu kütüphane ve eklentileri sitemize eklemek ve güncellemek bizim için yük olmaya başladı. Burada size bir anımı anlatayım. sahibinden.com’da çalışırken jquery sürümünü yükseltmek bir dert olmaya başlamıştı. Güncellemeyi kimse göze alamıyordu. Çünkü her güncellemede bazı sorunlar çıkıyordu. En son bir iş olarak açıldı ve Sercan yaptı. Uzun ve dertli bir süreçti. Bu tip sorunlarla karşılaşmış bizim gibi arayüz geliştiriciler için bower velinimettir.

Gelelim bower’ı kullanmaya. Çeşitli editörlerden de bu işi yapabiliyoruz ama ben burada komut satırından çalıştırmayı göstereceğim.

Bower’ı yüklemek

Bower’ı yüklemek için npm’in bilgisayarınızda yüklü olması gerekmektedir. Eğer bilgisayarınızda npm yüklü değilse. Bilgi almak için Nodejs ve npm yazımızı okumanızı tavsiye ederim.

Sistemde npm yüklü ise komut satırına aşağıdaki kodu yazalım.

npm install -g bower

npm yazısından bildiğimiz gibi -g parametresi kurulacak kod blokunun genele kurulmasını sağlıyor. Kurduktan sonra bir sonraki adıma geçelim.

Paket bulmak

Npm’den bildiğimiz gibi kütüphane ve eklentiler paket olarak adlandırılıyor. Eklemek istediğimiz paketleri aramanın iki yolu var. Bower’ın arama sayfasını kullanmak ya da komut satırından aşağıdaki kodu yazarak aramak.

bower search <sorgu>

Bir örnek yapalım.

bower search bootstrap

Araması sonucundan bootstrap ile ilgili kütüphaneler listelenir.

enter image description here

Her bir satır bir paketi tanımlar. İlk mor renkli kısım ismi, ikinci beyaz kısımda paketin indireceği git adresini gösterir.

Paket yüklemek

Projemize eklemek istediğimiz paketi yüklemek için komut satırına aşağıdaki kodu yazarız.

bower install <paket_adi>

install komutundan sonra paket_adi ile yüklenebildiği gibi, github kısayolu, Git enpoint ve bir url’den de yüklenebilmektedir.

# kayıtlı paket adı
$ bower install jquery
# GitHub kısayolu
$ bower install desandro/masonry
# Git endpoint
$ bower install git://github.com/user/package.git
# Herhangi bir URL
$ bower install http://example.com/script.js

Normalde yüklemek istediğimiz paketi yazdığımızda paketin son sürümü yüklenir. Ayrıca istediğimiz sürümü indirmek için araya diyez işareti (#) koymamız yeterli.

bower install bootstrap#3.2.0

enter image description here

Paket yüklendiğinde proje klasöründe bower_components klasörü oluşturur ve içine dosyaları indirir. Bower bu klasörü otomatik olarak seçer ve adlandırır, ancak konfigürasyon (.bowerrc) dosyası yolu ile bize yolu ve ismini değiştirme imkanı verir.

bower_components klasörünü incelediğimizde yüklediğimiz paket ve bağımlılıkları otomatik yüklendiğini görürüz.

enter image description here

İlk yüklemeden sonra yüklediğiniz dosyayı html dokümanınıza eklemeniz gerekir. Bower paketleri genelde javascript dosyaları içerir, bazen css ve resim dosyası içerir.

<script src="bower_components/jquery/jquery.min.js"></script>

Paket kaldırmak

Yüklediğimiz bazı paketleri kaldırmak isteyebiliriz. Bunun için yazmamız gerke komut:

bower uninstall bootstrap

Birden fazla paketi kaldırmak için araya boşluk vererek isimlerini yazmamız yeterlidir.

bower uninstall jquery modernizr sass-bootstrap

bower.json dosyası

Eğer birden fazla paket kullanacaksanız bir bower.json dosyası ile bu paketleri yönetmek daha mantıklıdır. Zaten tek kütüphane için bower kullanmakta çok mantıklı gelmiyor bana. bower.json dosyasını kendimiz elle oluşturabildiğimiz gibi

bower init

komutunu yazıp, sorulan soralara cevap verip bir bower.json dosyası elde edebiliriz.

Örnek bir bower.json dosyası

{
  "name": "yeni-proje",
  "private": true,
  "dependencies": {
    "jquery": "~2.1.1"
    "swiper": "~3.0.8",
    "waypoints": "~3.1.1",
    "jcarousellite": "~1.9.3",
    "jquery.countdown": "~2.0.5"
  }
}

Yeni bir paket ekledeğimizde bower.json dosyasını güncellemek için –save parametresini eklememiz gerekir.

bower install jquery --save

Bu kullanımı alışkanlık haline getirmekte fayda var. Her paket indirdiğimizde bower-json dosyasını ayrıca açıp güncellemek çok mantıklı değil.

Paketi güncellemek

Paketlerimizi güncellemek için aşağıdaki komutu yazmamız yeterlidir.

bower update

Tüm paketler güncellenebildiği gibi

bower update <paket_adi>

Komutu ile sadece belirli bir paket de güncellenebilir.

Yüklü paketleri listelemek

Mevcut paketleri ve güncelleme olup olmadığını görmek için

bower list

komutunu kullanırız.

➜  yeni-proje  bower list
bower check-new     Checking for new versions of the project dependencies..
yeni-proje#0.0.1 /Users/fatih/yeni-proje
├─┬ bootstrap#3.2.0 (latest is 3.3.5)
│ └── jquery#2.1.4 (3.0.0-alpha1+compat available)
└─┬ jcarousellite#1.9.3
  └── jquery#2.1.4 (3.0.0-alpha1+compat available)

Sonuç

Bu makalede twitter’ın geliştridiği bower paket yöneticisini tanıtmaya çalıştım. Bower’ın arama, yükleme, kaldırma, listeleme komutlarını anlatmaya çalıştım. Bunlar genel itibari ile yeterlidir bence.

Sunucu taraflı kod yazarlarının alışık olduğu paket yönetim araçlarına biz arayüz geliştiricilerde böylelikle kavuşmuş oluyoruz.

Kalın sağlıcakla.

Kaynaklar

Medya dosyalarını birleştirerek optimizasyon yapmek

Bir çok web kod yazarı için sayfaların yavaş açılması büyük bir sorundur. Bu sorunun çözümü için çeşitli metotlar uygulanır. Farklı araçlar ile testler yapılır çözümler üretilmeye çalışılır. Sonuçta en kararlı hale ulaşılmaya çalışılır. Bende bir test aracı ile(Firefox – FireBug – YSlow) test ediyorum. Test ettiğim siteler HTTP isteklerinin çokluğundan dolayı düşük puan alıyor. Fazla sayıda css ve javascript dosyasının eklenmesi bu soruna neden oluyor. Bunun için en kolay ve basit yöntem css ve js dosyalarını birleştirmekten geçiyor.

optimizedenonce

Genelde projelermizde css dosyalarımızı genel stil için ve yazıcı için olmak üzere ikiye ayırıyoruz.

<link rel="stylesheet" href="/style/iskelet.css" type="text/css" media="screen"></link>
<link rel="stylesheet" href="/style/yazici.css" type="text/css" media="print"></link>

Normal ve çıktı almak için bunları bir css dosyasında birleştirerek HTTP istek sayısını azaltabiliriz.

<link rel="stylesheet" href="/style/iskelet.css" type="text/css"></link>

gibi iskelet.css içeriğinin yapısı ise aşağıdaki gibi olacaktır.

/* all media */
@media all {
    body {
        color:#666;
        font:13px arial, helvetica, sans-serif;
        padding:20px 0 30px 0;
        }
}

@media print {
    body {
        color:#000;
        font:12px arial, helvetica, sans-serif;
        padding:0;
        }
}

şeklinde yaparak css dosyalarımızı tek dosya içerisinde toplayabiliriz. Daha fazla sayıda css dosyası kullanmamız durumunda ise sunucu veya istemci taraflı kod yardımı ile css veya js dosyalarımızı tek bir dosya gibi gösterebiliriz. Bu konuya burada girmeyeceğim. Konu ile alakalı çalışmaların linklerini aşağıda veriyorum.

Safari ve Chrome’da metin girdi(textbox) alanlarını kenar çizgileri kaldıralım

Safari ve Google Chrome tarayıcıları her hangi bir metin girdi alanına(text input) odaklandığında bu elemanın etrafını bir şerit ile belirliyor.

Google Chrome Normal Hali

Google Chrome Odaklanmış Hali

Safari Normal Hali

Safari Odaklanmış Hali

Bu normalde güzel bir özellik, ancak biz eğer standart metin girdi alanı yerine kendi tasarladığımız bir metin girdi alanı koydu isek bu odaklanma çizgileri sorun çıkarıyor. Bir örnek yapalım.

En son projelerimden bonus.com.tr’de böyle bir sorun ile karşılaştığımda buna bir çözüm aradım. İlk kodum şöyle idi.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{background-color:#52c520;}

.aramaMetinKutusu{
	background:url(images/arama_zemini.gif) 0 0 no-repeat;
	width:202px;
	height:29px;
}

.aramaMetinKutusuOdak{
	background:url(images/arama_zemini.gif) 0 -31px no-repeat;
	width:202px;
	height:29px;
}

.aramaMetinKutusu input{
	width:190px;
	margin:5px 0 0 4px;
	border:none;
}

.aramaMetinKutusuOdak input:focus{
	width:190px;
	margin:5px 0 0 4px;
	border:none;
	background-color:#F6FFD4
}

</style>
</head>

<body>
<div class="aramaMetinKutusu">
    <input type="text" name="arama" onfocus="this.parentNode.className='aramaMetinKutusuOdak'" onblur="this.parentNode.className='aramaMetinKutusu'" />
</div>
</body>
</html>

Bu kodlarım Firefox ve IE’de sorunsuz çalıştı. Daha sonra sayfayı Google Chrome’da test ettiğimde aşağıdaki gibi bir sorun ile karşılaştım.

chrome_odak

Sorunun çözümünü araştırdığımda dış kenar çizgisini sıfırlamam gerektiğini gördüm.  

input{
	outline:0
}

tanımı bizi çözüme ulaştırdı.

Örnek kodu görmnek için tıklayınız.

Peki dış hat çizgisini kaldrımayalım demiştik şimdi ise kaldırdık, ne olacak şimdi? Burada odaklanma durumu için bir sınıf atayıp ona ayrı bir tanım yaptığımız için klavye kullananlar için sorun olmayacaktır.

Stylus ile Dinamik CSS Yazmak

enter image description here

CSS ile kod yazarken büyük projelerde ne kadar dikkatli olsak da sonunda normal olarak binlerce satırlık kodlar çıkabiliyor. Düzenli olmamız ve Firebug yardımı olsa da bu kodlar içinde dolaşmak ve yönetmek bazı sorunlar neden oluyor. Dinamik CSS burada devreye giriyor.

Dinamik CSS yazımında; değişken tanımı, css fonksiyonları, fazla kod işaretçilerinden kurtarma kalıtsallık ve 4 işlem gibi özellikleri ile bizlere yardımcı oluyor. Kısacası CSS’e dinamik bir yazım olanağı kazandırıyor.

Başlangıç

Başlama bakımından less sadece bir js dosyası ile başlayabildiğimiz için daha mantıklı less tak-çalıştır mantığı ile çalışırken sass ve stylus için biraz ortam hazırlamak gerekiyor.

Tabi bu ortam hazırlama işini bir sefer yapıyoruz. Bir kere kurup sonra devamlı çalışıyoruz. Ayrıca hemen çalıştır less’in performans sıkıntıları sorun oluyor.

Ben burada stylus’u sizlere anlatmaya çalışacağım. Birinin diğerine göre çok büyük avantajları olmadığı için sizde bu 3 ön-derleyiciden birini seçebilirsiniz. SASS için bu makaleyi okuyabilirsiniz. Ayrıca google araması sonucu başka Türkçe makalelere erişebiliyoruz.

Benim stylus’u seçmemdeki etkenlerden bazıları sahibinden.com’daki bazı etkenlerdi. Siz seçim yaparken kendi etkenlerinizi göz önünde bulundurarak bir seçim yapın derim.

Stylus’u Kurmak

Farklı işletim sistemlerinde stylus’u kurmak çok basit bir işlem.

Ubuntu

$ sudo add-apt-repository ppa:chris-lea/node.js
$ sudo apt-get update
$ sudo apt-get install nodejs
$ sudo npm install -g stylus

MacOS

$ brew install node
$ curl https://npmjs.org/install.sh | sh
$ npm install -g stylus

Window

Bu adresten nodejs‘i indirip kurun.

enter image description here

Sonra komut satırına

npm install stylus -g

yazıp stylus’u kurun. npm nodejs’in paket yükleme aracı.

nodejs kurulumu

Kurulum işi bitti.

Stylus’u kullanmak

Şimdi sıra stylus yazmaya geldi. Bir dosya açıp stylus yazmaya başladık ve dosyamızı kaydettik.

.deneme
    margin 0 auto
    width 150px

Örneğin anasayfa.styl peki sayfamızda bunu nasıl göreceğiz.

$ stylus -c site/styl/anasayfa.css

Komutunu çalıştırdığımızda anasayfa.css dosyası oluşturulacaktır. Dosya içeriği

.deneme{
    margin:0 auto;
    width:150px
}

Her defasında kodu çevirme kodunu yazmak yerine izleme(watch -w) komutu ile yaptığımız değişikliğin anında .css oluşturmasını sağlayabiliyoruz.

$ stylus -w site/styl/anasayfa.css

Çıkan dosyaların aynı klasörde olması karmaşaya neden olabilir. Çıktı dosyalarını farklı klasöre koyabiliyoruz.

$ stylus -w site/styl/ -o site/css/

Dinamik CSS yazılan bu sistemlerde sıkıntılardan bir tanesi yazdığınız kodu sayfaya .css olarak ekldiğiniz için kaynak koddaki .styl satırını Firebug vb. araçlarda göremiyoruz. Stylus’un bu durumu çözmek için iki çözümü var. İlki satır numaralarını göster(line -l) komutu

$ stylus -w -l site/styl/ -o site/css/

Yukarıdaki şekilde bir tanım sonucunda her tanımın üzerine styl dosyasındaki satırı yazılır.

Ayrıca FireBug’ın bir yan eklentisi olan FireStylus eklentisi var. Ancak ben çalıştıramadım. 🙁

Stylus Kalsör ve Dosya Yapısı

Stylus ile kod yazarken klasör ve dosyaların yerini baştan ayarlamak sonda sorun yaşamamak adına önemli

./index.html
    |-- styl
        |-- index.styl
        |-- reset.styl
        |-- buttons.styl
        |-- global.styl
    |-- css
        |-- index.css
        |-- reset.css
        |-- buttons.css
        |-- global.css

index.styl diye dosya oluşuturup diğer .styl dosyalarını bu dosya içinden çağırarak değişken ve css fonksiyonlarına her dosyadan erişme imkanı sağlamalıyız. index.styl dosyası

// Core variables and mixins
@import variables
@import mixins

// CSS Reset
@import reset

// global
@import global
@import layout

// Components: Buttons & Alerts
@import buttons
@import icons

Şeklinde bir yapı kurmak mantıklı.

Daha az kod yazmak, Esneklik

Stylus ile daha az kod yazıyoruz, ancak daha az kod yazarken kod içinde kaybolmuyoruz bu önemli.

Sass ve Less bu konuda normal css işaretlerini kullanırken stylus bu konuda bayağı bir esneklik sağlıyor. Sass’ında Stylus benzeri kullanım opsiyonu olduğunu duydum.

body
    padding 10px 5px

Yukarıdaki koda ilk baktığımızda CSS ile olan farklarını hemen dikkat çekiyor. Aslında kırpılmış CSS kodu gibi. Süslü parantezler yok({}), seçici ile değer arasındaki iki nokta üst üste(:) ve sondaki noktalı virgül(;) yok.

Yorumlama sonucu css;

body{
    padding:10px 5px;
}

İç İçe Seçiciler (Nesting)

Etkinlik için ard arda uzun seçiciler yazmak yerine iç içe tanımlar ile bu daha kolay sağlanır. Bu bize temiz bir Kalıtsallık sağlar ve kısa kodlar ile işimizi halletmemize yardım eder.

ul
        li
                float left
                a
                    color red

Sonuç CSS;

ul li{
    float:left;
}

ul li a{
        color:red;
}

CSS yazımını kolaylaştırıyor. Ancak dikkat etmek gerekiyor çok içiçe kullanımda üretilen CSS seçici yığınına dönebilir.

Değişkenler(Variable)

Değişkenler bir kere tanımlanan bir değeri bir çok defa kullanmamızı sağlayan yapılardır. Bir yerde değiştirdiğimizde tüm projede değiştirmenize olanak sağlar.

yazi-tipi-boyutu = 14px

body
    font yazi-tipi-boyutu Arial, sans-serif

Sonuç CSS;

body{
    font:14px Arial, sans-serif;
}

Değişken kullanımı css prececor ile yapılan güzel bir özellik ki CSS4 ile birlikte normal css’e de gelecek.

Stylus’ta ayrıca koşullu değişken tanımı da vardır.

position()
    position: arguments
    z-index: 1 unless @z-index

#logo
    z-index: 20
    position: absolute

#logo2
    position: absolute

Tanımı ile z-index tanımı olmayanlara 1 otomatik olarak tanımlanır.

Yorum satırı

Stylus’da yorumlar javascript kullanımı gibi

// ie7 fix et
body
    margin 0 // ie7 fix

/*
* Çoklu satırlı yorum
*/

Kalıtsallık

Bir özelliğin veya benzer bir sınıfın diğer bir özelliğe kalıtsal olarak geçmesini sağlar.

form
    input[type=text]
        padding: 5px
        border: 1px solid #eee
        color: #ddd
textarea
    @extends form input[type=text]
    padding: 10px

@extends ile hiyerarşik kalıtsallık alınabiliyor. Bu özellik şu an sadece stylus’ta var.

Sonuç CSS

form input[type=text],
form textarea {
    padding: 5px;
    border: 1px solid #eee;
    color: #ddd;
}
textarea {
    padding: 10px;
}

CSS Foksiyonları(mixing)

Css fonksiyonları bir sınıfa tanımlanmış tüm özellikleri başka bir yerde kullanmanıza yarar. Değişkenlere benzer fakat tüm sınıfı içerir. Ayrıca fonksiyon gibi parametre de alabilir.

Stylus’un az kod yazma prensibi bu tip karmaşık yapılarda diğer seçenekler göre ön plana çımasını sağlıyor.

border-radius(n)
    -webkit-border-radius n
    -moz-border-radius n
    -ms-border-radius n
    -o-border-radius n
    border-radius n
#btn
    border-radius(3px) /* veya border-radius 3px */
    background #e9573f

n parametrik olarak değiştirme imkanı veriyor bize.

Sonuç CSS

#btn {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    background: #e9573f;
}

Bu şekilde CSS3’ün önek(prefix) sorununa çözüm bulmuşta oluyoruz. NIB’i incelemekte yarar var.

4 İşlem

CSS içinde dört işlem işlerini yapabiliyoruz.

leftSpace = 10

a.link
    margin: (24px/2)
    left: 5 * leftSpace
    padding: 4px - 2

Sonuçta css aşağıdaki gibi olacakttır;

a.link {
    margin:12px;
    left:50;
    padding:2px
}

CSS’e Dönmek

Bazı durumlarda stylus ile işin içinden çıkamadığımız haller oluyor. Bu gibi durumlarda çözüm bulamazsak normal CSS kodu yazabiliyoruz. Bu kod blokları yorumlanmadan kalıyor.

@css {
    body {
        font: 14px;
    }
}

Sonuç CSS;

body {
    font: 14px;
}

Ben bu durumu svg kullanımda yaşadım. Ara sıra işe yarıyor.

Editör Özellikleri

Stylus yazmak için ben normaldede kullandığım Sublime Text 22yi editör olarak kullanıyorum. Sizlere de öneririm.

  • Sublime Text’in pkaet kontrolü açıp(MacOs’da Command+Shift+p , Linux/Windows’da Control+Shift+p)
  • “Package Control: Install Package” seçin (bir kaç saniye bekletebilir)
  • “Stylus” seçiniz.

Paket kontrolü otomatik olarak son sürüm renklendirme ve otomatik tamamlama seçenklerini indirecektir.

Kaynak; https://github.com/billymoon/Stylus/

Girintileri görmek

Girintilerin yoğun olarak kullanıldığı Stylus’ta girintileri görmek önem kazanıyor. Sublime Text’te girintileri göstermek için

preferences->settings-default 'ta "draw_white_space":"all"

yaparak gösterebiliyoruz.

Sublime Text2 girintileri görmek

CSS’leri Stylus’a Çevirmek

Daha önce yazdığımız CSS kodlarını stylus’a çevirmek istiyorsanız. Bunu komut satırı ile yapabiliyoruz. Büyük (-C) işareti yardımı ile bunu yapıyoruz.

$ stylus -C dosya_adi.css cikan_dosya.styl

ve css dosyamız stylus’a çevrildi. Bu çevirme işi beni çok tatmin etmedi.

http://css2stylus.com/ çevrimi içi araç stylus dan daha iyi çeviriyor.

Hataları Ayıklama

Diğer rakiplerine göre hata bulma ve düzenlemek stylus ile daha kolay.

enter image description here

Sorunlar

Stylus ile çalışmaya başladıktan sonra yaşadığım bazı sorunlar var. Bazılarını çözememe karşın bazıları ile hala sorunluyuz.

  • sublime text 2 stylus otomatik tamamlamayı çalıştıramadım
  • Firestylus çalıştıramadım, veya **stylus -l şeklinde css içine basıyor.**
  • Girintileme nedeni ile çıktı olan css de seçici zinciri uzuyor
  • özellik seçicileri kullanımında sıkıntı var Çözüldü
  • otomatik kısaltma bazı sorunlara neden oluyor. örn #ffffff

Sonuç

Stylus ile kod yazmaya başladığımda ilk başlarda biraz acemilik yaşadım ama hemen alıştım ve sonra geri dönmek sorun oldu. İnsan kolaya çok çabuk alışıyor.

Stylus’a geçtikten sonra dinamik sprite işine göz atmayı düşünüyorum.

Zamanla editörlerin ve tarayıcıların bu konuda ilerleme katederek daha hal alacağını

Kullandıkça stylus ile alakalı paylaşım devam edecektir.

Kalın sağlıcakla.

Kaynaklar

CSS ile Yüzde Çubuğu Hazırlama

Yüzde çubuğuna ben anket yaparken ihtiyaç duydum. CSS ile yüzde çubuğu yapmak bize çok büyük kolaylık sağlıyor. Diğer yöntemlere göre daha esnek ve kolay bir uygulamaya sahiptir CSS ile yüzde çubuğu hazırlamak.

CSS ile yüzde çubuğu yapmanın bir kaç yöntemi var, ben kendimce en uygun gördüğümü anlatacağım.

Bu yöntemin uygulaması gayet basittir. Diğer yöntemlerden avantajıda fazladan kod kullanılmamasıdır, sadece iki resim ile işimizi halledeceğiz. Anlamlı kodlama açısından avantajlıdır.

Sayfamıza saydam bir resim ekleriz ve ardalan konumunu kod içinde belirleriz

<img src="/images/yuzde_cubugu.png" alt="%45" class="yuzdeCubugu" style="background-position: -50px 0;" />

Sonrasında CSS kodumuzu yazarsak;

img.yuzdeCubugu {
  background: url(/images/yuzdeCubugu_ard.gif) top left no-repeat;
  padding: 0;
  margin: 0;
}

Kod kısmı bu kadar. Evet bu kadar kod ile yüzde çubuğunu oluşturduk. Kodun mantığını incelersek;

Fikir olarak güzel bir düşünceye sahip olan bu kod, saydam orta kısmı olan bir resme(bu resim bir bakıma kenar çizgisi görevide görüyor) yüzdeyi göstermek için bir ardalan(background) atayarak yüzde çubuğumuzu oluşturuyoruz. Bu ardalanın konumunuda, yüzde değerini göstermek için kullanıyoruz. Sunucu taraflı bir dil ile  veya Javascript ile bu yüzde çubuğundaki değeri belirtmek için ardalan konumunu değiştiririz. Ayrıntılı bilgi ve örnek uygulama için http://www.webappers.com/progressBar/ tıklıynız.

Resmin alt özelliğinede yüzde değerini yazdırmak ekran okuyucular için ve dolayısıyla erişebilirlik açısından önemli.

Beraber bir örnek yapalım. Mesela son günlerin en çok konuşulan Amerika Seçim Sonuçları için bir sayfa hazırlayalım.

Resimlerimiz yüzde çubugu

HTML kodumuzu yazalım.

<h1>Amerika Seçim Sonuçları</h1>
<p>Obama (%56)</p>
<img src="yuzde_cubugu.gif" width="104" height="14" alt="%56" class="yuzde1" style="background-position: -42px 0;" />
<p>McCain (%44)</p>
<img src="yuzde_cubugu.gif" width="104" height="14" alt="%44" class="yuzde2" style="background-position: -54px 0;" />

Yüzde çubuğunun genişliğini 100px yaptım ki, ayarlaması kolay olsun. Resim genişliğinin 104px görünmesinin nedeni 2px sağdan ve 2px soldan kenar çizgilerinin olması.

Obama %56 yapmak için ardalan konumunu 100-56= 44 resmin solundaki 2px mesafeyide çıkarınca hesabımız tam olacaktır. Yani ardalan konumu 100 – 56 – 2 = -42px şeklinde hesaplanacak.

Aynı şekilde McCain‘in yüzdesini de hesaplarsak. 100 – 44 – = -54px

CSS kodumuz;

h1 {
  font:18px Arial, Helvetica, sans-serif;
  color:#666;
}

p {
  font:bold 12px Arial, Helvetica, sans-serif;
  margin-bottom:5px;
  color:#666;
}

img.yuzde1 {
  background:url(gosteri1.gif) 0 0 no-repeat;
  padding: 0;
  margin: 0;
}

img.yuzde2 {
  background:url(gosteri2.gif) 0 0 no-repeat;
  padding: 0;
  margin: 0;
}

anket sonuç ekranı

Örnek kod FF3, IE6 – 7, Safari 3, Opera 9.6 ve Google Chrome 0.3Beta test edilmiştir.

Örnek kodu görmek için tıklayınız.

Kaynaklar

Dış Hat Çizgilerini(outline) Kaldırmak

Ben bu konuyu aslında dış hat çizgilerini kaldırmak olarak adlandıracaktım. Sonra bu konudan kitapta bahsettiğim halde sitemde bahsetmediğimi fark ettim ve dış hat çizgisi özellikleri adlı bir önceki makaleyi yazdım. Sonra da bu makaleye geçtim. Ancak biraz araştırınca, aslında dış hat çizgilerini kaldırmayı savunanlar ve karşı çıkanlar diye iki grup var. Kaldıralım diyenler ne için kaldıralım diyor kaldırmayalım diyenler ne için kaldırmayalım diyorlar inceleyip göreceğiz. Bir ara yol bulabilirmiyiz?

Kaldıralım  diyenler.

Kaldıralım diyenler genelde dış hat çizgilerinin oluşturduğu kesikli gri çizgiden rahatsız olanlar. Bunda en çok son zamanlarda gelişen metin yerine resim koyma metotlarınında etkisi var. Aşağıda benimde kullandığım metin yerine resim koyma metodunu kullanarak yaptığım örnekler.

text-indent:-9999px  ile görünmez yaptığımız metinleri outline ile görünür hale getirdiğimizde pek hoş görüntüler ile karşılaşmayız.

outline çizgileri

Firefoxda böyle bir sorun var iken ie ve google chrome’da sadece elemanın çevreleyen bir çizgi görünmektedir. Opera ve Safari’de ise tab ile sadece sayfa içindeki form elemanlarında gezebiliyoruz.

Bana burada kötü görünen metin yerine resim kullandığımız menü elemanlarını seçince sola doğru uzayarak çıkan kesikli çizgi yoksa ie ve chrome daki gibi elemanı saran kesikli çizgi bence kötü görünmüyor. Firefox’daki bu sorunu çözmek için bir kod var.

a{
	visibility:hidden
}

tanımı ie ve chrome gibi göstermesini sağlıyor.

outline çizgi düzeltme

Bide bu çizgileri hiç görmek istemeyenler var. Bunu engellemenin en kolay yolu outline:none veya outline:0 tanımlarıdır.

a{
	outline:none
}

Bu tanım bir çok css sıfırlama tekniğinde yer almaktadır. Örneğin Eric Meyer‘in sıfırlama tekniğinde. Bu yöntem bir çok yerde çözüm olarak sunulmaktadır. Kaynaklar kısmındaki linkler bunlardan bir kaçı.

Kaldırmayalım diyenler

Kaldırmayalım diyenlerde bu özelliğin erişebilirliği arttırmak için çıkarıldığını ve sadece klavyesini kullanan kullanıcılar için elzem bir özellik olduğunu belirtmektir. Eğer sitelerimizi erişebilir yapacaksak ve bunun için mesai harcayacak isek. Bu özelliği sıfırlamak mantıklı olmayacaktır.

Örneğin cnnturk.com sitesine Firefox ile girince sadece klavye kullanarak siteyi gezmeye çalışın. Bu sizi zorlayacaktır, çünkü tab’a her bastığımızda nerede olduğumuzu kestirmekte zorlanıyoruz. Burada tek yardımcımız alttaki tarayıcı çubuğunda her tab tuşuna bastığımızda bağlantıdan bağlantıya geçişlerde durum çubuğunda bağlantıların gösterilmesidir.

a {
	color: #004276;
	text-decoration: none;
	outline: none;
}

tanımı nedeni ile dış hat çizgileri bize yardımcı olmayacaktır. 

Şimdi webaim.org/ adresine girince klavyeden siteyi gezin. Bu sitede outline değeri standart bırakılmış ve ayrıca odaklanmalar için ayrı bir tanım yapılmıştır. 

a:active, a:focus, a:hover {
	background-color:#FFFFCC;
	color:#BF1722;
	text-decoration:underline;
}

Tanımları yardımı ile odaklanılan bağlantılar daha belirgin hale getirilmiştir. Böylece klavyesi ile siteyi gezmeye çalışan insanlara rahatlık sağlanmış olur.

Biz zaten klavye ile dolaşamıyoruz, faremizle takılıyoruz. Evet bir çok insan web sitelerini gezerken klavye kullanmıyor olabilir, ama bazen fare kullanan insanlar bile kısayol için klavye kullanıyor ve erişebilirlik için sadece klavye kullanan insanları göz ardı edemeyiz. Ayrıca web2.0 ile İnternet ortamına taşınan programlarda(google reader, google dokümanlar vb.) klavye kısa yollarından yararlanılmaktadır. Web mecrasında ileride daha etkin bir klavye kullanım oranlarına ulaşabiliriz. 

Sonuç

Sonuçta her iki görüşü savunanlar için bir çözüm üretmeye çalışırsak;

http://fatihhayrioglu.com/css-ile-basit-sekilde-fare-uzerine-gelincerollover-resim-degisimi-yapmak/ makalesinde anlattığımı örnek üzerinden devam edelim. 

yukarı görüldüğü gibi bir  sonuç çıkıyor. Kare olan menülerde o kadar kötü görünmüyor, ama buradaki gibi oval köşeli olunca outlinr çizgileri daha kötü bir görüntüye neden oluyor.

Çözüm önerimiz şu outline’ı kaldıralım, ama klavye kullanan kişiler içinde bir çözüm üretelim. Farenin üzerine geldiği hali(:hover) klavyenin tab’ı ile geldiğinde de uygulayalım. outline’ı kaldıralım tabi.

a.anasayfayaDon {
    display: block;
    width: 80px;
    height: 80px;
    background: url(images/degisen_resim.gif) 0 0 no-repeat;
    text-decoration: none;
    text-indent:-999px;
}
a:hover.anasayfayaDon, a:focus.anasayfayaDon {
    background-position: -80px 0;
    outline:none;
}

Şeklinde görünecektir. Bu görüntüyü Firefox, Google Chrome ve ie8’de aldım.

:focus desteği olmayan ie6 ve 7’de ise onun yerine :active sözde sınıfını kullanacağız. Buna rağmen olmayacaktır. outline özelliklerini desteklemeyen ie 6 ve ie7’de ise hala outline kesikli çizgilerinin görülmesi ilginç.  Bunun içinde şöyle bir çözüm yolu var. 

a:hover.anasayfayaDon, a:focus.anasayfayaDon, a:active.anasayfayaDon {
    background-position: -80px 0;
    outline:expression(hideFocus='true'); outline:none;
}

expression özelliğini sadece ie destekliyor. Daha önce bahsetmiştik. Bu bir bakıma css içinde javascript çalıştırmak gibi bir şeydir. Bu kod sonunda örneğimiz ie de de çalışacaktır.

Örnek çalışmayı görmek için tıklayınız.

Örnek IE 6, IE7, IE8, FF 3, Google Chrome 2’de test edilmiştir.