نکاتی کاربردی در مورد CSS (جلسه 16) : نکاتی در مورد انیمیشن و انتخابگرها

‏  2 دقیقه
۱۸ دی ۱۳۹۵

در این مطلب با ادامه نکاتی کاربردی در مورد CSS در خدمتتون هستیم. css-style

هر کلمه ای رو نمیتونین برای نام انیمیشن قرار بدین

شاید بعضی مواقع برای شما هم پیش اومده باشه که زمانی که از حالت خلاصه نویسی شده ویژگی animation استفاده میکنید، کدهاتون اجرا نشه و دلیلش رو ندونید. کد زیر رو در نظر بگیرید:

@keyframes reverse {
  from {
    left: 0;
  }

  to {
    left: 300px;
  }
}

.example {
  animation: reverse 2s 1s;
}

همونطور که میبینید ما در بالا نام انیمیشن رو reverse قرار دادیم و با استفاده از keyframe اون رو به وجود آوردیم. همه چی در نگاه اول خوب بنظر میرسه و بنظر میاد که مشکلی نداشته باشه. اما وقتی اون رو تست میکنیم کدهامون کار نمیکنن. دموی زیر رو مشاهده کنید: این انیمیشن به این دلیل کار نمیکنه که کلمه کلیدی reverse یک مقدار معتبر برای ویژگی animation-direction هست. اگر از هر کلمه کلیدی معتبر بعنوان نام درون دستور خلاصه نویسی شده animation استفاده کنید، با همین مشکل مواجه خواهید شد. زمانی که ویژگی هارو بصورت جدا مشخص میکنید چنین مشکلی پیش نمیاد و فقط در حالت خلاصه نویسی شده مشکل وجود دارد.

نامهایی که اگر از اونا بعنوان نام انیمیشن استفاده کنیم، انیمیشن اجرا نخواهد شد به قرار زیر هستند:

  • کلمه‌های کلیدی مربوط به Timing function
  • infinite
  • alternate
  • running
  • paused
  • و ...

بعضی از مقادیر ویژگی‌های درون انتخابگرها case insensitive هستند

فرض کنیم که کدهای HTML زیر رو داریم:

<div class="box"></div>
<input type="email">

شما میتونین این المنتها رو با استفاده از attribute selector انتخاب کنید:

div[class="box"] {
  color: blue;
}

input[type="email"] {
  border: solid 1px red;
}

این کدها بخوبی کار میکنن. اما نظرتون در مورد کد زیر چیه؟

div[class="BOX"] {
  color: blue;
}

input[type="EMAIL"] {
  border: solid 1px red;
}

توجه کنید که تفاوت کد بالا با قبلی در اینه که مقادیر رو بصورت بزرگ قرار دادیم. با اینکار المنت با کلاس box انتخاب نمیشه چون ویژگی class حساس به حالت هست و به کوچک و بزرگ بودن حروف اهمیت میده. اما input با نوع email انتخاب میشه و دلیل اون هم اینه که ویژگی type حساس به حالت نیست و به کوچک  بزرگ بودن حروف کاری نداره.

بهمین راحتی.

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

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

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

یا علی

Source

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

جلسات دوره

نیاز به لاگین

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

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

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