text-transform:uppercase

Daha önce denediğimde bazı tarayıcıların sorun çıkardığını hatırlıyorum. Aklımda öyle kalmış. Bundan dolayı bu özelliği bugüne kadar hiç kullanmadım. Bir iş dolayısıyla kullanmam gerektiğinde çalıştığını görünce sevindim. Hatta denedeğim tüm tarayıcılarda (IE8 dahi) çalıştı.

2006'da yazdığım CSS'de Metin(Text) Özellikleri yazısından text-transform'dan bahsetmişim. Kod yapısı basit.

HTML kodu:

{% highlight html %}

Bu başlığı büyük harflerle göster

{% endhighlight %}

CSS kodu:

{% highlight css %}

h1 { text-transform: uppercase }

{% endhighlight %}

Tabi birde dilimizi belirtmemiz gerekiyor ki tarayıcı hangi dilde büyültme yapacağını bilsin.

HTML kodunu şöyle değiştirelim. h1'e lang="tr" ekleyelim.

{% highlight html %}

Bu başlığı büyük harflerle göster

{% endhighlight %}

Kalın sağlıcakla

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