استایل outline در CSS
در دنیای طراحی وب، outline یکی از ویژگی‌های مهم CSS است که اغلب با border اشتباه گرفته می‌شود. این ویژگی برای ایجاد خطی در اطراف عناصر استفاده می‌شود، اما برخلاف border، روی چیدمان صفحه تأثیر نمی‌گذارد و فضایی اشغال نمی‌کند.
تفاوت outline و border
| ویژگی |
outline |
border |
| تأثیر بر چیدمان |
ندارد |
دارد |
| حاشیه |
ندارد |
دارد |
| گردی گوشه‌ها |
پشتیبانی نمی‌کند |
پشتیبانی می‌کند |
نکته: outline برای دسترسی‌پذیری بسیار مهم است، زیرا به کاربران کیبورد کمک می‌کند عناصر فوکوس شده را تشخیص دهند.
ویژگی‌های outline
استایل outline دارای سه ویژگی اصلی است:
- outline-width: تعیین ضخامت خط (مقادیر مانند thin, medium, thick یا پیکسل)
- outline-style: تعیین نوع خط (solid, dotted, dashed, double)
- outline-color: تعیین رنگ خط (مقادیر رنگی HEX, RGB, نام رنگ‌ها)
همچنین می‌توان از shorthand property استفاده کرد:
outline: 2px solid #e74c3c;
کاربردهای عملی
- افزایش دسترسی‌پذیری برای کاربران کیبورد
- برجسته‌سازی عناصر در حالت hover
- اشکال‌زدایی چیدمان بدون تأثیر بر جریان صفحه
برای یادگیری عمیق‌تر درباره outline در CSS، می‌توانید اینجا را ببینید و با مثال‌های عملی آشنا شوید.
توجه: حذف outline از عناصر فوکوس شده می‌تواند مشکلات دسترسی‌پذیری ایجاد کند. همیشه از روش‌های جایگزین برای طراحی استفاده کنید.
