เมื่อสร้างเว็บ เป็นเรื่องง่ายที่จะพัฒนาวิสัยทัศน์แบบอุโมงค์และสร้างเพื่อตัวคุณเองเท่านั้น คุณอาจมองข้ามความต้องการที่หลากหลายของผู้ชมและมุ่งเน้นไปที่การตั้งค่าของคุณและรูปลักษณ์ของเบราว์เซอร์ที่คุณต้องการเท่านั้น ซึ่งอาจทำให้คุณพลาดฟังก์ชันการทำงานที่สำคัญและนำไปสู่ปัญหาความเข้ากันได้บนเบราว์เซอร์อื่นๆ ในอนาคต
ในบทความนี้ เราจะเจาะลึกถึงกลยุทธ์เชิงปฏิบัติเพื่อให้บรรลุความเข้ากันได้ข้ามเบราว์เซอร์ โดยเน้นที่ส่วนประกอบ UI ที่เฉพาะเจาะจง เช่น องค์ประกอบของแบบฟอร์ม แถบเลื่อน และแบบอักษร จากนั้นเราจะหารือเกี่ยวกับแนวทางปฏิบัติที่ดีที่สุดทั่วไปที่นักพัฒนาเว็บทุกคนควรนำมาใช้
“โปรดจำไว้ว่าคุณไม่ใช่ผู้ใช้ของคุณ — เพียงเพราะเว็บไซต์ของคุณใช้งานได้บน MacBook Pro หรือ Galaxy Nexus ระดับไฮเอนด์ ไม่ได้หมายความว่าเว็บไซต์นั้นจะใช้ได้กับผู้ใช้ของคุณทุกคน!” – เอกสารเว็บ MDN
สารบัญ
- ความเข้ากันได้ข้ามเบราว์เซอร์คืออะไร
- ปัญหาและวิธีแก้ไขข้ามเบราว์เซอร์ทั่วไป
- แนวทางปฏิบัติที่ดีที่สุดสำหรับความเข้ากันได้ข้ามเบราว์เซอร์
- บทสรุป
กล่าวง่ายๆ ก็คือ ความเข้ากันได้ข้ามเบราว์เซอร์นั้นเกี่ยวกับการรับประกันว่าเว็บไซต์ของคุณมอบประสบการณ์ที่ยอดเยี่ยมและสม่ำเสมอสำหรับผู้ใช้ทุกคน โดยไม่คำนึงถึงตัวเลือกเบราว์เซอร์ของพวกเขา
เบราว์เซอร์ใช้เอ็นจิ้นต่างกัน ดังนั้นตามค่าเริ่มต้นแล้วจะแสดงผลเว็บไซต์ต่างกัน เพื่อให้เว็บไซต์ของคุณมีรูปลักษณ์และทำงานเหมือนเดิมไม่ว่าผู้ใช้จะใช้เบราว์เซอร์ใดก็ตาม จำเป็นต้องมีความเข้าใจในความสามารถเฉพาะตัวของเบราว์เซอร์
ความเข้ากันได้ข้ามเบราว์เซอร์บอกว่าตามหลักการแล้ว เว็บไซต์ควรมีลักษณะและทำงานเหมือนกันไม่ว่าจะมีคนดูบน Chrome, Microsoft Edge และ Opera (ขับเคลื่อนโดย Blink engine), Firefox (ขับเคลื่อนโดย Gecko engine) หรือแม้แต่ Safari (ขับเคลื่อนโดย WebKit engine)
ประโยชน์ของความเข้ากันได้ข้ามเบราว์เซอร์:
- การเข้าถึงที่กว้างขึ้น – ผู้ใช้สามารถเข้าถึงเว็บไซต์ของคุณได้มากขึ้น ไม่ว่าพวกเขาจะใช้เบราว์เซอร์ใดก็ตาม
- ประสบการณ์ผู้ใช้ที่สอดคล้องกัน – เว็บไซต์ของคุณมีรูปลักษณ์และฟังก์ชันการทำงานที่เหมือนกันในทุกแพลตฟอร์ม
- การปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือการค้นหา (SEO) ดีขึ้น – เว็บไซต์ของคุณได้รับอันดับที่สูงขึ้นจากการเป็นมิตรกับผู้ใช้มากขึ้น
ปัญหาและวิธีแก้ไขข้ามเบราว์เซอร์ทั่วไป
อินโฟกราฟิกแสดงผลการทดสอบหน้าเว็บบนเบราว์เซอร์ต่างๆ เครดิตรูปภาพ Browserstack
องค์ประกอบของแบบฟอร์ม
ลักษณะที่ปรากฏและการทำงานขององค์ประกอบแบบฟอร์ม เช่น 04 , 11 , 26 และ 31 อาจแตกต่างกันอย่างมากในเบราว์เซอร์ สิ่งนี้ส่งผลต่อทั้งรูปลักษณ์และการใช้งานแบบฟอร์ม รวมถึงวิธีที่ผู้ใช้โต้ตอบกับแบบฟอร์ม (เช่น การคลิก การโฟกัส และการพิมพ์)
ตัวอย่างเช่น ข้อความตัวยึดตำแหน่งใน 43 ช่องต่างๆ อาจปรากฏจางกว่าในเบราว์เซอร์หนึ่งและเด่นชัดกว่าในอีกเบราว์เซอร์หนึ่ง ซึ่งนำไปสู่ปัญหาด้านความสามารถในการอ่าน
หากต้องการแก้ไขปัญหานี้:
- ใช้ CSS เพื่อสร้างมาตรฐานให้กับรูปลักษณ์ขององค์ประกอบแบบฟอร์มให้ได้มากที่สุด
- สำหรับตัวยึดตำแหน่ง ตรวจสอบให้แน่ใจว่ามีความคมชัดและความชัดเจนในเบราว์เซอร์:
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #909090;
opacity: 1; /* Firefox */
}
input.studentid:-ms-input-placeholder { /* Microsoft Edge */
color: #909090;
}
โค้ด CSS ด้านบนกำหนดเป้าหมายข้อความตัวยึดตำแหน่งในช่องป้อนข้อมูลทั่วเบราว์เซอร์ ตั้งค่าสีเป็น #909090 และรับประกันความทึบเต็มที่เพื่อการมองเห็นที่สอดคล้องกัน (ด้วยกฎเฉพาะสำหรับ Microsoft Edge)
แบบอักษร
แบบอักษรและการพิมพ์เผชิญกับปัญหาความเข้ากันได้ข้ามเบราว์เซอร์หลายประการ ตั้งแต่ขนาดแบบอักษรเริ่มต้นที่แตกต่างกันไปจนถึงความแตกต่างในกลไกการแสดงผลแบบอักษร ซึ่งอาจส่งผลต่อน้ำหนัก ระยะห่าง และลักษณะโดยรวมของข้อความ
แบบอักษรอาจดูบางลงและมีระยะห่างมากขึ้นใน Chrome เมื่อเทียบกับ Edge ซึ่งส่งผลต่อความสามารถในการอ่านและความสอดคล้องของการออกแบบ
หากต้องการแก้ไขปัญหานี้:
- กำหนดขนาดแบบอักษรพื้นฐานใน CSS ของคุณและใช้หน่วยสัมพันธ์ (เช่น
56หรือ62 ) สำหรับการกำหนดขนาดข้อความตามที่แสดงในโค้ดด้านล่าง ซึ่งช่วยรักษาความสามารถในการปรับขนาดและความสม่ำเสมอ
html {
font-size: 16px; /* Define a base font size */
}
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.6;
color: #333;
}
h1, h2, h3, p {
margin: 2rem;;
padding: 1.5rem;
}
- เมื่อใช้แบบอักษรบนเว็บ ตรวจสอบให้แน่ใจว่าได้โหลดอย่างถูกต้องในทุกเบราว์เซอร์โดยใช้บริการเช่น Google Fonts ซึ่งให้การโหลดแบบอักษรที่เข้ากันได้กับเบราว์เซอร์:
<link href="<https://fonts.googleapis.com/css?family=Open+Sans&display=swap>" rel="stylesheet">
- โค้ดด้านล่างช่วยให้แน่ใจว่าแบบอักษร 'Open Sans' มีลักษณะเหมือนกันบนเว็บไซต์ของเรา ไม่ว่าจะเป็นเบราว์เซอร์ใดก็ตาม โดยดำเนินการนี้ก่อนโดยใช้เวอร์ชันของแบบอักษรที่อาจมีอยู่แล้วในคอมพิวเตอร์ของเราเพื่อให้โหลดสิ่งต่างๆ ได้เร็วขึ้น มิฉะนั้นจะดึงมาจากอินเทอร์เน็ต แต่จะสลับเป็นแบบอักษรเริ่มต้นในขณะที่รอให้โหลดแบบหลัง
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(<https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2>) format('woff2');
}
แถบเลื่อน
การจัดสไตล์แถบเลื่อนถือเป็นความท้าทายสำหรับนักพัฒนาเว็บมาอย่างยาวนานเนื่องจากการรองรับเบราว์เซอร์ต่างๆ ที่ไม่สอดคล้องกัน แม้ว่าเบราว์เซอร์อย่าง Chrome, Safari และ Edge มีวิธีปรับแต่งแถบเลื่อนโดยใช้ CSS แต่ระดับการสนับสนุนและวิธีการใช้งานจะแตกต่างกันไป
การอัปเดตล่าสุดได้เห็นการปรับปรุงในการกำหนดมาตรฐานแถบเลื่อน โดยเบราว์เซอร์สมัยใหม่ส่วนใหญ่ใช้ความสามารถที่คล้ายคลึงกัน แต่แนวทางยังคงมีความแตกต่างบางประการ:
สำหรับ Chrome, Edge และ Firefox คุณสามารถใช้ CSS 76 ได้ และ 83 คุณสมบัติเพื่อปรับแต่งรูปลักษณ์ของแถบเลื่อน สิ่งเหล่านี้เป็นส่วนหนึ่งของมาตรฐานใหม่ที่มีจุดมุ่งหมายเพื่อให้มีวิธีการจัดรูปแบบแถบเลื่อนที่สอดคล้องกันมากขึ้นในเบราว์เซอร์ต่างๆ ที่รองรับ
/* For Chrome, Firefox, and Edge */
scrollbar-width: thin;
scrollbar-color: #c0c0c0 #f0f0f0;
สำหรับซาฟารี ซึ่งใช้เอ็นจิ้นการเรนเดอร์ WebKit คุณจะต้องใช้ 94 องค์ประกอบหลอกเพื่อให้ได้สไตล์ที่คล้ายกัน วิธีการนี้ใช้ได้เฉพาะกับเบราว์เซอร์ที่ใช้ WebKit
/* For Safari */
.mostly-customized-scrollbar::-webkit-scrollbar {
width: 5px;
height: 8px;
background-color: #aaa; /* or add it to the track */
}
โค้ด CSS ด้านบนปรับแต่งลักษณะที่ปรากฏของแถบเลื่อนในเบราว์เซอร์เหล่านั้นโดยการปรับขนาดและสี
แต่เพื่อความสอดคล้องกันในทุกเบราว์เซอร์ คุณจะต้องออกแบบหน้าเว็บของคุณในลักษณะที่รูปลักษณ์ของแถบเลื่อนเริ่มต้นไม่ส่งผลเสียต่อการออกแบบของคุณ
แนวทางปฏิบัติที่ดีที่สุดสำหรับความเข้ากันได้ข้ามเบราว์เซอร์
อินโฟกราฟิกแสดงเครื่องมือวัด เครดิตรูปภาพ Creative Bloq
กำหนดประเภทเอกสาร
เริ่มต้นเอกสาร HTML ของคุณด้วย 109 ประกาศเพื่อให้แน่ใจว่าโหมดมาตรฐานเปิดใช้งานอยู่
นี่เป็นสิ่งสำคัญเนื่องจากจะบอกเว็บเบราว์เซอร์ว่าหน้าเว็บนั้นเขียนเวอร์ชัน HTML ใด หากไม่มีเบราว์เซอร์อาจแสดงผลหน้าเว็บใน "โหมดที่ไม่คุ้นเคย" โดยที่เบราว์เซอร์จะถือว่าคุณได้เขียนโค้ดเก่าที่ไม่ได้มาตรฐาน สิ่งนี้นำไปสู่ปัญหาด้านสไตล์และเลย์เอาต์ที่คาดเดาไม่ได้ในที่สุด เนื่องจากมาตรฐานเว็บสมัยใหม่ยังไม่ได้ใช้อย่างเต็มที่
117 การประกาศใน HTML5 มีลักษณะเช่นนี้ที่จุดเริ่มต้นของไฟล์ HTML ของคุณ:
<!DOCTYPE html>
ใช้การรีเซ็ต CSS
โดยทั่วไปแล้ว การรีเซ็ต CSS จะเป็นการเพิ่มชุดกฎที่กำหนดเป้าหมายองค์ประกอบทั่วไปเพื่อลบสไตล์เริ่มต้น ซึ่งจะช่วยลดความคลาดเคลื่อนของค่าเริ่มต้นของเบราว์เซอร์
เบราว์เซอร์ต่างๆ มีสไตล์ที่แตกต่างกันสำหรับองค์ประกอบ HTML เช่น ระยะขอบ ช่องว่างภายใน ขนาดแบบอักษร และอื่นๆ ดังนั้นการใช้การรีเซ็ต CSS ทำให้แน่ใจว่าเฉพาะสไตล์ที่คุณเขียนในโค้ดของคุณเท่านั้นที่จะมีผล สิ่งนี้นำไปสู่พื้นฐานที่สอดคล้องกันสำหรับการจัดรูปแบบหน้าเว็บของคุณในเบราว์เซอร์ต่างๆ
มีนักพัฒนาหลายคนที่ชอบเขียนตั้งแต่เริ่มต้น และมีคนอื่นๆ เช่นฉันที่ใช้การรีเซ็ต CSS ฟรียอดนิยมของ Eric Meyer ดังที่คุณเห็นในโค้ดด้านล่าง:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
มีนักพัฒนาอีกกลุ่มหนึ่งที่ใช้ Normalize.css ซึ่งคุณสามารถติดตั้งโดยใช้ตัวจัดการแพ็คเกจเช่น npm แล้วนำเข้าใน CSS ของคุณ
npm install normalize.css
ตรวจสอบการสนับสนุนคุณสมบัติ CSS
ก่อนที่จะใช้คุณสมบัติ CSS ขั้นสูง โปรดตรวจสอบความเข้ากันได้บนเว็บไซต์เช่น Can I Use คุณจะพบตารางความเข้ากันได้โดยละเอียดสำหรับคุณสมบัติ HTML, CSS และ JavaScript ในเบราว์เซอร์และเวอร์ชันต่างๆ สิ่งนี้จะช่วยให้คุณมีข้อมูลประกอบการตัดสินใจว่าควรใช้เทคโนโลยีใดและเมื่อใดจึงควรใช้ทางเลือกสำรอง
ในภาพหน้าจอด้านล่าง ฉันค้นหา CSS Grid และได้เห็นเบราว์เซอร์ต่างๆ และเวอร์ชันที่รองรับทันที ดังนั้นก่อนที่จะใช้ CSS Grid บนหน้าเว็บของฉัน ฉันมีไอเดียเกี่ยวกับเบราว์เซอร์ที่ใช้งานได้
ความเข้ากันได้ของเบราว์เซอร์สำหรับ CSS Grid
สร้างเว็บไซต์ที่ตอบสนอง
โลกที่เต็มไปด้วยอุปกรณ์หลากหลายที่เราอาศัยอยู่ในปัจจุบันนั้นในฐานะนักพัฒนาเว็บ เราให้ความสำคัญกับการตอบสนองเป็นอันดับแรก
เราสามารถใช้เลย์เอาต์ที่ลื่นไหล ภาพที่ยืดหยุ่น และคำสั่งสื่อเพื่อให้แน่ใจว่าเว็บไซต์ของเราจะปรับให้เข้ากับขนาดหน้าจอใดก็ได้ ผลกระทบระลอกคลื่นของการตอบสนองที่ถูกต้องคือความเข้ากันได้ข้ามเบราว์เซอร์ การเข้าถึง และประสบการณ์ผู้ใช้ที่ได้รับการปรับปรุง
ต่อไปนี้เป็นบทความที่พูดถึงแนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์และวิธีนำไปใช้
ทำการทดสอบข้ามเบราว์เซอร์
การทดสอบกลายเป็นคำศัพท์ที่นิยมในการเขียนโปรแกรมในช่วงหลังๆ นี้ แต่นี่เป็นสิ่งสำคัญมากที่จะต้องแน่ใจว่าโค้ดที่คุณเขียนทำงานได้ตามที่คาดหวัง
ไม่ใช่แค่ตรวจสอบว่าโค้ด TypeScript ของคุณทำงานได้อย่างราบรื่นหรือไม่ แม้แต่โครงการเว็บที่เรียบง่ายกว่าก็ยังต้องมีการทดสอบอย่างละเอียด
การทดสอบข้ามเบราว์เซอร์หมายถึงการลองใช้หน้าเว็บของคุณบนเบราว์เซอร์และอุปกรณ์ต่างๆ เพื่อให้แน่ใจว่าหน้าเว็บเหล่านั้นดูและทำงานสอดคล้องกัน
บทสรุป
ความเข้ากันได้ข้ามเบราว์เซอร์อาจต้องออกเสียงคำหนึ่ง แต่อย่างที่เราได้เห็นไปแล้ว การพิจารณาเมื่อสร้างเว็บไซต์ถือเป็นสิ่งสำคัญ และคุณสามารถค่อยๆ ทำให้เว็บไซต์ของคุณเข้ากันได้โดยการทดสอบและปรับแต่งโค้ดของคุณ และใช้แนวทางปฏิบัติที่ดีที่สุดห้าข้อที่เราได้กล่าวถึงข้างต้น
ดังนั้น ก่อนที่คุณจะปิดม่านบนเว็บไซต์หรือเว็บแอปถัดไป อย่าลืมตรวจสอบว่าผู้ใช้ของคุณบน Chrome, Firefox, Safari และเบราว์เซอร์อื่นๆ เห็นและประสบปัญหาแบบเดียวกันหรือไม่
ต่อไปนี้เป็นแหล่งข้อมูลที่เป็นประโยชน์:
- MDN Web Docs เกี่ยวกับความเข้ากันได้ข้ามเบราว์เซอร์
- เอกสารโค้ดเกี่ยวกับความสำคัญของความเข้ากันได้ข้ามเบราว์เซอร์
- Eric Meyer เกี่ยวกับการรีเซ็ต CSS
เรียนรู้การเขียนโค้ดฟรี หลักสูตรโอเพ่นซอร์สของ freeCodeCamp ช่วยให้ผู้คนมากกว่า 40,000 คนได้งานในตำแหน่งนักพัฒนา เริ่มต้น
