วิธีการระบุคำจำกัดความ css ที่ไม่ได้ใช้


414

มีวิธีการที่ดีในการช่วยระบุคำจำกัดความ css ที่ไม่ได้ใช้ในโครงการหรือไม่? ไฟล์ css จำนวนมากถูกดึงเข้ามาและตอนนี้ฉันกำลังพยายามล้างสิ่งต่าง ๆ ให้น้อยลง


เมื่อคุณพูดว่า "ในโครงการ" - คุณหมายถึงอะไร? ขึ้นอยู่กับสภาพแวดล้อมที่คุณใช้คำตอบอาจแตกต่างกัน
เอียนโรบินสัน


ฉันสร้างเครื่องมือที่ทำงานได้ค่อนข้างดี นี่คือCode Code
toddmo

ฉันเขียนสคริปต์ที่สามารถทำได้สำหรับคุณ: github.com/kgoedecke/unused-css-parser
Kevin Goedecke

คำตอบ:


145

ลองดูที่ส่วนขยายของ Firefox ฝุ่น-Me ที่https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/


14
ขยายไม่ทำงานใน Firefox 4
mvark

5
การอัปเดตนี้ไม่เคยปรากฏขึ้นมาและหลังจากถามในฟอรัม SitePoint มันจะปรากฏว่าปลั๊กอินนั้นดีเท่ากับตาย
Mike B

3
ดูเหมือนว่าผู้เขียนจะโพสต์เวอร์ชันที่อัปเดตไปยังเว็บไซต์ของตัวเองเมื่อเร็ว ๆ นี้แม้แต่เวอร์ชันสำหรับ Opera ลองดูBrothercake.com
Funka

2
น่าเสียดายที่ไม่สามารถใช้งานได้อีกต่อไป
Jonathan

4
ฉันเขียนสิ่งใหม่แทนที่รวบรวมข้อมูลหลายหน้าในเว็บไซต์ของคุณ (ตามลิงก์ต่อไปนี้ซ้ำ ๆ ): jitbit.com/unusedcss
อเล็กซ์

259

เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chromeมีการตรวจสอบบัญชีแท็บการซึ่งสามารถแสดงตัวเลือก CSS ที่ไม่ได้ใช้

รันการตรวจสอบจากนั้นภายใต้ประสิทธิภาพของหน้าเว็บให้ดูที่นำกฎ CSS ที่ไม่ได้ใช้ออก

ป้อนคำอธิบายรูปภาพที่นี่


64
มันยอดเยี่ยม แต่แย่มากที่คุณไม่สามารถเรียกใช้มันในกลุ่มของหน้าเว็บได้ (มิฉะนั้นอาจใช้กฎ CSS ที่ไม่ได้ใช้)
Damon

17
ฉันเรียกใช้เครื่องมือตรวจสอบแล้วมันแสดง css ที่ไม่ได้ใช้ แต่ฉันจะใช้มันได้อย่างไร? ฉันต้องค้นหาแต่ละรายการด้วยตนเองและนำออกหรือไม่
Timothée HENRY

19
มันเป็นเพียงหน้าปัจจุบัน มันบอกว่า '2445 กฎ (83%) ของ CSS ไม่ได้ใช้โดยหน้าปัจจุบัน' ดังนั้นจึงไม่เป็นประโยชน์จริงๆ
chhantyal

8
เมื่อคุณขยายรายการคุณจะได้รับรายการกฎจริงที่ไม่ได้ใช้งาน แม้ว่ามันจะไม่เป็นประโยชน์กับเว็บไซต์ที่คุณเปลี่ยน DOM on-the-fly
Howie

10
ที่จริงนี่เพิ่งถูกย้ายไปที่ความครอบคลุม - ไปที่การตรวจสอบ -> ถัดจากคอนโซลที่ด้านล่างมีเมนู (เมนูประเภทจุด 3 จุด) และคุณสามารถเลือกความครอบคลุมได้ เพียงคลิกที่บันทึกและนำทาง
เกรแฮม Ritchie

65

ฉันเพิ่งค้นพบเว็บไซต์นี้ - http://unused-css.com/

ดูดี แต่ฉันจะต้องตรวจสอบ css สะอาดที่แสดงผลลัพธ์ก่อนที่จะอัปโหลดไปยังเว็บไซต์ใด ๆ ของฉัน

เช่นเดียวกับเครื่องมือทั้งหมดเหล่านี้ฉันจะต้องตรวจสอบว่ามันไม่ได้ตัด id และคลาสที่ไม่มีสไตล์ แต่ใช้เป็นตัวเลือก JavaScript

เนื้อหาด้านล่างนี้นำมาจากhttp://unused-css.com/ดังนั้นโปรดให้เครดิตกับพวกเขาสำหรับการแนะนำโซลูชันอื่น ๆ :

Latish Sehgalได้เขียนแอปพลิเคชัน windows เพื่อค้นหาและลบคลาส CSS ที่ไม่ได้ใช้ ฉันยังไม่ได้ทดสอบ แต่จากคำอธิบายคุณต้องระบุพา ธ ของไฟล์ html ของคุณและไฟล์ CSS หนึ่งไฟล์ โปรแกรมจะแสดงรายการตัวเลือก CSS ที่ไม่ได้ใช้ จากภาพหน้าจอดูเหมือนว่าไม่มีวิธีการส่งออกรายการนี้หรือดาวน์โหลดไฟล์ CSS ใหม่ที่สะอาด ดูเหมือนว่าบริการจะ จำกัด ไฟล์ CSS หนึ่งไฟล์เท่านั้น หากคุณมีไฟล์หลายไฟล์ที่คุณต้องการล้างคุณต้องล้างไฟล์ทีละไฟล์

Dust-Me Selectorsเป็นส่วนเสริมของ Firefox (สำหรับ v1.5 หรือใหม่กว่า) ที่ค้นหา CSS selector ที่ไม่ได้ใช้ มันแยกตัวเลือกทั้งหมดจากสไตล์ชีตทั้งหมดในหน้าเว็บที่คุณกำลังดูจากนั้นวิเคราะห์หน้านั้นเพื่อดูว่าตัวเลือกใดไม่ได้ใช้ จากนั้นข้อมูลจะถูกจัดเก็บเพื่อที่จะทดสอบหน้าถัดไปผู้เลือกสามารถข้ามรายการได้เมื่อพบ เครื่องมือนี้น่าจะเป็นแหล่งรวมเว็บไซต์ทั้งหมด แต่น่าเสียดายที่มันสามารถทำงานได้ นอกจากนี้ฉันไม่เชื่อว่าคุณสามารถกำหนดค่าและดาวน์โหลดไฟล์ CSS โดยลบสไตล์ออก

Topstyleเป็นแอพพลิเคชั่นของ Windows รวมถึงเครื่องมือมากมายในการแก้ไข CSS ฉันไม่ได้ทดสอบมาก แต่ดูเหมือนว่ามันมีความสามารถในการลบตัวเลือก CSS ที่ไม่ได้ใช้ออก ซอฟต์แวร์นี้มีราคา 80 USD

Liquidcity CSS cleanerเป็นสคริปต์ php ที่ใช้นิพจน์ทั่วไปเพื่อตรวจสอบสไตล์ของหนึ่งหน้า มันจะบอกคลาสที่ไม่มีให้ในโค้ด HTML ฉันยังไม่ได้ทดสอบวิธีแก้ปัญหานี้

Deadweightเป็นเครื่องมือครอบคลุม CSS ด้วยชุดของสไตล์ชีทและชุดของ URL มันจะกำหนดตัวเลือกที่จะใช้งานจริงและรายการที่สามารถลบได้อย่างปลอดภัย เครื่องมือนี้เป็นโมดูลทับทิมและจะทำงานกับเว็บไซต์ทางรถไฟเท่านั้น ตัวเลือกที่ไม่ได้ใช้จะต้องถูกลบออกจากไฟล์ CSS ด้วยตนเอง

Helium CSS เป็นเครื่องมือจาวาสคริปต์สำหรับการค้นพบ CSS ที่ไม่ได้ใช้ในหลาย ๆ หน้าบนเว็บไซต์ ก่อนอื่นคุณต้องติดตั้งไฟล์ javascript ไปยังหน้าที่คุณต้องการทดสอบ จากนั้นคุณต้องเรียกใช้ฟังก์ชันฮีเลียมเพื่อเริ่มการทำความสะอาด

UnusedCSS.com เป็นเว็บแอปพลิเคชันที่มีส่วนต่อประสานที่ใช้งานง่าย พิมพ์ URL ของเว็บไซต์และคุณจะได้รับรายชื่อตัวเลือก CSS สำหรับตัวเลือกแต่ละตัวตัวเลขจะระบุจำนวนครั้งที่ใช้ตัวเลือก บริการนี้มีข้อ จำกัด เล็กน้อย ไม่รองรับคำสั่ง @import คุณไม่สามารถกำหนดค่าและดาวน์โหลดไฟล์ CSS ใหม่ได้

CSSESSเป็น bookmarklet ที่ช่วยให้คุณค้นหา CSS selector ที่ไม่ได้ใช้ในเว็บไซต์ใด ๆ เครื่องมือนี้ใช้งานง่าย แต่ไม่อนุญาตให้คุณกำหนดค่าและดาวน์โหลดไฟล์ CSS ที่สะอาด มันจะแสดงรายการไฟล์ CSS ที่ไม่ได้ใช้เท่านั้น


5
เพียงแค่ทราบว่า unused-css.com จะไม่ยอมให้คุณดาวน์โหลด CSS โดยที่คุณไม่ต้องเป็นสมาชิกแบบชำระเงินและแผนต่ำสุดเริ่มต้นที่ $ 29 ต่อเดือน! ดูเหมือนว่าจะแพงไปหน่อยสำหรับบริการกับฉัน
georgiecasey

1
ฉันจะเพิ่ม purifycss github.com/purifycss/purifycssลงในส่วนผสม มันฟรีเป็นที่นิยมมาก (อ้างอิงจากดวงดาวใน GitHub) และทำงานร่วมกับแอพหน้าเดียว
Dmitry Gonchar

21

Google Page Speedสามารถทำสิ่งนั้นให้คุณได้ (จริง ๆ แล้วมันทำมากกว่าแค่บอกคุณว่า CSS ไม่ได้ใช้) บน FireFox มีให้เป็นส่วนเสริมของ FireBug จากนั้นมีเวอร์ชันออนไลน์ด้วย


8

CSS Minifier ที่ดีกว่าใน C # ดัมพ์สไตล์ที่ซ้ำซ้อน

คุณยังต้องการใช้ Dust-Me กับสิ่งนี้

โปรดทราบว่าหากมีเนื้อหาใด ๆ ที่ไม่สามารถมองเห็นได้ในขณะนี้คุณอาจทิ้งสไตล์ที่คุณต้องการ

แก้ไข: ลิงก์เสียหาย แต่ archive.org มีทั้งหน้าและรหัส


7

การใช้ CSS

ส่วนขยาย Firebug เพื่อดูกฎ CSS ที่ใช้จริง

การใช้งาน CSS เป็นส่วนเสริมสำหรับ Firebug (จำเป็นต้องติดตั้ง Firebug) ที่ช่วยให้คุณทราบกฎสไตล์ CSS ที่ไม่ได้ใช้ มันระบุ CSS ที่คุณใช้และไม่ได้ใช้ ช่วยให้คุณสามารถชี้ให้เห็นว่าส่วนไหนที่ไม่จำเป็นสามารถเอาออกได้ คุณควรใช้ส่วนเสริมนี้เพื่อให้ไฟล์ CSS ของคุณมีน้ำหนักเบาที่สุดเท่าที่จะทำได้


6

ดูเหมือนว่ามีคนอัปเดต DustMe Selectors เพื่อทำงานกับ Firefox อีกครั้งภายใต้ชื่อใหม่ - 'CSS Roundup' http://blog.brothersmorrison.com/?p=198


ผู้เขียนมีเวอร์ชั่นใหม่โพสต์เมื่อไม่กี่สัปดาห์ที่ผ่านมาบนเว็บไซต์ของเขาที่
www.brothercake.com

ปลั๊กอินนี้ไม่สามารถใช้งานได้อีกต่อไปและลิงก์สำหรับดาวน์โหลดอยู่ใน Brothercake is dead
Andrea Mauro


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.