ترفندهای حرفه ای و پیشرفته Front End (جلسه 9) : استایل دهی به تصاویر مشکل دار یا broken images - قسمت 1

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۳۰ مهر ۱۳۹۵

در این جلسه با یه ترفند حرفه ای و پیشرفته دیگه در خدمتتون هستیم و امیدواریم که بتونید از اون استفاده کنید.broken-images

همونطور که میدونید و حتما با اون برخورد کردید، وقتی مشکلی برای تصاویر بوجود میاد، اون تصاویر بر روی مرورگر نمایش داده نمیشن و چنین چیزی جای عکسا نمایش داده میشه:style broken images

میبینید که ظاهر خیلی زشت و نامناسبی داره و متنی که نمایش داده میشه همون متنی هست که درون ویژگی alt تصویر قرار میدیم. این ظاهر در مرورگرهای مختف هم فرق داره و هر کدوم ساز خودشو میزنه. اما شما با استفاده از ترفندی که امروز در اختیارتون قرار میگیره میتونین به تگ img خودتون استایلهای CSS رو نسبت بدین که تصاویری که به مشکل بر میخورن بهتر نمایش داده بشن.

دو مورد درباره المنت img:

برای فهم بیشتر اینکه ما چطور به broken images استایل دهی میکنیم، دو تا نکته رو باید بدونید و باهاش آشنایی داشته باشید.

  1. ما میتونیم استایلهای مورد نظرمون رو برای تایپوگرافی به img مورد نظر اعمال کنیم: این استایلها به متن alt یا alternative text اعمال میشن و تاثیری بر روی خود تصویر ندارن.
  2. المنت img یک replaced element هست: به المنتهایی که ظاهر و ابعاد اونا با استفاده از منابع بیرونی یا خارجی مشخص میشه، replaced element گفته میشه. بدلیل اینکه المنت مورد نظر با توجه به یک منبع خارجی کنترل میشه، بنابراین نمیشه از کلاسهای کاذب after و before برای اون استفاده کرد. ولی زمانی که تصاویر با مشکلی برخورد کنن و لود نشن، کلاسهای کاذب برای المنت img نمایش داده میشن.

به لطف این دو نکته، ما میتونیم استایلهایی رو به تگ img اعمال کنیم که فقط زمانی که با مشکل برخورد کرد و لود نشد بر روی اون اعمال بشه و بر روی خود تصویر، زمانی که لود شده، تاثیری نداشته باشه.

حالا بیاید با هم وارد مرحله کدنویسی و پیاده سازی این ترفند بشیم. کد زیر رو در نظر بگیرید:

<img src="http://bitsofco.de/broken.jpg" alt="Kanye Laughing">

همونطور که میبینید یک تگ img قرار دادیم و یک آدرس تصویر رو قرار دادیم که اصلا وجود نداره و 404 میده. برای ویژگی alt هم یک متن kanye Laughing قرار دادیم. تا اینجای کار ظاهر تصویر در مرورگر بصورت زیر هست:style broken images 2

میبینید که بازم همون ظاهر بد به همراه متن alt نمایش داده شده.

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

یک راه که ما میتونیم با استفاده از اون broken image‌ها رو پشتیبانی کنیم اینه که به کاربران بگیم که برای تصویر مورد نظر مشکلی بوجود اومده و اطلاعاتی در اختیارش بزاریم. همچنین با استفاده از عبارت attr() نیز میتونین آدرس تصویر مشکل دار رو به کاربران نمایش بدین. برای اینکار از کد CSS زیر استفاده میکنیم:

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

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

img:before {  
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

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

همونطور که دیدید در ابتدا تعدادی ویژگی استفاده کردیم که تایپوگرافی تصویر مورد نظر رو تغییر بدیم و بعد از اون با استفاده از کلاسهای کاذب after و before متنهایی رو به بعد و قبل اون اضافه کردیم و برای هر کدوم استایلی رو در نظر گرفتیم. با استفاده از عبارت attr هم تونستیم به ویژگی src تصویر مورد نظر دسترسی پیدا کنیم و اون رو در زیر broken image نمایش بدیم. تا اینجای کار خروجی در مرورگر بصورت زیر خواهد بود:style broken images 3

میبینید که متون مورد نظر به قبل و بعد از اون اضافه شدن. در جلسه بعد با ادامه این موضوع در خدمتتون هستم و استایلهای زیباتری برای این مورد خدمتتون قرار میدم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !