เครื่องมือสร้าง CSS @property
เครื่องมือสร้าง CSS @property ออนไลน์ฟรี สร้าง typed custom properties พร้อมกำหนด syntax, inherits และ initial-value มีพรีวิวและคัดลอก CSS สำหรับ Houdini
Loading tool...
เครื่องมือสร้าง CSS @property คืออะไร?
CSS @property Generator เป็นเครื่องมือสร้าง typed CSS custom property แบบเห็นภาพ โดย @property at-rule ช่วยกำหนด syntax, การสืบทอด และ initial value ทำให้ CSS variable ตรวจสอบได้ง่าย animate ได้ดีขึ้น และดูแล design system ได้เป็นระเบียบ
ประโยชน์หลัก
- CSS custom property ที่กำหนดชนิดและตรวจสอบค่าได้
- สร้าง transition และ animation สำหรับค่าที่รองรับได้ลื่นไหล
- กำหนดพฤติกรรมการสืบทอดอย่างชัดเจน
- มี initial value ที่สม่ำเสมอสำหรับ design token
- ผลลัพธ์ CSS จัดรูปแบบและคัดลอกไปใช้ได้ทันที
กรณีการใช้งาน
- •ทดลองใช้ CSS Houdini
- •ทำ animation ให้ตัวแปรสีและขนาด
- •สร้าง design system token
- •กำหนด style สำหรับ component ที่ใช้ซ้ำ
วิธีใช้เครื่องมือสร้าง CSS @property
- ตั้งชื่อ property: ใส่ชื่อ custom property ที่ขึ้นต้นด้วยขีดกลางสองตัว เช่น --brand-color
- เลือก syntax: เลือกชนิดค่าที่ browser ควรตรวจสอบ เช่น <color> หรือ <length>
- ตั้ง inheritance และ initial value: เลือกว่าจะให้ property สืบทอดหรือไม่ และใส่ค่าเริ่มต้นที่ตรงกับ syntax
- พรีวิวและคัดลอก: ตรวจสอบพรีวิว แล้วคัดลอก @property rule ไปใส่ใน stylesheet
คุณสมบัติหลัก
- สร้าง @property at-rule พร้อมจัดรูปแบบ CSS ให้ถูกต้อง
- เลือก syntax ที่ใช้บ่อย เช่น color, length, number และ percentage
- กำหนดพฤติกรรมการสืบทอดและค่าเริ่มต้นได้
- พรีวิวค่าของ custom property ที่กำหนดแบบสด
- คัดลอกผลลัพธ์ไปใช้กับ CSS Houdini และ design system ได้ทันที
- ทำงานทั้งหมดใน browser ไม่อัปโหลดข้อมูล
คำถามที่พบบ่อย
CSS @property rule ใช้ทำอะไร?
@property ใช้ register CSS custom property พร้อมกำหนด syntax, พฤติกรรมการสืบทอด และค่าเริ่มต้น ทำให้ browser เข้าใจและ interpolate ค่าได้แม่นยำขึ้น
ทำไมต้องกำหนด syntax ให้ custom property?
syntax ช่วยให้ browser ตรวจสอบค่าและ interpolate ค่าที่เข้ากันได้สำหรับ transition และ animation เช่น การ animate color หรือ length อย่างลื่นไหล
inherits: false หมายความว่าอะไร?
หมายถึง custom property จะไม่สืบทอดจาก element แม่ โดย element ลูกจะใช้ initial value เว้นแต่จะกำหนดค่าใหม่โดยตรง
ใช้ @property กับ CSS animation ได้ไหม?
ได้ registered property ที่มี syntax รองรับสามารถ interpolate ได้ จึงสร้าง animation และ transition สำหรับค่าที่ custom property แบบไม่มีชนิดทำได้ไม่ดี