ویژگی outline در CSS — مقدمه و کاربردها

ویژگی outline در CSS ابزاری ساده و قدرتمند برای نمایش یک خط پیرامون عناصر است که برخلاف border، بخشی از مدل جعبه (box model) نیست و فضای صفحه را تغییر نمی‌دهد. از outline معمولاً برای نشان دادن focus یا وضعیت برجسته بودن یک عنصر استفاده می‌شود، مخصوصاً برای دسترسی‌پذیری (accessibility) کاربران صفحه‌کلید.

ویژگی‌های کلیدی outline

• خارج از مرزهای عنصر رسم می‌شود و فضای صفحه را اشغال نمی‌کند.
• می‌توان آن را با سه مقدار رنگ، نوع خط و عرض تعیین کرد یا از شورت‌هند outline استفاده کرد.
• خاصیت outline-offset فاصلهٔ بین مرز عنصر و خط outline را کنترل می‌کند.
• برای حفظ دسترسی بهتر است هرگز به‌طور کامل outline را حذف نکنید مگر اینکه جایگزین قابل‌مشاهده‌ای برای تمرکز فراهم کنید.

فرمت شورت‌هند

قالب کلی شورت‌هند:

outline: [outline-color] || [outline-style] || [outline-width];

مثال: outline: 2px dashed #f00; — یک خط قرمز نقطه‌چین با پهنای 2px.

مقادیر و توضیحات

فرق outline و border

• Border بخشی از مدل جعبه است و اندازهٔ کل عنصر را تغییر می‌دهد؛ اما outline خارج از مرز رسم می‌شود و اندازه را تحت تأثیر قرار نمی‌دهد.
• Border می‌تواند به‌طور داخلی و دقیق با border-radius همگرا شود؛ outline در بیشتر مرورگرها نیز با شعاع گوشه‌ها هماهنگ است اما رفتار ممکن است بین پیاده‌سازی‌ها کمی متفاوت باشد.
• Outline می‌تواند بر عناصر همپوشان شود و معمولاً برای وضعیت‌های موقت مانند focus مناسب‌تر است.

مثال‌های عملی

/* شورت‌هند ساده */.button {
  outline: 2px solid #0077cc;
  outline-offset: 3px;
}

/* تنها هنگام فوکوس نشان داده شود */.button:focus {
  outline: 3px dashed #ff9800;
  outline-offset: 4px;
}

در این مثال، برای کلاس .button یک outline پیش‌فرض تعریف شده و در حالت فوکوس یک استایل متفاوت اعمال می‌شود. outline-offset باعث فاصله گرفتن خط از لبهٔ عنصر می‌شود که برای قابل دیدن‌تر شدن مفید است.

حذف outline و مسائل دسترسی

کد زیر را ممکن است دیده باشید:

a:focus, button:focus {
  outline: none;
}

این کار از دید دسترسی مشکل‌ساز است چون کاربران صفحه‌کلید قادر به تشخیص المان انتخاب‌شده نیستند. بهتر است به‌جای حذف کامل، جایگزینی قابل مشاهده ارائه شود:

/* جایگزین مناسب با استفاده از box-shadow */a:focus, button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,119,204,0.35);
  border-radius: 4px; /* در صورت نیاز */}

در این نمونه، outline حذف شده اما یک box-shadow واضح اضافه شده که برای همه کاربرها قابل مشاهده است.

استفادهٔ امن با :focus-visible

برای جلوگیری از نمایش استایل‌های فوکوس هنگام کلیک موس و در عین حال حفظ آن برای کاربران صفحه‌کلید، از :focus-visible استفاده کنید:

button:focus {
  outline: none; /* پیش‌فرض مرورگر را برداریم */}
button:focus-visible {
  outline: 3px solid #ff0;
  outline-offset: 2px;
}

این روش باعث می‌شود فقط زمانی که کاربر به‌صورت صفحه‌کلید در حال ناوبری است، حلقهٔ فوکوس نمایش داده شود (مرورگرهای مدرن از این شبه‌کلاس پشتیبانی می‌کنند).

نکات فنی و سازگاری

• پشتیبانی عمومی از outline و outline-offset در مرورگرهای مدرن خوب است، اما رفتار جزئی ممکن است متفاوت باشد.
• مقدار invert برای رنگ در برخی مرورگرها وجود دارد ولی توصیه نمی‌شود به‌دلیل پشتیبانی محدود.
• Outline معمولاً در بالای سایر عناصر رسم می‌شود و می‌تواند عناصر جانبی را پوشش دهد؛ در نتیجه برای طراحی دقیق باید تست شود.

سناریوهای کاربردی و بهترین شیوه‌ها

• برای دکمه‌ها و لینک‌ها همیشه یک حالت فوکوس واضح و قابل رؤیت فراهم کنید تا کاربران صفحه‌کلید بتوانند محل تمرکز را ببینند.
• به‌جای حذف outline به‌طور کامل، آن را با استایل واضح‌تری جایگزین کنید یا از :focus-visible بهره ببرید.
• برای عناصر با گوشه‌های گرد، در صورت نیاز از border-radius و box-shadow برای هماهنگی ظاهری استفاده کنید.
• در طراحی‌های پیچیده که نیاز به جلوه‌های بصری خاص است، ترکیب outline با outline-offset می‌تواند به ایجاد جلوهٔ «حلقهٔ جداشده» کمک کند.

جمع‌بندی

ویژگی outline ابزار ساده و مؤثری برای نشان دادن حالت‌های موقت مثل focus است. مهم‌ترین نکتهٔ عملی این است که هرگز بدون فراهم کردن جایگزین قابل‌مشاهده، outline را حذف نکنید. با ترکیب outline، outline-offset و انتخاب رنگ/عرض مناسب می‌توانید تجربهٔ دسترسی و ظاهر رابط کاربری را هم‌زمان بهبود دهید.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال