در این فصل در مورد رابط کاربری خواص CSS یاد خواهید گرفت:

• resize
• outline-offset

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

اعداد در جدول اولین نسخه مرورگر را مشخص می کند که به طور کامل از این ویژگی پشتیبانی می کند.
اعداد که به دنبال آن -webkit- یا -moz- اولین نسخه که با یک پیشوند کار کرد را مشخص کنید.

ویژگی

resize

4.0

Not supported

5.0
4.0 -moz-

4.0

15.0

outline-offset

4.0

Not supported

5.0
4.0 -moz-

4.0

9.5

تغییر اندازه CSS

ویژگی  resize مشخص می کند که آیا (و چگونه) یک عنصر باید توسط کاربر تغییر اندازه داده شود.

مثال زیر اجازه می دهد که کاربر فقط عرض یک عنصر <div> تغییر اندازه دهد:

.div {
    resize: horizontal;
    overflow: auto;
}

مثال زیر اجازه می دهد که کاربر فقط ارتفاع یک عنصر <div> تغییر اندازه دهد:

.div {
    resize: vertical;
    overflow: auto;
}

مثال زیر اجازه می دهد تا کاربر تغییر ارتفاع و عرض یک عنصر <div> را انجام دهد:

.div {
    resize: both;
    overflow: auto;
}

در بسیاری از مرورگرها، <textarea> به طور پیش فرض قابل اندازه بندی است. در اینجا ما از ویژگی resize برای غیرفعال قابلیت resizability استفاده کردیم:

textarea {
    resize: none;
}

Outline Offset  در CSS

ویژگی outline-offset فضای بین یک طرح و لبه یا مرز یک عنصر را اضافه می کند.
خطوط مختلف از مرزها به سه شکل متفاوت است:

• یک طرح کلی یک خط کشیده در اطراف عناصر، خارج از لبه مرزی است
• یک طرح کلی فضای لازم را ندارد
• یک طرح کلی ممکن است غیر مستطیلی باشد

مثال زیر از ویژگی outline-offset برای اضافه کردن فاصله بین مرز و طرح اصلی استفاده می کند:

div.ex1 {
    margin: 20px;
    border: 1px solid black;
    outline: 4px solid red;
    outline-offset: 15px;
}

div.ex2 {
    margin: 10px;
    border: 1px solid black;
    outline: 5px dashed blue;
    outline-offset: 5px;
}