การเปลี่ยนและการคุ้มครองข้อมูลใน CSS
พร็อพเพอร์ตี้ที่กำหนดเองของ CSS หรือที่เรียกว่าตัวแปร CSS ให้คุณกำหนดพร็อพเพอร์ตี้ของคุณเองใน CSS และใช้ค่าของพร็อพเพอร์ตี้นั้นทั่วทั้ง CSS แม้ว่าจะมีประโยชน์อย่างยิ่งในปัจจุบัน แต่ก็มีจุดบกพร่องที่ทำให้ใช้งานยาก คืออาจมีคุณค่ามากจนถูกลบล้างด้วยสิ่งที่ไม่คาดคิดโดยไม่ได้ตั้งใจ แถมยังได้รับค่านิยมมาจากผู้ปกครองเสมอ และคุณเปลี่ยนให้ใช้ไม่ได้ คุณสมบัติ CSS และ Values API ระดับ 1 ของ Houdini ซึ่งตอนนี้พร้อมใช้งานใน Chrome 78 แล้ว ข้อบกพร่องเหล่านี้มีความสำคัญเหนือกว่า ทำให้พร็อพเพอร์ตี้ที่กำหนดเองของ CSS มีประสิทธิภาพอย่างเหลือเชื่อ
ฮูดินี่คืออะไร
ก่อนที่จะพูดถึง API ใหม่ เรามาพูดถึง Houdini กันคร่าวๆ ก่อน CSS-TAG Houdini Task Force หรือที่รู้จักกันในชื่อ CSS Houdini หรือเรียกสั้นๆ ว่า Houdini ออกแบบมาเพื่อ "พัฒนาฟีเจอร์ที่อธิบายถึง 'ความมหัศจรรย์' ของการจัดรูปแบบและเลย์เอาต์ในเว็บ" การรวบรวมข้อมูลจำเพาะของ Houdini ออกแบบมาเพื่อเผยให้เห็นพลังของเครื่องมือแสดงผลของเบราว์เซอร์ ทำให้มีข้อมูลเชิงลึกยิ่งขึ้นเกี่ยวกับสไตล์ของเราและความสามารถในการขยายเครื่องมือแสดงผล จากสิ่งนี้ ค่า CSS ที่พิมพ์ใน JavaScript และ Polyfilling หรือการสร้าง CSS ใหม่โดยไม่มี Hit ด้านประสิทธิภาพก็เป็นไปได้ในที่สุด ฮูดินี่มีศักยภาพ ที่จะผลักดันความคิดสร้างสรรค์บนเว็บ
พร็อพเพอร์ตี้และค่า API ของ CSS ระดับ 1
CSS Properties and Value API ระดับที่ 1 (Houdini Props และ Vals) ให้เราสามารถจัดโครงสร้างของพร็อพเพอร์ตี้ที่กำหนดเองได้ สถานการณ์ปัจจุบันคือ การใช้พร็อพเพอร์ตี้ที่กำหนดเอง
.thing {
--my-color: green;
}
เนื่องจากพร็อพเพอร์ตี้ที่กำหนดเองไม่มีประเภท จึงอาจถูกลบล้างได้ด้วยวิธีที่ไม่คาดคิด ตัวอย่างเช่น ลองพิจารณาว่าจะเกิดอะไรขึ้นหากคุณกำหนด --my-color
ด้วย URL
.thing {
--my-color: url('not-a-color');
color: var(--my-color);
}
เนื่องจาก --my-color
ไม่ได้พิมพ์อยู่ ระบบจึงไม่รู้ว่า URL ไม่ใช่ค่าสีที่ถูกต้อง เวลาที่เราใช้ ค่าจะเปลี่ยนกลับเป็นค่าเริ่มต้น (สีดำสำหรับ color
โปร่งใสสำหรับ background
) เมื่อใช้ Houdini Props และ Vals คุณสมบัติที่กำหนดเองสามารถลงทะเบียนเพื่อให้เบราว์เซอร์รู้ว่าควรทำอะไร
ตอนนี้พร็อพเพอร์ตี้ที่กำหนดเอง --my-color
ได้ลงทะเบียนเป็นสีแล้ว ซึ่งจะบอกเบราว์เซอร์ว่าค่าประเภทใดที่อนุญาตให้ใช้ได้ รวมถึงวิธีพิมพ์และดำเนินการกับพร็อพเพอร์ตี้ดังกล่าว
โครงสร้างของพร็อพเพอร์ตี้ที่จดทะเบียน
การลงทะเบียนพร็อพเพอร์ตี้จะมีลักษณะดังนี้
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: 'black',
});
รองรับตัวเลือกต่อไปนี้
name: string
ชื่อของพร็อพเพอร์ตี้ที่กำหนดเอง
syntax: string
วิธีแยกวิเคราะห์พร็อพเพอร์ตี้ที่กำหนดเอง ดูรายการค่าที่เป็นไปได้ทั้งหมดได้ในข้อมูลจำเพาะของค่าและหน่วย CSS ค่าเริ่มต้นคือ *
inherits: boolean
ไม่ว่าจะรับค่าจากระดับบนสุดหรือไม่ ค่าเริ่มต้นคือ true
initialValue: string
ค่าเริ่มต้นของพร็อพเพอร์ตี้ที่กำหนดเอง
เข้าไปดู syntax
อย่างใกล้ชิด มีตัวเลือกที่ถูกต้องมากมาย ตั้งแต่ตัวเลข สี ไปจนถึงประเภท <custom-ident>
คุณสามารถแก้ไขไวยากรณ์เหล่านี้ได้โดยใช้ค่าต่อไปนี้
- การใส่
+
ต่อท้ายหมายความว่าระบบยอมรับรายการค่าของไวยากรณ์ที่คั่นด้วยการเว้นวรรค เช่น<length>+
จะเป็นรายการความยาวที่คั่นด้วยการเว้นวรรค - ต่อท้าย
#
หมายความว่าระบบยอมรับรายการค่าของไวยากรณ์ที่คั่นด้วยคอมมา เช่น<color>#
จะเป็นรายการสีที่คั่นด้วยคอมมา - การเพิ่ม
|
ระหว่างไวยากรณ์หรือตัวระบุหมายความว่าตัวเลือกใดก็ได้ที่ระบุไว้ถูกต้อง ตัวอย่างเช่น<color># | <url> | magic
จะอนุญาตรายการสี, URL หรือคำว่าmagic
ที่คั่นด้วยคอมมา
รับทราบ
มี 2 ตัวที่มี Houdini Props และ Vals ข้อแรกคือ เมื่อกำหนดแล้ว คุณจะอัปเดตพร็อพเพอร์ตี้ที่ลงทะเบียนไว้ที่มีอยู่ไม่ได้ และการพยายามลงทะเบียนพร็อพเพอร์ตี้อีกครั้งจะแสดงข้อผิดพลาดที่ระบุว่าได้กำหนดไว้แล้ว
ประการที่ 2 ซึ่งต่างจากพร็อพเพอร์ตี้มาตรฐานตรงที่พร็อพเพอร์ตี้ที่ลงทะเบียนจะไม่ได้รับการตรวจสอบเมื่อมีการแยกวิเคราะห์ แต่จะมีการตรวจสอบเมื่อมีการคำนวณ ซึ่งหมายความว่าทั้ง 2 ค่าที่ไม่ถูกต้องจะไม่ปรากฏว่าไม่ถูกต้องเมื่อตรวจสอบพร็อพเพอร์ตี้ขององค์ประกอบ และการรวมพร็อพเพอร์ตี้ที่ไม่ถูกต้องหลังจากพร็อพเพอร์ตี้ที่ถูกต้องจะไม่กลับไปใช้พร็อพเพอร์ตี้ที่ถูกต้อง อย่างไรก็ตาม พร็อพเพอร์ตี้ที่ไม่ถูกต้องจะกลับไปใช้ค่าเริ่มต้นของพร็อพเพอร์ตี้ที่ลงทะเบียนไว้
การทำให้คุณสมบัติที่กำหนดเองเคลื่อนไหว
พร็อพเพอร์ตี้ที่กำหนดเองที่จดทะเบียนแล้วจะให้โบนัสสนุกๆ นอกเหนือจากการตรวจสอบประเภท ซึ่งก็คือความสามารถในการทำให้ภาพเคลื่อนไหวเคลื่อนไหว ตัวอย่างภาพเคลื่อนไหวพื้นฐานจะมีลักษณะดังนี้
<script>
CSS.registerProperty({
name: '--stop-color',
syntax: '<color>',
inherits: false,
initialValue: 'blue',
});
</script>
<style>
button {
--stop-color: red;
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
</style>
เมื่อคุณวางเมาส์เหนือปุ่ม ปุ่มจะเคลื่อนไหวจากสีแดงเป็นสีเขียว หากไม่ลงทะเบียนพร็อพเพอร์ตี้ พร็อพเพอร์ตี้จะข้ามจากสีหนึ่งไปยังอีกสีหนึ่ง เนื่องจากถ้าไม่ได้ลงทะเบียน เบราว์เซอร์จะไม่ทราบว่าจะเกิดอะไรขึ้นระหว่างค่าหนึ่งกับค่าถัดไป ดังนั้นจึงไม่สามารถรับประกันได้ว่าจะสามารถเปลี่ยนได้ ตัวอย่างนี้ยังดำเนินการได้อีกขั้นเพื่อทำให้การไล่ระดับสี CSS เคลื่อนไหวได้ คุณเขียน CSS ต่อไปนี้ได้ด้วยพร็อพเพอร์ตี้ที่ลงทะเบียนไว้เดียวกัน
button {
--stop-color: red;
background: linear-gradient(var(--stop-color), black);
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
ซึ่งจะทำให้พร็อพเพอร์ตี้ที่กำหนดเองซึ่งเป็นส่วนหนึ่งของ linear-gradient
เคลื่อนไหว ซึ่งทำให้การไล่ระดับสีแบบเส้นตรงเคลื่อนไหว ลองดู Glitch ด้านล่างเพื่อดูโค้ด
ทั้งหมดและนำไปลองใช้ด้วยตัวเอง
บทสรุป
Houdini กำลังมุ่งหน้าสู่เบราว์เซอร์และพร้อมพัฒนาวิธีการทำงานแบบใหม่และขยายขอบเขตการใช้งาน CSS ไปทั้งหมด เมื่อเราจัดส่ง Paint API ไปแล้ว ตอนนี้ก็มี Custom Props และ Vals แล้ว กล่องเครื่องมือครีเอทีฟโฆษณาของเราก็กำลังขยายใหญ่ขึ้น ซึ่งทำให้เราสามารถ กำหนดพร็อพเพอร์ตี้ CSS ที่มีการพิมพ์และใช้ในการสร้างและทำให้การออกแบบใหม่ๆ ที่น่าตื่นเต้น ได้เคลื่อนไหว นอกจากนี้เรายังมีวิธีอื่นๆ ที่เราจะเพิ่มเข้ามาในคิวปัญหาของ Houdini ซึ่งคุณสามารถแสดงความคิดเห็นและดูว่าต้องทำอะไรต่อไปสำหรับ Houdini Houdini ก่อตั้งขึ้นเพื่อพัฒนาคุณลักษณะ ที่อธิบาย "ความมหัศจรรย์" ของการจัดรูปแบบและเลย์เอาต์ในเว็บ ดังนั้น จงออกไปข้างนอกและใช้ประโยชน์จากคุณลักษณะที่มีเวทมนตร์เหล่านั้นให้เป็นประโยชน์
รูปภาพโดย Maik Jonietz บน Unsplash