เคยหรือไม่?

ในขณะที่กำลังยำ CSS โดยให้แต่ละ element มี สีที่เหมือนกัน แต่แล้วทำไปเรื่อยๆเกิดอยากจะเปลี่ยนค่าสีขึ้นมาอีก ทีนี้หละปัญหาก็เกิดขึ้นเมื่อคุณต้องไล่ไปเปลี่ยน property value ของสีแต่ละ element ที่เยอะแยะไปหมดชวนสับสน เห้อเป็นท้อ ทีนี้หละเราจะมาแก้ไขปัญหานี้ด้วย CSS Custom Properties

Custome Properties ก็คือ

เปรียบเสมือนตัวแปร ไว้ใช้กำหนด ค่า

หลักการ ?

เก็จะสรา้ง properties ไว้ใน element ใดก็ได้เพียงแต่ว่าตาม สากลโลก เขาจะประกาศไว้ใน :root เนื่องจากว่า :root นั้นเป็น Scope สูงสุดในหน้า html ทำให้ element ต่างๆ
มาตราฐานตั้งชื่อก็จะใช้
(–ชื่อ-สื่อความหมาย : value)

ตัวอย่างการตั่งชื่อ custom properties

--primary-color:rgb(217, 14, 235); 
--header-size:64px; 
--solfr-border:2px solid;

สามารถเรียกใช้ properties ที่หนดหนดได้ ตัวที่จะใช้ก็แค่ใส่ var()

h1{
    font-size:var(--header-size)
}

ถ้างงๆว่าทำไมต้องใช้ลองมาดูตัวอย่างแบบปกติ

มาลองดูตัวอย่างแบบไม่ใช้ custom properties

สมมุติว่าต้องการสรา้ง element ดังนี้

<h1>this is header1<h1>
<p>this is paragraph</p>
<div>this is div</div>

ต้องการให้ h1 และ p จะเปลี่ยนสีอักษร และdiv จะเปลี่ยนสีพื้นหลัง โดยใช้สี ชมพู ตามนี้

h1{
   color:pink; สีอักษร
}p{
   color:pink; สีอักษร
}div{
   width:100px; กำหนดขนาดเพื่อให้แสดงผลลัพเป็นสี่เหลี่ยม
   height:100px;
   background-color:pink; สีพื้นหลัง
}

และนี่คือผลไม้ที่ได้รับ เอ้ยผลลัพธ์ ?

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

h1{
   color:green; สีอักษร
}p{
   color:green; สีอักษร
}div{
   width:100px; กำหนดขนาดเพื่อให้แสดงผลลัพเป็นสี่เหลี่ยม
   height:100px;
   background-color:green; สีพื้นหลัง
}

ถ้างานเราใหญ่ขึ้นเรา จะไม่สับสนที่ต้องไปไล่เปลี่ยน color แทบทุก element เลยหรอ

และลองนึกดูว่าถ้าคุณมีสีที่มันไม่ได้ตรงตามศัพท์ที่มีมาให้เช่น red green blue แต่สีที่คุณกำหนดเป็นสีแบบที่เป็น rgb(217, 14, 235) อะไรแบบเนี้ย แล้วคุณอยากให้สี element อันนี้มันเหมือนสี element นั้น คุณคงจำค่าสีไม่ได้จนคุณต้อง ไล่หา element นั่นแล้ว copy rgb ของ element มา ใส่ element ที่ต้องการให้สีเหมือนกัน

ลองแก้ไขด้วย class ?

เอ้แต่ถ้าคุณจะบอกว่า ก็สรา้ง class อะไรสักอย่างสิ แล้ว element ไหนต้องการให้มีสีนี้ก็ใส่ class นี้ไป แบบนี้

.primary-color{
    rgb(217, 14, 235)
}

มันก็ได้อยู่นะ แต่เดี๋ยวๆ ตามตัวอย่างข้างต้นผมมี element ที่ต้องการให้เปลี่ยนสีพื้นหลังอย่างเดียวด้วยนะ ถ้างั้นก็ต้องเพิ่มอีกอันไปแบบนี้ดิ

.primary-bacground-color{
    rgb(217, 14, 235)
}

เวลาใช้ก็แบบนี้

<h1  class="primary-color">this is header1<h1>
<p   class="primary-color">this is paragraph</p>
<div class="primary-ground-color">this is div</div>

ซึ่งผลลัพธ์ก็เหมือนกันเด่ะ

แต่เอ้ะ! แบบนี้ ถ้าต่อไปเราต้องการมีหลายๆค่าแบบที่ไม่ใช่สีหละเช่นตัวเลขแบบเนี้ย มันจะเริ่ม ต้องสรา้ง class มาเยอะมากมั่วซั่วไปหมด

แบบใช้ Custom Properties

อธิบายข้อมูลเบื้องต้นไปข้างบนนู้นแล้วนะ

ตัวอย่างการนำไปใช้

:root{
     --primary-color:rgb(217, 14, 235);
}h1{
   color:var(--primary-color); สีอักษร
}p{
   color:var(--primary-color); สีอักษร
}div{
   width:100px; กำหนดขนาดเพื่อให้แสดงผลลัพเป็นสี่เหลี่ยม
   height:100px;
   background-color:var(--primary-color); สีพื้นหลัง
}

ผลลัพธ์ที่ได้

ทีนี้หากเราอยากเปลี่ยนสี ทุกสีให้เป็นสีอื่นก็ไปเปลี่ยนที่ตรง custom properties ได้เลยเดี๋ยวที่เหลือมันก็เปลี่ยนตามเพราะมันใช้ค่าจาก custome properties

:root{
   --primary-color:rgb(217, 14, 235); เปลี่ยน value properties นี้ได้เลย
}

ทำให้ ทีนี้งานใหญ่ขึ้นเราก็ไม่ต้องมานั่งไล่สับ element ไม่วุ่นวายไปหมด ฮ่าๆ

fallback

วิธีใช้ var(properties,fallback)

คือเมื่อcss properties ไม่เจอ value จาก custom properties เจ้า fallback จะเข้ามาเป็น value แทน

เช่น เมื่อไม่ได้ประกาศหรือเกิดอะไรสักอย่างที่ทำให้ value ของ css custome property หายไป โดยอาจเกิดจาก ลืมประกาศ หรือลบทิ้ง แต่โดยมากเกิดจากการที่ browser ไม่ support value นั้นๆเช่น ค่า rbg() อาจไม่ได้ support browser บางเวอร์ชั่น ทำให้ brower ไม่รู้จักค่านั้นในที่สุด custome properties ที่มี rgb อยู่ก็จะไม่มีค่าอีกต่อไปเราจึงต้องใช้ fallback

h1{
   color:var(--primary-color,red); สีอักษร
}

จากตัวอย่างนั้นหมายความว่า เมื่อเกิดอะไรก็ตามที่เราไม่สามรถรับรู้ค่าของ
–primary-color ได้ red จะเข้ามาเป็น value แทนดังนนั้นจะทำให้ h1 ออกมาเป็นสีแดง

อันนี้ไม่ใส่ผลลัพธ์นะ ลองไปเขียนๆฝึกให้เข้าใจดูบ้าง 555 ?

สรุป

css custom properties เป็นเหมือน ตัวแปรที่เราคอยกำหนด มาตราฐาน ให้ค่ากับมันแล้วกระจายไปสายให้กับ properties ของ element ต่างๆใช้ ซึ่งทำให้ลดความซับซ้อนและทำให้ code ดูเป็นระบบตาามาตรฐานที่ว้างไว้ ทั้งนี้อยากให้ลองฝึกทำด้วยนะครับ ทำความเข้าใจและลงมือทำเป็นของคู่กันครับ และก็ขอขอบคุณที่หลงเข้ามาอ่านบทความนี้ครับ