ค้นหา CSS ที่ไม่ได้ใช้
หา unused CSS ฟรี วาง HTML และ CSS เพื่อดู selector ที่ไม่ตรงองค์ประกอบ ประเมินไบต์ที่ประหยัดได้ และคัดลอก stylesheet เฉพาะกฎที่ใช้ในเบราว์เซอร์
Loading tool...
ค้นหา CSS ที่ไม่ได้ใช้ คืออะไร?
Unused CSS Finder เป็นเครื่องมือฟรีในเบราว์เซอร์ที่เทียบ selector ใน CSS ที่วางไว้กับ HTML แสดงกฎที่ไม่ตรงกับอะไร และประมาณจำนวนไบต์ของกฎที่ไม่ได้ใช้
ประโยชน์หลัก
- ดู selector ที่ไม่ได้ใช้โดยไม่ต้องอัปโหลดโปรเจกต์
- ประมาณไบต์ใน stylesheet ที่ตัดได้
- คัดลอก unused CSS หรือ snapshot เฉพาะกฎที่ใช้
- สแกนทั้ง @media และ nested CSS
กรณีการใช้งาน
- •ทำความสะอาด stylesheet ของหน้า landing ก่อนเปิดตัว
- •ตรวจว่าไฟล์ CSS ของคอมโพเนนต์ชี้เฉพาะ markup ของมัน
- •ประมาณส่วนที่ประหยัดได้ก่อนรอบ PurgeCSS ที่ใหญ่กว่า
- •รีวิว CSS ที่คัดลอกมาจากหน้าเก่า
วิธีใช้ Unused CSS Finder
- วาง HTML: วาง fragment หรือเอกสารเต็ม class ที่ถูกเพิ่มด้วย JavaScript จะดูเหมือนไม่ได้ใช้เพราะสคริปต์ไม่ถูกรัน
- วาง CSS: ใส่ stylesheet ที่ต้องการตรวจ สแกน @media, @supports และ nested rules แต่ข้าม @keyframes และ @font-face
- อ่านรายงาน: กฎที่ไม่ได้ใช้จะขึ้นพร้อมประมาณไบต์ สไตล์ :hover และ :focus นับว่าใช้แล้วเมื่อส่วนที่เหลือของ selector มีใน HTML
- คัดลอก CSS ที่ต้องการ: คัดลอก unused CSS เพื่อตรวจ หรือคัดลอก used-only CSS เป็นจุดเริ่มต้นทำความสะอาด
คุณสมบัติหลัก
- รายการกฎที่ไม่ได้ใช้แบบสด พร้อมขนาดไบต์ต่อกฎ
- สรุปไบต์ที่ประหยัดได้เทียบกับ stylesheet ที่วางไว้
- คัดลอก unused CSS หรือ used-only CSS ได้ในคลิกเดียว
- เข้าใจ @media, @supports และ nested CSS ที่ใช้ &
- ถือว่า :hover และ ::before ถูกใช้เมื่อ base selector ตรงกับ HTML
คำถามที่พบบ่อย
ทำไม class ถึงขึ้นว่าไม่ได้ใช้ ทั้งที่ JavaScript เป็นคนใส่?
เครื่องมือนี้เห็นเฉพาะ HTML ที่วางไว้ ไม่รันสคริปต์ ดังนั้น class, ID และองค์ประกอบที่ถูกสร้างตอนรันจะดูเหมือนไม่ได้ใช้ หากต้องการ coverage หลัง JS ให้วาง markup จาก DevTools
:hover และ ::before นับว่าไม่ได้ใช้ไหม?
ไม่ ถ้าส่วนที่เหลือของ selector ตรงกับ HTML เช่น a:hover ถือว่าใช้เมื่อมี a และ .btn::before ใช้เมื่อมี .btn เครื่องมือจะตัด dynamic pseudo และ pseudo-element ออกก่อน query
selector ที่คั่นด้วยจุลภาคทำงานอย่างไร?
ถ้ามี selector ใดในลิสต์ตรงกับองค์ประกอบ กฎทั้งก้อนจะถูกเก็บไว้ .title, .ghost ยังถือว่าใช้เมื่อมี .title แม้จะไม่มี .ghost
HTML หรือ CSS ออกจากเบราว์เซอร์ไหม?
ไม่ การแปลงและจับคู่รันในหน้านี้ ใช้เครื่องมือแบบออฟไลน์ได้หลังจากโหลดหน้าแล้ว