คำนำหน้าผู้ขาย CSS

สิ่งที่พวกเขาและเหตุผลที่คุณควรใช้พวกเขา

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

เมื่อ CCS3 ได้รับการเปิดตัวเป็นครั้งแรกคุณสมบัติตื่นเต้นจำนวนมากเริ่มตีเบราว์เซอร์ต่างๆในเวลาที่ต่างกัน ตัวอย่างเช่นเบราว์เซอร์ที่ใช้เว็บคิท (Safari และ Chrome) เป็นคนแรกที่แนะนำคุณสมบัติในการเคลื่อนไหวบางอย่างเช่นการแปลงและการเปลี่ยนภาพ ด้วยการใช้คุณสมบัตินำเสนอของผู้จัดจำหน่ายนักออกแบบเว็บสามารถใช้คุณลักษณะใหม่ ๆ เหล่านี้ในผลงานของตนและทำให้พวกเขาเห็นในเบราว์เซอร์ที่สนับสนุนพวกเขาได้ทันทีแทนที่จะต้องรอให้ผู้ผลิตเบราว์เซอร์อื่น ๆ ทุกคนสามารถติดตามได้!

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

เบราว์เซอร์ CSS ที่มีคำนำหน้าซึ่งคุณสามารถใช้ (ซึ่งแต่ละส่วนมีลักษณะเฉพาะสำหรับเบราว์เซอร์อื่น) ได้แก่

• Android: -webkit-
• Chrome: -webkit-
• Firefox: -moz-
• Internet Explorer: -ms-
• iOS: -webkit-
• โอเปร่า: -o-
• Safari: -webkit-

ในกรณีส่วนใหญ่หากต้องการใช้แบรนด์ CSS สไตล์ใหม่ให้ใช้คุณสมบัติ CSS มาตรฐานและเพิ่มคำนำหน้าสำหรับแต่ละเบราว์เซอร์ เวอร์ชันคำนำหน้าจะมาก่อนเสมอ (ตามลำดับที่คุณต้องการ) ในขณะที่คุณสมบัติ CSS ปกติจะมาถึงก่อน ตัวอย่างเช่นหากคุณต้องการเพิ่มการเปลี่ยนแปลง CSS3 ลงในเอกสารของคุณคุณจะใช้คุณสมบัติการเปลี่ยนภาพดังที่แสดงด้านล่าง:

- webkit เปลี่ยน: ความสะดวกสบายทั้งหมด 4s;
-moz- transition: ทั้งหมด 4s ง่าย;
-ms- การเปลี่ยนแปลง: ความสะดวกสบายทั้งหมด 4s;
- การเปลี่ยนแปลง: ความสะดวกสบายทั้งหมด 4s;
การเปลี่ยนแปลง: ความสะดวกสบายทั้งหมด 4s;

หมายเหตุ: โปรดจำไว้ว่าเบราว์เซอร์บางแห่งมีไวยากรณ์ที่แตกต่างจากคุณสมบัติอื่น ๆ กว่าดังนั้นจึงไม่ควรสมมติว่าพร็อพเพอร์ตี้เวอร์ชันก่อนหน้าของเบราว์เซอร์มีคุณสมบัติตรงกับพร็อพเพอร์ตี้มาตรฐาน ตัวอย่างเช่นในการสร้าง CSS gradient คุณจะใช้คุณสมบัติ linear-gradient Firefox, Opera และ Chrome เวอร์ชันใหม่และ Safari ใช้คุณสมบัติดังกล่าวพร้อมคำนำหน้าที่เหมาะสมในขณะที่ Chrome และ Safari เวอร์ชันต้นใช้คุณสมบัตินำหน้า - webkit-gradient นอกจากนี้ Firefox ยังใช้ค่าต่างๆมากกว่าค่ามาตรฐาน

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

คำนำหน้าผู้ขายไม่ใช่สับ

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

แฮ็ก CSS ใช้ประโยชน์จากข้อบกพร่องในการใช้องค์ประกอบหรือพร็อพเพอร์ตี้อื่นเพื่อให้คุณสมบัติอื่นทำงานได้อย่างถูกต้อง ตัวอย่างเช่นแฮ็กรุ่นของกล่องใช้ประโยชน์จากข้อบกพร่องในการแยกวิเคราะห์คุณสมบัติ เสียงครอบครัว หรือวิธีเบราว์เซอร์แยกวิเคราะห์เครื่องหมายทับขวา (\) แต่การแฮ็กเหล่านี้ใช้เพื่อแก้ไขปัญหาเกี่ยวกับความแตกต่างระหว่างวิธีการที่ Internet Explorer 5.5 จัดการกับโมเดลกล่องและวิธีการตีความคำอธิบายของ Netscape และไม่มีส่วนเกี่ยวข้องกับสไตล์ครอบครัวเสียง Thankfully ทั้งสองเบราว์เซอร์ที่ล้าสมัยเป็นคนที่เราไม่ได้มีความกังวลตัวเองกับวันนี้

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

ต้องการทราบว่าเบราว์เซอร์สนับสนุนคุณลักษณะใดบ้าง เว็บไซต์ CanIUse.com เป็นแหล่งข้อมูลที่ยอดเยี่ยมสำหรับการรวบรวมข้อมูลนี้และแจ้งให้คุณทราบว่าเบราว์เซอร์ใดและเบราว์เซอร์รุ่นใดที่รองรับคุณลักษณะนี้

คำนำหน้าผู้ขายกำลังน่ารำคาญ แต่ชั่วคราว

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

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
รัศมีขอบ: 10px 5px;

แต่ตอนนี้เบราว์เซอร์ที่มีมาเต็มสนับสนุนคุณลักษณะนี้คุณจริงๆต้องรุ่นมาตรฐาน:

รัศมีขอบ: 10px 5px;

Chrome ได้สนับสนุนคุณสมบัติ CSS3 ตั้งแต่เวอร์ชัน 5.0 Firefox เพิ่มไว้ในเวอร์ชัน 4.0 Safari เพิ่มไว้ใน 5.0 Opera ใน 10.5 iOS ใน 4.0 และ Android ใน 2.1 แม้ Internet Explorer 9 สนับสนุนโดยไม่มีคำนำหน้า (และ IE 8 และต่ำกว่าไม่สนับสนุนโดยมีหรือไม่มีคำนำหน้า)

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