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

API คุณสมบัติและค่าของ CSS (@property)

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

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

@property คืออะไร

@property เป็นวิธีของ CSS สำหรับลงทะเบียนคุณสมบัติแบบกำหนดเองพร้อมชนิดข้อมูล พฤติกรรมการสืบทอด และค่าเริ่มต้น เป็นรูปแบบเชิงประกาศของ CSS Properties and Values API (CSS.registerProperty)

ไวยากรณ์ของ @property

ลงทะเบียนคุณสมบัติแบบกำหนดเองด้วยตัวบอกที่จำเป็นสามรายการ:

<div class="box"></div>

ตัวบอกไวยากรณ์

ตัวบอก syntax กำหนดชนิดของคุณสมบัติโดยใช้ชื่อชนิดของ CSS:

  • "<number>", "<integer>", "<percentage>"
  • "<angle>", "<color>", "<length>"
  • "<image>", "<transform-list>"
  • "*" — ยอมรับค่าใดก็ได้ (เช่นคุณสมบัติที่ไม่ได้ลงทะเบียน)

ตัวบอกการสืบทอด

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

ตัวบอกค่าเริ่มต้น

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

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

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

<div class="element is-hovered"></div>

เมื่อไม่มี @property

หากไม่ได้ลงทะเบียน CSS จะไม่ทราบชนิดของคุณสมบัติแบบกำหนดเอง การเปลี่ยนผ่านระหว่างค่าตัวแปรสองค่าจะเปลี่ยนแบบฉับพลันแทนการไล่ค่า เพราะเบราว์เซอร์ไม่สามารถคำนวณค่ากึ่งกลางของชนิดข้อมูลที่ไม่รู้จักได้

@property สำหรับภาพเคลื่อนไหวของไล่ระดับสี

การทำภาพเคลื่อนไหวให้จุดหยุดของไล่ระดับสี (ซึ่งก่อนหน้านี้ทำไม่ได้หากไม่มี @property):

<div class="loader loading"></div>

รูปแบบเทียบเท่าใน JavaScript

คุณยังสามารถลงทะเบียนคุณสมบัติโดยใช้ API ของ JavaScript ได้:

<div id="box"></div>
<script>
  // JavaScript equivalent of @property
  CSS.registerProperty({
    name: '--rotation',
    syntax: '<angle>',
    inherits: false,
    initialValue: '0deg'
  });

  document.getElementById('box').style.setProperty('--rotation', '45deg');
</script>

การรองรับของเบราว์เซอร์

@property รองรับใน Chrome 85 ขึ้นไป, Edge 85 ขึ้นไป, Safari 16.4 ขึ้นไป และ Firefox 128 ขึ้นไป เบราว์เซอร์สมัยใหม่รองรับอย่างแพร่หลาย

การใช้งานจริงของ @property

กรณีการใช้งานทั่วไป:

  • ทำภาพเคลื่อนไหวให้ตำแหน่งและสีของไล่ระดับสี
  • ทำภาพเคลื่อนไหวให้เฉดสี/ความอิ่มตัวในสี HSL
  • ทำภาพเคลื่อนไหวให้การเติมแถบความคืบหน้า
  • ทำภาพเคลื่อนไหวให้ตัวนับเพื่อแสดงตัวเลข
  • สร้างการเปลี่ยนผ่านระหว่างโหมดมืดและโหมดสว่างอย่างนุ่มนวลผ่านภาพเคลื่อนไหวของค่าแทนสี

ตรวจสอบความเข้าใจ

เหตุใดจึงต้องใช้ @property เมื่อทำภาพเคลื่อนไหวให้คุณสมบัติแบบกำหนดเองของ CSS

สรุป

@property ลงทะเบียนคุณสมบัติแบบกำหนดเองพร้อมชนิด syntax แฟล็ก inherits และ initial-value คุณสมบัติที่ลงทะเบียนแล้วสามารถสร้างภาพเคลื่อนไหวและเปลี่ยนผ่านได้ เพราะเบราว์เซอร์สามารถคำนวณค่าที่มีชนิดระหว่างค่าเหล่านั้นได้ ทำให้สร้างภาพเคลื่อนไหวของไล่ระดับสี การเปลี่ยนเฉดสี และภาพเคลื่อนไหวของตัวนับ ซึ่งไม่สามารถทำได้กับคุณสมบัติแบบกำหนดเองที่ไม่ได้ลงทะเบียน

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

บทเรียน “API คุณสมบัติและค่าของ CSS (@property)” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “API คุณสมบัติและค่าของ CSS (@property)”

ลงทะเบียนคุณสมบัติที่กำหนดเองพร้อมชนิดข้อมูลและการสืบทอดด้วย @property เพื่อสร้างตัวแปร CSS ที่ทำภาพเคลื่อนไหวได้ คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “API คุณสมบัติและค่าของ CSS (@property)” ใช้เวลานานแค่ไหน

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

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

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

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

  1. CSS Typed Object Model (OM)
  2. API คุณสมบัติและค่าของ CSS (@property)
  3. CSS Paint API: เวิร์กเล็ต
  4. CSS Layout API และขอบเขต
← กลับไปที่ CSS Academy