آموزش سلکتور backdrop:: در css

در مقالات قبلی در مورد انتخاب کننده های بسیاری در css صحبت کردیم . تمامی این انتخاب کننده‌ها بصورت انتخاب کننده‌های :: بودند و مثال هایی از این انتخاب کننده‌ها مواردی همچون marker و placeholder و selection و … بود .

یکی دیگر از انتخاب کننده‌هایی که به شکل انتخابگر :: است ، انتخاب کننده backdrop است که طبق بررسی‌های انجام شده ، تعداد بسیارکمی از css کاران درمورد این انتخاب کننده و نحوه کار آن اطلاع دارند . تقریبا می‌توان بیش از 90 درصد المان های داخل صفحه را توسط دستورات css کنترل کرد . حتی بخش هایی که از نظر شما توسط مروگر کنترل می‌شود همچون قسمت اسکرول بار در صفحه وب را نیز می‌توان با css کنترل نموده و استایل آن را تغییر داد .

از این جهت می‌توان اینگونه برداشت کرد که ما در طراحی وب ، استایل های پیشفرض و هرچیزی که درکل دارای رنگ و عرض و ارتفاع و خصوصیات مربوط به css است را می‌توانیم تغییر دهیم . دراین مقاله به انتخاب کننده backdrop پرداخته و نحوه عملکرد بعلاوه روش درست استفاده از آن را شرح خواهیم داد .

وظیفه سلکتور backdrop چیست ؟

برای اینکه مفهوم عملکرد این سلکتور را بخوبی درک کنید با یک مثال بسیار ساده خدمت شما هستیم . تصور کنید که شما یک ویدیو با ابعاد کوچک دارید . برای مثال ابعاد ویدیو 400 عرض در 1400 ارتفاع است . زمانی که این ویدیو را در نمایشگر بزرگی پخش کرده و حالت تمام صفحه یا Full Screen را فعال کنید ، ویدیو شما در وسط صفحه نمایش داده شده و مابقی صفحه را یک پس زمینه به رنگ مشکی پوشش خواهد داد .

انتخاب کننده backdrop دقیقا در اینجا وارد عمل خواهد شد تا شما بتوانید رنگ پس‌زمینه پیشفرض در این قسمت را نیز تغییر دهید . به مثال زیر دقت کنید :

همانطور که در تصویر مشاهده می‌کنید ، فضاهایی که امکان پوشش ویدیو در آنها وجود ندارد با رنگ مشکی پرشده است . اکنون قصد داریم تا این پس‌زمینه را توسط css تغییر دهیم . برای این کار باید در قسمت مدنظر قطعه کدی را به شکل زیر استفاده کنیم ( برای مثال قصد تغییر رنگ در backdrop ویدیوها را دارید ) :

video::backdrop {
  background-color: #448;
}

زمانی که این کد را داخل کدهای css خودتان قرار دهید ، متوجه خواهید شد که رنگ مشکی پیشفرض به رنگی که شما اضافه کردید ، تغییر خواهد کرد . نمونه دیگری از این کد می‌تواند به شکل زیر باشد :

video::backdrop {
  background: hsla(0, 0%, 0%, .5);
}

این کد رنگ توسط دستور hsl نوشته شده است که بازهم یک دستور جهت اعمال رنگ بوده و تفاوتی با حالت HEX یا rgb ندارد . نکته جالب اینجاست که می‌توانید برای پس زمینه این قسمت از دستورات linear-gradient نیز استفاده کرده و پس زمینه چندرنگی به backdrop اضافه کنید که البته درصورتی که رنگ ها به درستی ترکیب نشوند ، نمای جذابی نخواهد داشت و به دلیل مشکلات احتمالی در برخی مرورگرها ، بهتر است از پس زمینه ساده استفاده کنید . البته بازهم این مورد بستگی به سلیقه خود شما دارد .

دستور backdrop تقریبا توسط اکثر مرورگرهای نسخه قدیمی نیز پشتیبانی می‌شود . این ویژگی در مرورگر Chrome از نسخه 37 به بالا ، در مرورگر Edge از نسخه 79 به بالا ، در مرورگر Firefox از نسخه 47 به بالا و در opera از نسخه 24 به بالا پشتیبانی می‌شود .

این سلکتور نیز ازجمله انتخاب کننده‌هایی است که می‌توان تقریبا با اطمینان از آنها استفاده کرد و نگران اعمال نشدن آن در مروگرهای جدید نبود . البته که تمامی مروگرهای جدید این بخش  را بدون مشکل پشتیبانی می‌کنند .

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

اگر علاقمند به یادگیری دستورات css به شکلی کامل و دقیق هستید می‌توانید از دوره های آموزشی وب سایت ما خصوصا دوره ” نابغه Css ” استفاده کنید . در این دوره صفرتا هزار مباحث مربوط به css در قالب صدها مثال عملی به همراه بیش از 5 پروژه واقعی و متناسب با نیاز بازارکار از صفر تا صد آموزش داده شده است که با یکبار شرکت در این دوره ، برای همیشه از هر منبع دیگری برای یادگیری مباحث طراحی با زبان css بی‌نیاز خواهید شد . نظرات خود را در بخش دیدگاه‌های همین صفحه با ما به اشتراک بگذارید .

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا