Bir özelliğin tarayıcılar tarafından desteklenip desteklenmediğini genelde javascript ile kontrol ediyoruz. @support kuralı sayesinde artık CSS ile bu kontrolü yapabiliyoruz.
@media kuralına benzer basit bir kullanımı var. Farklı tarayıcılar için kod yazmaya ihtiyaç duyan bizler için çok süper bir özellik. Modernizr’ın javascript ile yaptığını css ile yapacağız artık.
Basit Yapısı
Bir örnek yapacak olursak;
Tarayıcı eğer display:flex’i destekliyorsa bu blok css’e eklenecektir.
@media kuralı gibi and, or ve not operatörleri kullanılabilmektedir.
ve(and) operatörü
Birden fazla koşula bağlı sorgular oluşturabiliyoruz.
veya(or) operatörü
Veya operatörü yardımı ile iki koşul öne sürüp birisinin gerçekleşmesi durumu için css tanımları yapılabiliyor. Örneğin farklı tarayıcı önekleri için;
Olumsuzluk(not) operatörü
Desteklemiyorsa sorgusu için not operatörünü kullanabiliyoruz.
Tarayıcı Desteği
Yeni nesil tarayıcılar desteğini sunarken İnternet Explorer’ın ve mobil tarafının eksik kalması işin kötü kısmı. Asıl İnternet Explorer için gerekli bir özellik aslında :D
CSS3 özelliklerini anlatan makalelerden sonra, yeni CSS3 değerleri hakkında bir makale yazmam gerektiğini fark ettim..
CSS tanımları 3 ana yapıdan oluşmaktadır. Seçiciler, özellikler ve değerler. CSS3 ile gelen yeni seçicileri CSS3 Seçicileri makalesinde anlatmıştık. CSS3 özelliklerini CSS Dersleri altındaki CSS3 başlığı altında anlattık. Sıra geldi CSS3 ile gelen yeni değerlere.
Değerleri CSS3 ile birlikte geldi. Tek tek incelersek.
Anahtar Kelime Değeri
initial Değeri
initial değeri atanan elemanın belirlenen özelliğinin başlangıç değerine(User Agent) döndürmek için kullanılır.
Tarayıcılar HTML elemanları yorumlarken belirli başlangıç değerleri kabul ederek yorumlarlar. User Agent Stilleri olarak adlandırılan bu özelliklere sonradan tanımlanan CSS özellikleri ezer. Her tarayıcının kendine özel UA Stillleri vardır. CSS3 ile gelen initial değeri ile başlangıç değerine döndürme imkanımız oluyor.
Örnekte görüldüğü gibi kapsayıcı div elemanına atanan kırmızı rengi ilk paragraf için initial değeri ile tarayıcının ilk kabul değerine(siyah) döndürülmüştür.
Tarayıcı Desteği
1.0+
desteklemiyor
19+
Mobil Tarayıcılar
1.0+
destekliyor
-
Göreceli Değerler
ch değeri
1ch değeri sıfır “0” karakter kutusunun genişliğine eş değerdir. Her karakterin sabit genişlikte olduğu monospace yazı tiplerine uygun bir tanım.
Örnekte de görüldüğü gibi her yazı tipinin sıfır karakteri genişli farklıdır.
Tarayıcı Desteği
desteklemiyor
9+
+
rem Değeri
Tanımlanan yazı tipine göre baz alınan değerdir. em değerine benzerdir. em değeri elemana tanımlanan yazı tipini baz alırken rem değeri her zaman kök(root) elementinin yazı tipini baz alır. HTML bir dokümanda kök eleman her zaman html’dir. font-size:1em tanımı html elemanı yazı tipi boyutuna eşit olacaktır.
Tarayıcı Desteği
+
8.0+
+
Mobil Tarayıcılar
+
+
+
Bakış Alanı Değerleri (View Port)
Yüzdeli genişlik kullanımı şu an sıkıntı olmasa da gelecekte sıkıntılara neden olacaktır. Yüzde değerleri kapsayıcının genişliğine göre hareket eder. Bunun yenire kapsayıcı elemanın sabit genişliğine bağlı olmayan, göreceli bir değere bağlı olan değerler kullanım açısından daha mantıklıdır. Bu değerlerde vw, vh, vmin ve vmax değerleridir.
viewport’un kısaltması v olarak belirlenmiş, vw genişliği(width-w) ve yüksekliği(height-h) olarak belirlenen değerler, Bakış alanına göre göreceli olarak genişliğe ve yüksekliğe göre belirlenir.
Bakış Alanı = Tarayıcı Penceresi Boyutu = Window Nesnesi
Bakış Alanının %1 değeri bu üçüne de eşittir. Örneğin Bakış alanı 50cm ise 1vw = 0.5cm’dir.
Bir elemanın yüksekliğinin yarısını ifade etmek için
tanımını yapmamız yeterli olacaktır.
Genelde biz tasarımlarımızı kullanıcının bakış alanına sığdırmak isteriz. Daha önceleri bunu javascript ile yapıyorduk.
İlk başta bakış alanını belirleyip sonra sayfa boyutu değiştiğinde buna göre hareket sağlar. Kullanıcı tarayıcı penceresinin boyutu ile oynadığında hesaplamalar tekrar yapılır. vw, vh, vmin ve vmax değerleri bakış alanına göre göreceli değerlerdir.
1vw = Bakış Alanı genişliğinin %1
1vh = Bakış Alanı yüksekliğinin %1
1vmin = 1vw veya 1vh hangisi küçük ise ona eşdeğer
1vmax = 1vw veya 1vh hangisi büyük ise ona eşdeğer
Bakış Alanı değerleri ekranın satır uzunluğunu okunabilir seviyede tutmazı olanak sağlar. Metinlerin ekranı farklı araçlarda optimum sığmasına olanak sağlarlar.
HSL(Hue, Saturation ve Lightness) Hue = Renk, Saturation = Koyuluk, Lightness =Işık Miktarı anlamındadır. En geniş renk spektrumudur. Hem RGB, hem de CMYK renk dünyasını içine alır.
Hue(renk) renk çemberinde 0 ile 360 arasındaki renklere karşılık gelir. 0 kırmızı, 120 yeşil ve 240 mavidir. Saturation yani koyuluk, gri gölge ve tam renk arasında bir yüzde değerdir. Aynı şekilde Lightness yani ışık için de beyaz ve siyah arasında bir yüzde değer girilir. alıntı: http://www.yakuter.com/css3-color-renk-modulu/
Örnek :
hsla değeride rgb ve rgba benzeridir. Renk değerine opaklık değeri eklenmiş halidir.
Tarayıcı Desteği
+
9+
+
Mobil Tarayıcılar
+
+
+
Açı Değeri
turn Değeri
Turn değeri bir daireyi ifade eder. Animasyon işlerin çok işe yarar bir değerdir. 5turn değeri elemanın 5 kere döneceğini tanımlar.
90deg = 100grad = 0.25turn ≈ 1.5708rad
180deg = 200grad = 0.5turn ≈ 3.1416rad
-90deg = -100grad = -0.25turn ≈ -1.5708rad
CSS tanımlarında derece ve turn değer tek değerdir, bundan dolayı kullanılırken derece ile yapışık kullanılmalıdır, araya boşluk bırakılmamalıdır.
Yeni değerlerden biride cycle() değeri. cycle() değeri iç içe elemanlar arasında aynı özelliğin farklı değerlerini sırası ile uygulamak için kullanılır.
5 adet iç içe liste elemanlarına sırası ile disk, circle, square, box işaretleri uygulanır. Şu an hiç bir tarayıcı desteklememektedir.
attr() Değeri
attr() fonksiyon değeri seçilen elemanın bir özniteliğini(attribute) almak ve css içinde kullanmak için kullanılır. Genelde sözde elemanlarda kullanılır.
Bu fonksiyonu kullanarak basit bir tooltip uygulaması yapabiliriz.
Örneği incelediğimizde html içinde bağlantıya data-title özniteliği olarak eklenen bilgilendirme :hover durumunda elemanın sözde :after sınıfı ile görünür hale getirilmektedir.
Tarayıcı Desteği
+
8.0+
+
Mobil Tarayıcılar
+
+
+
Basit kullanımı tüm tarayıcılarda varken CSS3 ile birlikte gelen yenilikleri henüz destekleyen tarayıcı yok. Daha önce sadece content özelliği desteği varken CSS3 ile tüm özellik desteği geldi, CSS2’de sadece string döndürürken CSS3 ile string dışında değer döndürme desteği de geldi.
counter() Değeri
counter() değeri CSS ile sıralı rakamlar oluşturmamızı sağlar.
İç içe listelerde kitap indekslerindeki gibi bir rakamlandırma bu özellik sayesinde yapabiliyoruz.
Kodu MDN’de gördüm. Değeri tanımlamak için güzel bir örnek.
CSS3 ile gelen güzel özelliklerden birisi renk geçişleri. Bu güzel özelliği kullanmamızdaki en büyük engel İE’nin bu özelliği İE 10 sürümünde destekliyor olması. Ancak farklı bir yöntem ile bu desteği İE’nin tüm sürümlerine kazandırabiliyoruz. filtre tanımı. filtre tanımı yardımı ile İE için çözüm oluşturabiliyoruz. Tam karşılamasa da desteği sağlaması büyük ölçüde işimizi görüyor.
Uygulamada filtre bazı sorunlar neden oluyor. Bunlardan birisi renk geçişi kullanılan bir tanımın ezilmesi veya sıfırlanması sırasında normal renk geçişini
tanımı sıfırlıyor veya ezebiliyor iken filter’ı sıfırlamak için farklı bir yol izlememiz gerekiyor.
veya
İkincisi daha anlaşılır geldi bana.
Genelde bu bazı sorunlara neden oluyor. Renk geçişi tanımlanmış bir öğenin seçili veya :hover gibi farklı durumlarında tek renk tanımı veya transparan ardalan tanımı yapılırken genelde filtre tanımı unutuluyor ve buda İE’de soruna neden oluyor. Aman dikkat.