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
 |
 |
 |
|---|---|---|
| 5.0+ | desteklemiyor | 4.0+ |
Mobil Tarayıcılar
 |
 |
|
|---|---|---|
| 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
- http://www.css3.info/preview/resize/
- http://www.impressivewebs.com/css3-resize/ (detaylı ve karşıt)
- http://www.w3schools.com/cssref/css3_pr_resize.asp
- http://www.w3.org/TR/css3-ui/
- http://www.cssplay.co.uk/menu/resize.html
- https://developer.mozilla.org/en-us/docs/Web/CSS/resize
- http://www.yousaytoo.com/the-css3-resize-property/784883
- http://robertnyman.com/css3/