tarihinde Fatih Hayrioğlu

CSS’de değişken kullanmak şu an için mümkün değil. Eğer CSS Önişlemcilerini kullanıyorsanız o başka. currentColor değerini bir değişken olarak kabul edebiliriz. Tarayıcı desteğine baktığımızda tüm yeni nesil tarayıcılar destekliyor, ayrıca ie9+, gayet güzel.

currentColor değeri; Mevcut elemanın color değerini referans alan bir değişkendir. inherit değerine benzerdir, inherit değerinin genişletilmiş kullanımı gibi düşünelim. Renk değerinin tanımlandığı her yerde( kenar çigilerinin renkleri, kutu gölgelerinde, dış hat çizgilerinde, ardalan renklerinde) kullanılır. Eleman ve alt elemanlarına uygulanır.

Kalıtsallık(inherit) değerinin geliştirilmiş halidir. Kalıtsallık tüm değerler için kullanılırken currentColor sadece renkler için kullanılır.

Bir iki kullanım örneği ile daha iyi anlayacağımızı düşünüyorum.

SVG içeriğine renk tanımlama

SVG içeriğine CSS ile müdahale edebiliyoruz. Mesela bir ikon yaptık bunun rengini CSS ile değiştirebiliyoruz.

Renk geçişinde kullanımı

Bir sitenin farklı temaları için renk tanımları yaparken renk geçişlerin de ve renk tanımların da kullanılabilir.

background-image: linear-gradient(to bottom, currentColor, #fff);

Tarayıcı Desteği

Chrome explorer Firefox
+ 9+ +

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ + +

Kalın sağlıcakla..

Kaynaklar

tarihinde Fatih Hayrioğlu

Daha önce yazacaktım ama desteği çok düşüktü. Webkit’in %82(mobil + web) desteğinden sonra uygulanabilirliği arttı. Ben Firefox’tan destek bekledim ama ondan ses çıkmadı.

Tasarımcıların form elemanlarını tasarlama sevdası hiç bitmedi, bitmeyecek de :D Tüm ihtiyaçları CSS ile halledebilsek sorun yok da işin içine javascript girince durum değişiyor. Çünkü CSS işin işlevsel kısmını yine doğal haline bırakıp görselliğine yönelirken; javascript ile yapılan çözümler işin işlevselliğine de müdahale ediyor. İşin doğallığı bozulunca da tonla sorun çıkıyor.

Neyse biz gelelim kendimize özel kaydırma çubuğu(scroll) yapmaya;

Bu kadar basit bir kod ile özel kaydırma çubuğu elde ettik. Biz yukarıda 3 adet sahte(pseudo) kaydırma çubuğu elementi kullandık. Ancak toplamda yedi tane element vardır.

Özel Scroll Sahte(Pseudo) Elemanları

enter image description here

  1. ::-webkit-scrollbar Kaydırma çubuğu alanını tanımlar. Genelde diğer elemanları kapsar
  2. ::-webkit-scrollbar-button Yön tuşlarını seçmeye yarar.
  3. ::-webkit-scrollbar-track Kaydırma çubuğunun altta kalan boş kısmını seçmeye yarar.
  4. ::-webkit-scrollbar-track-piece Kaydırma çubuğunun tutamacı dışında kalan boşluğu seçmemize yarar.
  5. ::-webkit-scrollbar-thumb Kaydırma çubuğunun tutamacını seçmemize yarar.
  6. ::-webkit-scrollbar-corner Yatay ve dikey kaydırma çubuğunun köşesini seçmemizi sağlar.
  7. ::-webkit-resizer Yatay ve dikey kaydırma çubuğunun köşesinde boyutlandırma çıkması durmunu seçmemizi sağlar.

Öze Kaydırma Çubuğu Sahte(Pseudo) Sınıfları

Farklı durumları yakalayabilmemiz için kaydırma çubuğunun sahte(pseudo) sınıfları vardır. Bu sınıflar kaydırma çubuğu elementinin parçalarına özel seçimin yapmamızı sağlar.

:horizontal, :vertical, :decrement, :increment, :start, :end, :double-button, :single-button, :no-button, :corner-present, :window-inactive

Bu sözde sınıfları tanımlamak yerine örnekleri inceleyerek daha iyi anlayacağımızı düşünüyorum.

Tarayıcı Desteği

Chrome explorer Firefox
+(-webkit) - -

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ (-webkit) +(-webkit) +(-webkit)

Kaynaklar

tarihinde Fatih Hayrioğlu

Daha önce kolon yüksekliklerini eşitlemek için Aksak Kolonlar(Faux Column) yazımda bir çözüm önerisi vardı.

Bu çözümlere bir tane daha ekliyorum.

CSS Renk Geçişleri (Gradients) yazısında renk geçişlerinden bahsetmiştik. Renk geçişlerini tanımlarken genelde yüzdesel tanımlasak ta aslında piksel’de kullanabiliyoruz. Bu kullanım bize aksak kolonların çözümünü sağlıyor. Peki renk geçişi diyorsun ama bize tek renkli ardalan renkleri lazım diye sorarsanız. Renk geçişinde ilk rengin bitişi ile diğer renge geçişin olduğu yerleri aynı durma noktası yaparsak ardalan rengi tek renk olur. Örnekten daha iyi anlayacağız.

Yukarıdaki örnekte görüldüğü gibi sol kolon kesik kalıyor. Bunu düzeltmek için.

Dikkat edeceğimiz kod;

background-image linear-gradient(left, #ccc 284px, #fff 284px, #fff 100%)

Yukarıdaki kodlamada olduğu gibi değeri piksel cinsinden verdiğimiz gibi yüzde cinsinden de verebiliriz.

Diğer yöntemden farkı resim kullanmadan bu işi yapıyor olmamız. Buda bize esneklik sağlıyor. Bu yöntemin tek eksiği belki ie9 ve öncesi için desteğinin olmaması. Eğer müşteri çok ısrar ederse ie8 ve ie9 için resimli diğer yöntemi kullanabiliriz.

Kalın sağlıcakla.

Kaynaklar