CSS Dersleri

Webkit Tabanlı Tarayıcılar(Chrome ve Safari) İçin Düzeltme(Hack) Sorunu ve Çözümü

Fatih Hayrioğlu

Fatih Hayrioğlu

— 1 min read

Genelde tarayıcı düzeltmelerini ie için yaparız. Ancak bu sefer Chrome için bir düzeltme yapmam gerekti(Chrome’un line-height ile olan sorun) araştırdım ve media sorgusu ile bir düzeltme kodu buldum.

{% highlight css %} @media screen and (-webkit-min-device-pixel-ratio:0) { .arama { background-color: #FF0000; } #solAlan {color: #0000FF;} } {% endhighlight %}

Şeklinde bir kod işimi gördü, ancak projeyi yayına atarken sıkıştırıp gönderiyoruz ve sıkıştırılınca

{% highlight css %} @media screen and(-webkit-min-device-pixel-ratio:0) {% endhighlight %}

Satırındaki and ve ( arasındaki boşluğu sıkıştırma esnasında yok ediyor ve buda bu düzeltmenin uygulanmamasına neden oluyor. Çözüm için araya çakma bir yöntem(/!/) ile boşluk bırakmalıyız.

{% highlight css %} @media screen and/!/(-webkit-min-device-pixel-ratio:0) { ... } {% endhighlight %}

Şeklinde çözüm üretebiliyoruz.

Belki küçük bir ipucu ama lazım olur günün birinde

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