إنشاء مدخل نطاق مخصص يبدو متسقًا عبر جميع المتصفحات

بصفتي أحد المشرفين على مكتبة مكون واجهة المستخدم ، قمت بتنفيذ وتصميم عدد لا يحصى من عناصر الإدخال. في أحد الأيام تم تكليفي بمهمة إضافة مدخلات النطاق إلى المكتبة ، واعتقدت أنها ستكون عملية مماثلة للمدخلات الأخرى التي قمت بتنفيذها في الماضي. كان هذا الافتراض صحيحًا حتى بدأت في اختبار إدخال النطاق عبر متصفحات متعددة وأدركت بسرعة أن لدي الكثير من العمل في يدي.

بعد الكثير من البحث ، تمكنت أخيرًا من تحديد عدد كافٍ من منشورات المدونة والمقالات والبرامج التعليمية المتعمقة لمساعدتي في تصميم مدخلات النطاق لتقديمها باستمرار. بدلاً من الاضطرار إلى البحث عن موارد متعددة ، فإن الغرض من منشور المدونة هذا هو توفير متجر شامل لتعلم كيفية تصميم مدخلات النطاق بشكل صحيح والتي ستبدو متسقة عبر جميع المتصفحات. إنها المقالة التي كنت أتمنى لو حصلت عليها عندما اضطررت إلى القيام بذلك بنفسي ، وآمل أن تساعد في جعل هذه العملية أسرع وأكثر سلاسة بالنسبة لك.

تشريح مدخلات النطاق

يتكون إدخال النطاق من جزأين رئيسيين:

1. مسار
   هذا هو الجزء من شريط التمرير الذي يمتد على طوله الإبهام. أو بعبارة أخرى ، يمثل العنصر الطويل نطاقات القيم التي يمكن تحديدها.
2. إبهام
   هذا عنصر على المسار يمكن للمستخدم تحريكه لتحديد قيم النطاق المتغيرة.

إذا كانت معادلة رياضية:

إدخال النطاق = المسار + الإبهام

يُشار أحيانًا إلى إدخال النطاق باسم "شريط التمرير" وخلال بقية هذه المقالة ، سأستخدم هذه المصطلحات بالتبادل.

تضاربات المستعرض

لتوضيح سبب حاجتنا حتى إلى برنامج تعليمي حول مدخلات نطاق التصميم في المقام الأول ، سنلقي نظرة على بعض لقطات الشاشة لإدخال نطاق HTML الافتراضي وكيف يتم عرضه عبر المتصفحات الأربعة الرئيسية (Chrome و Firefox و Safari و حافة). أو ، إذا كنت تفضل ذلك ، يمكنك عرض هذا العرض التوضيحي لـ CodeSandbox في كل من المتصفحات المعنية لمشاهدة التناقضات في المستعرض في كل مجدها.

ملاحظة: تم التقاط لقطات الشاشة هذه اعتبارًا من سبتمبر 2021 وقد تخضع للتغيير مع تحديث المتصفحات المعنية.

لنبدأ الأمور من خلال النظر إلى Chrome الذي ، في رأيي ، يعرض الإصدار الأكثر سهولة في الاستخدام من المدخلات افتراضيًا.

Firefox هو التالي ويبدو مختلفًا عن إدخال Chrome المعروض. في Firefox ، يكون ارتفاع المسار أقصر قليلاً. من ناحية أخرى ، يكون ارتفاع وعرض الإبهام أكبر وليس لهما نفس لون الخلفية الأزرق الموجود في إصدار Chrome.

يعتبر شريط تمرير Safari هو الأقرب في المظهر لإصدار Firefox ، ولكنه ، مرة أخرى ، لا يزال مختلفًا. يبدو أن هذه المرة حول المسار لها تأثير غامض وأن ارتفاع الإبهام والعرض أصغر من إصدارات Chrome و Firefox. إذا نظرت عن كثب ، يمكنك أيضًا أن ترى أن الإبهام لا يتم توسيطه مباشرة على المسار مما يمنحه مظهرًا وملمسًا غير مصقول.

أخيرًا وليس آخرًا ، يعد Edge ، الذي أصبح الآن Microsoft Edge مبنيًا على Chromium ، أكثر توافقًا مع المتصفحات الثلاثة الأخرى من سابقه Chromium. ومع ذلك ، يمكننا أن نرى أنه لا يزال يتم عرضه بشكل مختلف عن المتصفحات الثلاثة الأخرى. يبدو إصدار Edge لإدخال النطاق مشابهًا جدًا لإصدار Chrome ، إلا أنه يحتوي على لون خلفية رمادية داكنة للإبهام والجانب الأيسر من المسار قبل الإبهام.

الآن بعد أن رأينا مدى عدم الاتساق الفادح في عرض كل متصفح لمدخلات النطاق ، سنلقي نظرة على كيفية استخدام 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 يخص Firefox.

فيما يلي العناصر الزائفة التي سنستخدمها لاستهداف المسار:

• ::-webkit-slider-runnable-track
  يستهدف المسار في Chrome و Safari و Edge Chromium.
• ::-moz-range-track
  يستهدف المسار في Firefox.

 /***** 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 . ومع ذلك ، من الشائع رؤية border-radius مطبق لتقريب الحواف.

تصفيف الإبهام

يتميز تصميم الإبهام (المفتاح الأوسط الذي يحركه المستخدم) بمزيد من الفروق الدقيقة التي يجب مراعاتها نظرًا لوجود المزيد من التناقضات بين المتصفحات في هذا الجزء من إدخال النطاق.

فيما يلي العناصر الزائفة التي سنستخدمها لاستهداف الإبهام:

• ::-webkit-slider-thumb
  يستهدف الإبهام في Chrome و Safari و Edge Chromium.
• ::-moz-range-thumb
  يستهدف الإبهام في Firefox.

نظرًا لأن متصفحات Firefox و 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

بناءً على ذلك ، ستبدو أنماطنا النهائية لمتصفحات webkit مثل كتلة التعليمات البرمجية التالية:

 /***** 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; }

ثعلب النار

عند تطبيق الأنماط على الإبهام في Firefox ، ستحتاج إلى الاستفادة من العنصر الزائف ::-moz-range-thumb . لحسن الحظ ، لا يعاني Firefox من نفس مشكلة التوسيط مثل متصفحات Webkit. ومع ذلك ، هناك مشكلة واحدة تدور حول نصف قطر الحدود الافتراضي والحدود الرمادية التي تنطبق على الإبهام.

من أجل معالجة الحد الرمادي الافتراضي ، يمكننا إضافة border: none; خاصية. لإزالة نصف قطر الحدود الافتراضي الذي يتم تطبيقه ، يمكننا إضافة border-radius: 0 والآن سيبدو الإبهام متناسقًا عبر جميع المتصفحات.

بناءً على ذلك ، ستبدو الأنماط النهائية لمتصفح Firefox كما يلي:

 /***** 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: Slider ، يوصى بما يلي:

يتم وضع التركيز على شريط التمرير (الكائن المرئي الذي سيحركه مستخدم الماوس ، والمعروف أيضًا باسم الإبهام).

أول شيء نريد القيام به هو إزالة أنماط التركيز الافتراضية حتى نتمكن من تجاوزها بأنماط مخصصة. من أجل استهداف أنماط تركيز الإبهام ، يمكننا الاستفادة من العناصر الزائفة ::-webkit-slider-thumb و ::-moz-range-thumb التي استخدمناها في القسم السابق ودمجها مع :focus psuedo-class . يمكننا بعد ذلك استخدام مخطط 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 على الإبهام ، فإن Firefox يعرض مخططًا في شكل الإبهام بينما تعرض المتصفحات الأخرى مخططًا ممتلئًا. لسوء الحظ ، لا يوجد إصلاح 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

• مولدات CSS
• تبسيط أنماط النموذج مع accent-color
• حلول CSS الذكية لتحديات واجهة المستخدم الشائعة
• الغوص العميق في object-fit background-size في CSS