CSS3 resize özelliği

10 Ağustos 2011

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

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.

div{
	overflow:auto; /* bu tanim gerekli */
	resize:both;
}

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

.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;
}

Sadece bir yöne boyutlandırabiliyoruz

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

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.

.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;
}

Resimler için güzel bir uygulama olabilir.

.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;
}

Tarayıcı Desteği

Chrome explorer Firefox
5.0+ desteklemiyor 4.0+

Mobil Tarayıcılar

Android Mobil Safari Chrome
desteklemiyor desteklemiyor desteklemiyor

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

Avatar Popout Efekti

Avatar Popout Efekti uygulaması Devamını oku

Kapsayıcı sorguları (container query)

29 January 2024 tarihinde yayınlandı.

Renk geçişli ve Hareketli kenar çizgileri

22 January 2024 tarihinde yayınlandı.