ตัวสร้าง CSS @scope
ตัวสร้าง CSS @scope ออนไลน์ฟรี สร้าง CSS @scope at-rule แบบ native ด้วย root selector และ lower-bound selector (ไม่บังคับ) เพื่อสร้าง donut scope พร้อม preview แบบเรียลไทม์ minify copy และ download ทำงานฝั่ง client 100% ไม่ต้องสมัครสมาชิก
Loading tool...
ตัวสร้าง CSS @scope คืออะไร?
ตัวสร้าง CSS @scope เป็นเครื่องมือฟรีที่ทำงานใน browser สร้าง CSS @scope at-rule แบบ native เพื่อจำกัดสไตล์ไว้ใน subtree ของ DOM ที่กำหนด คุณเลือก scope root selector ที่ descendants จะรับสไตล์ และ (ไม่บังคับ) lower-bound selector ที่หยุดไม่ให้ cascade ไปถึง child บางตัว เกิดเป็น donut scope ตัวสร้างจะตัดปีกกาและ at-rule ออกจาก declaration body เพื่อให้ output เป็น CSS ที่ถูกต้องเสมอ มีโหมด minify สำหรับ production และมาพร้อมพรีเซ็ตสามแบบสำหรับเนื้อหาแบบ inline, widget ซ้อนใน และ modal dialog ทุกอย่างทำงานใน browser ของคุณ เหมาะสำหรับนักพัฒนา front-end ทีม design system และผู้สร้าง component ที่ต้องการ style encapsulation ที่เชื่อถือได้โดยไม่ต้องใช้ Shadow DOM
ประโยชน์หลัก
- scoping CSS แบบ native โดยไม่ต้องใช้ Shadow DOM, iframe หรือระบบ BEM ที่ซับซ้อน
- lower-bound selector ที่เลือกได้ สร้าง donut scope เพื่อยกเว้น child ที่ซ้อนอยู่
- declaration body ที่ผ่านการกรอง รับประกัน CSS ที่ถูกต้องและ parse ได้ทุกครั้ง
- โหมด minify สำหรับ production พร้อม copy และ download เป็น stylesheet .css
- พรีเซ็ตให้สามแบบครอบคลุมเนื้อหาแบบ inline, widget ซ้อนใน และ modal dialog
กรณีการใช้งาน
- •จำกัดสไตล์ของ widget จาก third-party ให้ไม่รั่วไหลไปยังหน้า host
- •ตกแต่งเนื้อหาเนื้อหาบทความโดยไม่กระทบ sidebar, header หรือ footer
- •encapsulate สไตล์ของ modal dialog และยกเว้น backdrop ออกจาก cascade
- •สร้างต้นแบบ design-system token ที่ใช้เฉพาะใน sandbox เท่านั้น
- •สร้าง stylesheet แบบ progressively enhanced โดยใช้ @supports ร่วมกับ @scope
วิธีใช้ตัวสร้าง CSS @scope
- กำหนด Scope Root: ใส่ selector ของอิลิเมนต์ที่ต้องการให้สไตล์ใช้กับ subtree เช่น ".card" หรือ ".post > p" สไตล์ภายในบล็อก @scope จะใช้เฉพาะ descendants ของอิลิเมนต์นี้เท่านั้น
- เพิ่ม Lower-Bound Selector (ไม่บังคับ): เพื่อหยุดไม่ให้ cascade ไปถึง descendants บางตัว (donut scope) ให้พิมพ์ lower-bound selector เช่น ".no-scope" หรือ "aside, footer" ปล่อยว่างไว้หากต้องการให้สไตล์ใช้กับทั้ง subtree
- พิมพ์ CSS Declarations: ใส่ CSS declarations อย่างน้อยหนึ่งข้อ เช่น "color: red;" หรือ "padding: 12px;" ตัวสร้างจะตัดปีกกาและ at-rule ที่หลุดเข้ามาเพื่อให้ output ถูกต้องเสมอ เปิด Minify output เพื่อใช้กับ production
- คัดลอกหรือดาวน์โหลด: ตรวจสอบบล็อก @scope ที่สร้างขึ้นในพื้นที่ output แล้วกด Copy เพื่อส่งไปยังคลิปบอร์ด หรือ Download เพื่อบันทึกเป็นไฟล์ scoped.css ที่สามารถลิงก์จาก stylesheet ของคุณได้
คุณสมบัติหลัก
- scope root selector พร้อม lower-bound selector (ไม่บังคับ) สำหรับ donut scope
- preview CSS แบบจัดรูปแบบสด ๆ พร้อม output แบบ minify สำหรับ production ในคลิกเดียว
- พรีเซ็ตให้สามแบบ: เนื้อหาแบบ inline, widget ซ้อนใน และ modal dialog
- คัดลอกไปยังคลิปบอร์ดหรือดาวน์โหลดเป็น stylesheet .css
- ตัดปีกกาและ at-rule ออกเพื่อให้ CSS ที่สร้างขึ้นถูกต้องเสมอ
- ประมวลผลฝั่ง client 100% ไม่มีการเรียก API หรืออัปโหลด