จัดรูปแบบ CSS ที่อัดแน่นให้ selector, property และ media query อ่านง่ายขึ้น
อินพุต / ผลลัพธ์
อินพุต ผลลัพธ์ และการคัดลอกอยู่ในพื้นที่หลักนี้ ตัวอย่างและรายการตรวจอยู่ด้านล่าง
เซสชันในเครื่อง
สถานะอินพุตเก็บไว้เฉพาะในเบราว์เซอร์นี้ เพื่อกู้คืนงานล่าสุดได้โดยไม่ต้องมีบัญชี
เปิดตัวอย่าง รายการตรวจ และเครื่องมือที่เกี่ยวข้องหลังจบขั้นตอนอินพุต/ผลลัพธ์หลัก
Review snippet CSS
จัดรูป snippet CSS คัดลอกรายงาน review CSS แล้วตรวจ minification และ contrast
จัดรูป snippet แล้วคัดลอกรายงานที่มี selector, token, cascade, specificity และ checklist
ถ้าจะแชร์ CSS แบบย่อ ให้ตรวจ compression, comment removal และรายงาน minify
ตรวจ color token ด้วย WCAG contrast เมื่อ snippet เปลี่ยนสี foreground/background
ตรวจ accessibility ของสี
แปลงสี foreground/background คัดลอกรายงาน contrast WCAG แล้วตรวจ CSS token และ asset ก่อน release
แปลงคู่ HEX/RGB/HSL ตรวจ AA/AAA แล้วคัดลอกรายงาน accessibility
ตรวจชื่อ CSS token, selector และค่าสีซ้ำก่อน commit
ตรวจว่า initials หรือ icon เล็กยังอ่านชัดบนพื้นหลังที่เลือกหรือไม่
ก่อนคัดลอก
กรณีผิดพลาดที่พบบ่อย
เครื่องมือที่เกี่ยวข้อง
คู่มือ
เปิดตัวอย่าง รายการตรวจ และเครื่องมือที่เกี่ยวข้องหลังจบขั้นตอนอินพุต/ผลลัพธ์หลัก
.card{display:flex;color:#111}@media (min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}:root{--gap:16px}.panel{padding:var(--gap);border:1px solid #ddd}ตัวอย่าง CSS
Selector block
1
Declarations
3
Media query
0
จำนวนบรรทัด
5
ตรวจตัวเลือก ค่า กฎ @ และขนาดหลังย่อก่อนคัดลอก
คุณสมบัติกำหนดเอง
0
ไม่พบคุณสมบัติกำหนดเอง
ค่าสี
1
#111
กฎ @
0
ไม่พบกฎ @
อัตราการบีบอัด
0%
ค่าลดลงโดยประมาณหลังลบช่องว่างและหมายเหตุ
ตัวอย่างตัวเลือก
ตัวเลือกแรกที่พบในข้อความนี้
รายงาน review CSS
คัดลอกรายงาน handoff ที่มี selector, token, cascade, specificity, compression, warning และ checklist
โหมด output
จัดรูปแบบ
Selector block
1
.card
Declarations
3
คุณสมบัติกำหนดเอง
0
ไม่พบคุณสมบัติกำหนดเอง
ค่าสี
1
#111
กฎ @
0
ไม่พบกฎ @
Selector ซ้ำ
ไม่ใช่
ความเสี่ยง specificity ของ ID
ไม่ใช่
มี comment
ไม่ใช่
อัตราการบีบอัด
0%
บันทึก review
Checklist review
# รายงาน review CSS - ตรวจเมื่อ: เวลา copy ใน browser - โหมด output: จัดรูปแบบ - ตัวอักษร: 39 - จำนวนบรรทัด: 5 - Selector block: 1 - Declarations: 3 - คุณสมบัติกำหนดเอง: 0 - ค่าสี: 1 - กฎ @: 0 - Selector ซ้ำ: ไม่ใช่ - ความเสี่ยง specificity ของ ID: ไม่ใช่ - มี comment: ไม่ใช่ - อัตราการบีบอัด: 0% - Raw CSS ไม่รวมในรายงานนี้ หากจำเป็นให้แนบ snippet ที่ปิดข้อมูลแล้วแยกต่างหาก ## บันทึก review - Formatter แบบเบานี้เหมาะกับ snippet เล็ก ๆ stylesheet ใหญ่ควรใช้ formatter ของโปรเจกต์ ## Checklist review - Test CSS ใน breakpoint, theme และ browser ปลายทางก่อน release - ยืนยันลำดับ selector, selector ซ้ำ และ specificity ให้ตรง cascade ที่ตั้งใจ - เทียบ custom properties และ color tokens กับ design system ก่อน copy - เก็บ license และ handoff comments หาก minify หรือ paste ลง docs - Run formatter หรือ build pipeline ของ project ก่อน commit stylesheet changes ขนาดใหญ่
ผลลัพธ์พร้อมคัดลอก
.card {
display:flex;
gap:16px;
color:#111
}