CSS Dersleri

CSS3 resize özelliği

Fatih Hayrioğlu

Fatih Hayrioğlu

— 3 min read

resize özelliği kullanıcıya elementin boyutlarını ayarlama imkanı vermemizi sağlar. Kullanıcı bu elemanın boyutunu istediği gibi değiştirme imkanına kavuşur

Yapısı: resize: (değer) Aldığı Değerler: both | horizontal | vertical | none | inherit\ Başlangıç Değeri: none\ Uygulanabilen Elementler: block-level ve replaced elementler, tablo hücreleri ve inline block elementler\ Kalıtsallık: yok {: .cssozelliktanimi}

both: Her iki yöne boyutlandırmaya izin verir. horizontal: yatayda boyutlandırmaya izin verir. vertical: dikeyde boyutlandırmaya izin verir. none: boyutlandırma seçeneğini kaldırır inherit: kalıtsal olarak bu değeri üst elementten alır.

{% highlight css %} div{ overflow:auto; /* bu tanim gerekli */ resize:both; } {% endhighlight %}

overflow değeri scroll, auto veya hidden değerlerinde etki ederken overflow: visible tanımında ise etki yapmaz.

Bu özellik Chrome ve Safaride textarea alanları için otomatik gelmektedir. Tarayıcı bu eleman için bu değeri otomatik uygulamaktadır. Daha önce ipucu olarak yazdığım gibi bu otomatik tanımı css ile kaldırabiliyoruz.

Bir örnek yapalım

{% highlight css %} .icerik{ box-shadow: rgb(136, 136, 136) 5px 5px 5px; border-radius: 5px; resize: both; overflow: auto; border: 1px solid #dedede; padding:10px; width: 300px; height: 200px; } {% endhighlight %}

Sadece bir yöne boyutlandırabiliyoruz

{% highlight css %} .siir{ width: 170px; height: 200px; resize: vertical; overflow: hidden; position: relative; padding: 0 25px; border: 1px solid #DDD; font-family: georgia, serif; } {% endhighlight %}

min-height ve min-width değerleri ile boyutlandırmanın minimum değerlerini belirleyebiliyoruz. Anı şekilde max-height ve max-width değerleri ile de maksimum değerleri belirlenebilir. Bu özelliklerle kullanıcının sayfa görünümünü bozmasını engelleyebiliriz.

{% highlight css %} .siir{ width: 170px; height: 200px; resize: vertical; overflow: hidden; position: relative; padding: 0 25px; border: 1px solid #DDD; font-family: georgia, serif; max-height: 650px; min-height: 200px; } {% endhighlight %}

Resimler için güzel bir uygulama olabilir.

{% highlight css %} .vasak{ width: 200px; margin: 0 10px; height: 150px; resize: both; overflow: hidden; position: relative; padding: 15px; border: 1px solid #DDD; }

.vasak img{ width:100%; height:auto; } {% endhighlight %}

Tarayıcı Desteği

Chrome explorer Firefox
5.0+ desteklemiyor 4.0+
{: .tarayici-uyumi}

Mobil Tarayıcılar

Android Mobil Safari Chrome
desteklemiyor desteklemiyor desteklemiyor
{: .tarayici-uyumi}

resize özelliği W3C Basic User Interface Module ile önerilen bir özelliğidir. Tarayıcıların destekleme durumuna göre ileride standartlaşıp standartlaşmayacağı belirlenecek bir özellik olarak görünse de Firefox desteği standartlaşması daha olasıdır.

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