CSS3 artık bazı özellikleri ile hayatımıza giriyor, tabi kod yığını
halinde girse de güzel sonuçları gördükçe kod yığını sorununu dert
etmiyoruz. Tabi sorunlardan bir taneside İnternet Explorer
desteklememesi. Daha önce İnternet Explorer için çözüm üretmiş olduğumuz
box-shadow özelliğinianlatmıştık. Her şey buraya kadar güzel, ancak
geçenlerde bir sorunla karşılaştım ve sizlerle paylaşmak istedim.
Sorun şu ki ie7’de(ki ie6’yı öldürdük ama ie sorunlarından kurtulamadık)
uyguladığım filtre: uygulanmıyor.
http://www.colorzilla.com/gradient-editor/ sitesindeki aracı
kullanarak renk geçişi kodlarımı oluşturuyorum.
Şöyle bir kodumuz olsun uygulamaya ie7’de baktığımızda background:#ffd65e; /* Old browsers */ satırının sonucunu görüyoruz, halbuki ie7
doğrusal renk geçişini destekliyor, ancak hasLayout sorunu nedeni ile bu
özelliği uygulamıyor. Bir yükseklik veya genişlik tanımı yapınca
düzeliyor, ancak bu benim işime yaramıyor. Gerçek çözüm ise hasLayout
sorunlarının kahramanı zoom:1 tanımı
background özelliklerini anlatırken background tanımlarının içerik
ve padding alanının ardalanını etkilediğini söylemiştik. CSS2.1’de
tanımladığımız ardalan resimleri içeriği ve padding uygulanan alanları
kapsıyor. CSS3 ile birlikte buradaki kabul değişti. Artık kenar
çizgileride dahil edilebiliyor veya içerik alanı ile
sınırlandırılabiliyor. Bize bu imkanı CSS3’ün background-clip ve
background-origin özellikleri sağlıyor.
İlk olarak background-origin özelliğini inceleyerek başlayalım.
background-origin
background-image konumunu hesaplamada elementin kutusunun
sınırlarını belirler. CSS3’den önce bu sabit bir değer olarak
padding-box idi. Bu özellik bize farklı konumlandırma imkanı sağlar.
Yapısı: background-origin: <bg-box> Aldığı Değerler:<bg-box> border-box | padding-box | content-box Başlangıç değeri:padding-box Uygulanabilen elementler: Tüm elementler Kalıtsallık: Yok
Aldığı değerleri kısaca açıklarsak
border-box: background-image konumu border alanından başlar
padding-box: background-image konumu padding alanından başlar
content-box: background-image konumu içerik alanından başlar
background-position:fixed tanımlı elementlere etki etmez.
Tarayıcı Desteği
1.0+
9+
3.6+
Mobil Tarayıcılar
2.1+
3.2+
36+
background-clip
background-clip ardalanın nerede gösterileceğini tanımlar. Daha önce
padding dahil içerik alanı sabit olarak geliyordu, artık border alanıda
dahil edilebiliyor veya padding alanı kapsamdan çıkarılabiliyor
Yapısı: background-clip: <bg-box> Aldığı Değerler: <bg-box> border-box | padding-box | content-box Başlangıç değeri: border-box Uygulanabilen elementler: Tüm elementler Kalıtsallık: Yok
Aldığı değerleri kısaca açıklarsak
border-box:Ardalan içerik alanı + padding alanı + border alanını
kapsar.
padding-box: Ardalan içerik alanı + padding alanını kapsar
content-box: Ardalan sadece içerik alanını kapsar.
border-box tanımı eğer background-origin:border-box ise
uygulanır.
background-origin:border-box olarak tanımladığımızda
background-clip özelliğini daha iyi anlarız. Her üç kutudaki
farkları gördüğünüz gibi. Resim sırası ile border, padding ve içerik
alanından kırpılmıştır.
Tarayıcı Desteği
1.0+
9+
3.6+
Mobil Tarayıcılar
2.1+
3.2+
36+
backgroun-origin özelliği background-image konumunun kapsama
alanını belirlerken, background-clip ise background alanını kırpmak
için kullanılır. background-origin sadece ardalan resmini etkilerken
background-clip ardalan resmi ve ardalan renginide etkiler.
Bu özellikleri destekleyen farklı tarayıcılar için önek ile çözüm
üretilir. Diğer önek uygulamalarında farklı olarak bu özelliklerin
değerlerinde de tarayıcı sürümleri arasında farklılıklar vardır. Firefox
ve Webkit’in eski sürümlerinde değer olarak border, content
vepadding değerlerini desteklerken son çıkan sürümler standartlaşan
content-box, border-box ve padding-box değerlerini
desteklemektedirler.
background-clip: text Değeri
Webkit tabanlı tarayıcılarda diğerlerinden farklı olarak text değeride
vardır. Henüz standartlarda bulunmayan bu değeri sadece webkit kullanan
Chrome ve Safari desteklemektedir. Bu değer atandığında metinin
ardalanına resim uygulanıyor geri kalan kısımlara ise saydam ardalan
olarak kalıyor.
-webkit-text-fill-color:transparent ile metnin ardalanını
saydamlaştırıyoruz ve elemanın ardalanındaki resmi gösteriyoruz. Çok
güzel görsel çalışmaları bu şekilde yapabiliriz, ancak henüz sadece
Chrome ve Safari desteklediği için pek kullanışlı değil.
Genelde tarayıcı düzeltmelerini ie için yaparız. Ancak bu sefer
Chrome için bir düzeltme yapmam gerekti(Chrome’un line-height ile olan
sorun) araştırdım ve media sorgusu ile bir düzeltme kodu buldum.
Şeklinde bir kod işimi gördü, ancak projeyi yayına atarken sıkıştırıp
gönderiyoruz ve sıkıştırılınca
Satırındaki and ve ( arasındaki boşluğu sıkıştırma esnasında yok
ediyor ve buda bu düzeltmenin uygulanmamasına neden oluyor. Çözüm için
araya çakma bir yöntem(/!/) ile boşluk bırakmalıyız.
Şeklinde çözüm üretebiliyoruz.
Belki küçük bir ipucu ama lazım olur günün birinde