قوانین شرطی چیزی جز ویژگی هایی بر پایه ی css نیستند؛ که بر اساس شرایطی خاص اعمال می‌شوند. بنابراین شرط قرار گرفته می‌تواند درست و یا نادرست باشد و بر اساس آن عبارت یا مدلی اجرا می‌گردد. این قوانین در نهایت طبق اصولی خاص قرار می‌گیرند و با علامت @ شروع می شوند.
قوانین شرطی در css
در این زبان برنامه نویسی سه قانون شرطی ایجاد شده است:
-
- @support
- @media
- @document
وظیفه این قانون شرطی بررسی پشتیبانی یک ویژگی خاص در مرورگر شماست.
بررسی عملکرد قوانین شرطی css
- @support
وظیفه این قانون شرطی بررسی پشتیبانی یک ویژگی خاص در مرورگر شماست. - @media
همانطور که از نام این قانون شرطی پیداست؛ به بهش رسانه ها مربوط میباشد.
در این شرط ابتدا طول و عرض دستگاه شما و یا مرورتان بررسی میشود و با توجه به آن استایل مناسب اعمال می‌گردد. - @document
در این قانون شرطی یک استایل خاص تنها برای یک url بررسی، تست و اعمال میشود.
قانون when/else
اما جدیدا پیشنهاد جدیدی برای اعمال قوانین شرطی ایجاد شده است. یکی از قانون های مورد استفاده حال حاضر when/else است.
راه های جدید برای تعریف قوانین @media
در حال حاضر راه های جدیدی نیز برای طراحی رسانه ها وجود دارد که این امکان را ایجاد می‌کند تا از قوانین معنایی با توجه به نیاز خودتان استفاده کنید. مثلا برای یک عکس دیگر لازم به تعریف کمترین و یا بیشترین مقدار نیستید.
نحوه ی استفاده از when /else در @media
علت توجه به قانون شرطی رسانه ها استفاده بسیار زیاد و مورد اهمیت واقع شدن responsive بودن سایت است. در طراحی سایت اگر شما هم بدین موضوع برخورده باشید حتما برای تعریف قوانین خود به @media سر زده اید. با توجه به روز افزون دانش تکنولوژی قوانین شرطی css نیز بروزرسانی شده اند. تا بتوانند کد های تمیز و جذاب و کوتاه تری را ایجاد کنند. when/else حاصل همین پیشرفت در حوزه قوانین شرطی css است. برای استفاده از این قانون شرطی باید عبارت when را پس از @ و قبل از media نوشت. سپس شرط را و در انتها قوانین و عبارات قابل اعمال را بنویسید.
آیا قانون when/else فقط برای قانون شرطی media قابل استفاده است؟
اگر شما هم تا به اینجا از طرفداران when/else شده اید و نگران استفاده آن در دیگر قوانین هستید. باید به شما نوید امکان استفاده از این قانون در سه مورد شرطی به همان شکل دهیم. نکته جالب و حائز اهمیت امکان استفاده when/else همراه بیش از یک قانون شرطی است.
امکان استفاده به صورت درون شرطی
ابتدا باید به بررسی درون شرطی بودن و توضیح آن بپردازیم. درون شرطی بودن به معنی امکان استفاده از یک قانون یا شرط در درون css های تعریف شده برای یک کلاس یا تابع است. مثلا شما برای کلاس cart-bottom رنگ آبی را به عنوان پس زمینه و رنگ متن را سفید قرار می‌دهید که در چهار گوشه border-radius 10 px تنظیم شده. اما نکته مهم padding آن در نمایشگر هایی با سایز متفاوت است. این مقدار برابر 3px برای گوشی همراه، 13 پیکسل برای دسکتاپ است. برای این کار پس از تعریف css های اصلی و ثابت کافی است یک قانون شرطی با when/else تعریف کنید و شرط و نتایج لازم را در آن قرار دهید.
دیدگاهتان را بنویسید