خطاهای رایج در متغیرهای CSS + سورس کد پروژه ها

Everything About CSS Variables - Part 2

0 263

در هنگام کار با متغیرهای CSS ممکن است با همان مشکلاتی مواجه شویم که هنگام کار با خصوصیات CSS مواجه می شویم، منظور من از مشکلات خطرهایی است که هنگام کار با متغیرهای CSS در کمین ما هستند و ممکن است در دام آن ها بیفتیم. در این جلسه می خواهیم برخی از خطاهای رایج در متغیرهای CSS را بررسی کنیم.

مشکل اول: دستورات دوگانه

منظور من از دستورات دوگانه، دستورات CSS ای هستند که دو یا چند بار برای یک خصوصیت تعریف شده اند. به مثال زیر نگاه کنید:

در اینجا برای متغیر رنگ 3 مقدار مختلف تعریف شده است. این اتفاق برخی اوقات در CSS نیز رخ میدهد. مسئله این است که متغیرها نیز پیرو قوانین آبشاری CSS هستند بنابراین به نظر شما عناصر زیر چه رنگی میگیرند؟

پاراگراف اول (تگ p) آبی (blue) خواهد بود؛ طبق قوانین آبشاری CSS از آنجایی که هیچ مقدار color– مشخصی برای عنصر p تعریف نشده است، مقدار مورد نظر را از root: به ارث می برد:

اولین div نیز سبز (green) خواهد بود چرا که مستقیما مقدارش را تعیین کرده ایم:

آن div ای که آیدی alert دارد نیز قرمز (red) خواهد بود:

طبق قوانین آبشاری CSS آیدی (id) بالاترین اولویت را دارد و بنابراین متغیر تعریف شده در آن نیز فقط مختص به آن است و دیگر مقادیر را override میکند.

عنصر p داخل alert# نیز قرمز می شود. از آنجایی که برای این عنصر مقدار مستقیمی تعریف نشده است احتمالا فکر میکردید که رنگ این عنصر آبی شود (از root: ارث بری کند) اما اینطور نیست. طبق قوانین آبشاری CSS عناصر از پدر خود ارث بری دارند بنابراین p نیز از alert# ارث بری میکند.

دستورات دو گانه و حل آن ها
دستورات دو گانه و حل آن ها

مشکل دوم: وابستگی های چرخه‌ای

cyclic dependency یا وابستگی های چرخه‌ای (یعنی به شکل یک چرخ یا حلقه) به دو شکل عمده اتفاق می افتند:

1- زمانی که متغیر به خودش وابسته باشد؛ یعنی از ()var استفاده کنیم که به خودش اشاره می کند:

2- زمانی که یک یا دو متغیر به یکدیگر اشاره می کنند:

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

سوال: متغیرهای غیرمعتبر به چه چیزی تبدیل می شوند؟

پاسخ: همانطور که می دانید خطاهای مربوط به syntax (طرز نوشتار کدها) توسط مرورگر نادیده گرفته می شود اما متغیرها و ()var های غیرمعتبر به مقدار initial یا inherit برمیگردند.

این مثال را در نظر بگیرید:

روش اشتباه استفاده از متغیر ها
روش اشتباه استفاده از متغیرها

در چنین مثالی مقدار رنگ پس زمینه برابر با 20 پیکسل می شود که معنی ندارد و از آنجایی که background-color خصوصیت قابل وراثتی نیست مقدار آن به initial یا transparent برمیگردد.

اگر همین کد را به شکل background-color: 20px بنویسید (بدون متغیر و به شکل ساده) مقدار رنگ پس زمینه غیرمعتبر محسوب می شد اما از دستور قبلی برای آن استفاده شده و رنگ آن قرمز (red) می‌شد.

مشکل سوم: single token ها

زمانی که مقدار یک خصوصیت CSS را به صورت زیر تعیین می کنید:

به آن single token می گوییم. در واقع 20px به عنوان یک واحد مستقل محسوب می شود بنابراین نمی توان آن را از هم جدا کرد. با این اوصاف هنگام کار با متغیرهای CSS مراقب باشید تا به تقلید از زبان های برنامه نویسی دیگر کد را به شکل زیر ننویسید:

این کد کاملا غلط است چرا که نمی توان 20px را از هم جدا کرد. مرورگر این کد را به شکل px و 20 میبیند (یعنی بین px و 20 یک اسپیس قرار میگیرد). بنابراین در هنگام کار با single token ها باید کل آن را درون متغیر قرار دهید یا اینکه از تابع calc استفاده کنید:

در این دستور می توانید مقدار متغیر size را روی 20 خالی بگذارید.

پروژه های عملی

در پروژه ی اول میخواهیم دو دکمه بسازیم که با hover شدن رنگشان تغییر کند.

پروژه ی اول
پروژه ی اول

اگر بخواهیم به روش عادی CSS عمل کنیم کدهایمان بدین شکل می شود:

  • ابتدا به دکمه ی خود یک کلاس مانند btn. می دهیم.
  • استایل های عادی btn را تعریف می کنیم.
  • استایل های جداگانه ای برای حالت hover در نظر می گیریم.

یعنی:

اگر همین کد را با متغیرها بنویسیم:

مشاهده ی خروجی

آیا میدانید syntax این مورد چیست؟

background: var(–color, black)

در این حالت پارامتر دوم (black) حالت پیش فرض است؛ یعنی رنگ پس زمینه را روی color– تنظیم کن اما اگر این متغیر وجود ندارد مقدار black را در نظر بگیر. بنابراین رنگ دکمه به راحتی هنگام hover تغییر پیدا می کند.

پروژه ی دوم ما پیشرفته تر است. در این پروژه میخواهیم چنین چیزی بسازیم. یعنی هنگام تایپ یک رنگ، مربع همان رنگ را بگیرد و با تکان دادن Slider نیز مربع ها به حالت سه بعدی جا به جا شوند.

کدهای HTML شامل سه قسمت می شوند:

  1. یک input از نوع range
  2. یک container برای نگه داشتن دستورات
  3. یک section برای نگه داشتن مجموعه مستطیل ها به همراه input هایشان

بنابراین:

کدهای CSS نیز به طور خلاصه باید این کارها را انجام دهند:

  1. کلاس slider. و instructions. را به صورت absolute قرار دهید تا روی عناصر دیگر صفحه تاثیر نگذارند.
  2. به عنصر body عکس گل آفتاب گردان را می دهیم (برای زیباسازی)
  3. نگهدارنده ی color-boxes را به وسط صفحه می بریم.
  4. استایل های دلخواه را روی color-boxes پیاده می کنیم.
  5. مستطیل ها را با flexbox در وسط صفحه قرار دهیم.

بنابراین:

در آخر با استفاده از جاوا اسکریپت مقدار عنصر input (همان range) را گرفته و وضعیت مستطیل ها را به روز رسانی می کنیم:

امیدوارم مقاله بررسی خطاهای رایج در متغیرهای CSS به درک بهتر شما کمک کرده باشد.

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle