سیاساس/outline
| حاشیه | outline | مدل جعبهای |
| سیاساس |
مقدمه
[ویرایش]ویژگی outline در CSS برای ایجاد خط دور (خط حاشیهای) در اطراف عناصر HTML استفاده میشود. برخلاف ویژگی border، خطوط outline در طراحی تأثیر بصری متفاوتی دارند و معمولاً برای مشخصکردن فوکوس عناصر (مثلاً هنگام استفاده از کیبورد) کاربرد دارند.
تفاوت outline و border
[ویرایش]| ویژگی | outline | border |
|---|---|---|
| فضای اشغالشده | خارج از ابعاد عنصر، بدون تغییر در باکس | داخل باکس و اندازه را تغییر میدهد |
| قابل اندازهگیری با box model | خیر | بله |
| پشتیبانی از گوشه گرد (border-radius) | خیر | بله |
| ترتیب نمایش (z-index) | همیشه روی سایر عناصر قرار میگیرد | قابل تنظیم |
| هدف اصلی | دسترسیپذیری (Accessibility) و فوکوس کیبورد | تزئین و طراحی ظاهری |
خاصیتهای مربوط به outline
[ویرایش]CSS چند ویژگی اختصاصی برای کنترل outline دارد:
۱. outline-style
[ویرایش]مشخص میکند خط دور چه شکلی باشد.
outline-style: solid | dotted | dashed | double | groove | ridge | inset | outset | none;
مثال:
outline-style: dashed;
۲. outline-color
[ویرایش]رنگ خط دور را مشخص میکند.
outline-color: red;
همچنین میتوان از مقدار invert برای هماهنگی با رنگ پسزمینه استفاده کرد.
۳. outline-width
[ویرایش]ضخامت خط دور را تعیین میکند.
outline-width: thin | medium | thick | 2px | 0.2em | ...
مثال:
outline-width: 3px;
۴. outline-offset
[ویرایش]فاصلهٔ خط دور از حاشیهٔ عنصر را مشخص میکند (بیرونتر یا دورتر از عنصر رسم میشود).
outline-offset: 4px;
استفاده ترکیبی با shorthand
[ویرایش]میتوان همه ویژگیها را بهصورت خلاصه نوشت:
outline: 2px dotted blue;
کاربردهای رایج
[ویرایش]- نمایش وضعیت فوکوس (مثلاً در
input،button،a) - کمک به دسترسیپذیری برای کاربرانی که فقط از کیبورد استفاده میکنند
- بررسی و دیباگ عناصر در توسعه (برای مشخص کردن ابعاد)
مثال
[ویرایش]button:focus {
outline: 2px solid #00f;
outline-offset: 4px;
}
حذف outline (با احتیاط!)
[ویرایش]در برخی طراحیها، طراحان میخواهند فوکوس به چشم نیاید، ولی این کار ممکن است دسترسیپذیری کاربران را مختل کند:
button:focus {
outline: none;
}
نکته مهم: اگر outline را حذف میکنید، باید جایگزینی بصری مناسب برای نشان دادن فوکوس ارائه دهید (مثلاً تغییر رنگ پسزمینه یا border).
تمرین
[ویرایش]یک فرم ساده ایجاد کنید که هنگام فوکوس روی فیلدها، outline رنگی متفاوت با border داشته باشد و ۵ پیکسل فاصله از عنصر (offset) داشته باشد.
نکات مهم
[ویرایش]- outline بدون تأثیر در layout و اندازه ظاهر میشود.
- outline در مرورگرها ظاهر متفاوتی دارد؛ بهتر است آن را بهصورت اختصاصی تعریف کنید.
- بهتر است در طراحی ریسپانسیو و قابل دسترس، outline را حذف نکنید مگر با جایگزین مناسب.
- برای شناسایی عناصر فعال و فوکوسدار، outline ابزار بسیار مناسبی است.
کاربرد این صفحه از آموزش css
[ویرایش]ویژگی outline ابزاری سبک، سریع و کاربردی برای ایجاد خطوط دور و مشخصکردن عناصر فعال است. با استفاده صحیح از این ویژگی میتوان هم طراحی زیباتر و هم تجربه کاربری بهتری ارائه کرد، بهویژه برای افرادی که از کیبورد یا تکنولوژیهای کمکی استفاده میکنند.