CSS Dersleri

CSS İpucu 19 - Tüm Tarayıcılar İçin CSS İle Saydamlık

Fatih Hayrioğlu

Fatih Hayrioğlu

— 2 min read

Daha önce birçok kez bu konuda bana e-posta geldi. Buraya yazmanın mantıklı olacağını düşündüm.

{% highlight css %} secici { opacity: .75; /* Standard: FF gt 1.5, Opera, Safari / filter: alpha(opacity=75); / IE lt 8 / -ms-filter: "alpha(opacity=75)"; / IE 8 / -khtml-opacity: .75; / Safari 1.x / -moz-opacity: .75; / FF lt 1.5, Netscape */ } {% endhighlight %}

Günümüzdeki(27 Nisan 2012) durumu düşünürsek kodu aşağıdaki gibi kısaltabiliriz.

{% highlight css %} secici { opacity: .75; /* Standard: FF gt 1.5, Opera, Safari / filter: alpha(opacity=75); / IE lt 8 / -ms-filter: "alpha(opacity=75)"; / IE 8 */ } {% endhighlight %}

Örneği görmek için tıklayınız. Kod aslında tek satır olması gerekir ki CSS 3 ile birlikte bu tek satır olacaktır. opacity: değer; tanımı ile halledeceğiz. Ama şu an yürürlükte olan tarayıcılar için yukarıdaki 5 satır kodu yazmalıyız. Bu kodu yazmak o kadar da sorun değil, ama eğer bu kodu yazdığınız sayfanızı W3C doğrulamasından geçirirseniz aşağıdaki gibi bir hata alacaksınız.

donuklasma_val2

Bence W3C doğrulması çok önemli olmasada bazen şartlar doğrulama gerektirdiğinde(mesela müşteri istediğinde) bu sorunu çözmek için bir kaç yöntem var. Bu yöntemlerden biri javascript fonksiyonu hazırlayıp bu fonksiyon yardımı ile elemanlarımızı saydamlaştırma;

{% highlight javascript %} function donuklastirma(element, donukDeger){ var oe = document.getElementById(element); // donuklastirma degeri oe.setAttribute("style", "opacity:"+ donukDeger +";") if (oe.style.setAttribute) // IE icin oe.style.setAttribute("filter", "alpha(opacity="+ donukDeger*100 +");") } {% endhighlight %}

Örneği görmek için tıklayınız. Diğer bir yöntemde ise ayrı bir css kodu yazıp bu kodu javascript ile ekleyebiliriz

{% highlight javascript %}

document.write('<link rel="stylesheet" type="text/css" media="screen" href="style/donuklastirma.css" />');

{% endhighlight %}

Sorun: opacity tanımı kapsadığı elemanın içeriğini de etkiler bunu engellemek için Robert Nyman'ın bir çözümü var. http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/denemedim bir bakın isterseniz.

Kaynaklar

Read more

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

Bir önceki yazımda bahsettiğim gibi CSS'in yeni özelliklerinin bazıları çığır açan özellikler, bazıları kulllanıcı deneyimini iyileştirme yönünde özellikler bazıları da lightdark() fonksiyonu gibi yazım kolaylığı sağlayan özellikler. lightdark() fonksiyonu mevcut uyumlu web yazımındaki büyük sorun olan aşağıdaki kullanımı daha anlaşılır ve düzenli hale getirmeye yarıyor. :root { color-scheme: light

By Fatih Hayrioğlu