4 قابلیت css که ممکنه از اونا بیخبر باشید

سلام به تمام جامعه فرانت اند کاران ایران

تو این مقاله کوتاه میخوام 4 تا از نکات css که شاید از اونا اطلاعی نداشته باشین رو خدمتتون ارائه بدم.

1.پشتیبانی مرورگر ها از کدها (supports@)

گاهی تو css از کدهایی استفاده میکنیم که ممکنه تو بعضی مرورگرها و... پشتیبانی نشن و در نتیجه استایل صفحه مون بهم میریزه.

اما راه حل چیست؟ استفاده از قوانین @supports

در واقع ما میاییم با supports تعریف میکنیم که اگه مرورگر از این استایل خاص پشتیبانی میکنه، اینهارو روش اعمال کن در غیر این صورت کار دیگه ای بکن ( تصویر شماره 1 ↓ )

2. سایه (shadow) برای عکس های بدون بدون بکگراند

بعضی وقتها از تصاویری توی وبسایت استفاده میکنیم که بدون بکگراند هستند اما مشکل اصلی اینجاست که وقتی بخوایم به این عکس ها با استفاده از box-shadow بهشون shadow بدیم حالت مربعی میگیره و اصلا چیز درستی در نمیاد. اما هیچ نگرانی وجود نداره ! چون تو css یه راه حلی براش وجود داره و اونم استفاده از فیلتر drop-shadow هست. ( تصویر شماره 2 ↓ )

3. مقدار alpha در hex

معمولا برای تعیین میزان وضوح یک المان در صفحه مون، از opacity یا از rgba استفاده میکنیم. اما یه راه بهتری وجود داره ! اونم تعیین میزان شفافیت تو همون کد hex رنگ اون المان هست. اما این کار چجوری صورت میگیره؟ کافیه دو رقم به کد hex رنگ اون المان اضافه کنیم که میزان شفافیت هست (باید بین 0 تا 99 باشه، که 99 بیشترین و 0 کمترین مقدار شفافیت هست) مثال :

ما این رنگ رو داریم : (#0d6efd) حالا وضوحش رو نصف میکنیم : (#0d6efd50). به همین راحتی

( تصویر شماره 3 ↓ )

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

نیاز نیست که برای انتخاب فرزندان یک المان هربار اسم اون المان رو بنویسیم و اسم فرزندش رو هم جلوش. کافیه فقط از where استفاده کنیم و این کار رو خیلی کوتاه تر کنیم. ( تصویر شماره 4 ↓ )

امیدوارم این پست براتون مفید بوده باشه ❤