بخش Vip سئو نود

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

جزئیات بیشتر
آموزش یکبار برای همیشه
دوره جدید آموزش طراحی cms با php و mysql ، مشاهده دوره

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

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

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

0 46
آموزش سلکتور 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 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

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

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

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

بهترین فونت های فارسی که می‌توانید در اکثر سایت های فارسی از آنها استفاده کنید . معرفی 3 فونت بسیار جذاب فارسی با وزن های مناسب جهت استفاده در انواع پروژه های طراحی سایت یا اپلیکیشن برای تمامی طراحان !

0 50

زبان طراحی Css چه تفاوت هایی با Css3 دارد ؟ معرفی تمامی ویژگی‌های ارائه شده در نسخه 3 زبان Css که مسبب تحول عظیم در طراحی شدند !

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

آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود