آموزش ویژگی resize در CSS
آموزش ویژگی resize در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی resize در CSS با من همراه باشید.
ویژگی resize در CSS
با استفاده از ویژگی resize
در CSS میتوان مشخص کرد که یک عنصر به چه صورت قابل تغییر اندازه باشد، مثلا بصورت افقی یا نه مثلا بصورت عمودی یا حتی هردو.
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی resize
را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : قابل تغییر اندازه هم بصورت افقی و هم عمودی
div{
overflow:auto;
resize: both;
}
مثال شماره ۲ : قابل تغییر اندازه فقط بصورت عمودی
جدول مشخصات ویژگی resize در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
مقدار پیش فرض | none |
---|---|
قابل ارث بری | ندارد | اطلاعات بیشتر |
قابل متحرک سازی | ندارد | اطلاعات بیشتر |
نسخه | CSS3 |
نحوه استفاده در جاوااسکریپت | object.style.resize=”both”; |
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی resize
در CSS پشتیبانی میکنند یا خیر.
نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
resize | ۴٫۰ | ۵٫۰ | ۱۵٫۰ | ۴٫۰ | خیر |
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
resize: none|both|horizontal|vertical|initial|inherit;
جدول مقادیر ویژگی resize در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
مقدار | توضیح |
---|---|
none | پیش فرض – از تغییر اندازه دادن / کردن عنصر جلوگیری میکند |
both | تغییر اندازه هم بصورت افقی و هم عمودی انجام میشود |
horizontal | تغییر اندازه فقط بصورت افقی انجام میشود |
vertical | تغییر اندازه فقط بصورت عمودی انجام میشود |
initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
نکات و توضیحات
وقتی جهت نوشتاری ( یعنی راست چین یا چپ چین بودن ) در یک صفحه وب بصورت RTL باشد اون علامتدر گوشه پایین سمت چپ عنصر قرار میگیرد ولی اگه LTR باشد در گوشه پایین سمت راست عنصر قرار میگیرد.
تگ textarea بصورت پیش فرض از این ویژگی با مقدار both استفاده میکند، لذا اگه میخواید اجازه ندهید این تگ توسط کاربران تغییر اندازه داده شود میتوانید از مقدار none استفاده نمایید. مثال :
<style>
textarea.f1{
resize: none;
}
</style>