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

Bizim gibi hayatını bilgisayar başında geçiren kişiler için çalışma ortamının yeterli donanıma sahip olması önem kazanıyor. İlk başta çok etkilerini hissetmesek de zamanla kendini gösteriyor rahatsızlıklar.

Gününün en az 8 saatini bilgisayar başında geçiren ben ve benim gibiler için ağrılar ve hastalıklar kapınızı çalmadan alınması gereken önlemler var. Bu önlemler biraz can sıkıcı, zorlayıcı ve cebe dokunan detaylar olsa da sonuç göz önüne alındığında atılması gereken adımlar bunlar.

Çok genel bir tanım olacak ama “Çağın Hastalığı” tanımı tam da bu konu için geçerli. Giderek insanlar bilgisayar başında daha çok zaman harcıyor. Dikkat etmek ve önlem almak şart.

Bilgisayarcılar daha çok tembel ve üşengeç insanlar olarak bilindiği için burada bahsedeceğim çözümler zor ve sıkıcı gelebilir, ancak sağlık sorunları ile uğraşmaktansa bunları baştan yapmak daha mantıklı.

Bu yazımda sizlere olması gereken oturma şekli nedir, bilgisayarla aranızdaki mesafe ne olmalı vb. bilgileri vermeyeceğim. Bu konuda Türkçe bir çok kaynak mevcut zaten. Ben karşılaştığım sorunları bunlara karşı üretmeye çalıştığım çözümleri yazmaya çalışacağım.

Göz

Ben bigisayar başında çalışırken yaşadığım ilk sorunum gözlerimle oldu. Tabi o zamanlar tüplü ekranlar vardı. Birde benim ekranım titreme yaptığı için ayrı bir soruna neden oluyordu. Şükür ki ekran teknolojisinin hızla gelişmesi ve daha sağlıklı yönde adımlar atılması bizleri biraz daha rahatlatttı.

En son göz bozuklukları nedeni ile doktora gittiğimde gözlerimde gözlük kullanacak bir sorun olmadığını, ama kronik bir göz iltihabı olduğundan ötürü zaman zaman yanmalar olabileceğini öğrendim.

Her gün gözlerimi göz yakmayan bir bebek şampuanı ile yıkamamı, belli aralıklarla gözleri dinlendirmemi ve devamlı suni göz yaşı damlatma mı önerdi doktor. Birde 6 ayda bir doktor kontrolü.

Bel

Sonraki sorunum bel ağrıları ile oldu. Dönemsel olarak bel ağrıları beni zorluyordu. Öyle bir şey ki 3 ay da bir 3-4 gün bel ağrıları çekiyordum sonra geçiyordu. En son geçmeyince bir doktora gitmek durumunda kaldım. Doktor MR istedi(çok gürültülü bir alet). Sonuç başlangıç seviyesinde bel fıtığı çıktı. Ağrılarım için ağrı kesici krem ve bir kaç ilaç verdi. Devamlı kendime dikkat etmeliymişim. Ayrıca biraz hareket etmeminde iyi olacağını söyledi. Spor şart.

Bilek

Bir arada bileklerimde ağrılar hissettim. Biraz internettte araştırnca Karpal Tünel Sendromu ( El bileğinde sinir sıkışması ) gibi genel olarak tüm bilgisayar kullanıcılarının müzdarip olduğu bir sorun ile karşı karşıya olduğumu gördüm.

Çözüm olarak sunulan çözümlerden birisi; dikey mouse çözümü hoşuma gitti. Hemen sahibinden.com’dan(Burada çalışmadan önce yaptığım tek alışveriş) bir çin malı dikey mouse aldım. Gayet ucuzdu işimi görür mü diye aldım. Tabi “ucuzdur vardır bir illeti, pahalıdır vardır bir hikmeti” sözü mucibince mouse tekeri kırıldı ve mouse işlevsiz hale geldi.

Tabi sonra ağrılar geçince çok üstüne düşmedim. Ta ki 2-3 ay önce ağrılarım tekrar edinceye kadar. Bende bu sefer daha kaliteli bir dikey mouse almak için araştırmalara başladım. Yine çin malı ama bu sefer çinden bir mouse aldım. Birinci hafta ki alışma sürecinden sonra gayet başarılı bir deneyim sunduğunu söyleyebilirim. Tabi hareket ve spor şart.

Boyun

Boyun ağrıları ile devam edelim. Ağırmayan yerim kalmamış. Burada sıralayınca tekrar hatırlıyorum. Boynumda 4 adet boyun fıtığı tespit etti doktor. Yine daha dikkatli olmam gerektiğini ve dik durmamı öğütledi. Mevcut ağrılarım için ağrı kesici verdi. Daha fazla hissedersem cerrahi operasyon gerekebilir diye korkuttu.

Galiba Çinlilerin askerler dik durmaları için önerdikleri sistemi uygulamam gerekecek. İnsafsızca bir çözüm ama yapacak bir şey yok artık.

Sırt

Belli aralıklarla sırt ağrıları yaşıyorum. Dik durmak en güzel çözüm ama devamlı dik durmak da zor. Aklıma geldiği zaman dik duruyorum ama kendimi işe kaptırınca biraz zaman geçmeden yine kambur durmaya başladığımı görüyorum. Çözüm için Timeout kurdum. Belli aralıklarla beni uyarıyor.

Sonuç

Bu işi yapıyorsak ve yapacaksak bu tip sorunlarla karşılaşmamız normal. Ekmeğimizi bu işten çıkarıyor isek kendimize bazı kurallar koyup onlara olabildiğince uymaya çalışmalıyız.

Bu konularda çok başarılı olduğumu söyleyemem, bu yazı benim içinde güzel bir başlangıca vesile olur inşallah. Sizler de önerilerinizi paylaşırsanız çok sevinirim.

Benim aldığım önlemler ve almam gereken önlemler;

Çalışma ortamını daha ergonomik hale getirmek

Daha çok cebi ilgilendiren bu konuda bir şeyler yapmak daha kolay. Şirketin bize sunduğu ortam haricinde bir kaç ekleme yaparak daha ergonomik bir ortam elde etmeye çalıştım.

Şirketin bize sunduğu ortam olarak Türkiye’de en iyi ofislerden birine sahip olduğumuzu düşünüyorum. Işık, ortam, masa ve araç gereçler bakımından gayet iyi bir durumdayız. Artı olarak;

  • İki ekran kullandığım için ikinci ekranı daha çok kullandığım dizüstü bilgisayarımın üstüne aldım. Bunun içi ekran yükseltici aldım. Daha doğrusu şirket verdi.
  • Dizüstü bilgisayarı göz hizama kaldırmak için altına yükseltme aparatı aldım. Daha doğrusu şirket verdi.
  • Harici bir klavye alarak daha esnek bir çalışma ortamı oluştu.
  • Son olarakta dikey mouse alıp ergonomik ortam oluşturma işini tamamladım.
  • Ayrıca dik durmayı unutmamı sağlamak için TimeOut programını kurdum.

Hareket etmek ve/veya spor yapmak

Hayatımızın büyük bir bölümü oturarak geçiren bizim gibi çalışanların en büyük eksiği hareketsiz kalmak. Hareket etmek için özel bir çaba harcamak gerekiyor. Benim gibi işe kendi aracı ile gelen birisi için hareket etmek bayağı sınırlı kalıyor.

Bu konuda bazı çabalarım olsada çok başarılı olduğumu söyleyemem. Telefonuma adım sayacı ekledim ve günlük olarak belli bir rakamı tutturmaya çalıştım. Ancak telefondaki program çok başarılı gelmedi bana. Yakın zamanda bir adım sayacı veya bezer bir araç almak iyi olur.

Şirketin kendi spor salonu olmasına rağmen spor yapamamak çok tembel olduğumu gösteriyor galiba.

Bir an önce spora başlamalıyım. Bu cümleyi kurmamış olan var mı?

Belli aralıklarla doktora gitmek

Genelde ağrılarım olunca doktora uğruyorum. Bu aralar çok gittim. Ama bir ağrı sızım olmadan da doktora uğramam gerekiyor.

Maalesef en az değerini bildiğim iki şeyden birisi sağlık. Birincisi de zaman.

Küçüklükten kalma bir korku mu bilmiyorum ama doktora gitmek her zaman bana itici ve zor geliyor.

Kırmam gereken alışkanlıklarımdan birisi de bu.

Kalın sağlıcakla.

Kaynaklar

Sitemizde özel yazı tiplerini kullanmak için kullandığımız @font-face bize çok güzel imkanlar sağladığı kesin. Bir sorunu var bu özelliğin kod bloku çok uzun ve karışık. Daha önce yazdığım font-face kullanımı yazısının üzerinden çok zaman geçti. Bir çok tarayıcı bu listeden düştü. En son ie8 düştü.

@font-face {
    font-family: 'BenimYaziTipim';
    src: url('GraublauWeb.eot'); /*ie 6-8 */
    src: local('Graublau Web Regular'), local('Graublau Web'),
    url('GraublauWeb.woff') format('woff'),
    url('GraublauWeb.svg#GraublauWeb') format('svg'),
    url('GraublauWeb.otf') format('opentype');
}

Kodun da eot, otf ve svg kodlarına gerek kalmadı. Kodumuz daha basit bir hal aldı.

@font-face {
  font-family: 'BenimYaziTipim';
  src: url('font.woff') format('woff'), 
       url('font.ttf') format('truetype');      
}

ttf‘in tutunmasının nedeni mobildeki Android tarayıcısı. Zamanla ttf’inde bitip tek başına woff kullanımına ulaşacağız inşallah.

woff’un tarayıcı desteğini hatırlamakta yarar var. Mobildeki android tarayıcılar sorun oluyor :/

Tarayıcı Desteği

Chrome explorer Firefox
5.0+ 9+ 3.6+

Mobil Tarayıcılar

Android Mobil Safari Chrome
4.4+ 5.1+ 36+

Kaynak

Tartışmayı @muratcorlu açtı. :D Daha doğrusu bir makale üzerinden bu konuyu tartışmaya başladık. Sonra twitter’da paylaştım konuyu, @ademilter konuyu tartışmak için bir platform açalım orada tartışalım önerisinde bulundu.

Biraz düşündükten sonra google dokümanların bu konuda biçilmiş kaftan olduğunu düşündüm. Sonra konu atıl kaldı ta ki şimdiye kadar. Bu gün bu konuyu görünce bunu bir yazıya dökmeliyim dedim ve karşınızda yazı.

Aşağıda toparladığım kaynakların çoğu id’ye karşı ben Murat Çorlu ile tartışmaya başladığımda tekil seçicilere tamamen karşı değildim. Ancak Steve Souders’ın CSS Test sayfasındaki tekil seçicileri ile sınıf seçicileri arasındaki ufak farkı görünce fikrim değişti. Tabi bu testleri yeni nesil tarayıcılar yaptığımızda arada az fark görünürken ie8 gibi tarayıcılarda aradaki büyük fark ortaya çıkmasıda ayrı bir konu.

Aşağıda ben burada tartışılan konuları başlıklar altında toplayıp özetini sizlere sunacağım.

 Performans

Tekil(Id) seçicilerin en büyük avantajı tarayıcılarda daha hızlı tepki verdiği idi. Bu kabulü çürüten iki karşı açıklamayı görünce pek de avantajı kalmadığı anlaşılıyor.

İlki; tarayıcıların seçicileri sağdan sola doğru okuduğu ve bundan dolayı tek kullanımlarda avantajlı olduğu.

#menu {
...
}

tanımı hızlı iken

#menu li {
....
}

Tanımını tarayıcılar sağdan sola doğru okuduğunda ilk li etiketini sonra #menu seçicisini okuyor. Bu durumda tekil seçicinin avantajı kalmıyor.

Ayrıca yeni nesil tarayıcılar bu konuda kendilerini geliştirdi. Artık sınıf ve tekil seçimleri konusunda birbirine yakın tepkiler veriyorlar. Steve Souders’ın testleri bu konuda bayağı açıklayıcı.

 Kullanımı

Tekil seçiciler sayfada bir kereden fazla kullanılmıyor o elemana özel kalıyor. Bir eleman bir kere kullanılsa dahi sınıf seçicisi olarak tanımlamanın tekil olarak tanımlamadan farkı yok. Her nekadar başta tekil kullanma ihtiyacı olsa da sonradan başka bir eleman için kullanmak istediğimizde tekil seçici tanımı sorun çıkarırken sınıf tanımı bu bakımdan da bir avantaj sağlıyor.

Bir çok projede karşılaştığımız bir sorun olarak proje başında tekil gibi görünene bir eleman sonradan çoklu kullanımı istenebiliyor. Sınıf kullanımı esnek bir kullanım olduğu için tekil seçicilere göre avantajlıdır.

Bir projeyi kodlamaya başlamdan önce olabildiğince ortak sınıflarla kodlamaya çalışmak bize avantaj sağlar.

CSS’in Yapısı yazısından en çok geri dönüş tekil ve sınıf seçicilerinin hangisinin kullanılması gerektiği konusunda olmuştu. İlk kodlamaya başlayanlar için karar vermek bazen sorun oluyor. Sadece sınıf seçicisinin kullanıldığı ortamda bu sorunda otomatik olarak ortadan kalkıyor.

Etkinlik

Tekil seçiciler CSS etkinliğini karıştıran bir özelliğe sahip. Etkinlik hesaplarını karıştırıyor. Tekil seçiciler ve sınıf seçicilerinin karışık olarak kullanıldığı seçici bloklarında etkinlik değerini hesaplamak ve yönetmek her projede benim için sıkıntı oluyordu. Sadece sınıf seçicilerinin kullanıldığı projelerde bu sorunu daha az yaşıyorum.

Aslında bu sorun ile hiç karşılaşmamak için projenin başında her şeyi planlamak gerekir. Ancak yukarıda da bahsettiğim gibi bizim projelerimiz başta farklı sonda farklı durumlar çıkardığı için bunu her zaman sağlamak mümkün olmuyor.

Sonuç

Sonuç olarak son 1-2 yıldır daha çok sınıf seçicilerini tercih ettiğim dünyada çokta tekil seçici ihtiyacı duymadım. Ayrıca yukarıda bahsettiğim sebeplerden dolayı bana sınıf seçicilerini kullanmak daha mantıklı geliyor.

Tabi isteyen tekil seçicileri kullanmaya devam eder, kimseye bu konuda zorlama yapmak mümükün değil. Sahibinden.com’da çalşıyorsanız zorlama var o başka :D

Buradaki amacım en iyi kod yazma düzenini bulmak.

Bu konuyu ilk tartışmaya başladığımızda benim için kesin bir kabul(tekil seçiciler hızlıdır kabulü) iken bu gün geldiğim durumda tam tersi bir kullanımı savunuyorsam, kodlama yaparken her konu tartışmaya açık olmalı ve her zaman en iyiyi aramalıyız.

Kalın sağlıcakla.

Kaynaklar