bundles
  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

ترفندهای حرفه ای CSS ProTips (جلسه 5) : SVG برای آیکون و انتخابگر Lobotomized Owl

0 402 ۱۱ آذر ۹۵

در این مطلب با ادامه ترفندهای حرفه ای CSS ProTips در خدمتتون هستیم.css protips

استفاده از SVG برای آیکونها

همونطور که میدونین ما زیاد از آیکونها درون سایتمون استفاده میکنیم. اخیرا استفاده از SVG خیلی زیاد و محبوب شده و پشتیبانی مرورگرها هم از اون خیلی خیلی خوب شده. همونطور که میدونید تصاویر و آیکونهای SVG کیفیت خیلی بالایی دارند و Resolution Independent هستند و به معنای اینه که در هر سایزی و در هر دستگاهی به خوبی نمایش داده میشن و مانند تصاویر Bitmap، پیکسل پیکسلی نمیشن. تصاویر SVG برداری یا Vector هستند. پس با این تفاسیر هیچ دلیلی وجود نداره که از SVG برای آیکونها استفاده نکنیم. کد زیر رو در نظر بگیرید:

میبینید که به راحتی این آیکون svg بنام logo.svg رو برای پس زمینه المنت با کلاس logo قرار دادیم. اگر بخوام مثالی از Resolution Independent بودن SVG بزنم، بصورت زیر خواهد بود. سایز کوچک یک فایل SVG رو در نظر بگیرید:resolution

حالا اگر این مورد رو بزرگنمایی کنیم، بازم کیفیتشو از دست نمیده:resolution 2

پس بهتره تا جایی که ممکنه برای آیکونها و تصاویر ساده از SVG استفاده کنیم و دیگه از فایلهای PNG و jpg و gif و ... استفاده نکنیم. زمانی که شما فقط برای دکمه ها یا المنتهای دیگه از آیکون استفاده میکنید و متنی رو در کنار آیکون قرار نمیدید دو نکته رو باید رعایت کنید. اول اینکه افراد نابینایی هم هستن که ممکنه از سایت شما استفاده کنن، پس باید به نحوی اون رو برای Screen Reader ها آماده سازی کنید. همچنین امکان داره به هر دلیلی از جمله اینکه مرورگر SVG رو پشتیبانی نکنه، آیکون مورد نظر لود نشه. در این مواقع باید با استفاده از CSS و ویژگی content، متنی رو برای کلاس کاذب after قرار بدیم. کد زیر رو در نظر بگیرید:

همونطور که میبینید با استفاده از ابزارهایی مثل modernizr میفهمیم که svg پشتیبانی نمیشه و کلاس no-svg رو به html اضافه میکنیم. وقتی هم که این کلاس اضافه بشه، مقدار متنی که درون ویژگی aria-label قرار داره رو بجای اون آیکون نمایش میدیم تا هم ظاهر خوبی داشته باشه و هم Screen Reader ها بتونن با اون کار کنن.

استفاده از انتخابگر Lobotomized Owl

شاید اسم این انتخابگر یا Selector مقداری عجیب بنظر برسه اما استفاده همزمان از انتخابگر همگانی (*) و انتخابگر هم ردیف مجاور (+) میتونه خیلی قوی باشه و قابلیت ویژه ای رو به ما میده. کد زیر رو در نظر بگیرید:

میبینید که دو تا * رو با استفاده از + از هم جدا کردیم. اگر خوب این موارد رو بشناسید باید نتیجه رو حدس زده باشید. با اینکار هر المنتی که درون سند HTML بعد از المنت دیگه ای قرار گرفته، ویژگی margin-top برابر با 1.5em رو دریافت میکنه و از المنت بالایی خودش فاصله میگیره. از این مورد میتونین در اکثر جاها استفاده کنید و کار خودتون رو ساده کنید و دیگه لازم نباشه که جاهای مختلف فاصله از بالا رو مشخص کنید. در اینجا میتونین بیشتر در مورد انتخابگر Lobotomized Owl مطالعه کنید. همچنین در اینجا هم میتونین دمویی از این حالت رو مشاهده کنید.

در جلسات بعدی با ادامه ترفندها در خدمتتون هستیم.

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

موفق و پیروز باشید.

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram