ค่าทางเลือกและ var()
ระบุค่าทางเลือกใน var() เมื่อคุณสมบัติกำหนดเองไม่ได้ถูกกำหนดหรือไม่ถูกต้อง
ค่าทางเลือกและ var() เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
ไวยากรณ์ค่าสำรองของ var()
ฟังก์ชัน var() รับอาร์กิวเมนต์ตัวที่สองเป็นตัวเลือก ซึ่งทำหน้าที่เป็นค่าสำรองเมื่อไม่ได้กำหนดพร็อพเพอร์ตีแบบกำหนดเอง
<button class="button">Fallback: royalblue</button>
กรณีที่ใช้ค่าสำรอง
ระบบจะใช้ค่าสำรองเมื่อ:
- ไม่ได้กำหนดพร็อพเพอร์ตีไว้ในขอบเขต
- พร็อพเพอร์ตีมีค่าเป็น
initial - พร็อพเพอร์ตีถูกประกาศด้วยค่าที่ไม่ถูกต้องสำหรับบริบทนั้น
ค่าสำรองหลายระดับ
ซ้อนการเรียก var() เพื่อเชื่อมค่าสำรองหลายระดับ:
<p class="text">Falls through two levels to #3b82f6</p>
ค่าสำรองสามารถเป็นค่าใดก็ได้
ค่าสำรองสามารถเป็นค่าที่ถูกต้องใด ๆ สำหรับพร็อพเพอร์ตี รวมถึงตัวแปรอื่น ค่าที่คำนวณแล้ว หรือค่าคงที่:
<div class="card">16px / 50%</div>
คีย์เวิร์ด initial
การตั้งค่าพร็อพเพอร์ตีแบบกำหนดเองเป็น initial จะทำให้เสมือนไม่เคยกำหนดค่าพร็อพเพอร์ตีนี้ เมื่อใช้ร่วมกับค่าสำรอง จะช่วยให้องค์ประกอบเลือกไม่รับพร็อพเพอร์ตีแบบกำหนดเองที่สืบทอดมาได้
<div class="no-theme">
<button class="button">Falls back to gray</button>
</div>
ค่าที่ไม่ถูกต้องซึ่งรับประกันได้
การใช้ initial เป็นค่าของพร็อพเพอร์ตีแบบกำหนดเองเป็นเทคนิคที่รับประกันว่าค่าสำรองจะถูกเรียกใช้ วิธีนี้ช่วยสร้างแฟล็กคุณลักษณะเสริมใน CSS ได้
พร็อพเพอร์ตีแบบกำหนดเอง + @property
กฎ @property (Houdini) ใช้ลงทะเบียนพร็อพเพอร์ตีแบบกำหนดเองที่มีชนิดข้อมูล พร้อมค่าเริ่มต้นที่รับประกันได้ วิธีนี้มีความเสถียรมากกว่าการพึ่งพาค่าสำรอง
<div class="track">
<div class="bar"></div>
</div>
ค่าสำรองสำหรับค่าที่ปลอดภัยต่อแอนิเมชัน
ตรวจสอบให้แน่ใจว่าการเปลี่ยนแปลงยังทำงานได้แม้ไม่ได้กำหนดพร็อพเพอร์ตีแบบกำหนดเอง โดยระบุค่าสำรองที่ปลอดภัยและสามารถเปลี่ยนแปลงต่อเนื่องจากค่านั้นได้:
<div class="modal">Modal shown via --modal-opacity: 1 (fallback is 0 when unset)</div>
การดีบักตัวแปรที่หายไป
หากไม่มีพร็อพเพอร์ตีแบบกำหนดเองและไม่ได้ระบุค่าสำรอง พร็อพเพอร์ตีจะคำนวณเป็นค่าเริ่มต้น (มักเป็นคีย์เวิร์ด initial) สำหรับสี อาจทำให้ได้ผลลัพธ์โปร่งใสหรือดำโดยไม่คาดคิด ควรเพิ่มค่าสำรองให้กับพร็อพเพอร์ตีที่สำคัญเสมอ
var() ในพร็อพเพอร์ตีแบบกำหนดเอง
ค่าของพร็อพเพอร์ตีแบบกำหนดเองสามารถอ้างอิงพร็อพเพอร์ตีแบบกำหนดเองอื่นได้ ทำให้สร้างสายโซ่ของโทเค็น:
<div class="swatch swatch-primary"></div>
<div class="swatch swatch-light"></div>
ค่าทดแทนและความจำเพาะเจาะจง
ค่าทดแทนไม่เกี่ยวข้องกับความจำเพาะเจาะจง แต่จะมีผลเฉพาะเมื่อคุณสมบัติกำหนดเองที่อ้างถึงไม่ได้กำหนดไว้หรือไม่ถูกต้อง ความจำเพาะเจาะจงจะเป็นตัวกำหนดว่ากฎใดเป็นผู้กำหนดคุณสมบัติกำหนดเอง ไม่ได้กำหนดว่าค่าทดแทนใดจะถูกเลือกใช้
ตรวจสอบความเข้าใจอย่างรวดเร็ว
color: var(--theme-text, #111) ทำอะไรเมื่อไม่ได้กำหนด --theme-text ไว้
สรุปทบทวน
var(--name, fallback) จะให้ค่าทดแทนเมื่อไม่ได้กำหนดคุณสมบัติกำหนดเองไว้ สามารถซ้อนค่าทดแทนหลายชั้นได้ ใช้ @property สำหรับคุณสมบัติกำหนดเองที่มีชนิดข้อมูลและค่าเริ่มต้นที่รับประกันไว้ ควรระบุค่าทดแทนให้คุณสมบัติด้านภาพที่สำคัญเสมอ
คำถามที่พบบ่อย
บทเรียน “ค่าทางเลือกและ var()” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ค่าทางเลือกและ var()” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ค่าทางเลือกและ var()”
ระบุค่าทางเลือกใน var() เมื่อคุณสมบัติกำหนดเองไม่ได้ถูกกำหนดหรือไม่ถูกต้อง คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ค่าทางเลือกและ var()” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การประกาศและใช้งานคุณสมบัติกำหนดเอง
- ค่าทางเลือกและ var()
- การกำหนดขอบเขตตัวแปรให้คอมโพเนนต์
- การอัปเดตตัวแปรด้วย JavaScript