CSS Variables คืออะไร? + สอนวิธีใช้

หลายๆ คน ที่เคยใช้ css preprocessor อย่าง LESS หรือ SASS คงจะรู้ดีว่าการใช้ variables ในการเขียน css นั้นมีประโยชน์มากแค่ไหน แต่เชื่อว่าหลายๆ คนคงยังไม่รู้ว่า css เองนั้นก็มีคุณสมบัตินี้เช่นกัน นั่นก็คือ CSS Variables

ปัญหา

เราคงจะเคยเจอปัญหาเวลาที่ต้องมาไล่แก้โค้ดหลังจากที่ requirements มีการเปลี่ยนแปลง สมมติทางลูกค้าต้องการจะเปลี่ยนสีของหัวข้อจาก “สีแดง” มาเป็น “สีดำ” เราก็ต้องไปหาว่าเราได้เขียน css rules ในส่วนนี้เอาไว้ที่จุดไหนบ้าง ยิ่งงานใหญ่ๆ เราก็ยิ่งเสียเวลามากขึ้น

ด้วยเหตุนี้เอง css preprocessor อย่าง LESS หรือ SASS จึงมี feature หนึ่งที่ชื่อว่า “variable” ซึ่งจะทำให้เราสามารถกำหนด “ค่า(value)” ที่เราใช้บ่อยๆ ให้เป็น “ตัวแปร(variable)” ได้ ประโยชน์ของมันก็คือ value ที่เราได้กำหนดให้เป็น variable ไว้ จะส่งผลไปยังทุกๆ จุดที่นำ variable นั้นๆ ไปใช้ หากเราต้องการจะแก้ไข เราก็สามารถแก้ที่ variable ที่เดียว ไม่ต้องไปไล่แก้ทุกๆ จุดอีกต่อไป ลองมาดูตัวอย่างการใช้ variable ของ LESS กันดีกว่า

/* กำหนดค่าโค้ดสีที่เราใช้บ่อยๆ ให้เป็น Variables */
@textColor: #444444;
@headingColor: #555555;
@linkColor: #00ACEE;
/* แทนที่เราจะกำหนดโค้ดสีลงไปตรงๆ ให้เรากำหนดเป็นชื่อ Variable ที่เราได้กำหนดไว้แทน */
body{
    color: @textColor;
}
a{
    color: @linkColor;
}
h1{
    color: @headingColor;
}
อย่างไรก็ตาม การใช้ css preprocessor อย่าง LESS หรือ SASS ก็จะทำให้ขั้นตอนในการทำงานเพิ่มเข้ามา จะดีกว่ามั้ยถ้า feature นี้มีอยู่ใน css เองเลย ?
รู้จักกับ CSS Variables
CSS Variables แบ่งออกเป็น 2 ส่วนด้วยกัน ดังนี้

• Custom Propertiesคือการกำหนดตัวแปรขึ้นมา โดยตัวแปรนี้จะมีหน้าตาเหมือน css property ทั่วๆ ไป แต่ชื่อของมันจะต้องอยู่ในรูปแบบ “var-*” เสมอ โดย “*” คือ “ชื่อตัวแปร” ที่เราจะนำไปใช้ต่อ
• Variablesคือการนำค่าของตัวแปรมาใช้ โดยจะมีรูปแบบคือ var(“ชื่อตัวแปร”);

เพื่อให้เห็นภาพชัดเจนยิ่งขึ้น ลองดูตัวอย่างนี้
/* กำหนด css variables เอาไว้ที่ pseudo element */
/* (ทำให้เราสามารถนำ css variables ไปใช้ได้ในทุกๆ ที่) */
:root {
    var-white: #fff;
    var-black: #000;
}
/* นำ css variables ไปใช้ */
body {
  color: var(white); /* value = #fff */ 
} 
p { 
  color: var(black); /* value = #000 */ 
}
Browser Compatibility
เราสามารถทดลองใช้ CSS Variables ได้แล้ววันนี้ โดยใช้ Firefox เวอร์ชัน 29 ขึ้นไป แต่ถ้าตอนอ่านบทความนี้ Firefox ยังอัพเดทไม่ถึงเวอร์ชัน 29 ให้เราใช้ Firefox Nightly ซึ่งเป็น Firefox รุ่นที่ใหม่ที่สุดแทน สามารถอ่านรายละเอียดเพิ่มเติมได้ที่บทความ "Firefox Nightly คืออะไร ?"

Workshop — ลงมือใช้ CSS Variables

หลังจากที่เราได้ติดตั้ง Firefox เวอร์ชัน 29 ขึ้นไปแล้ว เราก็จะสามารถทดลองใช้ css variables ได้ทันที สิ่งแรกที่ต้องรู้คือการกำหนด custom properties ที่สามารถนำไปใช้ได้ในทุกๆ จุด ให้เรากำหนดเอาไว้ที่ css pseudo element แบบนี้
/* หากกำหนด custom properties ไว้ที่นี่ เราจะสามารถนำไปใช้ได้ในทุกๆ ที่ */
:root { 
    var-text-color: #444;
}

Case-sensitive

การตั้งชื่อของ custom property นั้นเป็นแบบ case-sensitive คือมีความต่างกันระหว่างการใช้ตัวใหญ่กับตัวเล็ก โดยชื่อของ custom property จะต้องขึ้นต้นด้วย "var-" เสมอ จะเป็น "VAR-" ไม่ได้
:root {
    VAR-BLACK: #000;  /* invalid  */
    var-BLACK: #000;  /* valid  */
    var-black: #555;  /* valid  */
}
body {
    color: var(BLACK); /* value = #000 */
}
p {
    color: var(black); /* value = #555 */
}
จะได้ว่า "var-BLACK" และ "var-black" นั้นต่างก็เป็น custom property ที่ valid เหมือนกัน แต่จะถือว่าเป็นคนละ property กัน

Inheritance

custom properties นั้นก็เหมือนกับ properties ทั่วๆ ไป คือ มีคุณสมบัติ  inheritance ลองดูตัวอย่างต่อไปนี้
<div class="a">
    <div class="b">
        <div class="c"></div>
        <div class="d"></div>
    </div>
</div>
:root {
    var-color: red;
    color: var(color); /* red */
}
.a {
    color: var(color); /* red */
}
.b {
    var-color: green;
    color: var(color); /* green */
}
.c {
    var-color: blue;
    color: var(color); /* blue */
}
.d {
    color: var(color); /* green */
}
จะสังเกตว่าเราไม่จำเป็นต้องกำหนด custom variables เอาไว้ที่ :root เสมอไป เพียงแต่การกำหนดเอาไว้ที่ :root จะทำให้ elements อื่นๆ inherit ตัวแปรนั้นมาใช้ได้นั่นเอง

Composite Variables

เราสามารถกำหนด value ของ custom properties โดยใช้ variables ได้ด้วย ลองดูตัวอย่างนี้
:root {
    var-border-thickness: 1px;
    var-border-color: #000;
    var-border-style: solid;
    var-border: var(border-thickness) var(border-style) var(border-color);
}
.box {
    border: var(border);
}
แต่ที่ต้องระวังคือ เราอย่ากำหนดให้ value ของ custom properties ให้อ้างอิงถึงกันและกัน เพราะจะทำให้ variables นั้น invalid ลองดูตัวอย่างนี้
:root {
    var-width: calc(var(height) * 2px);
    var-height: calc(var(width) / 2px);
}
จะเห็นว่าค่าของ width นั้นขึ้นอยู่กับค่าของ height ส่วนค่าของ height ก็ขึ้นอยู่กับค่าของ width หากเราเขียนแบบนี้ จะเกิดสิ่งที่เรียกว่า "Cyclic Dependencies" ซึ่งจะทำให้ variables เหล่านั้น invalid

Fallback Value

เราสามารถกำหนด fallback value ให้กับ custom property ได้ โดยค่านี้จะถูกนำไปใช้เมื่อ variable นั้น invalid
p {
    var-text-color: grey;
}
p span{ 
    color: var(text-color, black); /* grey เพราะ text-color นั้น valid */
}
p a { 
    color: var(link-color, blue); /* blue เพราะ link-color นั้นไม่ได้กำหนดไว้ จึง invalid */
}

แล้วอีกนานมั้ย กว่า CSS Variables จะใช้ได้จริง ?

สถานะล่าสุดของ CSS Variables นั้นยังคงเป็น "W3C Working Draft" อยู่ ซึ่งกว่ามันจะนิ่งจน web browsers ต่างๆ นำไป implement ก็คงจะอีกนาน แต่ถ้าหากเราอยากจะนำไปใช้ในตอนนี้เลยก็สามารถทำได้ โดยใช้ tool ที่มีชื่อว่า "Myth"
Myth เป็น css preprocessor เหมือนๆ กับ LESS และ SASS แต่จุดเด่นของมันจะอยู่ตรงที่ syntax ที่จะเหมือนกับการเขียน css แบบปกติทุกประการ วิธีนี้มีข้อดีก็คือ เราสามารถใช้ features อะไรใหม่ๆ ที่ web browsers ในปัจจุบันยังไม่รองรับได้ทันที แล้วค่อยใช้ Myth แปลง syntax เหล่านั้น ให้อยู่ในรูปแบบที่ web browsers ในปัจจุบันเข้าใจ พอถึงเวลาที่ web browsers ต่างๆ รองรับ features นั้นๆ แล้ว เราก็สามารถนำโค้ดที่เราเขียนไปใช้ได้เลยโดยที่ไม่ต้องใช้ Myth แปลงอีกต่อไป