CSS3 mülkiyeti yeniden boyutlandırma

Ve henüz nihai - - CSS3, yeni getirdiği olan pek çok yenilik arasında Cascading Style Sheets açıklaması, bir özellik özellikle ilginç yeniden boyutlandırmak olduğunu. Bu özellik sayesinde, görmek kolaydır, oluşturabileceğiniz, CSS, bir kod satırı (CSS3 oluşturma unsurları gelişine kadar kullanarak web sayfaları içinde çok basit, yeniden boyutlandırılabilir elemanları ölçeklenebilir kullanımı gerekli karmaşık JavaScript işlevleri).

Şu an için bu özellik, hem de CSS3 diğer birçok evrensel tüm tarayıcılar tarafından desteklenen ancak aile WebKit (Safari ve Chrome) ve Firefox 4 olanlar değildir.

Bu etiket <textarea> bu tarayıcılar sayfa öğeleri bazı, yükseklik ve genişlik hem de varsayılan olarak yeniden boyutlandırılabilir olduğunu kaydetti olun.

Yönetme yeniden boyutlandırma

: Özellik farklı değer alabilecek yeniden boyutlandırma

• yok = elemanı yeniden boyutlandırılabilir değildir;
• Yatay = eleman yatay sadece yeniden boyutlandırılabilir;
• = Düşey eleman yalnızca dikey olarak yeniden boyutlandırılabilir;
• = eleman hem de hem dikey hem de yatay olarak yeniden boyutlandırılabilir;

İşte birkaç örnek şunlardır:

 / *







 Textarea yeniden boyutlandırma önler







 * /







 textarea {resize: none;}









 / *







 Ben dikey olarak yeniden boyutlandırılabilir öğesi oluşturmak







 * /







 div.vert {resize: dikey;}

Bağlı olan boy yönetin

Mülkiyet yeniden boyutlandırma kullanımı çok sık eşlik eder - tasarım nedenlerle - minimum ve / veya maksimum belirlemek kısıtlamalar bu eleman resizable varsayabiliriz. Bunu yapmak için şu CSS özellikleri kullanılır:

• max-width ve max-height
• min-width ve min-height

Diyelim sabit maksimum genişlikte yatay bir yeniden boyutlandırılabilir div örneği bakın:

 {Div.horiz



  



 height: 200px;



  



 width: 300px;



  



 max-width: 600px;



  



 background: # eeeeee;



  



 border: # dddddd katı 3px;



  



 overflow: auto;



  



 resize: yatay;







 }

Üzerinde bu sayfada (tabii, mülkiyet bunu destekleyen bir tarayıcı kullanmanız gerekir çalışmaları yeniden boyutlandırmak görmek için) çalışan bir demo görebilirsiniz.