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

CSS ile Tabloları şekillendirmek

Bu makalemizde CSS ile tablolarımızı nasıl daha okunaklı ve güzel gösterebiliriz onu anlatmaya çalışacağız. Bildiğiniz gibi CSS’in namını arttıran olay web sayfa iskeletinin tablolar ile değilde katman(<div>) ile kodlaması ile olmuştur. Ancak burada bir yanlış anlaşılma oluyor genelde, oda şudur ki tablolarda bir Xhtml elementidir ve gerektiği yerlerde kullanılmalıdır, amacımız tablo kullanmamak değil web standartlarına uygun kodlama yapmak olduğunu hiç bir zaman unutmayalım. Tablo kullanılacak yerlerde de katman kullanarak işi çığırından çıkılmaz hala getirmenin bir anlamı yoktur. Tabloların kullanıldığı yerlere bir kaç örnek verelim:

  • Takvim
  • Finansal Tablolar
  • Çizelgeler
  • Plan Listeleri(otobüs, uçak iniş kalkış saat listesi vb.)

Yukarıda verdiğimiz örnekler vb. durumlarda kullanılan tablolar genelde okunması zor ve göze hoş gelmeyen yapılardır. Biz CSS ile bu tabloları daha okunaklı, kodlaması daha kolay ve güzel hale getireceğiz.

Tabloların genel yapısı aşağıdaki gibidir.

:::html
<table>
    <tr>
    	<td>... içerik ...</td>
    </tr>
</table>

Yukarıda kullanılan tablo yapısı genelde kullanılan tablo yapısıdır. Ancak tüm araçlara uyumu, erişebilirliği ve kolay kodlama için daha gelişmiş bir tablo kodlaması kullanılmalıdır. Örnek

:::html
<table cellspacing="1" class="uzerinde" id="golKrallari" summary="Türkiye Süper Ligi’nin son 3 yılında en çok gol atan futbolcu listesi">
<caption>1. LİG TARİHİNDEKİ GOL KRALLARI(SON 3 YIL)</caption>
<thead>
<tr>
	<th scope="col" abbr="sezon" class="bgYok">SEZON</th>
	<th scope="col" abbr="adsoyad">ADI-SOYADI</th>
	<th scope="col" abbr="takım">TAKIM</th>
	<th scope="col" abbr="maç">MAÇ SAYISI</th>
	<th scope="col" abbr="gol">ATTIğžI GOL</th>
	<th scope="col" abbr="ortalama">ORTALAMA</th>
</tr>
</thead>
<tbody>
<tr>
	<th scope="row" abbr="03-04" class="baslikBir">2003 – 2004</th>
	<td class="tabloZRFark">ZAFER BİRYOL</td>
	<td class="tabloZRFark">Konyaspor</td>
	<td class="tabloZRFark">34</td>
	<td class="tabloZRFark">25</td>
	<td class="tabloZRFark">0.74</td>
</tr>
<tr>
	<th scope="row" abbr="04-05" class="baslikIki">2004 – 2005</th>
	<td>FATİH TEKKE</td>
	<td>Trabzonspor</td>
	<td>34</td>
	<td>31</td>
	<td>0.91</td>
</tr>
<tr>
	<th scope="row" abbr="05-06" class="baslikBir">2005 – 2006</th>
	<td class="tabloZRFark">GÖKHAN ÜNAL</td>
	<td class="tabloZRFark">Kayserispor</td>
	<td class="tabloZRFark">32</td>
	<td class="tabloZRFark">25</td>
	<td class="tabloZRFark">0.78</td>
</tr>
</tbody>
<tfoot>
<tr>
	<td colspan="6">Kaynak: Fatih Futbol Okulu(F.F.O)</td>
</tr>
</tfoot>
</table

Tablomuzun içeriği bu kadar kısa olmasına karşın ne kadar okunaksız ve kötü göründüğü ortada. Bizim amacımız web sayfaları kodlarken sadece bilgi sunmak değildir. Bilgiyi en kullanışlı ve güzel şekilde sunmaktır.

Burada normal tablo kodlamasından farklı olan etiketleri açıklarsak. <table> kodu içindeki summary özelliği ile tablo içeriğinin bir özet açıklaması yapılmıştır. Bu özellik web değilde cep telefonu, pda vb. araçlarda tablo okuması için önemlidir. <caption> özelliği tablonun başlığını oluşturmak için üretilmiş bir etiketitir ve bu amaçla burada kullanılmıştır.(Bir çok sitede tablo başlığı için <p>, <div> ve <hx> kullanılmaktadır. Bu kullanımların yanlış olduğunu burdan belirtelim.) <th>etiketi bu alanın bir başlık olduğu belirtir,<th> etiketi içerisinde kullanılan scop=”col” ve scop=”row” özelikleri yine küçük ekranlı araçlar için başlık ile içerik arasındaki ilişkiyi göstermesi bakımından önemlidir. abbr özelliği ise küçük ekranlarda başlığın sığmaması halinde görüntülenecek başlığın kısaltmasını içerir.

Ayrıca thead, tbody ve tfoot etiketleri tabloyu 3 alana böler ve CSS ile XHTML etiketleri arasında daha fazla etkileşim yapmamızı sağlar.

Tabloları CSS ile güzelleştirirken renk seçimi önemlidir. Birbirine uyumlu renkleri seçmek her zaman güzel sonuçlar doğuracaktır. Ben biraz sade tasarımları beğendiğim için gri ağırlıklı bir tablo yapacağım. Genelde tablolara uygulanacak renklerin seçimini yaparken web sitesinin tasarımına uygun renkler seçilmelidir. Bu yaptığımız web sitesindeki tutarlılığı korumamızı sağlayacaktır. Benim seçtiğim renkler:

Tablo Renkleri

CSS kodunu yazmaya başlayalım:

:::css
body {
	font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

#golKrallari {
	width: 700px;
}

Tablonun başlığını(<caption>) düzenleyelim

:::css
caption {
    padding: 0 0 5px 0;
    font: 14px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-align: right;
}

Daha sonra kolon başlıklarını <th> kodlayalım. Burada başlıkların daha güzel görünmesi için kolon başlıklarının zeminine degradeli bir zemin resmi koyalım. Ayrıca kolon ve satır başlıklarının birleştiği sol üst hücreyi diğerlerinden ayıracak(.bgYok) bir zemin resmi ve rengi olmadan kodlayalım:

:::css
th {
    font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #474747;
    border-bottom:1px solid #E0E0E0;
    border-right:1px solid #E0E0E0;
    border-top:1px solid #E0E0E0;
    letter-spacing: 2px;
    text-align: left;
    padding: 6px;
    background: #F3F3F3 url(images/tablo_baslik_zr.gif) repeat-x;
}
th.bgYok {
    border-top: 0;
    border-left: 0;
    border-right: 1px solid #E0E0E0;
    background: none;
}

Kolon başlıkları ile satır başlıklarını bir birinden ayıralım. Ayrıca Satır başlıklarına bir top ikonu koyalım. Burada dikkat edilmesi gereken bir konuda birbirini takip eden tablo satırlarının zemin rengini farklı farklı tanımlayarak tablo okunurluluğunu arttırmaktır. Biz burada bir satırın zemin rengini #F3F3F3 diğer satırın zemin rengini de #FFF yaptık.

Burada ikonlardan farklı olanın bordo-mavi olması ve bu satırın Fatih Tekke’ye denk gelmesi tamamen bir rastlantı dır 🙂

:::css
th.baslikIki {
    border-left: 1px solid #E0E0E0;
    border-top: 0;
    padding-left:25px;
    background: #fff url(images/top2.gif) 5px no-repeat;
}

th.baslikBir {
    border-left: 1px solid #E0E0E0;
    border-top: 0;
    padding-left:25px;
    background: #F3F3F3 url(images/top.gif) 5px no-repeat;
}

Veri içeren hücreler içinde kenarlık, zemin rengi, font rengi ve padding tanımlaması yapalım ve burada da birbirini takip eden satırlar için farklı renk uygulamasını yapalım. Bunun için bir sınıf oluşturup(.tabloZRFark) farklı satırlara atayalım.

:::css
td {
    border-bottom:1px solid #E0E0E0;
    border-right:1px solid #E0E0E0;
    background: #fff;
    padding: 6px;
    color: #474747;
    font:11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

td.tabloZRFark {
    background: #F3F3F3;
    color: #474747;
}

Tablonun alt kısmı içinde aşağıdaki kodu yazalım:

:::css
tfoot tr td{
    text-align:right;
    border-left:1px solid #e0e0e0;
    border-bottom:2px solid #e0e0e0;
    font:italic 9px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

Son olarak farenin imleci üzerine gelen satırın zemin rengini değiştirerek okunurluluğu arttırmak için aşağıdaki kodları yazalım:

:::css
#golKrallari tr.uzerineGelince td, #golKrallari tr.uzerineGelince th{
    background:#474747;
    color:#f3f3f3;
}

fare imlecinin satır üzerine geldiğinde çalışacak javascript kodu:

:::javascript
function uzerinegelince()
{
if (document.getElementById && document.createTextNode)
{
var tables=document.getElementsByTagName('table');
for (var i=0;i<tables.length;i++)
{
if(tables[i].className=='uzerinde')
{
var trs=tables[i].getElementsByTagName('tr');
for(var j=0;j<trs.length;j++)
{
if(trs[j].parentNode.nodeName=='TBODY')
{
trs[j].onmouseover=function(){this.className='uzerineGelince';return false}
trs[j].onmouseout=function(){this.className='';return false}
}
}
}
}
}
}

Bu kodu tetiklemek için:

:::html
 <body onload="uzerinegelince()">

kodunu yazalım. Fare imlecinin üzerine geldiğinde satır zemin rengi ve metin renginin değişmesi bölümün de bir iki dikkat edilmesi gereken yer var. İlki tablodaki class=”uzerinde” ve javasciriptteki if(tables[i].className==’uzerinde’) aynı olması, ikincisi javascriptteki

:::javascript
trs[j].onmouseover=function(){
	this.className='uzerineGelince';
	return false;
}

ile

:::css
#golKrallari tr.uzerineGelince td, #golKrallari tr.uzerineGelince th{
    background:#474747;
    color:#f3f3f3;
}

aynı olması. Evet tablomuz sona erdi.

Sonuç sayfasını görmek için tıklayınız.

Kodlar Windows ortamında Firefox 2.0, IE 5.01, IE7 ve Opera 9.0 web tarayıcıları ile test edilmiştir.

Kaynaklar

CSS ile sayfalarımızı ve elementlerimizi ortalamak

CSS’de kullandığımız içerik alanlarını (blok-level ve inline-level) elementleri nasıl oratalayacağımızı göreceğiz. Inline-level elementleri text-align:center özelliğini kullanarak ortalayabiliriz. Blok-level elementleri ortalamak için ise bir iki metod vardır. Sırası ile inceleyelim.

1- Genişleyebilir blok-level elementleri ortalamak

.ortala {
  margin-left: 10%;
  margin-right:10%;
}

HTML kodu;

<p class="ortala">Lorem Ipsum is simply dummy text of the printing and typesettingindustry. </p>

Genişliği sabit olmayan, genişleyebilir blok-level elementlerin ortalanması için bu metod kullanılır. Tüm web tarayıcılı bu metodu destekler.

2- Sabit genişlik atanan blok-level elementlerini ortalamak

2.a. margin auto ile genişliği belirlenmiş elementleri ortalamak

Mantık olarak, içerik blokunun sağ ve sol margin değerlerine auto ataması yapıyoruz.

W3C’de bu konu hakkında şu ifade mevcuttur: “Eğer margin-left ve margin-right değerleri auto verilirse bu blokun ortalanması anlamınagelir.”

.ortala2 {
  margin-left: auto;
  margin-right: auto;
  width: 50em;
}
NN4 (Mac and Win), Win/IE4, Win/IE5, Win/IE5.5, Win/IE6 (Garip mod : quirks-mode) web tarayıcılıar bu kodu desteklememektedir. Bu sorunu aşabilemke için iki satır kod yazmamız yeterli olacaktır.(NN4 hariç) Bu metodu desteklemeyen web tarayıcıları için body etiketine **text-align:center** ataması yaptığımızda sorun çözülmüş demektir.
body {
  text-align: center;
}

.ortala2 {
  margin-left: auto;
  margin-right: auto;
  width: 50em;
}

Yanlız bir sorunumuz daha var. text-align:center ataması body içindeki tüm elementlerin ortalanmasına neden olacaktır. Bunu engellemek için bir katman oluşturup bu katman da hizalama değerini başlangıç değerine (yani sola yaslamalıyız) çevirmeliyiz.

body {
  text-align: center;
}

.ortala2 {
  margin-left: auto;
  margin-right: auto;
  width: 50em;
  text-align: left;
}
Bu kodlama tüm web tarayıcılarında çalışacaktır.(NN4 hariç)

2.b. Konumlandırma (positioning) kullanılan elementlerin negatif margin ile ortalanması

Göreceli konumlandırılmış elementleri ortalamak için bu metod kullanılabilir. Bu metod da bir önceki gibi fazladan bir katman kullanmaya gerek yoktur. Genişlik tanımı yapılan göreceli konumlandırılmış elementin margin-left değeri element genişliğinin yarısı(1/2) kadar verilerek sağlanır.

.ortala3 {
  width: 720px;
  position: relative;
  left: 50%;
  margin-left: -360px;
}

Burada sizlere bir iki metodla element ortalamayı gösterdik. Siz kullandığınız yer ve ihtiyaçlarınıza göre bunlardan birini kullanabilirsiniz.

HTML dökümanının içine yeniden HTML ekleme

HTML sayfalarına CSS, Javascript, resim video, ses vd. dosyaları ekleyebilirken diğer html dosyalarını eklemek için iframe, ajax isteği ile veya çakma script dosyası gibi gösterilmiş html dosyaları ile ekleyerek yapıyorduk/yapıyoruz. HTML import ile artık html dosyalarımızı html içine ekleyebileceğiz.

HTML kodlama yapımızı değiştirecek bu yapıyı henüz sadece Chrome ve Chrome alt yapısını kullanan tarayıcılar(Opera ve Chrome mobil) destekliyor.

HTML içine HTML’i eklerken normal CSS ve Javascript ekler gibi ekliyoruz. Bir iki farklı yanı var. İlk fark rel=”import” kısmı. İkinci fark ise direk HTML içine eklenmiyor içerik. Bu kod ile tarayıcı yüklüyor, sahne arkasında saklanarak kulanıma hazır hale geliyor. Biz kullanmak istediğimizde javascript ile bu içeriği ekliyoruz.

Kullanımı;

<head>
  <link rel="import" href="/sablonlar/ekmek.html">
</head>

Önemli bir not: Bu yöntem ile aynı domain altındaki dosyaları ekleyebiliyoruz. Farklı domain’den çağıralacak dosyalar için CORS özelliğinin açılması gerekmektedir.

Daha sonra işin içine javascript giriyor.

<link rel="import" id="sablon" href="ekmek.html">

İlk olarak javascript ile daha kolay erişmek için import koduna bir id=”sablon” ekleyelim. Daha sonra ayrı html dosyası oluşturalım mevcut HTML’in içine ekleyeceğimiz.

ekmek.html;

<section id="icerik">Ekmke 1 TL</section>

Mevcut HTML’in body kısmında javascript ile import elemanını yakalayalım.

var ekmekAl = document.querySelector('#sablon');

Sonra içe aktracağımız HTML’in içindeki elemanı yakalayalım.

var ekmekIci = ekmekAl.import.querySelector('#icerik');

Son olarakta aldığımız bu içeriği mevcut HTML içine ekleyelim.

document.body.appendChild(document.importNode(ekmekIci, true));

Sonuç aşağıdaki ekran görüntüsündeki gibi olacaktır.

HTML import

Örnek bir dokümanı oluşturup, kendi bilgisayarınızda açtığınızda yukarıdaki sonucu göremeyeceksiniz. Görmek için bir Server’a ihtiyacınız olacak. Örneğin http://localhost gibi bir urlde erişmeniz gerekecek.

Eklenen html dosyası CSS ve Javascript dosyaları gibi mevcut HTML’in yüklenmesini bloklayacaktır. Bunu engellemek için async özniteğini eklemek yeterlidir.

<link rel="import" id="sablon" href="ekmek.html" async>

Desteklemeyen tarayıcılar için

Bu özelliği başta belirttiğim gibi sadece Chrome tabanlı tarayıcılar desteklemektedir. Peki desteklemeyenler için bir çözüm yokmudur derseniz. İlk olarak bu özelliği taracının destekleyip desteklemediğini kontrol etmek için

if ('import' in document.createElement('link')) {
    // HTML imports destekleniyor
} else {
    // HTML imports desteklenmiyor.
}

böyle bir javascript kodu var. Ayrıca Polymer grubunun ürettiği HTMLImports adlı bir çözüm var.

Sonuç

Sonuç olarak güzel bir özellik ama bazı sorunlarıda beraberinde getiriyor. Örneğin sonradan javascript yardımı ile eklenen html arama motorlarının tarama alanı dışana çıkması sorunu oluşturacaktır. Google’un javascriptleri yorumlayacağı durumda bu sorun olmaktan çıkacak gibi. Ama henüz erken.

Bir çok alanda kullanılabilecek güzel bir yapı. Benim ilk duyduğumda sadece html ile yapılan bir yapı olduğunu düşünmüştüm. Sonra işin içine javascript girdiğini öğrendiğimde biraz soğudum, ama buda iyidir. Sadece html ile yapmak daha güzel olurdu.

Metin Yerine Resim/Flash Ekleme Teknikleri (Image Replacement)

Xhtml ile kodlama yaparken genelde metinleri kullanırız. Çünkü metinlerin eklemesi, düzenlemesi kolaydır ve arama motorları indekslemesini kolay yapar. Ancak bazı durumlarda metin yerine resim kullanmak sitemizin görselliği açısından önemlidir metinler CSS ile bir yere kadar şekillendirilir, bir çok metin şekillendirme yöntemini CSS ile yapamayız. Bazı durumlarda metin yerine resim kullanmak durumunda kalırız.

Web standartlarına göre kodlama yaparken metin yerine resim kullanıldığı durumlarda arama motorlarının rahat indekslemesi ve CSS’i ve resimleri desteklemeyen tarayıcılarda görüntünün ve erişebilirliğin bozulmaması için Metin Yerine Resim Ekleme Teknikleri(Image replacement) kullanılır.

Metin yerine resim eklemek için bir çok teknik geliştirildi ve geliştirilmektedir, bazıları CSS ve resimlerin desteklenmediği tarayıcılarda sorun çıkardığı için web kodlamacısı tarafında kullanımı terkedildi. Biz burada belli başlı 4 metin yerine resim ekleme tekniğini anlatacağız ve avantaj, dezavantajlarını sizlerle paylaşacağız.

1- Fahrner’in Metin Yerine Resim koyma tekniği (Fahrner Image Replacement – FIR)

Todd Fahrner arkadaşımızın ürettiği bu kod en popüler metotlardan biridir. Uygulanması en basit metot olması kullanımını arttırmıştır. Teknik çok basittir yerine resim konacak metin <span> etiketi içine alınır. Xhtml kodu:

:::html
<h1> <span>Selam</span> </h1>

Metin yerine görünecek resim <h1> etiketine uygulanır: CSS kodu

:::css
h1 {
	background:url(selam.gif) no-repeat;
	width: 62px;
	height: 19px;
	font-size:16px;
}

ve son olarakta <span> etiketi içindeki metni gizlemek için:

:::css
span {
	display: none;
}

Örneği görmek için tıklayınız.

Bu yöntem bir çok yönden avantajlıdır ancak son yazdığımız kod biraz problemlidir, Bir çok ekran okuyucu bu kodda sorun çıkaracaktır. Erişilebilirlik açısından eksik bir kodlama tekniğidir. Bu eksikliği gidermek için başka yöntemler geliştirilmiştir.

2- “Phark” Metin Yerine Koyma Tekniği

www.phark.net’in ürettiği bu teknik ekran okuyucuları tarafından görüntülenecektir, bu yönüyle FIR tekniğinden avantajlıdır. Ayrıca fazladan <span> etiketi üretmemesi yönüylede avantajlıdır. Html kodu:

:::css
<h1>Selam</h1>

FIR tekniğinden farklı olarak bu teknikte text-indent değeri yüksek eksi değer(genelde -999px) verilerek ekranı dışına atılarak üretilir. CSS kodu:

:::css
h1 {
	text-indent: -999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
}

Örneği görmek için tıklayınız.

Bu teknik ekran okuyucularda sorunsuz çalışacaktır ancak resim görüntülemeyi iptal eden kullanıcılar bu metot ile kodladığımız sayfalarda sorun yaşayacaktır. Biz bu tekniği CSS ile Menü Oluşturmak V – Resimli Menüler makalemizde uygulamıştık.

3- Gilder/Levin Metin Yerine Koyma Tekniği

Tom Gilder ve Levin Alexander bu kodlamayı geliştirmiştir. Ekran okuyucularında ve resim görüntülemeyi iptal eden kullanıcılarda sorunsuz çalışır. Bu teknikte boş bir <span> etiketi ile yazının üzeri kapatılır, eğer resimleri kapatıp sitenizi ziyaret eden olursa altındaki metni görür.

Bu metot için fazladan <span> etiketi üretilir. Html kodu:

:::html
<h1> <span></span>Selam </h1>

<h1> etiketinin boyutları resmin boyutları ile aynı atanır ve göreceli olarak konumlandırılır. CSS kodu

:::css
h1 {
	width: 62px;
	height: 19px;
	position:relative;
	font-size:16px;
}

Ekstradan üretilen <span> etiketi mutlak konumlandırma ile konumlandırarak metnin üzerini kapatırız. Ayrıca boyutları %100 verilerek tam kapanma sağlanır. Son olarakta görünecek resim zemin resmi olarak atanır.

:::css
h1 span {
	background: url(selam.gif) no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}

Örneği görmek için tıklayınız.

Bu metot hem ekran okuyucuları hemde resim göstermeyen tarayıcılarda sorunsuz çalışır. Tek dezavantajı fazladan bir <span> etiketi eklenmesidir.

Fakat bu metodun boş, anlamsız, ekstra bir <span> elementi ile gerçekleştirilmesi, “web anlamlılığı” bakımından iyi bir davranış değil. “Web Anlamlılığı” bize her HTML elementinin bir görevi olması gerektiği ve gereksiz kodlamadan kaçmamızı söylüyor. Mehmet Doğan

Bunların dışında Radu, Leahy/Langridge, Dwyer, Lindsay ve Shea Enhancement Teknikleride mevcuttur. Ayrıca hala bir çok teknik çıkarılmaktadır.

4- Inman Metin Yerine Flash ekleme Tekniği (Inman Flash Replacement (IFR)) ve Boyutlandırılabilir Inman Metin Yerine Flash ekleme Tekniği (Scalable Inman Flash Replacement (sIFR))

Metin yerine resim ekleme tekniklerinin amaçlarında bir taneside herkesin bilgisayarında olmayan fontları kullanmaktır. Mike Davidson ve

Shaun Inman daha yaratıcı bir teknik geliştirdiler. Metin Yerine Flash ekleme Tekniği ve Boyutlandırılabilir Metin Yerine Flash ekleme Tekniği.

Flash swf dosyalarına font gömmeye izin veriyor, metin yerine resim koymak yerine metin yerine niye flash dosyası koymayalım diye düşünen bu arkadaşlar bize gerçekten çok farklı bir tekniği öğrettiler, yani sFIR’ı. Bu yöntemde javascript, doküman içinde belirli bir metini veya belirlenmiş sınıf ismini bir döngü ile bulup yerine flash elementini koyuyor. Javascript metin yerine küçük flash dosyalarını koyuyor. Bu teknik ile sadece belirtilen yerler flash dosyası ile değiştirilir tüm sayfa değiştirilmez. Bu tekniğin bir diğer avantajı flash dokümanları seçilebilirdir yani eklediğimiz metni kopyalanıp yapıştırma imkanımız var demektir. Bu metot ile metinler tekrar boyutlandırılabilir.

Bu tekniği kolayca uygulamamız için Mike Davidson bu metod için gereken dosyaları içeren bir paket hazırlamıştır. Bu metodu uygulamak için ilk olarak buradan bu paketi indirmek gerekiyor. İndirdiğimiz paketin içinde;

  • dokümantasyon
  • css
  • demo
  • flash
  • js

dokümanları var.

sIFR Nasıl Uygulanır

Bu teknik devamlı kendini geliştirmektedir, biz burada sIFR2.0.2 versiyonu üzerinden anlatacağız.

Flash

İlk olarak indirdiğimiz sIFR-2.0.2.zip doyasını açacağız ve flash do kümanı sifr.fla açacağız.

Dokümanı açtığımızda Scene1’deki gördüğümüz beyaz alana(holder Movie cilp’i) çift tıklayalım. Karşımıza yazılı olan metine dokunmamamızı isteyen bir dinamik metin alanı çıkacak(Do not remove this text.), dokunmasak iyi olur 😀

Bu dinamik metin alanı fare ile seçip alttaki Properties penceresinden istediğimiz fontumuzu(Eğer fontu gömeceksek(embed) Türkçe karakter içeren fontları seçmemiz iyi olacak.) seçiyoruz.

Eğer fontu gömeceksek, Properites ekranından Embed… butonuna tıklıyoruz. Açılan pencereden All seçip ok tıklayıp bu pencereyi kapatıyoruz. Böylelikle kullandığımız fontu flash dokümanı içine gömmüş olduk, yani kullanıcının bilgisayarında bu font olmasa bile fontu görecektir.

Sonra flash dokümanımızı kaydedelim. Flash dosyası Flash 2004 ile üretildiği için eğer Flash 2004 sonraki versiyonları kullanıyorsak bize yükseltme yapıp yapmayacağımızı soracak bizde Save deyip yükseltme yapalım.

Son olacak Flash dosyamızı yayınlayalım(publish..). Şimdi elimizde kendi oluşturduğumuz bir sifr.swf dokümanı var. İsmini değiştirebiliriz, ben fatih.swf yaptım.

HTML

Html dokümanınız açıp <head> içine aşağıdaki kodları eklememiz gerekiyor.

:::html
<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print">

sonra bunların altına javascript dosyalarını ekleyelim.

:::html
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-addons.js" type="text/javascript"></script>

Sonra Html içeriğinin sonuna aşağıdaki kodu ekleyelim.

:::javascript
<script type="text/javascript">
//<![CDATA[ /* Replacement calls. Please see documentation for more information. */
if(typeof sIFR == "function"){ // This is the older,
	ordered syntax sIFR.replaceElement("h2", "fatih.swf", "#000000", "#000000", "#FFFFFF", "#FFFFFF", 0, 0, 0, 0);
}; //]]>
</script>

Bu javascript kodunda metin yerine eklenecek swf fosyasını, metnin rengini, hangi elemente(etiket, id ve sınıf) uygulanacağını, padding, link rengi gibi bir çok özelliği buradan düzenleyebiliyoruz. İndirdiğimiz dökümandaki örnek html(index.html) ve dokümantasyonu inceleyerek bu konuda daha ayrıntılı bilgi edinebilirsiniz.

CSS

sIFR-screen.css dokümanın açıyoruz.

:::css
.sIFR-hasFlash h2 {
	visibility: hidden;
	letter-spacing: -7px;
	font-size: 36px;
	margin:0;
	padding:0;
}

Burada ekleyeceğimiz fontun ayarlarını yapıyoruz. font boyutunu kendi seçtiğimiz fonta göre ayarlıyoruz. Örnek dosya üzerinden gidersek bu css dokümanında bir çok başlık tanımı mevcuttur biz burada sadece kendi kullandığımızı bırakıp diğerlerini silebiliriz.

Örneği görmek için tıklayınız.

Bu metodun ayrıntılı olarak anlatımı Adobe’un sitesinde [Introduction to Scalable Inman Flash Replacement (sIFR)][] isimli çok güzel bir video var, buradan tekniğin nasıl uygulandığını ayrıntısı ile görebiliriz.

Bu tekniğin dezavantajı sayfa yüklenmeden önce javascript’in yüklenmesidir. Bu sitemizin açılış hızına etki edecektir.

Not(01.05.2008 eklendi): Bazen sFIR uyguladığımız metin ikinci satıra inmiyor bunun için başlığa bir genişlik tanımlamamız gerekiyor.

:::css
h1{
	width:250px
}

[sIFR3][]’ün betası var ancak kararlı sürümü çıkmadı.

Sonuç olarak şunu söyleyebiliriz ki; Metin yerine resim eklemek için bir çok teknik geliştirildi ve geliştirilmektedir kodlama yaparken hangisinin bizim için daha kullanışlı olduğunu seçerek uygulamalıyız. Metin yerine resim ekleme yöntemlerini sayfamızda çok fazla yerde kullanmak pek mantıklı gelmiyor bana ama gerektiği yerde, örneğin sadece başlıklar için kullanmak gayet mantıklı. Takdir ve seçim sizin.

Kaynaklar

CSS ile Önden Resim Yükleme Teknikleri

:hover display:none ile gizlenmiş öğelere atanmış ardaalan resimlerini tarayıcı yüklemiyor. Bu durum :hover haline geldiğimizde resim yüklenmeye başlar ve görüntü sonra gelir ve kötü bir görüntü oluşturur. Bu sorunu çözmek için css sprite tekniğini kullanırız. Benzer bir sorun ajax ile çalışan bir yapıda sayfa ilk yüklendiğinde yüklenmemiş alanlarda tanımlı ardalan resimleri içinde geçerlidir. Bu durumda ise resimleri ön yükleme yapmak önemlidir.

Daha önceki makalemizde bir iki yöntem anlatmıştık. http://fatihhayrioglu.com/onden-resimleripreloading-images-yukleme-yontemleri/

Şimdi daha basit bir yöntemi daha bilgi dağarcığımıza ekleyelim.

Ajax ile sonradan yüklenen elemanlarımızın ardalanına atadığımız resimleri önceden yüklemek için mevcut ardalan atanmamış bir elemana bu ardalan resmini tanımlarız ve konumunuda sayfa dışına vererek(-9999px) görünmez yaparız. Böylelikle resim yüklenmiş olur ve sonradan yüklenen alanlar açıldığında görüntü problemi yaşamamış oluruz.

<div class="resimYukle"></div>

CSS kodumuzda

.resimYukle{
	background:url(/images/bg.gif) -9999px -9999px no-repeat
}

Bu durum için fazladan bir div açıp onun ardalanına bu resmi atayabiliridk ama eğer sayfa içinde ardalan tanımı olmayan bir eleman varsa bunu tanımlayarak fazladan bir divden kurtulmuş oluruz. Bir not bu kodu css kodumuzun sonuna eklememiz daha mantıklıdır.

.baskaBirEleman{
	background:url(/images/bg.gif) -9999px -9999px no-repeat
}

Benzer bir kodu :after seçicisi ve content özelliği ile de yapabiliriz.

body:after {
	content: url(img01.png) url(img02.png) url(img03.png) url(img04.png) url(img05.png)
}

Bu kodu ie7 ve ie6 desteklemiyor maalesef.

Ayrıca CSS3 ile bir elemana birden fazla background tanımıda yapabiliyoruz bu özellik yardımı ile de yapabiliriz. Tabi tüm tarayıcılar desteklemediği için beklemek gerekiyor.

Kaynaklar

CSS İle Özel Kaydırma Çubuğu Yapmak

Daha önce yazacaktım ama desteği çok düşüktü. Webkit’in %82(mobil + web) desteğinden sonra uygulanabilirliği arttı. Ben Firefox’tan destek bekledim ama ondan ses çıkmadı.

Tasarımcıların form elemanlarını tasarlama sevdası hiç bitmedi, bitmeyecek de 😀 Tüm ihtiyaçları CSS ile halledebilsek sorun yok da işin içine javascript girince durum değişiyor. Çünkü CSS işin işlevsel kısmını yine doğal haline bırakıp görselliğine yönelirken; javascript ile yapılan çözümler işin işlevselliğine de müdahale ediyor. İşin doğallığı bozulunca da tonla sorun çıkıyor.

Neyse biz gelelim kendimize özel kaydırma çubuğu(scroll) yapmaya;

Bu kadar basit bir kod ile özel kaydırma çubuğu elde ettik. Biz yukarıda 3 adet sahte(pseudo) kaydırma çubuğu elementi kullandık. Ancak toplamda yedi tane element vardır.

Özel Scroll Sahte(Pseudo) Elemanları

enter image description here

  1. ::-webkit-scrollbar Kaydırma çubuğu alanını tanımlar. Genelde diğer elemanları kapsar
  2. ::-webkit-scrollbar-button Yön tuşlarını seçmeye yarar.
  3. ::-webkit-scrollbar-track Kaydırma çubuğunun altta kalan boş kısmını seçmeye yarar.
  4. ::-webkit-scrollbar-track-piece Kaydırma çubuğunun tutamacı dışında kalan boşluğu seçmemize yarar.
  5. ::-webkit-scrollbar-thumb Kaydırma çubuğunun tutamacını seçmemize yarar.
  6. ::-webkit-scrollbar-corner Yatay ve dikey kaydırma çubuğunun köşesini seçmemizi sağlar.
  7. ::-webkit-resizer Yatay ve dikey kaydırma çubuğunun köşesinde boyutlandırma çıkması durmunu seçmemizi sağlar.

Öze Kaydırma Çubuğu Sahte(Pseudo) Sınıfları

Farklı durumları yakalayabilmemiz için kaydırma çubuğunun sahte(pseudo) sınıfları vardır. Bu sınıflar kaydırma çubuğu elementinin parçalarına özel seçimin yapmamızı sağlar.

:horizontal, :vertical, :decrement, :increment, :start, :end, :double-button, :single-button, :no-button, :corner-present, :window-inactive

Bu sözde sınıfları tanımlamak yerine örnekleri inceleyerek daha iyi anlayacağımızı düşünüyorum.

Tarayıcı Desteği

Chrome explorer Firefox
+(-webkit)

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ (-webkit) +(-webkit) +(-webkit)

CSS ile Sekmeli(Tab) Menü Yapımı

Sekmeli menümüzü Doug Bowman’ın Sliding Doors tekniği ile yapacağız. Bu teknik bize esnek yapılı, yuvarlak kenarlı sekmeli menü yapma olanağı sağlar. Adım adım gidersek;

1.Adım Başlangıç olarak her zamanki gibi XHTML kodumuzu yazalım:

<ul>
	<li><a href="#">Ana Sayfa</a></li>
	<li><a href="#">Haberler</a></li>
	<li><a href="#">Ürünler</a></li>
</ul>

Tekniğin özeti şu menü oluşturmak için hazırlanan XHTML kodunda sırasız listeler(li) bir zemin resmi(sekme_sag_resim.gif) ve link elementine(a) bir zemin resmi(sekme_sol_resim.gif) atayarak esneklik sağlamak.

2. Adım Daha önceki menü örneklerinden de alışkın olduğumuz margin,padding ve liste imgelerini kaldırma işlemini yapalım:

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 600px;
    float: left;
    border-bottom: 1px solid gray;
}

3. Adım Yukarıda bahsettiğimiz metodu uygulamak için iki adet resim hazırlamalıyız.

Bu resimlerin yüksekliklerinin uzun olmasının nedeni font boyutunun arttırılması(yakınlaştırma) durumunda iki satır olabilecek menülerde menü görünümünün bozulmaması içindir.

4. Adım Menüyü yatayda sıralamak için float:left tanımlaması yapıyoruz ve sağ zemin resmini(sekme_sag_resim.gif) uyguluyoruz:

ul li {
    float: left;
    background: url(images/sekme_sag_resim.gif) no-repeat top right;
}

5. Adım Daha önceki örneklerde gördüğümüz gibi tüm sekmeye link vermek için display:block tanımlaması yapıyoruz, sekmenin sol kısmını tamamlamak için zemin resmi olarak(sekme_sol_resim.gif) ekliyoruz, tüm sekmelerde aynı yüksekliği yakalamak için line-heighttanımlamasını yapıyoruz, text-decoration: none ile link alt çizgilerini kaldırıyoruz ve IE Mac ortamında sorun çıkarmaması için float:left ekliyoruz:

li a {
    background:url(images/sekme_sol_resim.gif) no-repeat left top;
    display: block;
    padding: 0 2em;
    line-height: 2.5em;
    text-decoration: none;
    float: left;
    color:#000;
}

6. Adım Güzel bir görünüm katmak için basit bir rollover efekti verelim:

ul a:hover {
	color: #9D9C9C;
}

Sonuç: Kodumuzu çalıştırdığımızda aşağıdaki sonucu elde edeceğiz. Tab menüye bir çok örnek var resimli, resimsiz, resimli rollover gibi; internette aratarak bir çok örnek bulabilirsiniz.

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