การสร้างอินพุตช่วงที่กำหนดเองซึ่งดูสอดคล้องกันในเบราว์เซอร์ทั้งหมด

ในฐานะหนึ่งในผู้ดูแลไลบรารีองค์ประกอบ UI ฉันได้ปรับใช้และกำหนดรูปแบบองค์ประกอบอินพุตมากมาย วันหนึ่ง ฉันได้รับมอบหมายงานในการเพิ่มช่วงอินพุตไปยังไลบรารี และฉันคิดว่ามันจะเป็นกระบวนการที่คล้ายกับอินพุตอื่นๆ ที่ฉันเคยใช้ในอดีต สมมติฐานนั้นถูกต้องจนกระทั่งฉันเริ่มทดสอบช่วงอินพุตในเบราว์เซอร์หลายตัวและตระหนักได้อย่างรวดเร็วว่าฉันมีงานในมืออีกมาก

หลังจากการค้นคว้าอย่างหนัก ในที่สุดฉันก็สามารถระบุโพสต์ในบล็อก บทความ และบทช่วยสอนเชิงลึกได้เพียงพอ เพื่อช่วยกำหนดรูปแบบการป้อนข้อมูลช่วงให้แสดงผลอย่างสม่ำเสมอ แทนที่จะต้องค้นหาแหล่งข้อมูลต่างๆ มากมาย จุดประสงค์เบื้องหลังโพสต์บล็อกนี้คือการจัดหาร้านค้าแบบครบวงจรสำหรับการเรียนรู้วิธีจัดรูปแบบอินพุตช่วงอย่างเหมาะสมซึ่งจะดูสอดคล้องกันในทุกเบราว์เซอร์ เป็นบทความที่ฉันหวังว่าจะมีเมื่อต้องทำสิ่งนี้ด้วยตัวเอง และฉันหวังว่ามันจะช่วยให้กระบวนการนี้เร็วขึ้นและราบรื่นขึ้นสำหรับคุณ

กายวิภาคของอินพุตช่วง

ช่วงอินพุตประกอบด้วยสองส่วนหลัก:

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

จัดแต่งทรงผม The Track

เมื่อจัดรูปแบบแทร็ก (และนิ้วหัวแม่มือ) เราจะต้องกำหนดเป้าหมายเบราว์เซอร์ที่แตกต่างกันคำนำหน้าผู้ขายเฉพาะเพื่อใช้สไตล์ที่เหมาะสมในองค์ประกอบที่เกี่ยวข้อง นับจากนี้เป็นต้นไป องค์ประกอบเทียมใดๆ ที่นำหน้าด้วย -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 pseudo-element คือ -webkit-appearance: none; คำนำหน้าผู้ขาย เราใช้คุณสมบัตินี้ภายในส่วน "รูปแบบพื้นฐาน" เพื่อแทนที่รูปแบบเริ่มต้นทั่วไปที่ใช้โดยเบราว์เซอร์และให้บริการเพื่อจุดประสงค์ที่คล้ายคลึงกันบนนิ้วหัวแม่มือ

เมื่อนำสไตล์เริ่มต้นออกแล้ว เราก็สามารถใช้สไตล์ที่กำหนดเองได้ สมมติว่าเราใช้ height , width และ background-color กับนิ้วหัวแม่มือ นี่คือตัวอย่างของสิ่งที่เราจะมีจนถึงตอนนี้:

ตามค่าเริ่มต้น เบราว์เซอร์ WebKit จะแสดงนิ้วหัวแม่มือเพื่อไม่ให้อยู่ตรงกลางแทร็ก

เพื่อให้นิ้วโป้งอยู่ตรงกลางแทร็กได้อย่างเหมาะสม เราสามารถใช้สูตรต่อไปนี้และนำไปใช้กับคุณสมบัติ margin-top :

margin-top = (ความสูงของแทร็กเป็นพิกเซล / 2) - (ความสูงนิ้วหัวแม่มือเป็นพิกเซล / 2)

การนำสไตล์ที่เรานำไปใช้ในส่วนก่อนหน้าและแปลง rems เป็นพิกเซล เราจะมีความสูงของแทร็กที่ 8px และความสูงของนิ้วโป้งที่ 32px นี่จะหมายความว่า:

ขอบบน = (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

เมื่อใช้สไตล์กับนิ้วหัวแม่มือใน Firefox คุณจะต้องใช้ประโยชน์จาก ::-moz-range-thumb pseudo-element โชคดีที่ Firefox ไม่มีปัญหาเรื่องศูนย์กลางเช่นเดียวกับเบราว์เซอร์ Webkit อย่างไรก็ตาม มีหนึ่ง gotcha อยู่รอบ ๆ รัศมีเส้นขอบเริ่มต้นและเส้นขอบสีเทาที่ใช้กับนิ้วหัวแม่มือ

เพื่อแก้ไขเส้นขอบสีเทาเริ่มต้น เราสามารถเพิ่ม border: none; คุณสมบัติ. หากต้องการลบ border-radius เริ่มต้นที่ใช้ เราสามารถเพิ่ม 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 pseudo-elements

โฟกัสสไตล์

เนื่องจากช่วงอินพุตเป็นองค์ประกอบแบบโต้ตอบ จึงจำเป็นต้องเพิ่มรูปแบบการโฟกัสเพื่อให้สอดคล้องกับแนวทางปฏิบัติและมาตรฐานการช่วยสำหรับการเข้าถึง เมื่อนำรูปแบบโฟกัสไปใช้ รูปแบบนี้จะให้ตัวบ่งชี้ที่มองเห็นได้สำหรับผู้ใช้ และมีความสำคัญอย่างยิ่งต่อผู้ที่ใช้แป้นพิมพ์เพื่อนำทางไปยังหน้า

ตามเอกสาร 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 ที่ฉันสร้างขึ้นซึ่งเรียกว่า range-input.css ปมของโครงการนี้คือการสร้างเครื่องมือที่ทำให้กระบวนการนี้ง่ายขึ้นสำหรับนักพัฒนา ตัวสร้าง CSS ช่วยให้คุณจัดรูปแบบคุณสมบัติ CSS ทั่วไปได้อย่างรวดเร็ว และมีแถบเลื่อนสาธิตที่แสดงตัวอย่างสไตล์ที่คุณต้องการใช้แบบเรียลไทม์

หวังว่าอินพุทช่วงการจัดสไตล์จะง่ายขึ้นในอนาคต อย่างไรก็ตาม จนกว่าจะถึงวันนั้น การรู้ว่าองค์ประกอบหลอกและคำนำหน้าผู้ขายใดที่จะกำหนดเป้าหมาย จะช่วยให้คุณทำงานได้ดีในการกำหนดสไตล์ตัวเลื่อนให้เหมาะกับความต้องการของคุณ

แหล่งข้อมูลเพิ่มเติมเกี่ยวกับ Smashing Magazine

• CSS Generators
• ลดความซับซ้อนของรูปแบบรูปแบบด้วย accent-color
• โซลูชัน CSS อัจฉริยะสำหรับความท้าทาย UI ทั่วไป
• เจาะลึกเข้าไปใน object-fit และ background-size ใน CSS