Sosyal Medya Paylaşımları için Gerekli Meta Tag’ler

Facebook’un kendi Open Graph standartı, Twitter’ın kendi standartı derken meta tag kullanımlarımız giderek artıyor. Peki bu ikisini ortaklaştırabilmek mümkün mü diye araştırma yapıyorken. Aşağıdaki kod bloğunu buldum. Open Graph aslında çoğu işi çözüyor gibi…

Flexbox ile Footer Sabitleme

Hemen hemen tüm geliştiricilerin kariyerlerinde en az bir kere karşılaştığı sorunlardan birisi de, içeriği az olan sayfalarda footer’ın en aşağıda yer almaması olsa gerek. Aslında, footerın yüksekliği bilindiği taktirde bunun bi’ çözümü vardı.

Flexbox, işte tam bu noktada yardımımıza koşuyor. Genellikle internette yatay pozisyonlamalar için kullanılsa da dikey yönlü çözümlerle de öne çıkıyor.Yapacağınız tek şey de, içeriği tek bir element içerisine aldıktan sonra gerisini flexbox‘a bırakmak olacaktır.

HTML tarafı için:

CSS tarafı için:

Canlı örnek için:

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

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.

CSS ile Dikey Ortalama

3 satır CSS kodu ile herhangi bir elementi dikey alan içerisinde ortalamak kim istemez ki ? Yüksekliği belirlenmemiş herhagi bir alan içerisine, herhangi bir nesneyi “transform: translateY” yardımıyla ortalayabiliyoruz. “Transform” CSS değeri her ne kadar bir elementin rotasyonunu değiştirmek veya scale etmek için kullanılsa da “translateY” ile elementlerin dikey değerini düzenleyebiliyoruz.

Aşağıdaki kod bloğu yardımıyla dikey ortalamayı yapabilir, hatta IE9’da bile çalıştırabilirsiniz:

[code lang=”css”]
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
[/code]

Kurcalamak isteyenler için de :

See the Pen Vertical center with only 3 lines of CSS by Ibrahim Nergiz (@PhyesiX) on CodePen.