گروه مقاله : CSS3
تاريخ انتشار : 1394/03/06 - 12:18
كد :612
در CSS3 چند قابلیت جدید User Interface مانند تغییر اندازه عناصر توسط کاربر، تنظیم دقیق اندازه عنصر و کشیدن حاشیه با فاصله از لبه اصلی، اضافه شده است.
در این فصل شما با ویژگی های زیر آشنا خواهید شد:
پشتیبانی مرورگرها
| Property |
|
|
|
|
|
| resize |
Not supported |
4.0 |
5.0
4.0 -moz- |
4.0 |
15.0 |
| outline-offset |
Not supported |
4.0 |
5.0
4.0 -moz- |
4.0 |
9.5 |
مرورگرهای Firefox, Chrome, Safari از خاصیت resize پشتیبانی می کنند.
مرورگرهای Internet Explorer, Chrome, Safari, Opera خاصیت box-sizing را پشتیبانی می کنند. Firefox به پیشوند -moz- نیاز دارد.
خاصیت outline-offset در تمام مرورگرهای اصلی، بغیر از Internet Explorer پشتیبانی می شود.
خاصیت resize در CSS3
خاصیت resize مشخص می کند که اندازه عنصر توسط کاربر قابل تغییر باشد یا خیر.
این <div> توسط کاربر قابل تغییر است (در Firefox, Chrome, Safari)
در مثال زیر کاربر می تواند فقط عرض عنصر <div> را تغییر دهد:
div {
resize: horizontal;
overflow: auto;
}
کد کامل :
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
<div>Let the user resize the width of this div element.</div>
</body>
</html>
در مثال زیر کاربر می تواند فقط ارتفاع عنصر <div> را تغییر دهد:
div {
resize: vertical;
overflow: auto;
}
کد کامل :
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
<div>Let the user resize the height of this div element.</div>
</body>
</html>
در مثال زیر کاربر می تواند هم عرض و هم ارتفاع را تغییر دهد:
div {
resize: both;
overflow: auto;
}
خاصیت outline-offset در CSS3
Outline خطی دور عناصر است که بیرون از لبه اصلی (border) است.
خاصیت outline-offset خط outline را با فاصله از مرز لبه اصلی (border) چاپ می کند.
Outline و border دو تفاوت اصلی دارند:
- عرض outline جزو ابعاد عنصر محسوب نمی شود.
- outline می تواند اشکال غیر چهار ضلعی داشته باشد.
در این <div> خط outline با 15 پیکسل فاصله از border چاپ شده است.
در مثال زیر outline با 15 پیکسل فاصله از border مشخص شده است :
div {
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}