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ı?

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