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

- visibility ۰ mode_comment

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

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

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

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

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

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

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

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

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

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

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

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