CSS3 Yeni Değerleri

6 Ağustos 2013

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.

Bir liste olarak sıralarsak;

  • Anahtar Kelime Değeri
    • initial Değeri
  • Göreceli Değerler
    • ch
    • rem
  • Bakış Alanı Değerleri (View Port)
    • vw
    • vh
    • vmin
    • vmax
  • Renk Değerleri
  • Açı Değeri
    • turn
  • Fonksiyonel Değerler
    • calc()
    • counter()
    • attr()
    • cycle()

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

Chrome explorer Firefox
1.0+ desteklemiyor 19+

Mobil Tarayıcılar

Android Mobil Safari Chrome
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.

ch değeri

Örnekte de görüldüğü gibi her yazı tipinin sıfır karakteri genişli farklıdır.

Tarayıcı Desteği

Chrome explorer Firefox
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

Chrome explorer Firefox
+ 8.0+ +

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ + +

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

div{
height:50vh;
}

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.

Tarayıcı Desteği

Chrome explorer Firefox
26+ (-webkit) 9.0+ (kısmen) 19+

Mobil Tarayıcılar

Android Mobil Safari Chrome
desteklemiyor 6.0 (kısmen) 36

Renk Değerleri

rgba() Değeri

Daha önce bu değeri anlatmıştım. CSS3 RGBA Renk Tanımı

hsl ve hsla Değerleri

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 :

.div {
color:hsl(240,%50,%50)
}

hsla değeride rgb ve rgba benzeridir. Renk değerine opaklık değeri eklenmiş halidir.

Tarayıcı Desteği

Chrome explorer Firefox
+ 9+ +

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ + +

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.

Tarayıcı Desteği

Chrome explorer Firefox
+ 9.0+ +

Mobil Tarayıcılar

Android Mobil Safari Chrome
desteklemiyor desteklemiyor desteklemiyor

Fonsiyonel Değerler

calc() Değeri

Daha önce bu konuya değinmiştim. CSS3 calc() değeri

cycle() Değeri

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.

li > ul {
list-style-type: cycle(disk, circle, square, box);
}

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

Chrome explorer Firefox
+ 8.0+ +

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ + +

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.

Tarayıcı Desteği

Chrome explorer Firefox
+ 8.0+ +

Mobil Tarayıcılar

Android Mobil Safari Chrome
desteklemiyor desteklemiyor desteklemiyor

Kaynaklar

Bower'ı kaldırdık

Arayüz geliştiricileri (Front-end) dünyası çok hızlı bir şekilde güncelleniyor. Her gün birçok kütüphane ve araç çıkıyor ve bazıları kend...… Devamını oku

HTML Öznitelikleri ve DOM özellikleri

22 November 2017 tarihinde yayınlandı.

CSS3 ile resimleri oranını koruyarak sığdırma

20 November 2017 tarihinde yayınlandı.