در این فصل، با ویژگی‌های زیر که برای تنظیم رابط کاربری در CSS استفاده می‌شوند، آشنا می‌شوید:
resize: مشخص می‌کند که یک عنصر چگونه باید قابل تغییر اندازه توسط کاربر باشد.outline-offset: فاصله بین خط دور (outline) و لبه یا حاشیه عنصر را تنظیم می‌کند.
پشتیبانی مرورگرها
جدول زیر نسخه‌هایی از مرورگرها را نشان می‌دهد که اولین بار از این ویژگی‌ها پشتیبانی کرده‌اند:
| ویژگی | Chrome | Firefox | Safari | Edge | Opera |
|---|---|---|---|---|---|
resize |
4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
outline-offset |
4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
ویژگی resize
ویژگی resize مشخص می‌کند که آیا یک عنصر باید توسط کاربر قابل تغییر اندازه باشد یا خیر و در صورت قابل تغییر بودن، به چه صورت.
مثال: تنظیم اندازه عرض (افقی)
کد زیر به کاربر اجازه می‌دهد که تنها عرض یک عنصر <div> را تغییر دهد:
div {
resize: horizontal;
overflow: auto;
}مثال: تنظیم اندازه ارتفاع (عمودی)
کد زیر به کاربر اجازه می‌دهد که تنها ارتفاع یک عنصر <div> را تغییر دهد:
div {
resize: vertical;
overflow: auto;
}مثال: تنظیم هر دو اندازه (ارتفاع و عرض)
کد زیر به کاربر اجازه می‌دهد که هم عرض و هم ارتفاع یک عنصر <div> را تغییر دهد:
div {
resize: both;
overflow: auto;
}غیر فعال کردن قابلیت تغییر اندازه
عناصر <textarea> به طور پیش‌فرض در بیشتر مرورگرها قابل تغییر اندازه هستند. برای غیرفعال کردن این ویژگی، از کد زیر استفاده می‌شود:
textarea {
resize: none;
}ویژگی outline-offset
ویژگی outline-offset فاصله بین خط دور (outline) و لبه یا حاشیه یک عنصر را تنظیم می‌کند.
- توجه: خط دور (outline) با حاشیه (border) متفاوت است! در حالی که حاشیه داخل ابعاد عنصر تعریف می‌شود، خط دور در خارج از حاشیه کشیده می‌شود و ممکن است با محتوای دیگر تداخل داشته باشد.
- خط دور جزئی از ابعاد عنصر محسوب نمی‌شود؛ به این معنی که عرض و ارتفاع کلی عنصر تحت تأثیر عرض خط دور قرار نمی‌گیرد.
مثال: تنظیم فاصله خط دور
کد زیر فاصله ۱۵ پیکسل بین خط دور و حاشیه عنصر را اضافه می‌کند:
div.ex1 {
margin: 20px;
border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}مثال: تنظیم با استایل متفاوت
در این مثال از خط دور (outline) با استایل نقطه‌چین (dashed) استفاده شده است:
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
}نکات تکمیلی:
outline-offsetدر ایجاد طراحی‌های پیچیده‌تر برای رابط کاربری مفید است، جایی که می‌خواهید فضای بیشتری بین حاشیه عنصر و خط دور ایجاد کنید تا تمایز بصری بیشتری داشته باشید.- استفاده از
resizeدر عناصر مختلف می‌تواند تجربه کاربری بهتری برای تنظیم و نمایش محتوا در صفحه فراهم کند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام