در مدل جعبه‌ای (box model) CSS، outline یک ویژگی مهم است که اغلب با border اشتباه گرفته می‌شود. برخلاف border، outline فضایی را اشغال نمی‌کند و روی طرح‌بندی صفحه تأثیر نمی‌گذارد. این ویژگی معمولاً برای نشان دادن فوکوس روی عناصر تعاملی مانند دکمه‌ها، لینک‌ها یا فیلدهای ورودی استفاده می‌شود.
تفاوت outline و border
مهم‌ترین تفاوت‌های این دو ویژگی عبارتند از:
- outline فضایی در مدل جعبه‌ای اشغال نمی‌کند
- outline می‌تواند خارج از border نمایش داده شود
- outline نمی‌تواند گردی گوشه‌ها (border-radius) داشته باشد
- outline روی تمام اضلاع عنصر یکسان است و نمی‌توان برای هر ضلع مقدار جداگانه تعریف کرد
کاربردهای عملی outline
از outline معمولاً در موارد زیر استفاده می‌شود:
- نمایش وضعیت فوکوس برای دسترسی‌پذیری (accessibility)
- اشکال‌زدایی طرح‌بندی‌ها با نمایش مرزهای عناصر
- تأکید بصری روی عناصر مهم بدون تأثیر بر طرح‌بندی
- ایجاد افکت‌های ویژه در حالت‌های مختلف عناصر
نمونه کدهای مرتبط
در ادامه چند مثال کاربردی از outline را مشاهده می‌کنید:
مثال ۱: outline پایه
button:focus {
outline: 2px solid blue;
}مثال ۲: حذف outline با احتیاط
button:focus {
outline: none;
/* همیشه جایگزین مناسبی برای outline ارائه دهید */
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5);
}مثال ۳: outline با offset
img:focus {
outline: 3px dashed red;
outline-offset: 5px;
}خلاصه درس
- هرگز بدون ارائه جایگزین مناسب، outline را کاملاً حذف نکنید زیرا برای کاربران کیبورد ضروری است
- از outline-offset برای ایجاد فاصله بین border و outline استفاده کنید
- رنگ outline می‌تواند با استفاده از مقدار `invert` به صورت خودکار با پس‌زمینه تطبیق داده شود
- outline در برخی مرورگرهای قدیمی ممکن است به درستی پشتیبانی نشود
- برای عناصر غیرتعاملی، استفاده از border معمولاً گزینه بهتری است
در نهایت، outline ابزار قدرتمندی در CSS است که وقتی به درستی استفاده شود، می‌تواند هم به زیبایی بصری و هم به دسترسی‌پذیری وبسایت کمک کند. مهم است که بین نیازهای طراحی و الزامات دسترسی‌پذیری تعادل برقرار کنید.
توسعه دهندگان
