8 veya 4 Karakterli HEX Renk Kodu

İlk karşılaştığımda şaşırmadım değil ama bi’ o kadar da sevindim. Chrome ve Firefox yeni update’leri sayesinde HEX renk formatlarında alfa kanalını da eklemeye izin veriyor. Bu ne demek oluyor peki?

Daha fazla bilgi için: https://www.chromestatus.com/feature/5685348285808640

Daha fazla bilgi için: https://bugzilla.mozilla.org/show_bug.cgi?id=567283

Eski IE Versiyonları için CSS Fixleri

Aslında farklı tarayıcılar için CSS özelleştirmesi diye bi’ şey olmaması gerekiyor diye düşünüyorum, ama gel gör ki böyle fix’ler mevcut ise bazı durumlarda gerekli olabiliyor diyebiliriz.

Burada eski IE versiyonları için basit CSS fixleri mevcut, IE 6 için alttan çizgi (_) ve IE 7 için de yıldız (*) ı kullanıyoruz. Örnek kullanımları için de:

Sizce bu özellikler gerekli mi? veya daha önce kullandınız mı?

“text-indent: -9999px” Alternatifi

Front-end Developer’ların hemen hemen hepsi -9999px hack’ini biliyorlardır sanırım. Uzun yıllar, hatta şu an bile kullanımı mevcut. Herhangi bi’ text elementinin içerisin imaj koymak istediğinizde bu yola başvurarak, text’in gözükmesini engelleyebiliyorsunuz.

See the Pen IAaBd by Ibrahim Nergiz (@phyesix) on CodePen.

Yukarıda bunun çok basit bir örneği de mevcut. Element içerisinde imaj gösterilmiş, yazı ise gözükmüyor. Basit ve etkili. Bunun yerine:

[code lang=”html”]
.no-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
[/code]

Örneği ise:

See the Pen eEKtu by Ibrahim Nergiz (@phyesix) on CodePen.


Yukarki css elemntini istediğiniz yerde kullanabilirsiniz. Kullanırken de aşağıdaki faydaları görmüş olacaksınız:
+ Performans olarak gözle görülür bir artış yaşanmakta. Geleneksel yöntemde -9999px’lik bi’ alan browser tarafından çiziliyor, burada bunu çizdirmiyoruz. Her ne kadar hepimizin bilgisayarları sıkıntısız olsa da özellikle de mobilde önemli bir hal alabiliyor.
+ Uzun yazılar içinde bulunduğu container’in dışına taşmıyor.

Yatay Şekilde Element Ortalamak: inline-block vs table

Daha çok menü içerisindeki elementleri ortalamak için kullandığım “inline-block” kullanımının bugün yeni bir versiyonunu öğrendim. Bu versiyonu ilk defa görüyorum fakat siz daha önce karşılaştınız mı bilmiyorum: “display:table

Yatay olarak bir elementi ortalamak için “margin:auto” ve genişlik değerini belirtmek bilinen bir teknik. Dinamik elementlerde ise sabit bir genişlik olmadığından bu hipotezimiz geçersiz oluyor. Geleneksel yöntemden bahsetmek gerekirse:

[code lang=”html”]
body {
text-align: center;
}
nav {
display: inline-block;
}
[/code]

Temel olarak yukarıdaki iki elemente css’i uygulayarak bunu çözebiliyoruz. Bu güzel bir çözüm olmakla birlikte tek dezavantajı, “text-align” olmasıdır. Kullanılan element içerisindeki tüm text elementleri otomatik olarak bu özelliği alıp, ortalanacaktır. İşte tam bu noktada yeni bi’ çözüm olan “display:table” kullanımı ile bu sorunu ortadan kaldırabiliyoruz:

[code lang=”html”]
nav{
display: table;
margin: auto
}
[/code]

Bununla birlikte:
+ İki elemente css ile değer atamak yerine, tek element ile bu işi hallediyoruz.
+ Yan etkisi de bulunmuyor.

Codepen üzerinde gözlemlemek için:

See the Pen Dynamic Element Horizontal Centering by Ibrahim Nergiz (@phyesix) on CodePen.

Font-face Kullanımında Türkçe Karakter Sorunu

Front-end Developer’lar arasında @font-face kullanımını bilmeyen yoktur sanırım. Önceleri sistem fontlarına bağlı olarak çıkan tasarımlar ve front-end development süreçleri, günümüzde yerine hayalimizdeki hemen hemen her şeyi tasarlayacak ve kodlayacak haline geldi. İşin kötü yanı da biz Türk tasarım ve yazılım geliştiricilerinin font seçeneğinin pek bulunmaması. Dünya çapında popüler olan çoğu fontun Türkçe’si bulunabilir düzeydeyken kimilerini bulmaksa işkence haline dönüşüyor. Hadi bulduk diyelim, tasarımda işledik diyelim Front-end tarafında @font-face kullanımında Türkçe karakterlerin bozuk çıkması insanı çileden çıkarıyor.

Tasarımcının kullandığı font, Photoshop’da düzgün, tüm Türkçe karakterleri sorunsuz gözükürken, @font-face‘e çevrildiği anda bu fontlar patlıyordu. İşte tam bu noktada aslında sorunun fontlardan değil de bana bu çıktıyı sunan servis kaynaklı olduğunu düşündüm ki gerçekten de öyleydi. Her ne kadar alternatifleri çoğalmaya başlasa da @font-face generator adı altında “Fontsquirrel” iyi iş çıkarıyor. İşte bu anlatımı da “fontsquirrel” üzerinden yapacağım.

  1. Fontlarımızı seçtikten sonra “expert” modu seçiyoruz.
  2. Font formats bölümünden “svg” yi işaretliyoruz.
  3.  Subsetting bölümünden “Subsetting..” seçiyoruz.
  4. Language bölümünden “Turkish” i seçiyoruz.
  5. Single Characters bölümünden “ç,Ç,ş,Ş,ı,İ,ğ,Ğ,ü,Ü,ö,Ö,ü,Üharflerimizi ekliyoruz

Sonrasında da bilgisayarımıza dosyalarımızı yüklüyoruz. Bu kadar.