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

CSS ile büyük kardeşe söz geçirme

Başlığa bakınca sanki bir aile olayına dair bir yazı geçecek anlamı çıkarmayın. HTML'deki elemanların birbiriyle olan ilişkilerini anlatm...… Devamını oku

Javascript ile medya kontrolü

17 February 2017 tarihinde yayınlandı.

Yenilenen Google Çeviri hizmeti

31 January 2017 tarihinde yayınlandı.