ถึงเวลาที่จะคิดใหม่เกี่ยวกับคำนำหน้าผู้ขายใน CSS คำนำหน้าเฉพาะเบราว์เซอร์

จากผู้เขียน:คำนำหน้า -webkit- นั้นพบเห็นได้ทั่วไปใน CSS ในปัจจุบัน จนบางเว็บไซต์ปฏิเสธที่จะทำงานอย่างถูกต้องหากไม่มีมัน แม้ว่าคำนำหน้า css ของผู้ขายจะเป็นสัญญาณที่ชัดเจนถึงคุณสมบัติที่ไม่ค่อยสมบูรณ์แบบสำหรับนักพัฒนาในช่วงสองสามปีที่ผ่านมา สิ่งนี้ทำให้ Mozilla ก้าวไปสู่ขั้นตอนที่สิ้นหวังแต่จำเป็น ใน Firefox 46 หรือ 47 (เปิดตัวในเดือนเมษายนหรือพฤษภาคม 2559) Mozilla วางแผนที่จะแนะนำการสนับสนุนสำหรับชุดคำนำหน้า webkit ที่ไม่ได้มาตรฐานเพื่อปรับปรุงความเข้ากันได้ของเบราว์เซอร์กับคำนำหน้านั้น (แม้แต่บนอุปกรณ์มือถือ)

แนวคิดนี้ไม่ใช่เรื่องใหม่ Microsoft Edge ยังรองรับคำนำหน้า -webkit- ต่างๆ เพื่อความเข้ากันได้ Opera เริ่มรองรับคำนำหน้า -webkit- ในปี 2012 จากนั้นจึงเปลี่ยนมาใช้ Webkit Blink engine นักพัฒนา W3C และเบราว์เซอร์ไม่ได้วางแผนที่จะใช้คำนำหน้านี้ในการพัฒนาเว็บไซต์:

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

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

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

คำนำหน้าใหม่

Mozilla กำลังจะรวมคำนำหน้า –webkit- จำนวนหนึ่งไว้ด้วย จากสิ่งที่ฉันรวบรวม ดูเหมือนว่า Mozilla ไม่มีความตั้งใจที่จะจับคู่รายการกับคุณสมบัติของ Edge คุณสมบัติบางอย่างไม่จำเป็นต้องเข้ากันได้กับกลไก Mozilla ในบรรดาคำนำหน้าที่ Mozilla จะเพิ่ม ซึ่งตัดสินโดยหน้าวิกิความเข้ากันได้/มือถือ/ไม่ใช่มาตรฐาน มีดังต่อไปนี้:

Webkit - สำหรับการไล่ระดับสี

Webkit-การแปลง

Webkit-การเปลี่ยนแปลง

ลักษณะที่ปรากฏของ Webkit

Webkit-พื้นหลัง-คลิป

Webkit-อุปกรณ์-อัตราส่วนพิกเซล

Webkit-แอนิเมชั่น

คุณสมบัติอื่นๆ บางอย่างอาจอยู่ใน @-webkit-keyframes

การทดสอบข้ามเบราว์เซอร์จะมีความสำคัญ

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

หากต้องการทดสอบเว็บไซต์ของคุณโดยไม่ต้องรอ Firefox 46/47 คุณสามารถเปิดใช้งานการเปลี่ยนแปลงเหล่านี้ใน Firefox Nightly ได้โดยการตั้งค่าlayout.css.prefixes.webkitใน about:config หากคุณติดตั้ง Nightly เวอร์ชันล่าสุดไว้ ค่าเริ่มต้นควรเป็นจริง การเปลี่ยนแปลงคำนำหน้า -webkit- บางส่วนอาจไม่ทำงานใน Firefox Nightly แต่ก็ยังเป็นสถานที่ที่ดีในการทดสอบว่าเว็บไซต์ของคุณจะมีลักษณะอย่างไรในเร็วๆ นี้ ฉันจะรอจนถึงเดือนมีนาคมก่อนที่จะทดสอบไซต์ใน Firefox Nightly อย่างจริงจัง

ที่สำคัญกว่านั้นมาก Microsoft Edge ตีความและแสดงคำนำหน้า -webkit- ในลักษณะเดียวกันแล้ว ซึ่งหมายความว่าสไตล์ WebKit บนเว็บไซต์ของคุณได้แสดงในเบราว์เซอร์ที่ไม่คาดคิดมาก่อนแล้ว หากคุณยังไม่ได้ทำงานกับเบราว์เซอร์นี้ ให้ติดตั้ง Windows 10 และเข้าถึงไซต์ทดสอบได้

คำนำหน้าผู้ขายจะค่อยๆหายไป

โชคดีที่คำนำหน้าผู้ขายค่อยๆ หายไปเมื่อทีมพัฒนาค้นหาโซลูชันใหม่ๆ ทีม Chrome/Blink เปลี่ยนแนวทางเล็กน้อย:

"นับจากนี้เป็นต้นไป แทนที่จะเปิดใช้งานคำนำหน้าผู้ขายตามค่าเริ่มต้น เราจะเก็บคุณสมบัติปกติไว้เบื้องหลังแฟล็ก 'เปิดใช้งานคุณสมบัติแพลตฟอร์มเว็บทดลอง' ใน about:flags จนกว่าคุณสมบัติเหล่านั้นจะถูกเปิดใช้งานตามค่าเริ่มต้น"— ทีมงาน Chrome/Blink

ทีมงาน Firefox ดำเนินตามเส้นทางที่คล้ายกัน: “ทิศทางหลักของการทำงานที่ Mozilla ในตอนนี้คือการย้ายออกจากคำนำหน้าของผู้ขาย โดยการปิดการใช้งานหรือโอนไปยังสถานะของคุณสมบัติปกติหากคำนำหน้าเหล่านั้นมีเสถียรภาพอยู่แล้ว นี่เป็นนโยบายทั่วไปของเราเป็นอย่างน้อย -— บอริสจาก Mozilla

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

การย่อยสลายอย่างค่อยเป็นค่อยไปโดยใช้คำนำหน้าไม่ทำงานอีกต่อไป

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

บทสรุป

กาลเวลาเปลี่ยนไป การครอบงำของ WebKit นั้นเกิดขึ้นโดยไม่ได้ตั้งใจและทำให้เกิดความปั่นป่วนและความไม่ลงรอยกันบนอินเทอร์เน็ต เบราว์เซอร์อื่นๆ ต้องการขยายความเข้ากันได้โดยเพิ่มคำนำหน้า –webkit- เมื่อคำนำหน้าผู้ขายหายไปทีละน้อย ปัญหานี้ก็จะหมดไปเช่นกัน นักพัฒนาควรตรวจสอบว่าการใช้คำนำหน้าไม่ก่อให้เกิดผลที่ไม่พึงประสงค์ในเบราว์เซอร์ที่ไม่ใช่ WebKit หรือไม่

คำนำหน้า -webkit- มีความโดดเด่นมากใน CSS ซึ่งบางไซต์อาจทำงานไม่ถูกต้องหากไม่มี สิ่งนี้บ่งชี้ว่านักพัฒนาไม่ได้ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดในช่วงไม่กี่ปีที่ผ่านมา และสิ่งนี้นำไปสู่การตัดสินใจที่โชคร้าย แต่เกือบจะถูกบังคับในส่วนของ Mozilla ใน Firefox เวอร์ชัน 46 หรือ 47 (นี่คือเดือนเมษายนหรือพฤษภาคม 2559) Mozilla วางแผนที่จะใช้การรองรับคำนำหน้า -webkit- ที่ไม่เป็นไปตามมาตรฐาน เพื่อปรับปรุงความเข้ากันได้ของ Firefox กับไซต์ที่ใช้งาน -webkit (โดยปกติจะเป็นไซต์ที่เน้นอุปกรณ์เคลื่อนที่เป็นอันดับแรก)

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

แนวทางของ Mozilla และ Microsoft นั้นปลอดภัยสำหรับไซต์ส่วนใหญ่ เว็บไซต์หลายแห่งจะใช้คำนำหน้า -moz- หรือไม่จำเป็นต้องมีการดำเนินการใด ๆ เพื่อให้เข้ากันได้กับการอัปเดต Firefox ในอนาคต แต่ในฐานะนักพัฒนาเว็บมืออาชีพ เราต้องพิจารณาอย่างรอบคอบและเข้าใจว่าสิ่งนี้จะส่งผลตามมาอย่างไร คุณคงทราบแล้วว่าไซต์ใดของคุณที่อาจได้รับผลกระทบจากการอัปเดตนี้

ดังนั้น ถึงเวลาที่จะต้องคิดใหม่เกี่ยวกับแนวทางการใช้คำนำหน้าและทดสอบไซต์ด้วยคำนำหน้าเหล่านี้

คำนำหน้าที่รองรับ

มีคำนำหน้า -webkit- หลายคำที่ Mozilla สามารถใช้ได้ จากสิ่งที่ฉันรวบรวม Mozilla มีแนวโน้มที่จะไม่จับคู่รายการคุณสมบัติคำนำหน้าที่รองรับกับ Edge's เนื่องจากไม่จำเป็นทั้งหมดสำหรับความเข้ากันได้ของกลไกโครงร่าง

นักพัฒนา Firefox ก็ใกล้เคียงกับแนวทางที่คล้ายกัน:

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

Microsoft Edge กำลังจะละทิ้งคำนำหน้าผู้ขายด้วย:

“Microsoft กำลังจะกำจัดคำนำหน้าผู้ขายใน Edge เช่นกัน ซึ่งหมายความว่านักพัฒนาที่ต้องการใช้คุณสมบัติเฉพาะของ HTML และ CSS จะไม่ใช้คำนำหน้าเฉพาะของ Edge แต่พวกเขาจะเขียนโค้ดตามมาตรฐานแทน” - Mashable

จะไม่มีการย่อยสลายแบบค่อยเป็นค่อยไปอีกต่อไปตามคำนำหน้า

การย้ายออกจากคำนำหน้าผู้ขายหมายถึงสิ่งหนึ่ง - การลดลงอย่างค่อยเป็นค่อยไปโดยใช้คำนำหน้าผู้ขายไม่มีโอกาส

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

บทสรุป

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

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

ลองดูคำถามสามข้อ:

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

ลองยกตัวอย่างที่แสดงให้เห็นว่าการใช้ผลลัพธ์ของบทเรียนของเรานั้นง่ายเพียงใด

ไฟล์ CSS ใช้ขีดล่างแทนคำนำหน้า:

รัศมีเส้นขอบ: 10px;

โค้ดสคริปต์จะสร้างรายการคุณสมบัติทั้งหมดพร้อมคำนำหน้า:

O-border-รัศมี: 10px; -moz-border-รัศมี: 10px; -webkit-ขอบรัศมี: 10px; รัศมีเส้นขอบ: 10px;

แท็กลิงก์หนึ่งโหลดไฟล์ CSS สามไฟล์พร้อมกัน สคริปต์ css.php อ่านไฟล์ที่แสดง (css_file1.css, css_file2.css และ css_file3.css) รวมเข้าด้วยกันและส่งกลับไฟล์เดียว

ตอนนี้เรามาดูกันว่าสคริปต์ทำงานอย่างไร

การเขียนโค้ด

สร้างไฟล์ css.php ด้วยรหัสต่อไปนี้:

ขั้นแรกสคริปต์จะได้รับรายการไฟล์ CSS ที่จะประมวลผลเป็นสตริงจากพารามิเตอร์ URL (มีใน PHP เป็น $_GET["f"]) แต่ละไฟล์จะถูกคั่นด้วยแถบแนวตั้ง ฟังก์ชัน explode() แยกสตริงที่อักขระไปป์และส่งกลับอาร์เรย์ของชื่อไฟล์

ฟังก์ชัน file_get_contents() รับเนื้อหาของแต่ละไฟล์ทีละไฟล์ และเราเพิ่มเนื้อหาเหล่านั้นลงในตัวแปร $contents

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

รูปภาพนี้อธิบายรูปแบบของนิพจน์ทั่วไป:

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

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

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

คุณสมบัติที่ตรงกับนิพจน์ทั่วไปจะถูกบีบอัดอย่างมาก:

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

การใช้สคริปต์

เรามายกตัวอย่างง่ายๆ ของการใช้สคริปต์ของเรากัน มาวางไฟล์ css.php ลงในไดเร็กทอรี css ของโปรเจ็กต์ของคุณพร้อมกับไฟล์ CSS สามไฟล์

ไฟล์ header.css ไฟล์แรก:

#header ( ความกว้าง: 800px; ความสูง: 100px; การขยาย: 20px; _border-radius: 10px; _box-shadow: 0px 0px 10px #000000; พื้นหลัง: _linear-gradient(#D30000, #3D0000); )

ไฟล์ที่สองคือ center.css:

#center ( ความกว้าง: 800px; ความสูง: 400px; การขยาย: 20px; ระยะขอบ: 20px 0px; _border-radius: 10px; _box-shadow: 0px 0px 10px #000000; พื้นหลัง: _linear-gradient(#8ED300, #213D00); )

ไฟล์ที่สามคือ footer.css:

#footer ( ความกว้าง: 800px; ความสูง: 100px; การขยาย: 20px; _border-radius: 10px; _box-shadow: 0px 0px 10px #000000; พื้นหลัง: _linear-gradient(#006ED3, #00203D); )

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

ตอนนี้เราสร้างไฟล์index.htmlที่ใช้สไตล์เหล่านี้

สังเกตแอตทริบิวต์ href ในแท็กลิงก์ ไฟล์ CSS แต่ละไฟล์จะถูกคั่นด้วยแถบแนวตั้ง

บทสรุป

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

ในบทความนี้ เราจะดูว่าคำนำหน้าเบราว์เซอร์คืออะไร เหตุใดจึงมีอยู่ และวิธีใช้งานใน CSS

คำนำหน้าคืออะไร?

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

ตัวอย่างเช่น เมื่อพิจารณารูปแบบของไซต์ นักพัฒนาเว็บอาจพบคุณสมบัติที่มีคำที่เข้าใจยากอยู่ข้างหน้า: -webkit-, -moz-, -ms- ฯลฯ

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; )

มันคืออะไร? ในความเป็นจริงทุกอย่างง่ายคำแปลก ๆ เหล่านี้เป็นคำนำหน้าของเบราว์เซอร์ต่อไปนี้:

• -webkit- : เบราว์เซอร์ Chrome, Safari, Opera;
• -moz- : เบราว์เซอร์ Mozilla Firefox;
• -ms- : เบราว์เซอร์ Internet Explorer

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

เหตุผลในการปรากฏตัวของคำนำหน้า?

มีเหตุผลหลายประการที่ทำให้คำนำหน้าปรากฏ:

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

เมื่อคุณสมบัติทดลองได้รับการอนุมัติในมาตรฐานและทดสอบในเบราว์เซอร์ ก็มักจะลบคำนำหน้าออก

จะใช้คำนำหน้าได้อย่างไร?

พิจารณาโค้ดต่อไปนี้เป็นตัวอย่าง:

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; )

รหัสนี้ใช้คุณสมบัติ CSS ที่เปลี่ยนอัลกอริธึมการคำนวณความกว้างและความสูงสำหรับองค์ประกอบทั้งหมดของหน้าเว็บ คุณสมบัติ CSS แรก -webkit-box-sizing พร้อมค่า border-box มีไว้สำหรับเบราว์เซอร์ที่ใช้กลไก webkit (Safari) หรือ Blink (Chrome, Opera, Yandex.Browser) คุณสมบัติ CSS ที่สอง -moz-box-sizing พร้อมค่า border-box มีไว้สำหรับเบราว์เซอร์ที่ใช้เครื่องมือ Gecko (Mozilla Firefox) คุณสมบัติ CSS สุดท้ายมีไว้สำหรับเบราว์เซอร์ที่ได้รับการทดสอบและใช้งานคุณสมบัติตามมาตรฐานแล้ว

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

ตัวอย่างเช่น: การใช้คุณสมบัติ CSS กับองค์ประกอบทั้งหมดของหน้าเว็บใน Google Chrome เวอร์ชัน 40

ในภาพด้านบน คุณจะเห็นว่าคุณสมบัติ box-sizing ดั้งเดิมได้ถูกนำมาใช้แล้วในเบราว์เซอร์นี้ และเนื่องจากคุณสมบัติดังกล่าวมาทีหลัง เบราว์เซอร์จึงใช้คุณสมบัตินี้แทนคุณสมบัติ -webkit-box-sizing ด้านบน

จะตรวจสอบการสนับสนุนคุณสมบัติเฉพาะในเบราว์เซอร์ได้อย่างไร?

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

ตัวอย่างเช่น เรามาตรวจสอบว่าคุณสมบัติการแปลงถูกนำมาใช้ในเบราว์เซอร์อย่างไร

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

• สี่เหลี่ยมสีแดงคือเบราว์เซอร์ที่ไม่มีการใช้คุณสมบัตินี้
• สี่เหลี่ยมสีเขียวที่มียัติภังค์อยู่ที่มุมขวาบนคือเบราว์เซอร์ที่ใช้คุณสมบัตินี้ผ่านคำนำหน้า
• สี่เหลี่ยมสีเขียวอ่อนคือเบราว์เซอร์ที่มีการนำคุณสมบัตินี้ไปใช้บางส่วน
• สี่เหลี่ยมสีเขียวคือเบราว์เซอร์ที่มีการนำคุณสมบัตินี้ไปใช้ตามมาตรฐาน