มีวิธีการที่ดีในการช่วยระบุคำจำกัดความ css ที่ไม่ได้ใช้ในโครงการหรือไม่? ไฟล์ css จำนวนมากถูกดึงเข้ามาและตอนนี้ฉันกำลังพยายามล้างสิ่งต่าง ๆ ให้น้อยลง
มีวิธีการที่ดีในการช่วยระบุคำจำกัดความ css ที่ไม่ได้ใช้ในโครงการหรือไม่? ไฟล์ css จำนวนมากถูกดึงเข้ามาและตอนนี้ฉันกำลังพยายามล้างสิ่งต่าง ๆ ให้น้อยลง
คำตอบ:
ลองดูที่ส่วนขยายของ Firefox ฝุ่น-Me ที่https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chromeมีการตรวจสอบบัญชีแท็บการซึ่งสามารถแสดงตัวเลือก CSS ที่ไม่ได้ใช้
รันการตรวจสอบจากนั้นภายใต้ประสิทธิภาพของหน้าเว็บให้ดูที่นำกฎ CSS ที่ไม่ได้ใช้ออก
ฉันเพิ่งค้นพบเว็บไซต์นี้ - 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 ที่ไม่ได้ใช้เท่านั้น
Google Page Speedสามารถทำสิ่งนั้นให้คุณได้ (จริง ๆ แล้วมันทำมากกว่าแค่บอกคุณว่า CSS ไม่ได้ใช้) บน FireFox มีให้เป็นส่วนเสริมของ FireBug จากนั้นมีเวอร์ชันออนไลน์ด้วย
CSS Minifier ที่ดีกว่าใน C # ดัมพ์สไตล์ที่ซ้ำซ้อน
คุณยังต้องการใช้ Dust-Me กับสิ่งนี้
โปรดทราบว่าหากมีเนื้อหาใด ๆ ที่ไม่สามารถมองเห็นได้ในขณะนี้คุณอาจทิ้งสไตล์ที่คุณต้องการ
แก้ไข: ลิงก์เสียหาย แต่ archive.org มีทั้งหน้าและรหัส
ส่วนขยาย Firebug เพื่อดูกฎ CSS ที่ใช้จริง
การใช้งาน CSS เป็นส่วนเสริมสำหรับ Firebug (จำเป็นต้องติดตั้ง Firebug) ที่ช่วยให้คุณทราบกฎสไตล์ CSS ที่ไม่ได้ใช้ มันระบุ CSS ที่คุณใช้และไม่ได้ใช้ ช่วยให้คุณสามารถชี้ให้เห็นว่าส่วนไหนที่ไม่จำเป็นสามารถเอาออกได้ คุณควรใช้ส่วนเสริมนี้เพื่อให้ไฟล์ CSS ของคุณมีน้ำหนักเบาที่สุดเท่าที่จะทำได้
ดูเหมือนว่ามีคนอัปเดต DustMe Selectors เพื่อทำงานกับ Firefox อีกครั้งภายใต้ชื่อใหม่ - 'CSS Roundup' http://blog.brothersmorrison.com/?p=198
ใช้แถบเครื่องมือสำหรับนักพัฒนาของ Internet Explorer ดู s > ตัวเลือก CSS ที่ตรงกัน : ดูรายงานของกฎสไตล์ทั้งหมดและจำนวนครั้งที่ใช้ในหน้าปัจจุบัน
ลองดูPageSpeed ของ Google สำหรับ FirefoxFirefox มันทำได้และโหลดทั้งหมดมากกว่า
เห็นได้ชัดว่าปลั๊กอินของ Chrome อยู่ในระหว่างการพัฒนาเช่นกัน