CSS’in web’in görselliğini tek başına karşılama hedefi ve bu yönde bize kazandırdığı yöntemler biz kod yazarlarının elini güçlendiriyor. CSS3 ile bunu daha çok hissetmeye başladık.

CSS 3’ün hayatımıza girmesi ile birlikte daha az resim işleme programı(Photoshop) kullanıyoruz. Bir çok görsel işlevi CSS özellikleri ile yapıyoruz artık.

Üçgen okları CSS ile yaparak hız ve esneklik kazanıyoruz. Aslında bu özellik CSS3 ile gelmedi zaten CSS2.1 ile yaptığımız kenar çizgisi(border) tanımını kullanarak yapacağız.

Tarayıcılar kenar çigizisi tanımlarını işlerken köşelerini belli bir açı ile kapatıyor.

Yukarıdaki kodlama sonucunda görüldüğü gibi tarayıcılar kenar çizgisi tanımlarını eğer içerik boş ise üçgen bir ok gibi yorumluyor. Bu görselliği kullanarak istediğimiz üçgen oklarımızı elde edebiliriz.

Aşağıdaki gibi bir konuşma balonunu hiç resim kullanmadan sadece CSS kullanarak elde edebiliriz.

Yukarıdaki kodu incelersek;

  1. Boyut tanımı: İlk olarak genişlik ve yükseklik tanımı yapıyoruz. Eğer eşit genişlik ve yükseklikte bir ok olacak ise; Seçilen yöne 0 değeri, seçilen yönün tersine okun yüksekliğini, diğer yönlerede ok genişliğinin yarısı değer veriyoruz. Örneğin aşağı ok yapacak ise 30px 15px 0 15px tanımı yapılır.
  2. Renk tanımı: İstenilen tarafın ters yönüne belirlenen renk tanımı yapılır, diğer köşeler transparent tanımlanır. Örneğin #40DBE5 transparent transparent transparent
  3. Konumu tanımı: Oku yerleştirmek için genelde :before ve :after seçicileri kullanılır. Örnekte görüldüğü gibi :after seçicisi absolute konumlandırma ile sağ /alt köşeye konumlandırılmıştır. Öğenin altına konacak okun alttan değeri kendi yüksekliği kadar eski değeri tanımlanır.

Farklı boyutlarda oklar üretmek mümkün. Değerlerle biraz oynayarak istediğimiz görsellikte sonuçlar elde edebiliriz.

Ara yönlerde ok üretmek de mümkün. Aşağıda sağ üst köşeye tanımlanmış bir ok görülüyor.

Kenar çizgili(border) oklar üretmek

Web sitemizde bazen okları kenar çizgisi ile kullanmak isteyebiliriz. Sadece CSS ile bunu çözmek mümkün. Yukarıdaki örneklerden birisine kenar çizgisi ekleyerek bu durumu göstermeye çalışalım. Mantık aslında aynı, iki ok oluşturup kenar çizgisi olarak kullanacağımız oku kenar çigisi genişliği kadar büyük yapmaktan geçiyor yöntem. Konumlandırırken de bu durumu göz önüne almak gerekiyor.

Yukarıdaki örnekten farklı olarak :before ile kenar çizgisini ekledik. Normal okumuzun genişliği 15px iken buna 1px‘lik kenar çizgisi eklemek için ikinci oluşturduğumuz okumuzu(kenar çigisi) 16px üretiyoruz. Siz eğer farklı kenar çigisi boyutu kullanacak iseniz ona göre genişliği belirlemelisiniz.

konmulandırma yaparkende 1px‘lik oynamalar yaparak sonuca ulaşıyoruz.

CSS ile ok oluşturuken yararlı olacak bazı ipuçları

1 - Oluşturduğumzu okun tıklamasını engellemek için

pointer-events: none;

eklemekte yarar var.

2 - Firefox yorumlamasında köşelerde grilikler oluşursa

border-style: inset

eklemekte yarar var.

3 - webkit tabanlı tarayıcılarda daha yumuşak kenarlar için

-webkit-transform:rotate(360deg)

eklenmesi öneriliyor.

Çevrimiçi CSS ile ok yapma araçları

Ben ok yaparken genelde http://apps.eky.hk/css-triangle-generator/ sitesini kullanıyorum. Ayrıca http://cssarrowplease.com/ sitesi de güzel.

Kullanmanızı öneririm.

Sonuç

CSS’in güçlenmesi ile görsel bir çok işimizi kod yazarak halledebilmek bizim için büyük nimet. Bu nimetlerden yararlanmakta fayda var. Bir elemente bu şartlarda iki ok(:before ve :after ile) ekleme imkanımız olduğu unutulmamalıdır.

Sadece üçgen ok değil farklı şekillerde elde etmek mümkün bu yöntem ile.

Kalın sağlıcakla.

Kaynaklar

İlk defa bir konuda yeterli Türkçe kaynak bulma sevincini yaşıyorum. Kaynaklar kısmındaki Türkçe bağlantıların her biri çok güzel bilgiler veriyor. Bana yazacak bir şey kalmadı :D Süper, süper, süper.

Ben sizlere bu makalelerden okuduklarımı özet olarak yazacağım.

Retina ekran tanımı ile ilk iPhone 4 ile tanıştık. Retina ekran yüksek çözünürlüklü ekran manasınadır. Görüntü teknolojilerinin gelişmesi ile firmalar daha net görüntü elde edecek çözümlere yöneliyor.

İnsanlar hızla yüksek çözünürlükte aletler satın alıyor ve buda biz web sitesi geliştiricilere fazladan iş yükü çıkarıyor. Bir yandan gelişmeler sevindirirken, bir yandan fazladan iş çıkması üzüyor.

Genelde hazırlanan resimlerin kaliteleri, retina ekranlar için düşük kalır. Bundan dolayı retina ekranlarda resimlerimiz daha bulanık görünür.

bulanık görüntü

Yukarıdaki resimde görüldüğü gibi resmin normal halinde net bir görüntü var iken sağdaki 2 kat büyütülmüş resimdeki net olmayan bulanık bir görüntü görünmektedir.

retina oranlar

Yukarıdaki görüntü kısaca olayı özetliyor aslında. Android ekranlar 1.5:1 oranına sahip, apple ürünleri(retina) 2:1 oranına sahip.

Evet elimizde yeni bir sorunumuz daha var. Peki bu sorunu nasıl çözeriz. Bu sorunun çözümü için çeşitli yöntemler var. Bunları sırası ile aktarmaya çalışacağım. Kendi projenize hangisi uygun ise siz onu kullanabilirsiniz.

1 - CSS ile uyarlama

/* düşük çözünürlükteki tanım */
.logo {
    background-image: url(/images/logo.png);
    height: 300px;
    width: 200px;
}
/* yüksek çözünürlük için tanım */
@media (min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .image {
        background: url(/images/logo@2x.png) no-repeat;
        background-size: 200px 300px; /* ilki genişlik ikinici yükseklik */
    }
}

CSS’in güzel özelliklerinden biri olan medya sorgularını kullanarak yüksek çözünürlükteki ekranları yakaladık. Yakaladığımız bu sınıfa yüksek çözünürlükte bir resim tanımladık. Burada illa ki @2x ismi vermek zorunda değiliz, ancak daha anlaşılır olsun diye ve normal resim ile karışmasın diye bu tanım genelde kullanılmakta.

İkinci püf noktası backgrund-size tanımı ile retina için oluşturduğumuz resmimizi normal boyutunda görünmesini sağlamaktır. Yoksa resim hazırlandığı gibi iki kat büyük görünür.

2 - CSS ile image-set tanımı

Webkit tarafından geliştirilen bu yöntem ile basit bir şekilde farklı piksel yoğunluğundaki araçlar için background-image tanımı yapabiliyoruz. Bu sayede cihaza göre en iyi çözünürlükte resim sunma imkanı sağlıyor.

background-image:  -webkit-image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

Her piksel yoğunluğu için bir resim tanımı yapabiliyoruz. Biz iki tanım yapıyoruz, tarayıcı bunlardan birisini seçerek kullanıcıya gösteriyor. Bu özelliği sadece webkit tabanlı tarayıcılar destekliyor. Zamanla desteği çoğalırsa güzel olacak.

3 - Javascript ile çözüm üretmek

CSS ile bütünleşik kolay bir çözüm yok, bunun için ufak bir javascript ile bu sorunu tüm projemizde çözebiliriz.

Javascript ile bir kaç çözüm mevcut bu konuda. En mantıklı çözüm eğer kullanıcı retina kullanan bir makineden geliyor ise resimlerin 2x hallerini göster, window.matchMedia metodu bu işi için biçilmiş kaftan tabi bu metodu desteklemeyen tarayıcılar bir sorun olarak ortaya çıkıyor. Destekleyenler için bu metodu kullanan; desteklemeyenler için alternatif çözüm üreten bir kod yazmış Scott Jehl diye bir arkadaş. Picturefill adını verdiği kodun kullanımı;

<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
        <span data-src="small.jpg"></span>
        <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
        <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
        <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
        <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
        <noscript>
            <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
        </noscript>
</span>

Boyutu gayet küçük güzel bir çözüm.

Şimdilik kaydı ile güzel bir çözüm olarak kullanılabilir, ama buna HTML’in bir çözüm bulması şart.

4 - HTML5 ile uyarlanabilir resim çözümü

2012 senesinde HTML5 geliştiricileri uyarlanabilir web içindeki sorunlardan biri olan resimlerin uyarlanması konusunda çalışmalar yaptı. Geniş katılımlı ortak bir çözüm arayan grup, bu sorunun çözümüne dair önerileri ve bazı sonuçlara varıldı.

Bu konuda bir organizasyon oluşturup birde site açıldı http://responsiveimages.org/ sitesinden bilgi almak mümkün. Responsive Images Community Group (RICG), W3C’den farklı bir oluşum.

Farklı tarayıcı üreticileri konu hakkında fikirlerini sunduğu bu platformda

<picture>
  <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
  <source srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>

Yeni bir element(<picture>) ile üretilen yukarıdaki gibi bir sonuç kod bloku çıktı. Farklı medya tipleri için resim tanımı yapılabilen bir çözüm.

Farklı görüşlerin ve önerileri çıktığı topluluktan herkesin kabul ettiği bir çözüm çıkmadı. Ancak bir çok programcı <picture> etiketine olumlu bakıyor.

5 - W3C’nin (srcset) parametresi ile çözüm

w3c yeni <picture> elementi yerine mevcut <img> elementi içinde yeni bir parametre olarak srcset konarak bir çözüm oluşturma yoluna gitti.

<img src="logo.jpg" alt="SampleCorp"
  srcset="large.png 600w 200h 1x,
    large_2x-res.png 600w 200h 2x,
    mobile-icon.png 200w 200h">

Mantık olarak aynı ancak yazım olarak farklı bir yöntem. 600w = 600px genişlikte ve 200h = 200px yükseklikteki araçlar için large.png; 2x ile belirtilen retina ekranlarda large_2x-res.png resmini yüklenmesini; daha düşük boyutlardaki ekranlarda mobile-icon.png yüklenmesini belirtiyor yukarıdaki kod.

Webkit’in desteği ile bir adım öne çıkın bu kod, genel kabul görür mü bakacağız.

Ayrıca desteklemeyenler için https://github.com/borismus/srcset-polyfill bir çözüm olarak kullanılabilir.

polyfill; özelliklerin farklı tarayıcılar tarafından destekleyen/desteklemeyen ayrımını javascript yardımı ile tek bir noktada toplamaya yarayan kod blokları olarak açıklanabilir.

6 - İkonik resimler için @font-face ile çözüm

Sitenizde çok fazla ikon kullanıyorsanız bunların her biri için retina çözümleri oluşturmak sorun olacaktır. Burada resim yerine ikonları @font-face ile ekleyerek bu sorunu çözebiliriz. Yazı tipleri gibi yaz tipi içindeki vektörel ikonlarda kendiliğinden retina ekrana uyumlu hale gelecektir.

İkonlarınız için bir yazı tipi dosyası oluşturup sitenize ekleyerek tüm ikonlarınızı retinaya uyumlu hale getirmiş olursunuz.

<h3>
  <span aria-hidden="true" data-icon="&#x21dd;"></span>
  Stats
</h3>

span etiketi data özniteliğine kullanacağımız ikonun unicode’unu yazıyoruz ve CSS kodu;

[data-icon]:before {
  font-family: icons; /* BYO icon font, mapped smartly */
  content: attr(data-icon);
}

CSS ile data özniteliğinden aldığımız içeriği elemanın öncesine ekliyoruz.

7 - Bitmap resim yerine SVG resim kullanarak çözüm üretmek

Bitmap resimler retina ekranlarda yukarıda bahsettiğimiz bozulmaya neden olurken vektörel resimler(SVG) çözünürlüğün artması veya azalması ile bozulmaz. Bu sayede iki kere resim yükleme derdinde kurtulmuş oluruz.

Çok renkli resimler hariç tüm resimler ve ikonlarımız için SVG kullanabiliriz.

<img src="deneme.svg" width="150" height="200"/>

CSS kodu;

.image {
    background-image: url(example.svg);
    background-size: 150px 200px;
    height: 150px;
    width: 200px;
}

SVG desteğinin ie8 hariç olması bizim için büyük avantaj. SVG konusuna ayrıca daha detaylı değinmemiz gerekiyor. Şimdilik bu kadar ile yetinelim.

Sonuç

Bu konu için henüz tam ve kolay bir çözüm üzerinde anlaşılmamış olsa da işimizi görecek kodlar mevcut. Konu hakkındaki gelişmeleri izlemeye devam edeceğiz.

Yukarıdaki çözümlerden yaptığımız projeye göre en uygunun olan bir veya birkaçını kullanacağız artık.

Kalın sağlıcakla.

Kaynaklar

 event.preventDefault()

Eğer bu fonksiyon çağrıldı ise başlangıçta tetiklenen olay çalışmayacaktır. event.preventDefault() jQuery bağlantı kontrolü için sık sık başvurduğumuz bir metottur.

Bir örnek ile daha kolay açıklarız durumu

<a href="#">Tıkla</a>

Yukarıdaki gibi bir bağlantımız olsun. Biz bu bağlantıya müdahale edip bir işlem yaptırmak istediğimizde tarayıcı bunu bir bağlantı olarak gördüğü için href içindeki değeri uygulayacaktır. href içinde diyez(#) olduğundan sayfayı yukarı kaydıracaktır. Biz tarayıcının href değerini yorumlamasını durdurmak ve kendi işimizi yapmak için event.preventDefault() metodunu kullanırız.

$("a").click(function(e) {
   e.preventDefault();
   // kendi işimizi yapalım
}

fonksiyona parametre olarak event(e) vererek e.preventDefault(); kısaltmasını kullanabiliyoruz. Bağlantı fonksiyonun ilk satırında olması önemli. Basit ama bilinmesi gereken bir konu.

 Her zamana son versiyonu çekmek için

jQuery sürümlerini güncellemek bazen sıkıntı olabiliyor. İlk jQuery ipuçları makalemde yazdığım

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
    //isler burada
 });
</script>

Koda bakarsak, jquery 1.2.6 sürümü çekiliyor. Bunun yerine her daim güncel bir jQuery sürümü çekmek için

<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">
</script>

jQuery’nini kendi CDN son sürümü çekebiliyoruz.

Form elemanları sıfırlamak için

Bazen form elemanlarını sıfırlamak sorun olabiliyor. jQuery ile bir yöntem ararken stackoverflow’da gördüğüm bir cevabı not edeyim dedim.

function resetForm($form) {
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox')
         .removeAttr('checked').removeAttr('selected');
}

// kullanımı:
resetForm($('#myform')); // id ile
resetForm($('form[name=myName]')); // name ile

kaynak: http://stackoverflow.com/questions/680241/blank-out-a-form-with-jquery

Ey gidi eski günler. Ne popup kullanırdık. Şimdilerde çok nadir kullanılsa da ihtiyaç olduğu durumlar için basit bir yöntem gördüm ve paylaşayım dedim.

$('a.popup').live('click', function(){
        newwindow=window.open($(this).attr('href'),'','height=200,width=150');
        if (window.focus) {newwindow.focus()}
        return false;
});

kaynak: http://www.jquery4u.com/windows/jquery-cleanly-open-links-popup-windows/

 textarea karakter sayımı

Kullanıcının yazdığı metin girdi alanlarına belli sayıda karakter girmesi istendiğinde girdi alanı üzerine, altına veya herhangi bir yanına bir sayaç koyarız. Bu işi jQuery ile yapmak gayet basit.

HTML kodu;

<span class="count">0</span>
<textarea name="textarea" rows="10" cols="30"></textarea>

jQuery Kodu;

$('textarea').bind('keydown keyup keypress change',function(){
	var thisValueLength = $(this).val().length;
	$('.count').html(thisValueLength);
});

kaynak: http://black-flag.net/jquery/20120229-3696.html

 Jquery Trim() sorunu ve çözümü

Son olarakta sizlerle karşılaştığım bir sorunu ve çözümünü paylaşmak istiyorum. Bir form elemanı değerini trim() fonksiyonu yardımı ile alıp kullandığım kodun bir kısmında ie8’de sorun yaşadım.

if($('#test').val().trim()!=''){

Message: Object doesn’t support this property or method

Hatasını veriyordu ie8, çözümü stackoverflow’da buldum. Yazılımcı dostu site sağ olsun tüm aradıklarımı buluyorum. Çözüm;

if($.trim($('#test').val()) != ''){

şeklinde yazınca sorun çözüldü.

kaynak: http://stackoverflow.com/questions/3439316/ie8-and-jquerys-trim

Bunların dışında gördüğüm güzel linkleri aşağıda kaynaklar bölümünde paylaştım. Her biri incelemeye değer.

Kalın sağlıcakla.

Kaynaklar

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, LESS içinde 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 https://github.com/LearnBoost/stylus/issues/581 burada çözümü var, ama -1 aldı benden

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

1- .gitignore kullanımı

.gitignore dosyası git reposundan hariç tutulacak dosyaların listesinin bulunduğu repo ana dizinde bulunan bir ayar dosyasıdır.

Ana dizinde oluşturduğumuz .gitignore dosyasını git okuyup belirtilen kriterleri es geçecektir. Her bir satır bir kuralı tanımlar. diyez(#) ile başlayan satırlar yorum satırıdır.

# Belirli bir dosyayı es geçmek için
config.php

# Belirli bir dizini es geçmek için
logs/

# Belirli bir uzantılı dosyaları es geçmek için
*.styl

# log dosyalarını es geç ama error.log dosyaları hariç.
*.log
!errors.log

2- git stash ile çalışmalarımıza ara vermek

Bazen uzun çalışmalarımızın ortasında acil başka işler giriyor. Bu gibi durumlar için git’in stash gibi bir çözünü görmek güzel.

İşleyiş şöyle ara vermek istediğimiz brach’de iken

git stash save

komutunu yazarak işi saklıyoruz

Saved working directory and index state WIP on FATIH-195: f6e1ee0 Merge branch 'master' into FATIH-195
HEAD is now at f6e1ee0 Merge branch 'master' into FATIH-195

İşin saklandığını bize bildiren yukarıdaki gibi bir mesaj çıkacak.

Sonra diğer işimizi yapabiliriz. Diğer işimiz bittikten sonra yarım bıraktığımız işe geri dönüp

git stash pop

yazınca sakladığımız değişiklikleri gün yüzüne çıkarırız. İşe kaldığımız yerden devam edebiliriz.

3- Önceki branch’a geç kısayolu

git co -

Not: Daha önceki ipuçlarda belirttiğim checkout = co kısayolunu tanımladığınızı varsayıyorum.

@muratcorlu teşekkür.

4- ignore etmeden gizleme

git update-index --assume-unchanged <dosya_adi>

@mpaltun teşekkür.

5- Son değişiklikleri geri almak

Bazen yaptığımız değişiklikleri geri almak isteriz. Yapacağımız geri alma işlemine göre aşağıdaki 5 seçenekten birini seçmemiz gerekecek. Bu komutlar yaptığınız işlerin geri dönülmeyecek şekilde silinmesine neden olabilir. Yazdığınız kodları dikkatli kullanın.

git reset –hard Son gönderiye geri almak. Eğer birleştirme sonucu çakışmalar çıktı ise ve bu çakışmayı geri almak istiyorsanız bu kodu kullanabiliriz.

git reset –hard ORIG_HEAD veya git reset –hard origin/master En son birleştirilmiş stabil duruma geri döndürür. Daha yeni birleştirme işleri için kullanışlıdır. Eğer birleştirme işinizde çakışma varsa “git reset –hard” kullanınız.

git reset –soft HEAD^ Son gönderinizde bazı şeyleri unuttunuz mu? Bu durumdan kurtulmak kolay. Son gönderiyi geri almak istiyorsak ve yapılan değişikliklerinde bir yerlerde saklanmasını istiyorsak bu komutu kullanmalıyız.

git commit –amend Yaptığınız değişiklikleri koruyarak önceki gönderiyi yenilemek istiyorsak bu komutu kullanırız. Ayrıca önceki gönderi mesajını yenilemek içinde kullanılır bu komut.

git checkout – <dosya_adi> Sadece belirtilen dosyayı geri almak için kullanılır.

6- Arama sonuçları dosyaya yazdırma

git grep “arama_metni” > dosya_adi

@muratcorlu teşekkür.

7 - İki bilgisayar arasında dosya kopyalama

Git ile ilgisi yok ama bana lazım olur buraya kaydedeyim. Sanal bir makineye masaüstünden dosya kopyalamak için

cd Desktop

ile masaüstüne geçtikten sonra

scp dosya_adi kullanici@sunucu_ip:

ile dosyanızı belirtilen sunucunun ana klasörüne atabiliyoruz.

@muratcorlu teşekkür.

Kaynaklar