زیباسازی تصاویری که لود نمی شوند

چند ماه قبل در این سایت مطلبی برای نحوه استایل دهی به متن alt تصاویر در صفحات وب نوشته شد. در اینجا با استفاده از دو نکته ای که در ادامه می خوانید پارا فراتر گذاشته و بلاک تصویری که در زمان بارگذاری با مشکل مواجه می شود را زیباسازی می کنیم.

 

دو حقیقت در مورد عنصر <img>

1. اولین نکته که در مطلب قبلی گفته شد این است که می توانیم برای <img> استایل های مربوط به متن را نیز اختصاص دهیم.
2. عنصر تصویر در صفحات وب از نوع عناصر “جایگزین شده” می باشد. به این معنا که اندازه عنصر و ظاهر آن توسط یک منبع خارجی تعیین می شود. عناصر دیگری مثل عناصر مربوط به فرم ها هم از این قبیل هستند. این نوع عناصر دارای شبه عناصری مثل after:: و before:: نمی باشند. اما نکته جالب اینکه زمانی که تصویر با مشکل مواجه می شود و در صفحه بارگذاری نمی شود این شبه عناصر (pseudo-elements) برای <img> ظاهر می شوند.

 

نحوه انجام کار و چند مثال

به عنوان نمونه HTML زیر را در نظر بگیرید:

 

<img src="http://mojtabaseyedi.com/images/avatar.png" alt="همیشه خوبه آدم لبخند بزنه :p"> 

 

فراهم کردن اطلاعات مفید

علاوه بر یک متن اختیاری و مناسب در مورد تصویر می توانیم با استفاده از ()attr محتوای src تگ تصویر را به کاربر در زمانی که تصویر با مشکل مواجه می شود, نمایش دهیم:

 

 

img {  
  font-family: 'tahoma';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
}

img:before {  
  content: "): شرمنده دیگه, نشد عکس رو ببینید";
  display: block;
  margin-bottom: 10px;
}

img:after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

 

جایگزینی بهتر برای متن جایگزین

منظور از متن جایگزین همان محتوای ویژگی alt عنصر تصویر می باشد که می توانیم با استفاده از این ترفند ظاهری بهتر برای محتوای آن بوجود آوریم:

 

 

img {  
  font-family: 'tahoma';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:after {  
  content: "\f1c5" " " attr(alt);

  font-size: 16px;
  font-family: FontAwesome, tahoma;
  color: rgb(100, 100, 100);

  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

 

 

طرحی دیگر

 

 

img {  
  font-family: 'tahoma';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
  min-height: 50px;
}

img:before {  
  content: " ";
  display: block;

  position: absolute;
  top: -10px;
  left: 0;
  height: calc(100% + 10px);
  width: 100%;
  background-color: rgb(230, 230, 230);
  border: 2px dotted rgb(200, 200, 200);
  border-radius: 5px;
}

img:after {  
  content: "\f127" " این تصویر می گه: " attr(alt) " می بینید؟ پس چیز خیلی خاصی هم نبود :)";
  display: block;
  font-size: 16px;
  font-style: normal;
  font-family: FontAwesome, tahoma;
  color: rgb(100, 100, 100);

  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  text-align: center;
}

 

 

حرف آخر و پشتیبانی مرورگرها

همانطور که گفته شد زمانی که تصویر به درستی قابل نمایش برای کاربر باشد شبه عناصر تولید نمی شوند پس نیازی نیست که نگران استایلی که با آنها می دهیم باشیم.

نکته قابل توجه اینکه متاسفانه اینطور نیست که اگر مرورگری شبه عناصر را پشتیبانی می کند پس این ترفند در آن مرورگر قابل اجرا است. در جدول زیر نتیجه تست بر روی مرورگرهای ذکر شده بیان شده است:

 

Browser	Alt Text	:before	:after
Chrome (Desktop and Android)	✓	✓	✓
Firefox (Desktop and Android)	✓	✓	✓
Opera (Desktop)	✓	✓	✓
Opera Mini	✓ **	✗	✗
Safari (Desktop and iOS)	✓ *	✗	✗
iOS Webview (Chrome, Firefox, others)	✓ *	✗	✗

 

* متن alt فقط زمانی نمایش داده می شود که تصویر دارای یک عرض مناسب برای آن باشد. اگر width را برای عنصر تصویر تعیین نکنیم شاید اصلا متن alt نمایش داده نشود.

** استایل های مربوط به متن و فونت اعمال نمی شود.

بررسی دقیق تر پشتیبانی شبه عناصر و ()attr در مرورگرها:

 

منبع

• Styling Broken Images نوشته شده توسط Ire Aderinokun

 
در نهایت دموی زیر کاملا این موضوع را نمایان می کند که تا چه حد در انجام این کار آزادی عمل داریم:

 

See the Pen Styling broken images by Mojtaba Seyedi (@seyedi) on CodePen.