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 bigiayasar 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ımalr atılması bizleri biraz daha rahatlatttı.

En son göz bozukluları 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ümlerdne 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öyliyebilirim. 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 yapayorsak 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. Sizlerde ö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 ekranda 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ğlamka 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. Birinciside 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

Bildiğiniz gibi CSS3 modülleri halen geliştirilmeye devam ediyor. Bu modüllerden değişikliğe uğrayanlar oluyor. Flex modülü değişikliğe uğrayan modüllerden birisi. Daha önce yazdığım CSS3 Esnek Kutu Yerleşimi(Flexible Box Layout) makalemde anlattığım esnek kutu özelliği bu özelliğin ilk standartlaşmış hali idi. Daha sonra iki kere daha değişti bu modül.

  • display:box tanımı benim yazımda anlattığım 2009’da standartlaşmıştı ve şu an kullanılmıyor. Sadece mobildeki bazı tarayıcılar destekliyor.
  • display:flexbox tanımı 2011’de tanımlandı, hibrit bir çözüm. Şu an kullanılmıyor. Sadece İE 10 destekliyor.
  • display:flex tanımı son olarak 2014’ün mart’ında standartlaştı ve şu an kullanımda olan tanım. Yeni nesil tarayıcıların hepsi destekliyor.

Yenilenen Flexbox modülünün belirsiz ve/veya esnek boyutlarda bile sayfa planına daha verimli bir çözüm üretmek, hizalama ve kapsayıcı eleman içindeki öğeleri dağıtmayı hedeflemeketedir.

Flexbox modülünün ana fikrinin arkasında kullanılıbilir boş alana öğeleri en iyi şekilde pozisyonlamak olarak tanımlanabilir.

Tabi CSS ile sayfa yerleşimi kodlamanın birçok avantajı var. Bunun yanında bazı karışık sayfa yerleşimlerinde ise bizi zorladığı bir gerçek. Özellikle esnek yapılı sayfa düzenleri ve dikey eksendeki yerleşimlerdeki sorunlarını gören W3C bize bu konuda yardımcı olacak yöntemleri üretmeye başladı. Bunlardan bir tanesi Esnek Kutu Yerleşimi Modülüdür(EKYM).

Esnek Kutu Yerleşimi Modülü kapsayıcı bir eleman içindeki alt elemanların esnek bir şekilde yerleşimini sağlamaktadır. Daha önce dikeyde yaşadığımız birçok sorunu(dikeyde ortalama ve aksak kolon sorunları gibi) gidermemizi ve uyumlu web sayfaları oluşturmamızı daha kolay hale getiriyor.

Esnek Kutu Yerleşimi Modülünün son standartlaşmış sürümünü(2014 mart) bu makalemizde inceleyeceğiz.

flex özelliklerini iki ana başlıkta inceleyeceğiz. Esnek kapsayıcı eleman özellikleri ve kapsayıcı içindeki esnek kutu özellikleri

  • Esnek Kapsayıcı Özellikleri
    • display: flex ve inline-flex
    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-items
    • align-content
  • Esnek Öğe Özellikleri
    • order
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex
    • align-self

flex

Esnek Kapsayıcı Özellikleri

display:flex ve display:inline-flex

Yapısı: display: <deger>
Aldığı (Yeni) Değerler: flex | inline-flex
Başlangıç değeri: flex
Uygulanabilen Elementler: Tüm elemanlara
Kalıtsallık: Var

İlk olarak kapsayıcı esnek kutuları çevreleyen eleman display:flex veya display:inline-flex tanımı yaparak başlıyoruz. Farklı tarayıcılar için farklı flex sürümleri yazılır.

.esnekKutu{
   display: -webkit-box;   /* ESKİ: Android browser, eski IOS.  */
   display: -ms-flexbox;   /* ARA: IE 10 */
   display: flex;  /* YENİ, Chrome, Firefox, IE11, IOS7  */
}

flex tanımlanmış elemanın alt elemanları esnek yapıya kavuşacaktır. inline-flex tanımında kapsayıcı eleman inline özelliği gösterir.

Basit bir örnek yapalım.

Kapsayıcı elemana tanımlanan display:flex özelliği yardımı ile alt elemanlara tanımlanan flex özellikleri ile sayfa yerleşimimizi çok kolay şekilde yapmamıza olanak sağlamaktadır.

flex-direction

Yapısı: flex-direction: <deger>
Aldığı Değerler: row | row-reverse | column | column-reverse
Başlangıç değeri: row
Uygulanabilen Elementler: Esnek kapsayıcı elemanlara
Kalıtsallık: Yok

flex-direction özelliği kapsayıcı eleman içindeki esnek kutuların sıralama yönünü belirler. Dört değer alır; row, row-reverse, column, column-reverse.

  • row: Esnek kutuları soldan sağa sıralar
  • row-reverse: Esnek kutuları sağdan sola sıralar
  • column: Esnek kutuları kolon olarak yukarıdan aşağı sıralar
  • column-reverse: Esnek kutuları row-reverse gibi ama alttan yukarı sıralar

Bir örnekle bu özelliği deneyelim.

flex-wrap

Yapısı: flex-wrap: <deger>
Aldığı Değerler: nowrap | wrap | wrap-reverse
Başlangıç değeri: row
Uygulanabilen Elementler: Esnek kapsayıcı elemanlara
Kalıtsallık: Yok

word-wrap özelliğinden aşina olduğumuz bir kullanımı esnek kutulara uygulamak için kullanılır. İki ve daha fazla satırdan oluşan esnek kutuların nasıl bir davranış sergileyeceğini belirlemek için kullanılır. Üç değer alır nowrap, wrap, wrap-reverse.

  • nowrap: Tek satırda esnek kutular soldan sağa sıralanır.
  • wrap: İki veya daha fazla satırda esnek kutular soldan sağa sıralanır.
  • wrap-reverse: iki veya daha fazla satırda esnek kutular sağdan sola sıralanır.

Örneğmize iki satır olacak şekilde bir iki kutu daha ekleyerek bu özelliğin kullanımını görelim.

wrap-revers tanımı ile ikinci satırı üste eklemiş olduk.

flex-flow

Yapısı: flex-flow: <flex-direction> || <flex-wrap>
Aldığı Değerler: row, row-reverse, column, column-reverse || nowrap, wrap, wrap-reverse
Başlangıç Değeri: row nowrap
Uygulanabilen Elementler: Esnek kapsayıcı elemanlara
Kalıtsallık: Yok

Yukarıda bahsettiğimiz iki özelliğin(flex-direction ve flex-wrap) kısayoludur. İki özelliği tek bir tanım ile tanımlama imkanı verir.

justify-content

Yapısı: justify-content: <deger>
Aldığı Değerler: flex-start | flex-end | center | space-between | space-around
Başlangıç Değeri: flex-start
Uygulanabilen Elementler: Esnek kapsayıcı elemanlara
Kalıtsallık: Yok

Esnek kapsayıcı içindeki elemnaların x ekseninden nasıl hizalanacağını belirler. Beş değer alır. flex-start, flex-end, center, space-between, space-around.

justify-content

  • flex-start: Esnek taşıyıcı içindeki kutular kapsayıcının başından başlayarak(flex-direction’da belirtildiği gibi) dizilirler.
  • flex-end: Elemanlar sondan başlayarak dizilir.
  • center: Kutular kapsayıcının orta çizgisine göre hizalanarak dizilirler.
  • space-between: Kutular eşit olarak dizilir. İlk kutu orta çizginin başında, son kutu sonunda yer alır.
  • space-around: Kutular arası boşluk eşit olacak şekilde dizilir.

align-items

Yapısı: align-items: <deger>
Aldığı Değerler: stretch | flex-start | flex-end | center | baseline
Başlangıç Değeri: stretch
Uygulanabilen Elementler: Esnek kapsayıcı elemanlara
Kalıtsallık: Yok

Bu özellik kutuların y ekseninde nasıl hizalanacağını belirler. justify-content’in dikey şekli de diyebiliriz. Beş değer alır. flex-start, flex-end, center, baseline, stretch

align-items

  • flex-start: Kutular kapsayıcının üst çizgisineden başlayarak dizilir.
  • flex-end: Kutular kapsayıcının alt çizgisinden başlayarak dizilir.
  • center: Kutular kapsayıcının dikey olarak ortasında dizilir.
  • baseline: Her kutu içerisindeki ilk satırın yazı tipi dikkate alınarak dikeyde hizalanır.
  • stretch: Kutular kapsayıcı yüksekliğine eşitlenir. (min-width/max-width değerleri dikkate alınır)

align-content

Yapısı: align-content: <deger>
Aldığı Değerler: stretch | flex-start | flex-end | center | space-between | space-around
Başlangıç Değeri: stretch
Uygulanabilen Elementler: Esnek kapsayıcı elemanlara
Kalıtsallık: Yok

justify-content‘in yatayada yaptığını dikeyde yapar. İki veya daha fazla satırdan oluşan esnek kutuların dikeyde hizalanması için kullanılır. Altı değer alır. flex-start, flex-end, center, space-between, space-around, stretch.

align-content

  • flex-start: Kutular kapsayıcının üst çizgisineden başlayarak dizilir.
  • flex-end: Kutular kapsayıcının alt çizgisinden başlayarak dizilir.
  • center: Kutular kapsayıcının dikey olarak ortasında dizilir.
  • space-between: İlk satır kapsayıcı üst çizgisine, son satır kapsayıcı alt çizgisine hizalanacak şekilde dizilir.
  • space-around: Satırlar arası eşit boşluk kalacak şekilde dizilir.
  • stretch: Satırlar boşluk kalmayacak şekilde dikeyde hizalanır.

Esnek Öğe Özellikleri

order

Yapısı: order: <sayı>
Aldığı Değerler: sayı
Başlangıç Değeri: 0
Uygulanabilen Elementler: Esnek öğelere ve esnek kapsayıcı içindeki absolute tanımlı alt öğelere
Kalıtsallık: Yok

Varsayılan olarak esnek kutular kodda yazılan sıra ile dizilir. order özelliği esnek kapsayıcı içindeki öğelerin kaçıncı sıralda görünmesi gerektiğini belirlememizi sağlar.

Yukarıdaki örnekte ikinci sıradaki eleman ordr tanımı ile üçüncü sıraya atılmıştır.

Not: -1 değeri tanımlanan kutu ilk başa gelecektir.

flex-grow

Yapısı: flex-grow: <sayı>
Aldığı Değerler: sayı
Başlangıç Değeri: 0
Uygulanabilen Elementler: Esnek öğelere ve esnek kapsayıcı içindeki absolute tanımlı alt öğelere
Kalıtsallık: Yok

flex-grow tanımı yapılmış eleman diğer esnek kutulardan verilen dğer kadar daha büyük olacaktır. Bu özellik sayesinde kutular kendi aralarında belirlenen oranlarda esnek olarak genişleyip küçülecektir.

Tüm elemanlara 1 değeri verilip bir esnek öğenin flex-grow değeri 2 tanımlanırsa, bu öğe diğer öğelere göre her zaman iki kat daha büyük görünecektir. Negatif değer almaz.

flex-shrink

Yapısı: flex-shrink: <sayı>
Aldığı Değerler: sayı
Başlangıç Değeri: 1
Uygulanabilen Elementler: Esnek öğelere ve esnek kapsayıcı içindeki absolute tanımlı alt öğelere
Kalıtsallık: Yok

Esnek kutu için büzülme faktörünü belirler.

flex-shrink tanımlanmış eleman, esnek kapsayıcı eleman içindeki diğer elemanlara göre göreceli olarak nasıl büzüleceğini belirler.

Yukarıdaki örnekte normal durumda eşit genişlikte görülmektedir. Ancak tarayıcı genişliği daraltılınca flex-shrink değeri 2 olarak belirlenen kutu daha fazla büzülecektir. Uyumlu web siteleri yaparken işe yarar bu özellik.

flex-basis

Yapısı: flex-basis: <değer>
Aldığı Değerler: <yüzde> || <değer> || initial || auto || main-size
Başlangıç Değeri: auto
Uygulanabilen Elementler: Esnek öğelere ve esnek kapsayıcı içindeki absolute tanımlı alt öğelere
Kalıtsallık: Yok

Esnek kutunun optimum boyutunu belirlemek için kullanılır. Eğer boş alan müsait ise esnek kutu belirlenen değer kadar genişlikte olacaktır.

Örnekte görüldüğü gibi boş alan var ise ilk eleman genişliği 300px, ikinci eleman genişliği 30%. Tarayıcı genişliği daraltılınca boş alan kalmayınca esnek kutu genişliği esenmeye başlıyor.

flex

Yapısı: flex: <değer>
Aldığı Değerler: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
Başlangıç Değeri: 0 1 auto
Uygulanabilen Elementler: Esnek öğelere ve esnek kapsayıcı içindeki absolute tanımlı alt öğelere
Kalıtsallık: Yok

Bu tanım flex-grow, flex-shrink ve flex-basis tanımlarının bir kısayoludur.

align-self

Yapısı: align-self: <değer>
Aldığı Değerler: auto | flex-start | flex-end | center | baseline | stretch
Başlangıç Değeri: auto
Uygulanabilen Elementler: Esnek öğelere ve esnek kapsayıcı içindeki absolute tanımlı alt öğelere
Kalıtsallık: Yok

Bu özellik bir esnek kutuya varsayılan veya tanımlanan hizalama tanımının dışına çıkma imkanı sağlar. Altı değer alır. auto, flex-start, flex-end, center, baseline, stretch.

Bu tanımlar align-item tanımları ile aynı işi görür.

Not: Esnek öğeler float,clear ve vertical-align tanımlarından etkilenmez.

Tarayıcı Desteği

Chrome explorer Firefox
29+ 10 (orta), 11(yeni) 28+

Mobil Tarayıcılar

Android Mobil Safari Chrome
2.1 (ilk), 4.4 (yeni) 7.1 35.0

 Sonuç

Esnek kutu modülü karmaşık sayfa planları oluşturmak, uyumlu web sayfaları kodlarken önemli avantajları olan bir özellik. İyice teorisini kavrayıp sonra bu özelliğin kullanacağı yerleri araştırmalıyız. Bu konunun birde nerelerde uygulanacağını gösteren bir makale daha yazmak lazım. Bu makale fazla uzunmasın diye buraya koymadım ama yakında o yazıyı da eklerim.

Bir konuyu iki kere yazmak da pek hoş olmuyor be W3C.

Kalın sağlıcakla

Kaynaklar

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