Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How can i see what CSS code, thats in use.

    Hi

    I have a site with a lot of CSS code in the css file, i know thats there is alot thats not in use.
    How can i easilly see what CSS code that in use and what isent !?

    Is there a program that can scan the site and then show what CSS code thats no ref to !? or just show what CSS elements thats in use.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Yes, get firebug and use its inspect option.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    siraero (02-03-2012)

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi. thx alot sir.

  • #4
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts
    I wanted to expand on @abduraooft answer before you got yourself into trouble a bit.

    If you get firebug and use the inspect tool on a page it will show you the CSS affecting / in use for the element you are inspecting, HOWEVER, if the entire site shares a CSS file, then a style that is NOT referenced on the page you are inspecting may still be referenced by another page on the site attaching/using that CSS style sheet.

    Just wanted to caution you that seeing a CSS style that is not referenced on one page doesn't mean DELETE it, need to be sure its not used elsewhere.

    Also, I don't use firebug to it's full potential, so there may be another part of the inspect tool that goes deeper that inspecting a single page/element at a time. So if that is the case then I apologize.

  • #5
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Another really great way to see what CSS is being used by specific elements is to use the "Inspect Element" option in Google Chrome. You just right click and choose that option and it will bring up the HTML code on the left and all of the CSS attributes that are currently being applied to that element on the right.

    You'll also be able to see if there is CSS attributes overwriting other attributes using the CSS on the right side, it will have a cross through it if is being called but not applied

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    There used to be a Firefox extension called "Dust Me Selectors" that would spider an entire site and report on unused css selectors, but the development does not seem to have been maintained and it doesn't work with the recent Firefox versions.

    It's also available for Opera, although having just tried it this doesn't seem to work as well spidering a complex site.

    The other word of caution about deleting (apparently) unused css selectors is that the elements/classes affected may be created by javascript dynamically, and hence will still not be picked up by spidering all the pages in a sitemap.
    Last edited by SB65; 02-03-2012 at 07:24 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •