คู่มือ CSS @property Generator: สร้าง Typed Custom Properties ที่ Animate ได้

CSS custom properties (--my-variable) เปลี่ยนวิธีเขียน styles ของเราไปตั้งนาน แต่ก็มีข้อจำกัดที่เงียบ ๆ ซ่อนอยู่ — browser จะมองตัวแปรที่ยังไม่ได้ register ว่าเป็น string ธรรมดาที่ opaque คุณจะ animate มัน ทำ transition หรือกำหนด type ให้มันอย่างถูกต้องไม่ได้เลย จนกว่าคุณจะ register มันด้วย @property และ CSS @property Generator ช่วยให้การเขียน registration rule นั้นง่ายขึ้นมาก — เลือกชื่อ property, เลือก syntax type, ตั้งค่า inheritance, ใส่ initial value แล้ว copy CSS ที่พร้อมใช้งานได้ในไม่กี่วินาที

ถ้าเคยลองเขียน transition: --angle 0.3s แล้วนั่งมองมันเงียบเฉยไม่ขยับ บทความนี้คือคำตอบของคุณ Registered properties คือสะพานเชื่อมระหว่าง CSS variables ธรรมดากับ design tokens ที่ animate ได้และ type-check ได้อย่างสมบูรณ์ — และด้วย live preview ที่ทำงานทั้งหมดใน browser ไม่มี server round-trip ทำให้ generator พาคุณไปจากไอเดียสู่โค้ดที่ใช้งานได้จริงเร็วกว่าการนั่งสู้ syntax เองมาก

ในคู่มือนี้เราจะพูดถึงว่า @property ทำงานอย่างไรจริง ๆ วิธีใช้ generator ให้เต็มประสิทธิภาพ และสูตรสำเร็จที่คุณเอาไปใช้ในโปรเจกต์ได้ทันที

ทำไมต้องใช้ CSS @property Generator

• ปลดล็อก animation ทันที — ฟีเจอร์เด่นที่สุดของ @property คือ custom property ที่ register แล้วจะ animate ได้ แทนที่จะต้อง hack การขยับ gradient ด้วย background-position คุณแค่ register --angle เป็น <angle> แล้วให้ browser interpolate ให้เอง
• เลิกเดา syntax string — type descriptors อย่าง <color>, <length>, <number>, <percentage> และ * (universal) พิมพ์ผิดง่ายมาก dropdown ของ generator รับประกันว่าบรรทัด syntax จะ valid เสมอ ทำให้ rule ผ่านการ parse ตั้งแต่ครั้งแรก
• ตัดสินใจเรื่อง inheritance ได้ถูกต้อง — การเลือก inherits: true หรือ false ส่งผลต่อทั้ง performance และพฤติกรรมของ UI โดยตรง เครื่องมือผลักให้คุณต้องเลือกอย่างชัดเจน พร้อม default ที่ปลอดภัย (false) ที่ช่วยไม่ให้ browser ต้อง re-resolve variables ไปทั้ง DOM โดยไม่จำเป็น
• Live preview ระหว่าง config — เห็น initial value ถูก render ทันทีที่พิมพ์ จับ typo อย่าง #7c3ae (hex ห้าตัว) ได้ก่อนขึ้น production
• ผลลัพธ์ copy-ready ใช้ได้กับทุก framework — rule ที่ได้เป็น plain CSS ที่ทำงานได้ทั้งใน vanilla projects, Tailwind layers, CSS Modules หรือ styled-components — ที่ไหนที่ modern CSS ไปถึง
• ฟรี 100% client-side — ทุกอย่างรันใน browser ของคุณ ไม่ต้องสมัครสมาชิก ไม่มีการ upload ไฟล์ และไม่มีใครเก็บ telemetry จาก design tokens ของคุณ

ฟีเจอร์เด่น

มีรายละเอียดเล็ก ๆ ที่น่าชมเชย: placeholder ของ initial-value เปลี่ยนตาม syntax ที่เลือก — #7c3aed สำหรับ <color>, 0 สำหรับ <number> — ซึ่งชี้นำให้คุณตั้ง default ที่ตรงกับ type อยู่เสมอ และเพราะ output เป็น deterministic และ format สวย มัน review ใน pull request ได้ง่ายด้วย

วิธีใช้งาน

1. เปิด CSS @property Generator แล้วกรอกชื่อ property ในช่อง Property name เช่น --brand-color
2. เลือก syntax type จาก dropdown — <color> สำหรับสี, <length> สำหรับค่า px/rem, <number> สำหรับตัวเลข, <percentage> สำหรับสัดส่วน หรือ * สำหรับอะไรก็ได้
3. สลับ inherits เป็น true ถ้าอยากให้ element ลูกได้รับค่าจาก ancestor (เช่น theme colors) หรือปล่อยเป็น false สำหรับ property เฉพาะที่ที่เป็นมิตรกับ performance
4. พิมพ์ initial value ให้ตรงกับ syntax — live preview จะอัปเดตตามทันทีที่พิมพ์
5. กด copy แล้วนำ rule ที่ได้ไปวางใน stylesheet เหนือ rules ที่ใช้ตัวแปรนั้น

เข้าใจ @property ให้ลึกขึ้น

@property เป็นส่วนหนึ่งของ CSS Houdini — ชุด low-level APIs ที่เปิดเผยชิ้นส่วนภายในของ CSS engine ให้ผู้เขียนเข้าถึงได้ at-rule นี้อยู่ใน Properties and Values API และทำหน้าที่ register custom property เข้ากับ CSSOM ของ browser การ register ตอบคำถามสามข้อที่ browser เคยต้องเดาเอาเอง:

• syntax ประกาศ grammar ของค่า เช่น '<angle>' หรือ '<color>' เมื่อประกาศแล้ว browser สามารถ parse, validate และที่สำคัญที่สุดคือ interpolate ค่าได้ ส่วนตัวแปรที่ไม่ได้ register จะ interpolate แบบ string เท่านั้น หมายความว่าไม่มี calc(), ไม่มี transition ที่ลื่นไหล และ gradient ที่กระโดดแทนที่จะค่อย ๆ เฟด
• inherits กำหนดว่า property จะไหลลงไปตาม DOM เหมือน color (true) หรืออยู่เฉพาะ element เหมือน transform (false) การตั้งเป็น false ให้ที่เป็นไปได้ถือเป็น performance win ที่รู้กันดี — browser ข้ามการ re-resolve ตัวแปรทั้ง subtree ได้เลย
• initial-value คือ fallback ที่การันต์ ถ้าไม่มี rule ไหนเคย set property นี้ หรือ declaration กลายเป็น invalid ณ เวลา computed ค่า initial จะเข้ามาช่วย — หลีกเลี่ยงอาการ "unset variable flash"

รูปทรงมาตรฐานของ registration หน้าตาเป็นแบบนี้:

@property --spin-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

เมื่อมีแค่นี้ โค้ดด้านล่างก็ทำงานได้ทันที — ทั้งที่ก่อนมี @property มันเงียบเฉยไม่ทำอะไรเลย:

.spinner {
  rotate: var(--spin-angle);
  transition: --spin-angle 0.4s ease-out;
}
.spinner:hover {
  --spin-angle: 180deg;
}

เรื่อง browser support ในปี 2026 ถือว่าดีมาก — Chrome, Edge, Safari และ Firefox รองรับ @property แบบไม่ต้องใช้ prefix แล้วทั้งคู่ แม้จะไม่จำเป็นต้องเขียน feature test สำหรับ at-rule ตัวนี้ แต่หลัก progressive enhancement ยังใช้ได้ — browser เก่าจะข้าม registration ไปเฉย ๆ แล้วปฏิบัติกับตัวแปรเป็น string ธรรมดา ซึ่ง degrade ไปสู่ fallback values ของคุณอย่างสง่างาม

ตัวอย่างการใช้งานจริง

Animated gradients

สูตรคลาสสิก: conic หรือ linear gradient ที่ angle ของมัน animate ได้ แค่ register angle แล้ว interpolate ตอน hover หรือใน keyframe animation:

@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.card {
  background: linear-gradient(var(--gradient-angle), #7c3aed, #ec4899);
  animation: spin 6s linear infinite;
}

@keyframes spin {
  to {
    --gradient-angle: 360deg;
  }
}

ก่อนมี @property การ "animate" gradient ต้องพึ่ง pseudo-element hack กับ background-position registered properties ทำให้โค้ดอ่านสะอาดกว่ากันหลายเท่า

Theme-aware color tokens

Register brand colors เพื่อให้ theme เปลี่ยนแบบ transition ลื่น ๆ แทนที่จะสะบัด:

@property --brand-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #7c3aed;
}

:root[data-theme='dark'] {
  --brand-color: #a78bfa;
}

body {
  color: var(--brand-color);
  transition: --brand-color 0.3s ease;
}

สังเกตว่าตรงนี้ใช้ inherits: true — theme colors เป็น case ที่ต้องการ inheritance ลงไปตาม DOM จริง ๆ

Numeric design tokens ที่ใช้ calc() ได้

การ register --scale เป็น <number> ทำให้มันเข้าร่วมการคำนวณจริง และ animate ระหว่างค่าได้:

@property --card-scale {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

.card:hover {
  --card-scale: 1.05;
  transform: scale(var(--card-scale));
  transition: --card-scale 0.2s;
}

Spacing ที่ปรับตัวได้

token แบบ <length> ขับระบบ fluid spacing ควบคู่กับ clamp() ได้:

@property --gap {
  syntax: '<length>';
  inherits: false;
  initial-value: 1rem;
}

.layout {
  gap: var(--gap);
  transition: --gap 0.3s ease;
}
.layout.compact {
  --gap: 0.5rem;
}

Best Practices

• ตั้งชื่อ prefix ตามหน้าที่ — convention อย่าง --color-*, --space-* หรือ --effect-* ทำให้ registered tokens อธิบายตัวเอง
• Default inherits เป็น false แล้วค่อย opt-in — สงวน true ไว้สำหรับค่า theme/domain จริง ๆ แล้วสนุกกับ performance benefit ของ non-inherited resolution
• ตั้ง initial value เสมอ — ส่วนใหญ่ syntax ต้องมีค่านี้ (เฉพาะ * กับ string-like เท่านั้นที่ตัดออกได้) และมันช่วยกัน invalid computed values มาทำลาย fallbacks ของคุณ
• Initial value ต้องตรงกับ syntax — 0deg สำหรับ <angle>, #7c3aed สำหรับ <color>, 1 สำหรับ <number> คู่ที่ไม่ตรงกันจะ fail registration แบบเงียบ ๆ ในบาง engine
• Register ครั้งเดียว ไว้บนสุด — รวม rules @property ไว้ใกล้ ๆ นิยาม :root tokens เพื่อให้ลำดับการ register ชัดเจนสำหรับคน review
• ทดสอบเส้นทาง fallback — ลอง comment registration ออกชั่วคราว แล้วยืนยันว่า UI ยัง render ได้รับไหวกับ plain string variables

เริ่มสร้าง Typed Tokens วันนี้

เข้าไปที่ CSS @property Generator สร้าง typed custom property ตัวแรกของคุณ แล้วดูตัวแปรที่เคยแช่นิ่งกลายเป็นสิ่งที่ animate ได้ ฟรี ทำงาน client-side และ output เป็น CSS พร้อม copy ที่คุณ commit ได้ในนาทีเดียวกับที่ config เสร็จ

design system ของคุณสมควรได้ tokens ที่ browser เข้าใจจริง ๆ — มอบ typed properties ให้มัน แล้วปล่อยให้ interpolation engine ทำงานหนักแทน

เครื่องมือที่เกี่ยวข้อง

• CSS Custom Properties Generator — สร้างชุด variables ทั้งหมดสำหรับ themes และ design systems
• CSS clamp() Generator — สร้าง fluid responsive typography ด้วย min/preferred/max values
• CSS Animation Generator — ประกอบ keyframe animations มาจับคู่กับตัวแปรที่ animate ได้ใหม่ของคุณ

ขอให้สนุกกับการเขียน CSS!