0Pricing
Frontend Academy · บทเรียน

คุณสมบัติกำหนดเองของ CSS: การประกาศและการอัปเดต

ประกาศตัวแปรด้วย -- บน :root อ้างอิงด้วย var() และอัปเดตแบบไดนามิกด้วย JavaScript เพื่อเปลี่ยนธีมได้ทันที

คุณสมบัติกำหนดเองของ CSS: การประกาศและการอัปเดต เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

สรุป: การประกาศและกำหนดขอบเขต

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

:root {
  --spacing: 8px;
  --color-brand: #6366f1;
}
.card {
  --spacing: 12px; /* local override for .card and its children */
  padding: var(--spacing);
}

การอัปเดตแบบทันทีผ่าน JavaScript

คุณสมบัติกำหนดเองสามารถเปลี่ยนแปลงขณะโปรแกรมทำงานได้ ใช้ element.style.setProperty('--name', value) เพื่อกำหนดค่าใหม่ระดับองค์ประกอบ หรืออัปเดตตัวแปรส่วนกลางบน :root เพื่อให้ทุกส่วนที่ใช้งานได้รับผลทันที

// Change globally:
document.documentElement.style.setProperty('--color-brand', '#ef4444');

// Change locally on one element:
const card = document.querySelector('.card');
card.style.setProperty('--bg', '#f9f9f9');

การอ่านค่าคุณสมบัติกำหนดเองใน JS

อ่านคุณสมบัติกำหนดเองด้วย getComputedStyle(element).getPropertyValue('--name').trim() วิธีนี้อ่านค่าที่คำนวณแล้วตามลำดับการมีผล ไม่ใช่เฉพาะค่าแบบอินไลน์

const brandColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-brand')
  .trim();
console.log(brandColor); // '#6366f1'

การทำให้คุณสมบัติกำหนดเองเคลื่อนไหว

เบราว์เซอร์สามารถคำนวณค่าระหว่างของคุณสมบัติกำหนดเองได้โดยใช้ @property (ฮูดินี) หรือใช้คุณสมบัติเหล่านี้ในทรานซิชันเมื่อใช้ร่วมกับ calc() หากไม่มี @property เบราว์เซอร์จะเปลี่ยนผ่านระหว่างค่าตัวแปรโดยตรงไม่ได้

@property — คุณสมบัติกำหนดเองที่ลงทะเบียน

กฎ @property ของ CSS ใช้ลงทะเบียนคุณสมบัติกำหนดเองพร้อมชนิด ค่าเริ่มต้น และกฎการสืบทอด คุณสมบัติที่ลงทะเบียนแล้วสามารถเปลี่ยนผ่านและทำให้เคลื่อนไหวได้โดยตรง

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

.card {
  opacity: var(--brand-opacity);
  transition: --brand-opacity 0.3s;
}
.card:hover {
  --brand-opacity: 0.7;
}

ระบบโทเค็นด้วยคุณสมบัติกำหนดเอง

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

:root {
  /* Colour tokens */
  --token-primary: #6366f1;
  --token-primary-hover: #4f46e5;
  --token-surface: #ffffff;
  --token-on-surface: #1f2937;

  /* Spacing tokens */
  --token-space-sm: 8px;
  --token-space-md: 16px;
  --token-space-lg: 24px;
}

คุณสมบัติกำหนดเองแบบตอบสนอง

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

:root {
  --container-max: 640px;
  --font-size-base: 15px;
}
@media (min-width: 1024px) {
  :root {
    --container-max: 1280px;
    --font-size-base: 16px;
  }
}

คุณสมบัติกำหนดเองใน calc()

ใช้ตัวแปรภายใน calc() สำหรับการคำนวณระยะห่างและขนาดที่สืบทอดมา วิธีนี้สร้างระบบกำหนดขนาดที่สอดคล้องและมีความสม่ำเสมอทางคณิตศาสตร์

:root { --base-space: 8px; }
.m-2 { margin: calc(var(--base-space) * 2); }  /* 16px */
.m-4 { margin: calc(var(--base-space) * 4); }  /* 32px */
.p-3 { padding: calc(var(--base-space) * 3); } /* 24px */

การใช้ธีมกับหลายแบรนด์

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

[data-theme='brand-a'] { --primary: #2563eb; }
[data-theme='brand-b'] { --primary: #16a34a; }
[data-theme='brand-c'] { --primary: #dc2626; }

คุณสมบัติกำหนดเองใน SVG

แอตทริบิวต์ SVG เช่น fill และ stroke สามารถใช้คุณสมบัติกำหนดเองได้ ทำให้กำหนดธีมให้ไอคอนจาก CSS ได้โดยไม่ต้องแก้ไขมาร์กอัป SVG

/* CSS */
:root { --icon-fill: #6366f1; }

/* SVG inline or referenced */
svg { fill: var(--icon-fill); }

การแก้ไขข้อผิดพลาดของคุณสมบัติกำหนดเอง

ใน DevTools ของ Chrome ให้เลือกองค์ประกอบแล้วดูแท็บค่าที่คำนวณแล้วเพื่อดูค่าคุณสมบัติกำหนดเอง แผงรูปแบบจะแสดงว่าตัวแปรแต่ละตัวประกาศไว้ที่ใด ส่วนที่สืบทอดจะแสดงตัวแปรจากองค์ประกอบแม่

ตรวจสอบอย่างรวดเร็ว

เมธอด JavaScript ใดใช้อัปเดตคุณสมบัติกำหนดเองของ CSS บนองค์ประกอบ

สรุป: คุณสมบัติกำหนดเองของ CSS เชิงลึก

ประกาศบน :root สำหรับค่าทั่วไป และกำหนดค่าใหม่บนองค์ประกอบลูกเพื่อใช้ในขอบเขตเฉพาะที่ อัปเดตด้วย style.setProperty จาก JS อ่านค่าด้วย getComputedStyle ใช้ @property เพื่อเปิดใช้ทรานซิชันโดยตรง ใช้เป็นโทเค็นการออกแบบเพื่อให้มีแหล่งข้อมูลจริงเพียงแหล่งเดียว และกำหนดค่าใหม่ในคิวรีสื่อสำหรับโทเค็นแบบตอบสนอง

คำถามที่พบบ่อย

บทเรียน “คุณสมบัติกำหนดเองของ CSS: การประกาศและการอัปเดต” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “คุณสมบัติกำหนดเองของ CSS: การประกาศและการอัปเดต” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “คุณสมบัติกำหนดเองของ CSS: การประกาศและการอัปเดต”

ประกาศตัวแปรด้วย -- บน :root อ้างอิงด้วย var() และอัปเดตแบบไดนามิกด้วย JavaScript เพื่อเปลี่ยนธีมได้ทันที คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “คุณสมบัติกำหนดเองของ CSS: การประกาศและการอัปเดต” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. คุณสมบัติกำหนดเองของ CSS: การประกาศและการอัปเดต
  2. การเปลี่ยนผ่าน: คุณสมบัติ ระยะเวลา และจังหวะ
  3. แอนิเมชัน @keyframes
  4. การเคารพ prefers-reduced-motion
← กลับไปที่ Frontend Academy