بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
دوره جدید " شاهکار تولید محتوا " برای علاقمندان به سئو ، جزئیات دوره

آموزش سلکتور in-range: در css

مقالات طراحی سایت

چگونه با کمک انتخاب کننده in-range: در css ، طراحی بازه های عددی در فرم های سایت را هوشمندانه انجام دهیم ؟

0 8
آموزش سلکتور in-range: در css

یکی از انتخاب کننده‌های عجیب داخل زبان طراحی css انتخاب کننده in-range است . شاید کمتر css کاری با این انتحابگر آشنایی دارد و تنها حرفه‌ای ها هستند که از این نوع انتخاب کننده ها بصورت هوشمندانه استفاده می‌کنند .

این انتخاب کننده‌ها به اندازه سایر انتخاب کننده‌ها همچون کلاس و آیدی زیاد کاربردی نیستند اما اگر با نحوه کار آنها آشنایی داشته باشید ، احتمالا در برخی پروژه ها به آنها نیاز پیدا خواهید کرد .

شما در طراحی سایت و هنگام استفاده از زبان طراحی Html ممکن است از فرم استفاده کنید و در داخل این فرم مطمئنا از input هایی استفاده خواهید کرد . برخی از این input ها برای دریافت عدد هستند و شاید یک بازه مشخصی داشته باشند . برای مثال شما یک input از نوع number ایجاد کنید تا کاربر تعداد سفارشش را در فروشگاه مشخص کند .

در این بخش ممکن است برای کاربر برخی محدودیت ها جهت تعداد سفارش قرار دهیم برای مثال امکان خرید از محصول شما حداقل 3 عدد و حداکثر 10 عدد باشد . در این شرایط باید صفت های min و max را داخل input استفاده کنید .

<input type="number" min="3" max="10" name="ocount" >

سلکتور in-range یک سلکتور خاصی است که تحت شرایط متفاوتی باید از آن استفاده کنید که در ادامه خدمتتان توضیح دادیم .

سلکتور in-range برای چه بخش هایی قابل استفاده است ؟

شما برای اینکه از سلکتور in-range استفاده کنید ، حتما باید المان های داخل فرم شما دارای صفت های min و max باشند . اصول کار این انتخابگر به این شکل است که تنها روی المان هایی از فرم که صفت min و max دارند کار خواهد کرد . به مثال زیر دقت کنید :

input:in-range {
  background-color: rgb(0 255 0 / 25%);
}

توسط این حالت ، و به کمک حالت in-range می‌توانید قسمت هایی از فرم که نیازمند تنظیم بازه های عدد در حالت های خاصی هستند و به عبارتی دارای صفات min و max هستند را به شکلی جذاب‌تر طراحی کنید . معمولا استایل مناسب برای این بخش ، تغییر در رنگ پس زمینه input است که البته توجه داشته باشید به نوعی طراحی این بخش انجام نشود که با المان هایی همچون disabled و … تداخل داشته باشد .

البته در برخی نمونه‌ها ، ممکن است حالت in-range بودن اعداد وارد شده را بررسی کرده و اگر عدد وارد شده از بازه بین min و max خارج بود ، استایل خاصی را به این بخش اعمال کنیم که در این حالت باید از دستور out-of-range استفاده کرد که این بخش نیز به شکل زیر است :

input:out-of-range {
  background-color: rgb(255 0 0 / 25%);
  border: 2px solid red;
}

البته دقت داشته باشید که حالت اصلی و مدنظر ما برای طراحی و بهبود تجربه کاربری ، حالت in-range است که بررسی خواهیم کرد اگر input دارای صفات min و max بوده و اعداد داخل input نیز در بازه تعیین شده باشد ، استایل مدنظر را اعمال شود .

توجه داشته باشید که استفاده از این انتخاب کننده‌ها به هیچ عنوان اجباری نیست و شما می‌توانید فرم خود را ساده‌تر طراحی کنید اما در برخی پروژه‌ها ممکن است طبق اعتبارسنجی هایی که داخل فرم انجام شود ، نیازمند برخی تغییر استایل‌ها باشیم و دقیقا در همین بخش می‌توانیم از حالت in-range و همچنین حالت out-of-range استفاده کرده و هوشمندانه‌تر طراحی کنید .

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

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

امید قدیمی

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

نقشه راه فرانت

اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید

شاید این مطالب نیز برای شما جالب باشد

قرارداد طراحی سایت شاید برای برخی افراد سوال باشد که قرارداد طراحی سایت چگونه تنظیم می شود و ما به چه نکاتی باید در قرار داد توجه کنیم ؟ ممکن است شما شخص ثالثی باشید که قصد دارید برای کسب و کار خود یک وب سایت طراحی کنید ولی با نحوه تنظیم قرارداد طراحی سایت […]

5 1,339

استفاده از سلکتور visited برای استایل نویسی بهتر لینک‌ها در طراحی پروژه های وب ! درست ترین حالت برای تغییر استایل لینک ها در حالت visited .

0 3
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است
آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود