ایجاد یک ورودی محدوده سفارشی که در همه مرورگرها یکسان به نظر می رسد – مجله Smashing

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

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

آناتومی یک ورودی محدوده

ورودی محدوده از دو بخش اصلی تشکیل شده است:

1. مسیر
   این بخشی از نوار لغزنده است که انگشت شست دویدن در امتداد. یا به عبارت دیگر، این عنصر طولانی است که محدوده مقادیر قابل انتخاب را نشان می دهد.
2. شست
   این عنصری در مسیر است که کاربر می تواند در اطراف آن حرکت کند تا مقادیر محدوده متفاوتی را انتخاب کند.

اگر یک معادله ریاضی بود:

محدوده ورودی = آهنگ + انگشت شست

ورودی محدوده گاهی اوقات به عنوان یک “لغزنده” نامیده می شود و در ادامه این مقاله، من از این اصطلاحات به جای یکدیگر استفاده خواهم کرد.

ناهماهنگی های مرورگر

برای نشان دادن اینکه چرا ما حتی در وهله اول به یک آموزش در مورد ورودی های محدوده یک ظاهر نیاز داریم، نگاهی به برخی از تصاویر ورودی محدوده پیش فرض HTML و نحوه ارائه آن در چهار مرورگر اصلی (Chrome، Firefox، Safari، و) خواهیم انداخت. حاشیه، غیرمتمرکز). یا در صورت تمایل می توانید این را مشاهده کنید نسخه ی نمایشی CodeSandbox در هر یک از مرورگرهای مربوطه، ناهماهنگی های مرورگر را با شکوه تمام ببینید.

توجه داشته باشید: این اسکرین شات ها از سپتامبر 2021 گرفته شده اند و ممکن است با به روز رسانی مرورگرهای مربوطه تغییر کنند.

بیایید کار را با نگاهی به Chrome شروع کنیم که به نظر من کاربرپسندترین نسخه ورودی را به طور پیش فرض ارائه می کند.

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

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

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

اکنون که دیدیم هر مرورگر تا چه حد ناسازگاری ورودی محدوده را ارائه می دهد، نگاهی به این خواهیم داشت که چگونه می توانیم از CSS برای یکسان سازی آنها استفاده کنیم.

بازنشانی محدوده (سبک‌های پایه)

از آنجایی که ناهماهنگی های مرورگر بسیار متفاوت است، باید از یک زمین بازی شروع کنیم. هنگامی که سبک های پیش فرضی که هر مرورگر اعمال می کند حذف شد، می توانیم برای ایجاد ورودی یکسان تر شروع به کار کنیم. ما استفاده خواهیم کرد input[type="range"] انتخابگر عنصر-ویژگی و سبک های اعمال شده در اینجا مانند یک تنظیم مجدد CSS برای ورودی عمل می کنند.

برای اعمال سبک های پایه به چهار ویژگی نیاز داریم:

1. -webkit-appearance: none;
   این خاصیت یک پیشوند فروشنده که برای همه مرورگرهای اصلی اعمال می شود. با دادن ارزش به آن none این به هر مرورگر مربوطه می‌گوید که سبک‌های پیش‌فرض را پاک کند. این به ما این امکان را می دهد که بتوانیم از ابتدا شروع کنیم و ظاهر ورودی را از آن نقطه ایجاد کنیم.
2. background: transparent;
   این کار پس‌زمینه پیش‌فرض اعمال شده روی ورودی را پاک می‌کند.
3. cursor: pointer;
4. width
   عرض کلی ورودی را تنظیم می کند.

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 15rem;
}

یک ظاهر طراحی شده آهنگ

هنگام استایل دادن به آهنگ (و انگشت شست) ما باید پیشوندهای فروشنده خاص مرورگرهای مختلف را هدف قرار دهیم تا سبک های مناسب را در عنصر مربوطه اعمال کنیم. به جلو، هر شبه عنصر پیشوند با -webkit برای مرورگرهای Chrome، Safari، Opera و Edge (پس از Chromium) اعمال خواهد شد. هر چیزی که با پیشوند -moz مربوط به فایرفاکس است

در زیر شبه عناصری وجود دارد که برای هدف قرار دادن مسیر استفاده خواهیم کرد:

• ::-webkit-slider-runnable-track
  را هدف قرار می دهد مسیر در Chrome، Safari، و Edge Chromium.
• ::-moz-range-track
  را هدف قرار می دهد مسیر در فایرفاکس

                        /***** Track Styles *****/
/***** Chrome, Safari, Opera, and Edge Chromium *****/
input[type="range"]::-webkit-slider-runnable-track {
  background: #053a5f;
  height: 0.5rem;
}

/******** Firefox ********/
input[type="range"]::-moz-range-track {
  background: #053a5f;
  height: 0.5rem;
}

تنها ویژگی های مورد نیاز برای مسیر هستند height و background. با این حال، معمول است که a border-radius به منظور گرد کردن لبه ها اعمال می شود.

یک ظاهر طراحی شده به انگشت شست

استایل دادن به انگشت شست (شستی وسطی که کاربر حرکت می‌دهد) تفاوت‌های ظریف بیشتری دارد که باید در نظر گرفته شود، زیرا ناهماهنگی‌های بیشتری بین مرورگرها در آن قسمت از ورودی محدوده وجود دارد.

در زیر شبه عناصری هستند که برای هدف قرار دادن انگشت شست استفاده خواهیم کرد:

• ::-webkit-slider-thumb
  را هدف قرار می دهد شست در Chrome، Safari، و Edge Chromium.
• ::-moz-range-thumb
  را هدف قرار می دهد شست در فایرفاکس

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

Chrome، Safari، Edge Chromium (Webkit)

اولین سبکی که باید روی آن اعمال کنیم ::-webkit-slider-thumb شبه عنصر است -webkit-appearance: none; پیشوند فروشنده ما از این ویژگی در بخش «سبک‌های پایه» استفاده کردیم تا سبک‌های پیش‌فرض کلی را که توسط مرورگر اعمال می‌شود لغو کنیم و هدف مشابهی را در نظر داریم.

هنگامی که سبک های پیش فرض حذف شدند، می توانیم سبک های سفارشی خود را اعمال کنیم. با فرض اینکه الف را اعمال کنیم height، width و background-color برای مثال، در اینجا نمونه ای از آنچه تا کنون داشته ایم آورده شده است:

به طور پیش‌فرض، مرورگرهای WebKit انگشت شست را طوری نمایش می‌دهند که در مرکز مسیر قرار نگیرد.

برای اینکه انگشت شست را به درستی در مسیر قرار دهیم، می‌توانیم از فرمول زیر استفاده کرده و آن را روی آن اعمال کنیم margin-top ویژگی:

margin-top = (ارتفاع آهنگ بر حسب پیکسل / 2) – (ارتفاع انگشت شست بر حسب پیکسل /2)

گرفتن استایل هایی که در قسمت های قبل اعمال کردیم و تبدیل rems به پیکسل، ارتفاع آهنگ 8 پیکسل و ارتفاع انگشت شست 32 پیکسل خواهیم داشت. این بدان معنی است که:

margin-top = (8/2) – (32/2) = 4 – 16 = -12px

بر این اساس، سبک های نهایی شده ما برای مرورگرهای وب کیت مانند بلوک کد زیر است:

/***** Thumb Styles *****/
/***** Chrome, Safari, Opera, and Edge Chromium *****/
input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
   appearance: none;
   margin-top: -12px; /* Centers thumb on the track */
   background-color: #5cd5eb;
   height: 2rem;
   width: 1rem;    
}

فایرفاکس

هنگام اعمال استایل ها روی انگشت شست در فایرفاکس، باید از آن استفاده کنید ::-moz-range-thumb شبه عنصر خوشبختانه، فایرفاکس از مشکل مرکزی مانند مرورگرهای Webkit رنج نمی برد. با این حال، یک گوچا در اطراف شعاع مرزی و مرز خاکستری پیش‌فرض است که روی انگشت شست اعمال می‌شود.

به منظور اصلاح حاشیه خاکستری پیش فرض، می توانیم آن را اضافه کنیم border: none; ویژگی. برای حذف شعاع مرزی پیش‌فرض که اعمال می‌شود، می‌توانیم آن را اضافه کنیم border-radius: 0 ویژگی و اکنون انگشت شست در تمام مرورگرها ثابت به نظر می رسد.

بر این اساس استایل های نهایی شده ما برای مرورگرهای وب کیت به شکل زیر است:

                     /***** Thumb Styles *****/
/***** Firefox *****/
input[type="range"]::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0; /*Removes default border-radius that FF applies*/
    background-color: #5cd5eb;
    height: 2rem;
    width: 1rem;
}

توجه داشته باشید: مرورگرهای Webkit به طور خودکار این شعاع را به حاشیه اعمال نمی کنند، بنابراین اگر متوجه شدید که می خواهید نوعی از شعاع حاشیه را به انگشت شست اعمال کنید، برخلاف لغو آن همانطور که در بالا انجام دادیم، باید اعمال کنید. مطلوب border-radius ابعاد به هر دو -webkit-slider-thumb و ::-moz-range-thumb شبه عناصر

سبک های تمرکز

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

بر اساس WAI-ARIA: اسناد لغزنده، توصیه می شود:

فوکوس بر روی نوار لغزنده قرار می گیرد (شئی بصری که کاربر ماوس را حرکت می دهد، همچنین به عنوان انگشت شست شناخته می شود).

اولین کاری که می خواهیم انجام دهیم این است که سبک های تمرکز پیش فرض را حذف کنیم تا بتوانیم با سبک های سفارشی آنها را لغو کنیم. برای هدف قرار دادن سبک‌های فوکوس انگشت شست، می‌توانیم از آن استفاده کنیم ::-webkit-slider-thumb و ::-moz-range-thumb شبه عناصری که در قسمت قبل استفاده کردیم و آنها را با the ترکیب می کنیم :focus شبه کلاس. سپس می توانیم از CSS استفاده کنیم طرح کلی و طرح آفست ویژگی هایی که آن را به شکلی که می خواهیم استایل کنیم.

/***** Focus Styles *****/
/* Removes default focus */
input[type="range"]:focus {
  outline: none;
}

/***** Chrome, Safari, Opera, and Edge Chromium *****/
input[type="range"]:focus::-webkit-slider-thumb {
  border: 1px solid #053a5f;
  outline: 3px solid #053a5f;
  outline-offset: 0.125rem;
}

/******** Firefox ********/
input[type="range"]:focus::-moz-range-thumb {
  border: 1px solid #053a5f;
  outline: 3px solid #053a5f;
  outline-offset: 0.125rem;     
}

توجه داشته باشید: اگر یک border-radius به انگشت شست اعمال می شود، فایرفاکس یک طرح کلی را در قسمت نمایش می دهد شکل انگشت شست در حالی که سایر مرورگرها یک طرح کلی بلوکی را نمایش می دهند. متأسفانه، یک اصلاح CSS ساده برای این وجود ندارد و این تنها ناهماهنگی است که وجود خواهد داشت. با این حال، هدف اصلی از افزودن این سبک ها برای اهداف دسترسی است و هدف اصلی، ارائه یک نشانگر بصری در هنگام تمرکز عنصر، همچنان محقق می شود.

همه اش را بگذار کنار هم

اکنون که تمام سبک‌های مورد نیاز برای یکنواخت کردن ورودی محدوده را پوشش داده‌ایم، در اینجا نحوه ظاهر نهایی CSS به شرح زیر است:

/********** Range Input Styles **********/
/*Range Reset*/
input[type="range"] {
   -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 15rem;
}

/* Removes default focus */
input[type="range"]:focus {
  outline: none;
}

/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
   background-color: #053a5f;
   border-radius: 0.5rem;
   height: 0.5rem;  
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
   appearance: none;
   margin-top: -12px; /* Centers thumb on the track */

   /*custom styles*/
   background-color: #5cd5eb;
   height: 2rem;
   width: 1rem;
}

input[type="range"]:focus::-webkit-slider-thumb {   
  border: 1px solid #053a5f;
  outline: 3px solid #053a5f;
  outline-offset: 0.125rem; 
}

/******** Firefox styles ********/
/* slider track */
input[type="range"]::-moz-range-track {
   background-color: #053a5f;
   border-radius: 0.5rem;
   height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
   border: none; /*Removes extra border that FF applies*/
   border-radius: 0; /*Removes default border-radius that FF applies*/

   /*custom styles*/
   background-color: #5cd5eb;
   height: 2rem;
   width: 1rem;
}

input[type="range"]:focus::-moz-range-thumb {
  border: 1px solid #053a5f;
  outline: 3px solid #053a5f;
  outline-offset: 0.125rem; 
}

نتیجه

علاوه بر روش هایی که در طول مقاله ذکر شده است، می توانید از مزایای آن نیز استفاده کنید مولد CSS ورودی محدوده من ایجاد کردم به نام range-input.css. هدف اصلی این پروژه ایجاد ابزاری بود که این فرآیند را برای توسعه دهندگان ساده تر می کند. مولد CSS به شما امکان می دهد تا به سرعت ویژگی های رایج CSS را استایل دهید و یک نوار لغزنده نمایشی ارائه می دهد که پیش نمایش بلادرنگ سبک هایی را که می خواهید اعمال کنید نمایش می دهد.

امیدواریم ورودی‌های محدوده استایل در آینده ساده‌تر شوند. با این حال، تا آن روز، دانستن اینکه کدام شبه عناصر و پیشوندهای فروشنده را هدف قرار دهید، به شما کمک می‌کند تا به خوبی در مسیر اسلایدرهای استایل‌سازی متناسب با نیازهایتان پیش بروید.

منابع بیشتر در مجله Smashing

(vf، yk، او)