آموزش سلکتور 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 هستند که با حالت : و یا حالت :: عمل کرده و امکان انتخاب هایی در بازه محدودتر و دقیق‌تر به شما خواهند داد . برای مطالعه مقالات بیشتر در این مورد می‌توانید آموزش های قبلی در وبلاگ داخل دسته ” آموزش طراحی سایت ” را مطالعه فرمائید . موفق و پاینده باشید .