outline در CSS: راهنمای جامع
در طراحی وب، outline یکی از ویژگی‌های مهم CSS است که اغلب با border اشتباه گرفته می‌شود. این ویژگی برای ایجاد خطی در اطراف عناصر استفاده می‌شود، اما برخلاف border، روی چیدمان صفحه تأثیر نمی‌گذارد و فضایی اشغال نمی‌کند.
نکته کلیدی: outline حتی زمانی که عنصر در حالت focus باشد (مثل کلیک روی یک input) نیز نمایش داده می‌شود که این ویژگی آن را برای دسترسی‌پذیری بسیار مفید می‌سازد.
تفاوت outline و border
| ویژگی |
outline |
border |
| تأثیر بر چیدمان |
ندارد |
دارد |
| حاشیه (margin) |
ندارد |
دارد |
| گردی گوشه‌ها |
پشتیبانی نمی‌کند |
پشتیبانی می‌کند |
ویژگی‌های outline
outline در CSS دارای سه ویژگی اصلی است که می‌توانید آنها را به صورت جداگانه یا با استفاده از shorthand تعیین کنید:
- outline-width: تعیین ضخامت outline (مقادیر مانند 1px، 2px و...)
- outline-style: تعیین سبک outline (مقادیر مانند solid، dotted، dashed)
- outline-color: تعیین رنگ outline (مقادیر رنگ HEX، RGB یا نام رنگ)
مثال استفاده از shorthand:
button {
outline: 2px dashed #3498db;
}
کاربردهای عملی outline
از outline معمولاً در موارد زیر استفاده می‌شود:
- افزایش دسترسی‌پذیری برای کاربران کیبورد (نمایش focus روی عناصر)
- اشکال‌زدایی طرح‌بندی بدون تأثیر بر چیدمان
- تأکید موقت روی عناصر خاص در طول توسعه
برای یادگیری عمیق‌تر درباره outline در CSS می‌توانید outline در css که شامل مثال‌های عملی و کدهای قابل اجرا است.
توجه: در برخی مرورگرها، outline به صورت پیش‌فرض برای عناصر focus شده نمایش داده می‌شود. می‌توانید با outline: none; این رفتار را غیرفعال کنید، اما این کار برای دسترسی‌پذیری توصیه نمی‌شود.
