ทำให้ CSS ของคุณเป็นไดนามิกด้วย CSS Custom Properties

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

คุณสมบัติที่กำหนดเอง CSS ช่วยให้คุณ:

• กำหนดค่าตามอำเภอใจให้กับคุณสมบัติด้วยชื่อที่คุณเลือก
• ใช้ฟังก์ชัน var() เพื่อใช้ค่าเหล่านี้ในคุณสมบัติอื่น

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

ในบทความนี้ คุณจะได้เรียนรู้วิธีที่คุณสามารถใช้ CSS Custom Properties เพื่อทำให้สไตล์ชีตของคุณมีไดนามิกมากขึ้น อาจทำให้ขั้นตอนพิเศษ Sass/LESS ในไปป์ไลน์สินทรัพย์ของคุณล้าสมัย

ตัวแปร CSS ดั้งเดิมและมีประสิทธิภาพน้อยกว่า

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

ลองมาดูตัวอย่าง:

 .element { color: blue; border: 2px solid currentColor; /* Sets a solid, 2px wide, blue border to the element */ }

นอกเหนือจากการเรียงซ้อนแล้ว ยังสามารถสร้างสิ่งต่อไปนี้:

 .element span { background: currentColor; /* Sets a blue background color for every span child of .element, unless a color property is declared in this same block */ } .element span.red { color: red; /* Sets a red background color for every span child of .element that has the class .red, since currentColor is applied to the background of every span child of .element no matter if they have the .red class or not */ }

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

ตัวแปร CSS ที่มีคุณสมบัติครบถ้วน

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

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

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

ไวยากรณ์สำหรับคุณสมบัติที่กำหนดเองของ CSS นั้นค่อนข้างแปลกเมื่อเทียบกับภาษาอื่น แต่ก็สมเหตุสมผลดีถ้าคุณเปรียบเทียบไวยากรณ์กับคุณสมบัติอื่นๆ ในระบบนิเวศ CSS เดียวกัน:

 :root { --color-black: #2e2e2e; } .element { background: var(--color-black); }

ตอนนี้ คุณอาจจะกำลังคิดว่า: “รูปแบบไวยากรณ์อะไรนั่นน่ะเหรอ!?”

Lea Verou อธิบายเหตุผลสำหรับไวยากรณ์ "dash-dash" นี้ด้วยความเรียบง่ายอย่างแท้จริง ดังที่เธอกล่าวในการบรรยายที่น่าทึ่งของเธอ CSS Variables: var(–subtitle):

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

เราสามารถดึงค่าของคุณสมบัติที่กำหนดเองได้โดยใช้ฟังก์ชัน var() ซึ่งเราสามารถใช้ได้ทุกที่ ยกเว้นตัวเลือก ชื่อคุณสมบัติ หรือการประกาศคิวรี่สื่อ

เป็นที่น่าสังเกตว่าแม้ว่าตัวแปรก่อน/หลังประมวลผลจะใช้ในเวลารวบรวมเท่านั้น แต่ตัวแปร CSS สามารถใช้และอัปเดตแบบไดนามิกได้ สิ่งนี้หมายความว่า? หมายความว่าจะคงอยู่ในสไตล์ชีต CSS จริง ดังนั้น แนวคิดที่ว่าสิ่งเหล่านี้เป็นตัวแปรจะยังคงอยู่แม้หลังจากรวบรวมสไตล์ชีตแล้ว

เพื่อให้ชัดเจนยิ่งขึ้น ให้ฉันอธิบายสถานการณ์โดยใช้ตัวอย่าง รหัสกลุ่มต่อไปนี้เป็นส่วนหนึ่งของสไตล์ชีต SASS:

 :root { $value: 30px; } @media screen and (min-width: 768px) { $value: 60px; } .corners { border-radius: $value; }

ตัวอย่างการประกาศและกฎ SASS นี้คอมไพล์เป็น CSS ดังนี้:

 .corners { border-radius: 30px; }

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

ตอนนี้ มาพิจารณากรณีเดียวกัน แต่ใช้เฉพาะตัวแปร CSS ที่ไม่ได้ใช้ CSS ก่อน/หลังประมวลผล (เช่น ไม่มีการถ่ายทอดหรือคอมไพล์ใด ๆ ):

 :root { --value: 30px; } @media screen and (min-width: 768px) { --value: 60px; } .corners { border-radius: var(--value); }

เห็นได้ชัดว่าไม่มีอะไรเปลี่ยนแปลงเนื่องจากเราไม่ได้คอมไพล์/ทรานสปิลอะไรเลย และค่าของคุณสมบัติที่กำหนดเองสามารถอัปเดตแบบไดนามิกได้ ตัวอย่างเช่น ถ้าเราเปลี่ยนค่าของ --value โดยใช้บางอย่างเช่น JavaScript ค่าจะอัปเดตในทุกอินสแตนซ์ที่เรียกโดยใช้ฟังก์ชัน var()

ความสามารถของคุณสมบัติที่กำหนดเองทำให้คุณสมบัตินี้มีประสิทธิภาพมากจนคุณสามารถทำสิ่งต่างๆ เช่น คำนำหน้าอัตโนมัติ

Lea Verou ตั้งค่าตัวอย่างโดยใช้คุณสมบัติ clip-path เราเริ่มต้นด้วยการตั้งค่าคุณสมบัติที่เราต้องการให้คำนำหน้าเป็นค่า initial แต่ใช้คุณสมบัติที่กำหนดเอง จากนั้นดำเนินการตั้งค่าคุณสมบัตินำหน้าแต่ละค่าเป็นค่าคุณสมบัติที่กำหนดเอง:

 * { --clip-path: initial; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); }

หลังจากนี้ สิ่งที่เหลืออยู่คือการเปลี่ยนค่าของคุณสมบัติแบบกำหนดเองภายในตัวเลือก:

 header { --clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2.5em), 0% 100%); }

หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ โปรดดูบทความเต็มของ Lea เกี่ยวกับการเติมคำนำหน้าอัตโนมัติด้วยตัวแปร CSS

คุณสมบัติที่กำหนดเอง CSS กันกระสุน

ดังที่กล่าวไว้ การสนับสนุนเบราว์เซอร์สำหรับคุณสมบัติกำหนดเองของ CSS นั้นส่วนใหญ่ไม่ได้มาตรฐาน แล้วจะเอาชนะสิ่งนี้ได้อย่างไร?

นี่คือจุดเริ่มต้นของ PostCSS และปลั๊กอินของ postcss-css-variables

ในกรณีที่คุณสงสัยว่า PostCSS คืออะไร ให้ตรวจสอบบทความ PostCSS ของฉัน: SASS's New Play Date และกลับมาที่นี่หลังจากเสร็จสิ้น จากนั้น คุณจะมีแนวคิดพื้นฐานเกี่ยวกับสิ่งที่คุณสามารถทำได้ด้วยเครื่องมืออันน่าทึ่งนี้ และจะไม่รู้สึกสับสนเมื่ออ่านบทความที่เหลือ

ด้วย postcss-css-variables และตัวเลือกการ preserve ที่ตั้งค่าเป็นจริง เราสามารถเก็บการประกาศฟังก์ชัน var() ทั้งหมดในเอาต์พุตและมีค่าที่คำนวณเป็นการประกาศทางเลือก มันยังเก็บคำ --var ที่คำนวณไว้ โปรดทราบว่าเมื่อใช้ปลั๊กอิน PostCSS นี้ คุณสมบัติที่กำหนดเองสามารถอัปเดตแบบไดนามิกหลังจากกระบวนการ transpilation แต่ค่าทางเลือกจะยังคงเหมือนเดิมเว้นแต่จะมีการกำหนดเป้าหมายโดยเฉพาะและเปลี่ยนแปลงอย่างชัดแจ้งทีละรายการ

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

 :root { --color-blue: #1e90ff; /* hex value for dodgerblue color */ } .element { background: var(--color-blue); } @supports (not(--value: 0)) { /* CSS variables not supported */ .element { background: dodgerblue; } }

การเปลี่ยนค่าของคุณสมบัติที่กำหนดเองโดยใช้ JavaScript

ฉันได้กล่าวถึงตลอดทั้งบทความนี้ว่าตัวแปรสามารถอัปเดตโดยใช้ JavaScript ได้ ดังนั้นเรามาทำความเข้าใจกัน

สมมติว่าคุณมีธีมสีอ่อนและต้องการเปลี่ยนเป็นธีมสีเข้ม โดยสมมติว่าคุณมี CSS ดังต่อไปนี้:

 :root { --text-color: black; --background-color: white; } body { color: var(--text-color); background: var(--background-color); }

คุณสามารถอัปเดตคุณสมบัติที่กำหนดเอง --text- --text-color และ --background-color ได้โดยทำดังนี้:

 var bodyStyles = document.body.style; bodyStyles.setProperty('--text-color', 'white'); bodyStyles.setProperty('--background-color', 'black');

กรณีการใช้งานที่น่าสนใจ

ในช่วงหลายปีที่ผ่านมาของการพัฒนาและอภิปรายเกี่ยวกับข้อกำหนดของคุณสมบัติที่กำหนดเอง CSS มีกรณีการใช้งานที่น่าสนใจบางกรณี นี่คือตัวอย่างบางส่วน:

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

การปรับระยะห่าง: ต้องการปรับแต่งระยะห่างของไซต์ เช่น รางน้ำระหว่างคอลัมน์หรือไม่ เปลี่ยนค่าของตัวแปร CSS เดียวและดูว่าการเปลี่ยนแปลงนี้มีผลกับทั้งเว็บไซต์

ฟังก์ชัน calc() แบบไดนามิกทั้งหมด: ตอนนี้คุณสามารถมีฟังก์ชัน calc() ไดนามิกทั้งหมดได้โดยใช้คุณสมบัติที่กำหนดเองภายในฟังก์ชันเหล่านี้ ทำให้ไม่จำเป็นต้องทำการคำนวณที่ซับซ้อนหรือชั่วคราวใน JavaScript แล้วอัปเดตค่าเหล่านี้ด้วยตนเองในแต่ละอินสแตนซ์

เติมชีวิตชีวาให้กับไฟล์ CSS ของคุณ

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

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