Bu yazımızda Css’te Resize özelliği nedir?, Nasıl kullanabiliriz? onu öğreneceğiz. Resize özelliği ile bir Html etiketinin yeniden boyutlandırılabilmesini sağlayabiliriz.
Bazı tarayıcılarda textarea etiketi, varsayılan olarak yeniden boyutlandırılabilir halde gelir. Resize özelliği ile etkin hale getirebildiğimiz gibi, etkin olarak gelenleri de devre dışı bırakabiliriz. Dört farklı değer alabilir. Bunlar;
► none : Yeniden boyutlandırılabilir özelliğini devre dışı bırakmak için kullanılır.
► both : Yatayda ve dikeyde yeniden boyutlandırılabilir yapmak için kullanılır.
► horizontal : Yatayda yeniden boyutlandırılabilir yapmak için kullanılır.
► vertical : Dikeyde yeniden boyutlandırılabilir yapmak için kullanılır.
¡ resize özelliğini, overflow:auto; özelliği ile birlikte kullanıyoruz.
Örneğin bir div etiketi oluşturalım. Resize özelliği ile yatayda ve dikeyde yeniden boyutlandırılabilmesini sağlayalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> div { width: 300px; height: 120px; border: 1px solid black; padding: 20px; resize : both; overflow:auto; } </style> <div> Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor. </div> |
CSS RESİZE ÖZELLİĞİ TARAYICI DESTEĞİ
| Özellik | Chrome | IE | Firefox | Safari | Opera |
| resize | 4.0 | 15.0 |
5.0 4.0 -moz- |
4.0 | 15.0 |
Bu resimde tarayıcıların resize özelliğini hangi versiyon ile birlikte sorunsuz desteklemeye başladığını görebilirsiniz.
Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
