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

• http://css-tricks.com/handling-z-index/
• http://www.smashingmagazine.com/2014/06/12/sassy-z-index-management-for-complex-layouts/
• http://www.sitepoint.com/better-solution-managing-z-index-sass/
• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

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 Çin’den 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

• http://lifehacker.com/this-graphic-explains-all-the-health-hazards-of-sitting-1595834900
• http://lifehacker.com/5800720/the-sitting-is-killing-you-infographic-illustrates-the-stress-of-prolonged-sitting-importance-of-getting-up
• http://apps.washingtonpost.com/g/page/national/the-health-hazards-of-sitting/750/

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

5.0+	9+	3.6+

Mobil Tarayıcılar

4.4+	5.1+	36+

Kaynak

• http://css-tricks.com/snippets/css/using-font-face/
• http://caniuse.com/#search=woff