“object-fit” ile İmaj Boyutlandırma

Responsive websitesi yaparken yaşadığımız en büyük zorluklardan birisi de imaj boyutlandırmaları olsa gerek. Kolay yoldan bunu küçük bi’ CSS kodu yardımıyla çözebiliyoruz:

[code lang=”css”]
img {
max-width: 100%;
height: auto;
}
[/code]

Ama hepimizin de bildiği gibi bu çözüm pek yeterli olmuyor. Bazen, imajın elementin hepsini kaplamasını, bazen en boy oranını korumasını veya her responsive davranışta ortalı olmasını isteyebiliriz. Hadi onu geçtim iframe videolarında responsive olarak da sıkıntılarımız mevcut. Her ne kadar bu sıkıntıların çözümleri mevcut olsa da baş belası olabiliyor … Kısacası, responsive tasarımlarda imaj veya video gibi medya elementleri ile başımız sık sık derde giriyor ve kontrol zorlaşabiliyor.

İnternette araştırırken “object-fit” adı altında yardımcımızın olduğunu öğrendim, çok da mutlu oldum. Web sitesine arka plan imajını koyabilmek için “background-size” gibi yöntemler kullanırken artık “object-fit” ve aldığı değerler ile fantezilerimizi gerçekleştirebiliriz.

[code lang=”css”]
img {
/* En boy oranını koruyarak, element içerisine imajı boyutlandırıyor. */
object-fit: cover;

/* İmajın tamamını göstermek için genişlik ve yüksekliğine göre boyutlandırıyor. */
object-fit: contain;

/* En boy oranı korunmayarak element içerisinde imaj boyutlanıyor. */
object-fit: fill;
}
[/code]

Codepen üzerinde güzel de bir örnek buldum:

See the Pen CSS object-fit by Ibrahim Nergiz (@phyesix) on CodePen.

Henüz yeni olduğundan browser konusunda da seçici davranıyor:

Browser Destek
Internet Explorer
Google Chrome v31+
Firefox v36+
Safari OS X 7.1+
Safari iOS 8+
Opera v19+

HTML5 ile Browserlarda Bildirim (Notification) Kullanımı

Malum, kış geldi. İş yerine gitmeyip evden çalışmaya karar verdik. İşyerinde kullandığımız Hipchat’i indirmek için web sayfasına girdiğimde online application’unun olduğunu farkedince gireyim dedim. Konuşmaların sağ taraf köşelerde bildirim olarak gelmesi beni araştırmaya iten sebep oldu.

Bildirim Özelliğinin Desteklenip Desteklenmemesi

CSS3, HTML5 derken kimi özellikler browser’lara hemen implemente ediliyor kimisi de gecikmeyle geliyor. Bu konuda yardımımıza da Modernizr koşuyor ki burada da bu nimetten faydalanalım.

[code lang=”js”]
if ( "Notification" in window ) {
console.log("Destekeniyor.");
} else {
console.log("Desteklenmiyor.");
}
[/code]

Bildirim Özelliği için İzin Alımı ve Uygulanması

Bu bölümde kullanıcıdan bildirim gösterimleri için izin almamız gerekiyor. Genellikle bu bölümü herhangi bir trigger ‘a bağlamak gerekebilir ki kullanıcının karşısına web sayfasına girince izin barı çıkmasın. Bilgilendirme API’si için bilgilendirme şart.

[code lang=”js”]
if (Notification.permission === "granted") {
var notification = new Notification("Merhaba İbrahim!");
}
[/code]

Basit bir şekilde izin alımını sağladıktan sonra uygulama için de :

[code lang=”js”]
if (Notification.permission === "granted") {
var notification = new Notification(‘Merhaba İbrahim!’, {
body: ‘Buraya göstermek istediğimiz mesajı yazıyoruz.’,
icon: ‘http://phyesix.com/img/Ibrahim-Nergiz.jpg’,
tag: ‘demo’,
dir: ‘auto’,
lang: ”
});
}
[/code]

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

“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.

Sar Kebap’a Teşekkürler

Aslında bu blog yazımı iş yerinde karşılaştığım sorunlara değil de, hayata dair bi’ yazı olarak yazmak istedim. Kişisel bloguma yazıp yazmama konusunda ikileme düşsem de yazının yeri burası diye düşünüyorum. İş çıkışı deli gibi acıkmış olan ben, ne yesem diye Yemek Sepeti restoranlarına bakmaya başladım. Hem uygun fiyatlı hem lezzetli olmalı diye daha yerel / adı sanı duyulmamış restoranları seçiyorum. Bunun hikayesi de şöyle … Üniversite zamanlarından kalma alışkanlık olsa gerek, acıkınca akla hep Burger King, Domino’s vs vs gibi yerler geliyor. Doyurucu oluyor da, ama gel gör ki fiyat / performans oranı çok kötü. 20 TL gibi bir rakam vererek tatsız, tuzsuz yemekler yiyorsun. Arkadaşımın dediğini siz de uygularsanız beni rahatlıkla anlayacaksınız: “Burger King menülerinden herhangi birisinin etini çıkar, sadece etini ye” …

Daha önceki siparişlerimi incelediğimde Sar Kebap‘ın aslında çok iyi olduğunu hatırladım. Bi’ kere daha şans vermek istedim. Siparişin son aşamasında ödeme metodları seçilmiyordu. Yemek Sepeti kaynaklı bir sorundu. Canlı Yardıma ulaşmaya çalıştım fakat konu ile ilgilenmeleri için sipariş vermek gerekiyordu. Diğer türlü bot ile konuşmaya mahkumsunuz. Uzun uğraşlar sonucu hala ulaşamayınca bu seferlik telefonla vereyim dedim. Telefonu kim açtı bilmiyorum ama babacan bi’ amca siparişimi aldı. Sesinden belliydi.

Yemek geldi, 13 TL gibi bi’ ücretle bi’ sürü meze ve güzel bi’ Adana. Afiyetle yedikten sonra babacan sese ben de bir şeyler söylemek istedim. Evet, sırf ellerinize sağlık demek için tekrardan aradım. Gerisi anlatılmaz, yaşanır misali. O sevinci / mutluluğu hissetmek ve hissettirmek güzeldi. İşini hakkıyla yapan herkes bi’ şekilde mükafatlandırılmalı. Bundan sonra Burger King’den sipariş vermeme dışında beğendiğim restoranları tekrardan arayıp ustalarının ellerine sağlık dileklerimi ileteceğim. Küçük bi’ şey gibi gözüksede ihtiyacımız var. Evet.