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

Hr elementine stil vermek

CSS ile birlikte kodlama yaparken bir çok yerde <hr> etiketi yerine elementlerin üst ve alt kenarlık değeri ataması yapılarak kodlama yapılmaktadır, bunun yerine <hr> etiketini kullanabiliriz. <hr> daha kolay eklenir ve css desteklemeyen araçlarda sayfa görünümünün bozulmasını engeller.

<hr> elementinin kullanımı da kolaydır. <hr> elementinin tek sorunu farklı web tarayıcılarında farklı algılanmasıdır burada biz hepsine aynı göstermeye çalışacağız. Aşağıdaki kodlar IE5+, Opera5+ ve FF1.0+ test edilmiştir.

Bu konuyu yazmamın sebebi RSS besleyicimi feedburner’a ekledikten sonra sağ kolonun üstüne RSS besleyici ikonu ve linki eklemem ve altına ayraç olarak <hr> etiketini koyduktan sonra karar verdim. Görünüm hoş olmayan etiketi nasıl düzenlerim diye araştırdım ve sonucu sizlerle paylaşmak istedim.

<hr> Elementi hangi özellikleri destekliyor

  • width ve height değerini tüm web tarayıcıları destekliyor.
  • border özelliği Explorer ve Firefox destekliyor. Opera desteklemiyor.
  • IE color özelliğini destekliyor.
  • Firefox ve Opera background-color özelliğini destekliyor.
  • Tüm tarayıcılarbackground-image özelliğini destekliyor ancak Explorer ve Opera’da bazı sorunları var.

CSS kodu;

:::css
hr {
	border: 0;
	width: 80%;
}

Bu kodlama IE ve Opera’da düzgün görünecektir. Ancak Firefox’ta görünmeyecektir. background-color ekleyerek kodumuzu Firefox’a da uygun hala getiriyoruz.

:::css
hr {
	color: #f00;
	background-color: #f00;
	height: 5px;
}

<hr> elementine stil ataması yaparken color ve background-color özelliklerin her ikisini de kullanmalıyız. Yüksekliği 3px’in altındaki değerler için Opera’nın eski sürümleri sorun çıkarıyor.

<hr> hizalama

<hr> etiketini hizalamada IE için text-align özelliği, Firefox ve Opera için margin özelliği kullanılır.

:::css
hr {
	text-align: right; /* ie icin */
	margin-right: 0; /* diger brovserlar icin */
}

<hr> etiketini <hr> şeklinde kullanmak Xhtml kuralları açısından önemlidir. Bildiğiniz gibi Xhtml’de her etiket mutlaka kapatılmalıdır. Eğer etiketin bir kapatma etiketi yoksa kapama işaretinden önce bir bölme işareti(/) konarak bu işlem gerçekleştirilir. Örn: <img src=”” />, <br />, <meta /> gibi.

<hr/> resim kullanmak

Web sitelerinde bölümleri ayırmak için basit resimler kullanırız. Bu amaçla <hr /> elementini kullanabiliriz. Bu işlem için background-image özelliğini kullanmalıyız. Tabi bir kaç sorunumuz çıkacaktır farklı web tarayıcılarda. Firefox gayet güzel çalışırken IE6- ve Opera’nın eski sürümlerinde sorun çıkarır. resmin etrafında kenarlık çıkarır. bunu engellemek için aşağıdaki şekilde kodlamamızı yapmalıyız.

:::html
<div class="hr"><hr /></div>

ve CSS kodu

:::css
div.hr {
    background: #fff url(/images/ayrac_zr.gif) no-repeat scroll center;
    height:28px;
    width:180px;
}
div.hr hr {
	display: none;
}

Tüm web tarayıcılarında sorunsuz çalışacaktır. Yukarıdaki kodda <hr /> etiketi bir <div> içine alarak css ile <hr /> etiketi görünmez yapılarak esnek bir çözüm sağlanmıştır. Fazladan bir katman eklemek standartlara uygun kodlama için istenmeyen bir durum olsa da kodlama esnekliği ve tüm web tarayıcılarında aynı sonucu vermesi nedeni ile kullanılabilir bir kodlamadır.

Burada bir iki ufak sorun var. Birincisi uygulanan zemin resmi çıktı alırken görünmemesidir. Bunun için yazcı için CSS kodlarken bu özelliği es geçmeliyiz. İkincisi <hr> elementine margin ve/veya padding tanımı yaptığımızda bazı web tarayıcılarında kaymalara neden oluyor, bu sorunu çözmek için margin ve/veya padding değerini <div> vermeliyiz.

Kaynaklar

Categories CSS

Float uygulanmış elementleri tam kapsayamama sorunu

1- Firefox 3’de form elemenalarının Tıklanamaması Sorunu

Daha önce bir kaç kez bahsettiğim ve web kod yazarlarının birçok zaman karşılaştığı ‘Float uygulanmış elementlerin kapsayamama sorunu’ bugün xpur(Gökhan)’un bir sorusu üzerine bu yazıyı yazma gereği duydum. Kapsayamama sorunu yaşadığımız katman içinde eğer selectbox var ise Firefox 3’de bu selectbox tıklanabilir olmuyor. Açılmıyor yani Kodumuz aşağıdaki gibi

.kapsayamamaSorunu: after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.kapsayamamaSorunu {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */

sorunu çözümü ise .kapsayamamaSorunu ile :after arasındaki boşluğu kapatmak .kapsayamamaSorunu:after

.kapsayamamaSorunu:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Küçük bir nokta olsa da zamanı gelince insanın çok zamanını alıyor.

2- Sorunun Kısayolu

Bu konuda hakkında bir başka ipucuda float’uygulanmış nesnelerde bu sorun ile çok fazla karşılaşıyoruz, ben eskiden her bir sorunlu eleman için bu kodu yazıyordum. Sonra bunu bir sınıfa atayıp gerekli yerlerde bu sınıfı kullanmanın daha avantajlı olacağını düşündüm.

.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */
<div id="icerik" class="kapsayamamaSorunu">
    <ul>
        <li>
            <select>
                <option value="-1">Seçiniz</option>
                <option value="1">Deneme1</option>
                <option value="2">Deneme2</option>
            </select>
        </li>
    </ul>
</div>
<div class="resimAlani kapsayamamaSorunu">
	<img src="images/deneme.jpg" width="150" height="80" />
</div>

#icerik ve .resimAlani bu sorun ile karşılaştığımızı düşünelim. Tek tek bu kodu yazmaktansa .kapsayamamaSorunu isimli bir sınıf tanımlayıp sorunumuz ile karşılaştığımız her yerde bu sınıfı tanımlarız. Tek tanımla ile işimizi hallettik.

Categories CSS

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.

display:inline elemanlar arasındaki doğal boşluklar

Daha önce gözüme çarpmamış olmaması ilginç geldi. Belki çarpmıştırda ben es geçmişimdir. Durumu şöyle açıklayayım. Basit bir menü oluşturmak istedim.

<ul>
  <li>deneme</li>
  <li>olarak</li>
  <li>bir örnek </li>
</ul>

Yatay bir menü olacağı için

ul li{
	display:inline;
}

eklemesini yaptım, daha sonra da padding değerleri ekleyince fark ortaya çıktı.

ul li{
	padding:0 12px;
	background-color:#999
}

İşin aslı İnternet Explorer 6 ve 7’de istediğim gibi olurken yeni nesil tarayıcılarda arada fazladan boşluklar atanmış gördüm. margin:0 değeri atadım ama olmadı biraz araştırınca gördüm ki display:inline elemanlar(display:inline-block’ta da oluyor) arasında kod kısmında boşluk varsa bu boşluklar yorumlanan sayfada da görünüyor.

Aradaki boşlukları kaldırmak için bir kaç yöntem var. Yatay menü oluşturmak için diğer bir yöntem olan float yöntemini denemek bunlardan biri

ul li{
	float:left
}

Diğer bir çözüm yolu ise aradaki boşlukları kaldırmak.

<ul>
	<li>deneme</li><li>olarak</li><li>bir örnek </li>
</ul>
Categories CSS