Biz web geliştiricilerin kullandığı makineler genelde genel ortalamaya nispeten iyi makinelerdir. Normal kullanıcının yaşadığı bazı sorunları biz kendi makinemizde yaşamayız. Genelde kod yazarının gelen soruna karşı cevabı “abi bende sorun olmuyor”

İnternetin hızının yavaş olduğu durumları simule etmek için bir program arayışına giridim. Şirkette Mac Os işletim sistemini kullandığı için, aradığım programda Mac Os’ta çalışan bir program olmalıyıdı. İlk önerilen program “Network Link Conditioner”

Bu programı indirmek için Xcode > Open Developer Tool > More Developer Tools… yolu ile bu programı indirme sayfasına gidin. Bu sayfaya girmeden önce sizden Apple Id ve şifrenizi isteyecektir.

ncl01

Siteye giriş yaptıktan sonra karşınıza çıkan son Xcode için Hardware IO Tools .dmg uzantılı dosyayı indirip kurun.

ncl02

Programı açtığınızda aşağıdaki gibi bir ekran ile karşılaşacaksınız.

ncl03

Profil selectbox’ın mevcut seçenekleri DSL, EDGE, 3G vd. seçebiliyoruz. Ayrıca kendi profilimizi oluşturup test edebiliyoruz. OFF’u ON haline getirdiğimizde bağlantımız seçtiğimiz internet hızına düşüyor. Dikkat ON durumunda unutmak sıkıntı oluyor. Eski Dialup’lı günleri tekrar yaşamak hoş değil :D

Kaynaklar

Daha önce CSS3 seçicileri kısmında biraz anlattım. Burada biraz daha detay bilgi vereceğim.

:last-child seçicisi bir html seçicisi ile birilikte çalışıyor. Yani HTML’de p, h3, li gibi html seçicileri kullanmalıyız.

ul li:last-child a{
    border-right:none;
}

peki biz bunu farklı elemanlar için kullanbilirmiyiz? Evet

Evrensel seçici(*) ile sorunumuzu çözdük.

Bunun dışında belli bir sınıf tanımı yapılarakta bir çözüm oluşturulabilir.

Ancak bu sınıflı çözümün bir sorunu var. Eğer son elemandan sonra bir eleman daha var ise seçim yapılmıyor ve sorun oluyor.

CSS’in güzelliklerinden birisi seçicilerinin gücüdür. Ben burada bunlardan birinin ipucunu göstermek istiyorum.

Normalde bir iş yaparken aradan bir elemanın o atamanın dışında kalması için :not seçicisini kullanıyoruz.

Peki birden fazla değil seçicisi kullanabilirmiyiz ve nasıl?

Evet kullanabiliriz işte örnek

Kaynak

Bu özellikler blok-level ve yerine konulabilir element(örneğin resim) içerik alanının asgari / azami genişliğini tanımlar. max-width margin, padding ve kenarlıkları içermez.

width değeri daha geniş olsa bile max-width değerini aşamaz. Bu ilginç bir kuraldır. Ancak min-width değeri eğer max-width değerinden büyükse bu değeri uygular, yani min-width değeri baskındır.

min-width ve min-height element genişliğinin belirli bir aralıkta olması için beraber kullanılır.

max-width ve width ilişkisi

max-width ve width aynı elemente ayı değerlerde uygulanmamalıdır, birisi diğerine baskın olur. Örneğin width değeri 150px ve max-width değeri 60px olarak atanmışsa

.alan{
    max-width: 60px;
    width:150px;
}

Tanımında width tanımı anlamsız kalır. Şöyle bir kullanım ise mantıklıdır.

.alan{
    max-width: 120px;
    width:80%;
}

Genişliği en fazla 120px olan bir elemanımız var. Elemanımızın genişliği kapsayıcı elemanın % 80’i kadardır.

 Uyumlu(Responsive) resim ve max-width

Esnek bir resim boyutu sağlamak için max-width değerini %100 ve height:auto tanımlamak gerekir.

img {
    max-width: 100%;
    height: auto;
}

kodu tüm uyumlu web kodlarında mevcuttur.

min-width ipucu

Mesela bir site genişliğini yüzde olarak vermek istiyoruz ama belli genişlikten daha küçük olması durumunda içeriğin büzülmesini istemiyoruz.

.ana-kapsayici {
    width:90%;
    min-width:600px;
}

tanımı bu işimizi görür. Zamanında bunun için javascript kodu yazardık. Hey gidi günler.

Uyumlu web kodlarken max-width özelliğinin çok kullanışlı tarafından yararlanıyoruz.

 Kaynaklar

z-index kullanımı; tek kişi ile çalışılan ve daha basit yapılı sitelerde pek sorun çıkarmıyor. Ama çok kişinin çalıştığı ve büyük boyutlu projelerde farklı kişilerin tanımladığı z-index değerleri birbirini eziyor ve sorunlara neden oluyor. z-index sorunları nedeni ile sitemizde gözükmeyen veya belli durumlarda gözükmemesi gereken alanların görünmesi gibi görsel sorunlara neden olabilir.

Bu makalede z-index yönetmek ve bu sorunlara çözüm bulmak için neler yapabiliriz konularını inceleyeceğiz. Bu çözümü dinamik CSS(Stylus, SASS, LESS) ile yardımı ile yapacağız. Site boyutu büyük ise zaten dinamik CSS kullanmalı mantığı ile gidiyorum.

Çözüm olarak ayrı bir z-index dosyası oluşturmak gerekiyor. Sonra her seviye için bir z-index değeri değişkene atayıp bu değişkenler üzerinden z-index değerlerini yönetmek üzerine kurulu bir sistem.

Bootstrap’in benzer bir çözümü mevcut (LESS)

//-- Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.

@zindex-navbar:            1000;
@zindex-dropdown:          1000;
@zindex-popover:           1060;
@zindex-tooltip:           1070;
@zindex-navbar-fixed:      1030;
@zindex-modal-background:  1040;
@zindex-modal:             1050;

Şeklinde bir çözümü var boostrap’in.

Benzer bir çözümü biz kullanabiliriz.

zindex.styl isimli bir stylus dosyası oluşturalım. Stylus hakkında detaylı bilgi almak için tıklayınız.

zindexBelow =           -1
zindexZero =            0
zindexDropdown =        100
zindexPopover =         200
zindexTooltip =         300
zindexOverlay =         400
zindexDialog =          500

Şeklinde bir zindex dosyası oluşturup site genelinde bu değişkenleri kullanarak çözüme ulaşabiliriz. Bu sayede tüm sitedeki z-index değerleri görülebiliyor ona göre tüm durumları göz önüne alarak ilgili elemana değeri atayabiliyoruz. Yukarıdaki koda dikkat ederseniz değerler arasında belli boşluklar(100 kadar) var, bu boşluklar ileride araya bir katman daha girer diye bırakıldı.

Örnekleri stylus üzerinden verdim. Bu tip işleri dinamik bir CSS yapısı ile yapmak işi kolaylaştırıyor.

Bu zindex dosyamızı

@import zindex

kendi dosyamıza ekliyoruz. Sonra kullanmak için

.modal
    zindex zindexDialog

şeklinde kullanıyoruz.

Eski kodlarımızı inceleyince bu konuda çok hovarda olduğumuzu gördüm, yukarıdaki gibi bir kod yapısı ile daha düzenli ve anlamlı kullanıma ulaşacağız.

Daha önce çok fazla z-index kullanımından dolayı yukarıdaki yöntem ile çözüm oluştururken bazı sorunlarım oldu. Genelde bu durumlarla karşılaştığım yerler ard arda rakamlar tanımlanmış yerlerde oldu. Bu gibi durumları tanımları genişleterek değilde dinamik css özelliklerinde yararlanarak çözebiliriz.

.balon
    position relative
    
    // balonun oku
    &:before
        z-index 3
    
    // okun çizgisi
    &:after
        z-index 4

Şeklinde bir tanım için

.balon
    position relative
    
    &:before
        z-index zindexPopover - 1
    
    &:after
        z-index zindexPopover

Tek bir tanım ile ardışık iki z-index değeri elde etmiş olduk. Benzer kullanımdaki yerler için bu tip çözüm üretmek daha mantıklı geldi bana. Fazladan değişken tanımlamaktan kurtatırıyor bizi.

Sonuç

z-index sorunu başta dediğim gibi basit yapılı sitelerde çok karşılaştığımız bir sorun değil. Ama daha büyük boyutlu sitelerde her an karşılacağımız bir sorun. Bence basit sitelerde dahi alışkanlık olması için bu yapı kullanılabilir.

Dinamik CSS artık hayatımızın bir parçası ve bir çok avantajları var. Bir çok sıkıntımıza çözüm sunması bizi kendine daha çok bağlıyor.

Düzenli olmak her zaman iyidir.

Kalın sağlıcakla.

Kaynaklar