تصاویر، زیبایی بیشتری به وبسایت شما اضافه می‌کنند. اما وقتی که بارگذاری تصاویر با شکست مواجه می‌شود چه اتفاقی می‌افتد؟ شما به این آیکون آزاردهنده مواجه می‌شوید:
هیچ کس این را بر روی وبسایت خود نمی‌خواهد. خوشبختانه، یک گزینه پشتیبانی وجود دارد که باعث می‌شود صفحه ما زیبایی خود را نگه دارد. بیایید شروع به استایل‌بندی تصاویر مشکل‌دار خود نماییم.
شروع کار
حال ما چگونه باید یک استایل سفارشی برای تصاویر مشکل دار خود بسازیم؟ قبل از این که به استایل‌بندی یک تصویر مشکل دار وارد شویم، در ابتدا باید چند نکته را درباره تگ <img> درک کنیم.
- استایل‌های تایپوگرافی معمولی: این استایل‌ها به متن متناوب (alternate text) اعمال می‌شوند. این متن، فقط وقتی نمایش داده می‌شود که تصویر مورد نظر مشکل دارد. اگر تصویر همانطور که انتظار می‌رفت با موفقیت بارگذاری شود، متن متناوب و استایل‌هایش به کلی نادیده گرفته می‌شوند. این به این معنی نیست که ما وقت خود را بر روی استایل‌بندی هدر دادیم؛ زیرا ما خود را برای بدترین موقعیت هم آماده کرده‌ایم.
- <img>****|**|**_ is a _\*replaced element!: یک عنصر جایگزین شده، هر عنصری است که ظاهر و ابعادش توسط یک منبع خارجی تعریف شده‌اند. مثال‌ها:
- تصاویر (تگ‌های <img>)
- پلاگین‌ها (تگ‌های <object>)
- عناصر فرم (تگ‌های <button>، <textarea>، <input> و <select>)
به همین این علت، وقتی که تصویر بارگذاری می‌شود، شبه عنصرها بارگذاری نمی‌شوند. گرچه، اگر یک تصویر مشکل دار وجود دارد، این شبه عناصر ظاهر خواهند شد.
مثال‌های عملی
با در نظر داشتن دو نکته بالا، حال ما می‌توانیم تصاویر مشکل دار را استایل‌بندی کنیم. در ابتدا، بیایید یک تصویر مشکل دار برای وبسایت خود بسازیم. فقط از روی عمد یک URL به تصویری که می‌دانید در واقع وجود ندارد، اضافه کنید. محض اطلاع، ما در ادامه از سی‌دی‌اِن Font Awesome هم استفاده خواهیم کرد تا چند آیکون از کتابخانه Font Awesome وارد کنیم. شما میتوانید آن را در این لینک پیدا کنید، تا نسخه نمایشی شما هم به مانند من باشد.
<img src="nonsoimage.jpg" alt="broken image">
حال ما تصویر مشکل دار خود را داریم.
تحویل دادن اطلاعات کاربردی
همیشه کار خوبی است که بگذاریم کاربر بداند که یک تصویر، مشکل دار است. همچنین ممکن است که لینک مربوط به تصویر را با استفاده از عبارت attr() نمایش دهیم.
img {
top: 20px;
display: block;
position: relative;
font-weight: 400;
text-align: center;
width: 400px;
height: 300px;
}
img:before { content: "Unable to load image";
font-size: 130%;
display: block;
}
img:after { content: "(url: " attr(src) ")";
font-size: 130%;
display: block;
}
با CSS اضافه شده، حال تصویر ما این ظاهر را خواهد داشت:
حال تصویر ما بهتر شد، اما هنوز عالی نیست.
مشخص کردن یک متن متناوب جدید
ما همچنین می‌توانیم از یک متن جدید استفاده کنیم، تا با متن متناوب پیشفرض جایگزین شود.
این مسئله می‌تواند با استفاده از شبه عناصر و موقعیت‌گذاری متن بر روی متن متناوب انجام شود، به گونه‌ای که متن متناوب جدید، متن متناوب پیشفرض را پوشش دهد.
img {
/_ هیچ تغییری اعمال نشده است _/
}
img:after { content: "\f1c5" " " attr(alt);
font-family: FontAwesome;
font-size: 120%;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding:40px;
display: block;
position: absolute;
z-index: 2;
background-color: #fff;
}
حال متن متناوب ما، متن پیشفرض را پوشش می‌دهد.
اضافه کردن کمی استایل اضافی ضرری ندارد
وقتی که به اضافه کردن استایل‌های اضافی می‌رسد، شبه عنصر بهترین دوست ماست. در اینجا ما می‌توانیم هر چند تعداد استایل که به نظرمان باعث می‌شوند تصویر مشکل دار ما ظاهر بهتری در نگاه کاربر داشته باشد را اضافه کنیم.
img { /_ مشابه مثال اول _/
}
img:before { content: " ";
display: block;
position: absolute;
top: -10px;
left: 0;
height: calc(100% + 10px);
width: 100%;
background-color: #fff;
}
img:after { content: "\f127" " Broken Image of " attr(src);
display: block;
font-size: 130%;
font-family: FontAwesome;
position: absolute;
left: 40px;
top:40px;
width: 50%;
text-align: center;
padding: 10px;
background-color: #bada55;
border:2px dotted #f06d06;
}
ما می‌توانیم رنگ را عوض کنیم، حاشیه اضافه کنیم یا حتی یک آیکون به محتویات اضافه کنیم.
بهتر است دقت کنید که اگر تصویر مشکل دار نیست، شبه عناصر تولید نخواهند شد و استایل‌های مشخص شده نادیده گرفته خواهند شد.
مشکلات سازگاری
مفهوم استایل‌بندی تصاویر مشکل دار جالب است، اما برخی مرورگرها استایل‌بندی متن متناوب را پشتیبانی نکرده، و حتی از شبه عناصر :before و :after هم پشتیبانی نمی‌کنند. در اینجا، لیستی از مرورگرهایی را می‌بینید که از مفهومات استفاده شده در این مقاله پشتیبانی می‌کنند.
- اگر متن مورد نظر طولانی‌تر از عرض تصویر باشد، Opera نمایش آن برش می‌دهد.
- اگر متن مورد نظر طولانی‌تر از عرض تصویر باشد، Safari آن را نمایش نمی‌دهد.
- فقط نسخه‌های اخیر Opera و Safari از شبه عناصر :before و :after پشتیبانی می‌کنند.
آخرین نسخه تمام مرورگرهای اصلی، از پیش این امکانات را در خود گنجانده‌اند.
نتیجه گیری
استایل‌بندی تصاویر مشکل دار بر روی یک وبسایت، همیشه یک امتیاز اضافی است که به تجربه کاربری (UX) احترام می‌گذارد. دقت کنید که مفهوم استایل‌بندی تصاویر مشکل دار، همچنین می‌تواند به ایمیل HTML هم اعمال شود. امیدوارم از این مقاله لذت برده باشید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید