bundles
  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 305 ۱۸ دی ۹۵

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

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

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

همونطور که میبینید ما در بالا نام انیمیشن رو reverse قرار دادیم و با استفاده از keyframe اون رو به وجود آوردیم. همه چی در نگاه اول خوب بنظر میرسه و بنظر میاد که مشکلی نداشته باشه. اما وقتی اون رو تست میکنیم کدهامون کار نمیکنن. دموی زیر رو مشاهده کنید:

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

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

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

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

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

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

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

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

بهمین راحتی.

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

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

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

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram