การใช้งาน CSS Variables (Custom Properties)

การใช้งาน CSS Variables (Custom Properties)

ในบทเรียนก่อนหน้านี้ เราได้เรียนรู้เกี่ยวกับการสร้าง Animation ที่ซับซ้อนด้วย CSS Keyframes ซึ่งช่วยให้เราควบคุมการเปลี่ยนแปลงขององค์ประกอบได้อย่างละเอียด ในบทนี้ เราจะมาทำความรู้จักกับอีกหนึ่งเครื่องมือที่มีประโยชน์อย่างมากในการจัดการ CSS นั่นก็คือ CSS Variables หรือที่เรียกว่า Custom Properties

CSS Variables จะช่วยให้เราสามารถกำหนดค่า CSS ต่างๆ ไว้ในที่เดียว และนำค่าเหล่านั้นไปใช้ซ้ำในหลายๆ ที่ได้ ทำให้โค้ด CSS ของเรามีความยืดหยุ่น, อ่านง่าย, และง่ายต่อการบำรุงรักษามากขึ้น

ทำไมต้องใช้ CSS Variables?

ลองจินตนาการว่าคุณกำลังสร้างเว็บไซต์ที่มีสีหลัก (primary color) ที่ใช้ซ้ำกันในหลายๆ ส่วนของเว็บไซต์ เช่น สีของปุ่ม, สีของ header, และสีของ footer หากคุณต้องการเปลี่ยนสีหลักนี้ คุณจะต้องแก้ไขโค้ด CSS ในทุกๆ ที่ที่ใช้สีนี้ ซึ่งเป็นงานที่น่าเบื่อและอาจเกิดข้อผิดพลาดได้

CSS Variables ช่วยแก้ปัญหานี้ได้ โดยการกำหนดสีหลักเป็น Variable และนำ Variable นั้นไปใช้ในทุกๆ ที่ที่ต้องการ เมื่อคุณต้องการเปลี่ยนสีหลัก คุณเพียงแค่แก้ไขค่าของ Variable นั้นเพียงที่เดียว สีก็จะเปลี่ยนไปในทุกๆ ที่โดยอัตโนมัติ

นอกจากนี้ CSS Variables ยังมีประโยชน์อื่นๆ อีกมากมาย เช่น:

• ลดความซ้ำซ้อนของโค้ด: ช่วยลดการเขียนโค้ดที่ซ้ำกัน ทำให้โค้ด CSS สั้นลงและอ่านง่ายขึ้น
• เพิ่มความยืดหยุ่น: ทำให้ง่ายต่อการปรับแต่งและเปลี่ยนแปลงค่า CSS โดยไม่ต้องแก้ไขโค้ดในหลายๆ ที่
• ปรับปรุงการบำรุงรักษา: ช่วยให้การบำรุงรักษาโค้ด CSS ง่ายขึ้น เนื่องจากมีการจัดการค่าต่างๆ ไว้ในที่เดียว
• รองรับการทำงานร่วมกับ JavaScript: สามารถเข้าถึงและแก้ไขค่า CSS Variables ผ่าน JavaScript ได้ ทำให้สามารถสร้าง interactive components ได้ง่ายขึ้น

การประกาศและใช้งาน CSS Variables

CSS Variables ถูกประกาศโดยใช้เครื่องหมาย -- (double hyphen) นำหน้าชื่อของ Variable และสามารถใช้งานได้โดยใช้ฟังก์ชัน var()

การประกาศ CSS Variables

CSS Variables สามารถประกาศได้ในหลายระดับ scope เช่น:

• :root: ใช้สำหรับประกาศ Variables ที่เป็น global scope ซึ่งสามารถเข้าถึงได้จากทุกส่วนของเว็บไซต์
• Selector ใดๆ: สามารถประกาศ Variables ภายใน selector ใดๆ ก็ได้ Variables เหล่านั้นจะมี scope เฉพาะ selector นั้นๆ และ descendants ของมันเท่านั้น

ตัวอย่างการประกาศ CSS Variables ใน :root:

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-size: 16px;
}

ในตัวอย่างนี้ เราได้ประกาศ Variables 3 ตัว:

• --primary-color: เก็บค่าสีหลัก
• --secondary-color: เก็บค่าสีรอง
• --font-size: เก็บค่าขนาดตัวอักษร

การใช้งาน CSS Variables

ในการใช้งาน CSS Variables เราจะใช้ฟังก์ชัน var() โดยใส่ชื่อ Variable ที่ต้องการใช้เป็น argument

ตัวอย่างการใช้งาน CSS Variables:

body {
  font-size: var(--font-size);
}

.button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.button:hover {
  background-color: darken(var(--primary-color), 10%); /* (Sass Example, see later chapters) */
}

ในตัวอย่างนี้ เราได้นำ CSS Variables ไปใช้ในการกำหนดค่า font-size ของ body และ background-color ของ .button

ข้อดี: หากเราต้องการเปลี่ยนสีหลักของปุ่ม เราเพียงแค่แก้ไขค่า --primary-color ใน :root เท่านั้น สีของปุ่มก็จะเปลี่ยนไปโดยอัตโนมัติ

Fallback Values

var() function สามารถรับ argument ตัวที่สอง ซึ่งเป็น fallback value ที่จะถูกใช้หาก Variable ที่ระบุไม่มีอยู่

ตัวอย่างการใช้ fallback value:

.element {
  color: var(--non-existent-variable, black); /* Use black if --non-existent-variable is not defined */
}

ในตัวอย่างนี้ หาก Variable --non-existent-variable ไม่ได้ถูกกำหนดไว้ สีของ .element จะเป็นสีดำ

Scope ของ CSS Variables

CSS Variables มี scope เช่นเดียวกับ Variables ในภาษาโปรแกรมมิ่งอื่นๆ Variables ที่ประกาศใน :root จะมี global scope ในขณะที่ Variables ที่ประกาศภายใน selector ใดๆ จะมี scope เฉพาะ selector นั้นๆ และ descendants ของมัน

ตัวอย่าง:

<div class="container">
  <p class="text">Hello, world!</p>
</div>

:root {
  --font-color: black; /* Global scope */
}

.container {
  --font-color: blue; /* Local scope, overrides global */
}

.text {
  color: var(--font-color); /* Inherits from .container, so it's blue */
}

ในตัวอย่างนี้ สีของข้อความ "Hello, world!" จะเป็นสีน้ำเงิน เนื่องจาก .text inherit ค่า --font-color จาก .container ซึ่ง override ค่าที่กำหนดไว้ใน :root

การใช้งาน CSS Variables ร่วมกับ JavaScript

CSS Variables สามารถเข้าถึงและแก้ไขได้ผ่าน JavaScript โดยใช้ getPropertyValue() และ setProperty()

ตัวอย่าง:

<button id="changeColorBtn">Change Color</button>
<div id="myDiv">This is a div.</div>

:root {
  --my-div-color: red;
}

#myDiv {
  background-color: var(--my-div-color);
  padding: 20px;
}

const button = document.getElementById('changeColorBtn');
const div = document.getElementById('myDiv');

button.addEventListener('click', () => {
  // Get the current value
  const currentColor = getComputedStyle(document.documentElement).getPropertyValue('--my-div-color');

  // Set a new value
  document.documentElement.style.setProperty('--my-div-color', 'green');
});

ในตัวอย่างนี้ เมื่อคลิกที่ปุ่ม "Change Color" สีพื้นหลังของ #myDiv จะเปลี่ยนเป็นสีเขียว

แนวปฏิบัติที่ดีในการใช้งาน CSS Variables

• ใช้ชื่อที่สื่อความหมาย: เลือกชื่อ Variable ที่สื่อถึงค่าที่เก็บไว้ เช่น --primary-color แทนที่จะเป็น --color1
• จัดกลุ่ม Variables ที่เกี่ยวข้อง: จัดกลุ่ม Variables ที่เกี่ยวข้องไว้ด้วยกัน เพื่อให้ง่ายต่อการค้นหาและจัดการ
• ใช้ fallback values: กำหนด fallback values เพื่อป้องกันปัญหาเมื่อ Variable ไม่ได้ถูกกำหนดไว้
• จำกัด scope ของ Variables: ใช้ scope ที่เหมาะสมกับ Variable แต่ละตัว เพื่อหลีกเลี่ยงการ conflict ของชื่อ

สรุป

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

ในบทถัดไป เราจะไปเรียนรู้เกี่ยวกับการใช้ CSS Preprocessors (Sass/SCSS) ซึ่งเป็นเครื่องมือที่ช่วยให้เราเขียน CSS ได้อย่างมีประสิทธิภาพมากยิ่งขึ้น