صفحه نخست / دسته‌بندی نشده / آموزش ویژگی resize در CSS

آموزش ویژگی resize در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی resize در CSS با من همراه باشید.

ویژگی resize در CSS

با استفاده از ویژگی resize در CSS میتوان مشخص کرد که یک عنصر به چه صورت قابل تغییر اندازه باشد، مثلا بصورت افقی یا نه مثلا بصورت عمودی یا حتی هردو.

مقدار ویژگی overflow بصورت پیش فرض visible می باشد، این یعنی یک عنصر در حالت عادی و پیش فرض overflow اش visible می باشد، پس حتما و لازمه برای استفاده از ویژگی resize مقداری به غیر از visible در ویژگی overflow استفاده شود.

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی resize را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : قابل تغییر اندازه هم بصورت افقی و هم عمودی

div{
overflow:auto;
resize: both;
}

مثال شماره ۲ : قابل تغییر اندازه فقط بصورت عمودی

div{

overflow:auto;

resize: vertical;

}

جدول مشخصات ویژگی resize در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض	none
قابل ارث بری	ندارد \| اطلاعات بیشتر
قابل متحرک سازی	ندارد \| اطلاعات بیشتر
نسخه	CSS3
نحوه استفاده در جاوااسکریپت	object.style.resize=”both”;

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی resize در CSS پشتیبانی میکنند یا خیر.

نام ویژگی	Chrome	Firefox	Opera	Safari	IE
resize	۴٫۰	۵٫۰	۱۵٫۰	۴٫۰	خیر

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

جدول مقادیر ویژگی resize در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار	توضیح
none	پیش فرض – از تغییر اندازه دادن / کردن عنصر جلوگیری میکند
both	تغییر اندازه هم بصورت افقی و هم عمودی انجام میشود
horizontal	تغییر اندازه فقط بصورت افقی انجام میشود
vertical	تغییر اندازه فقط بصورت عمودی انجام میشود
initial	استفاده از مقدار پیش فرض یا اولیه \| اطلاعات بیشتر
inherit	استفاده از مقدار پدر یا والد ( به ارث بری ) \| اطلاعات بیشتر

نکات و توضیحات

وقتی جهت نوشتاری ( یعنی راست چین یا چپ چین بودن ) در یک صفحه وب بصورت RTL باشد اون علامتدر گوشه پایین سمت چپ عنصر قرار میگیرد ولی اگه LTR باشد در گوشه پایین سمت راست عنصر قرار میگیرد.

تگ textarea بصورت پیش فرض از این ویژگی با مقدار both استفاده میکند، لذا اگه میخواید اجازه ندهید این تگ توسط کاربران تغییر اندازه داده شود میتوانید از مقدار none استفاده نمایید. مثال :

<style>

textarea.f1{
resize: none;
}

</style>