ترفندهای حرفه ای CSS ProTips (جلسه 8) : مخفی کردن ویدیوها و نکاتی در مورد Form Element

‏  2 دقیقه
۲۷ آذر ۱۳۹۵

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

مخفی کردن ویدیوهای Autoplay که Mute نشده اند

این ترفند میتونه یک ترفند خوب برای استایلهای سفارشی هست. با این کار از بارگذاری اضافه یا overloading با صدای فیلمی که Autoplay هست در زمانی که صفحه سایت شما لود میشه، جلوگیری میکنیم. اگر صدای ویدیو Mute نشده باشه، ویدیوی مورد نظر رو نمایش نمیدیم. برای اینکار بصورت زیر عمل میکنیم:

video[autoplay]:not([muted]) {
  display: none;
}

همونطور که میبینید همه ویدیوهایی که ویژگی autoplay دارن و ویژگی muted برای اونا قرار داده نشده، مخفی شدن و display اون برابر با none قرار گرفته. همونطور که دیدید یکبار دیگه از کلاس کاذب not استفاده کردیم.

font-size رو برای Form element‌ها مشخص کنید تا در موبایل به مشکلی بر نخورید

تا حالا بارها برای خودم پیش اومده که زمانی که طرحی که در اون Input و ... هست رو درون مرورگرهای موبایل و Tablet امتحان کردم و زمانی که بر روی Input‌ها در گوشی کلیک میکردم، موبایل بصورت اتوماتیک بر روی اون ناحیه زوم میشه و بزرگنمایی میکنه و استایل کل صفحه رو بهم میزنه. برای جلوگیری از وقوع این اتفاق درون مرورگرهای موبایل و ... از زوم شدن بر روی المنت‌های Form، ویژگی font-size رو برای اونا قرار میدیم. برای اینکار بصورت زیر عمل میکنیم:

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

همونطور که دیدید برای المنتهای select و textarea و input از نوع number و text، ویژگی font-size رو برابر با 16 پیکسل قرار دادیم. با اینکار دیگه زمانی که بر روی اون المنتهای فرمی فوکوس میکنیم، دیگه با مشکلات این چنینی روبرو نخواهیم شد.

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

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

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

یا علی

Source

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

نیاز به لاگین

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

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

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