tool for report and clean css file

[lionelts]

I read on the internet that topstyle can clean css file ! What are the functionnalities of topstyle refer to clean css .

I search a tool that support web ( http) and local file system directory ( file:// C:/) directory to
crawl my website ( css html ) and is able to say that there are
a) selector ( class name , id name) in html pages that are not use in any compound css file
b) selector in css that are not exist in html page



when say "able to say" i mean highlight selector , report file name and line , export clean css for each css file with only used or selector .
This tool should work on html compoment that are create using javascript ui framework since the html code is not rendering by default in the html page but appear after event occurs .


Thank's for any information iftopstyle is the right tool "all in one" ( no web service) to achieve that .

PS adobe call "selector1, selector2,selector3 { css definition }" a compound selector

[TopStyle Support]

I search a tool that (...) crawl my website ( css html ) and is able to say that there are
a) selector ( class name , id name) in html pages that are not use in any compound css file
b) selector in css that are not exist in html page

TopStyle's Site Reports support this:
a) Undefined Classes: displays HTML documents in your site that use style classes which aren't defined in any style sheet linked to those HTML documents.
b) Orphan Classes: displays style sheets which contain definitions for classes that aren't used in any HTML documents which link to those style sheets.

when say "able to say" i mean highlight selector , report file name and line , export clean css for each css file with only used or selector .

Confirmed. TopStyle's Site Reports support all of the above.

[lionelts]

that seem great i ll test all this by myselft to understand the GUI behaviour of topstyle .

thank's

[lionelts]

I test and give my feedback after 3hours of test

the preview contain an http html page link to 3 css files specific to this page and many others related to website but where seelctors could be apply , and my tab editor contain 3 css http files open from local fiel system .

1)When i clik on a welknow html element int the preview ( already study css selector file name/ location apply to this element ) ; topstyle don't show in the CSS selector windows all the selectors that are in my open css file and use by the remote html http file !! ( show me , file name and number line of seelctor location , name of selector ) .in the css seelctors windows only the selector for the active file is shown ( one selector name can be define in multi open CSS file ) . clik on the seelctor in "CSS selectors" don't highlight in the preview tab the html element even change occur in tge editor tab .


2) style sheet export seem to implicit say to me that a browser use only one css version syntax ( the general and the custom specific to browser ) So i have many questions that show my low level about understanding css !!!
Does a browser support many css at a time ?
Is there css properties that could be define in css1 and css2 syntax ?
If yes for this 2 questions , what is the behaviour or a browser when it discover a same functionnalities properties define
in css1 and css2 syntax ? the last item is apply or the last css version is apply ?
If i use css3 syntax , or specific browser syntax , is it usefull that topstyle say there is something invalid in the css tree for cs1 and css2 .
why not an number ( W3C specification) or letter ( specific to browser ) in front of all the properties use inside a selector ?

3) why when validate css , topstyle focus on some repeat attributes properties and alert us that many same properties ocurs in a selector rule since each same properties have differents values for follows syntax need by differents browser ? ( prefix was apply)

4) i don't find the way when my 3 locate css file are open to ask to topstyle to higliht the selector name that are not apply in the remote http html file load in the preview tab ?



5) for prefix , i don't understand how it work , if i use background properties and use webkit syntax i expect topstyle ll detect the webkit syntax and convert all the predefine value and custom values for anothers browsers but not

6) the style checker don't know in wich local fileS is define the selector use by the remote http html page . it seem work only for one css file at a time !!

7) topstyle don't detect same selector in the same css file in the CSS selectors windows , the detection occur only in the style cheker tab . the style checker don't locate the line number for this 2 locations selectors ( number line)

the preview pane windows that is locate only at the bottom of toptyle main windows is really a not intuitive !



9) there seem there is no interaction beetwen the preview and the others windows in the topstyle gui ?

10) site report work after using the top menu View Site report even tab report is at the bottom !!!
How site report work i have only open one http page and 3 css and topstyle scann all the css under the root directory we bsite .
My http html page use only 7 css file not use a the same time ( for printer ) and 3 specific to article content .
I only want that top style work on the css file define in the html page or the open one in topstyle !!


I really like the undo functionnalities


regard's

[TopStyle Support]

1)When i clik on a welknow html element int the preview ( already study css selector file name/ location apply to this element ) ; topstyle don't show in the CSS selector windows all the selectors that are in my open css file and use by the remote html http file !! ( show me , file name and number line of seelctor location , name of selector ) .in the css seelctors windows only the selector for the active file is shown ( one selector name can be define in multi open CSS file ) . clik on the seelctor in "CSS selectors" don't highlight in the preview tab the html element even change occur in tge editor tab .

The CSS Selectors panel displays the CSS selectors that are defined *in the activate document* (either a CSS document or a HTML document) only.

My advice is to bring up XRAY. Then click on a HTML element in the preview. The XRAY panel displays the CSS selectors that apply to this HTML element. Now click on a CSS selector in the XRAY panel, and TopStyle will open the CSS document where this CSS selector is defined.

[TopStyle Support]

3) why when validate css , topstyle focus on some repeat attributes properties and alert us that many same properties ocurs in a selector rule since each same properties have differents values for follows syntax need by differents browser ? ( prefix was apply)

Can you send me an example of the CSS you're trying to validate, please? Thanks!

5) for prefix , i don't understand how it work , if i use background properties and use webkit syntax i expect topstyle ll detect the webkit syntax and convert all the predefine value and custom values for anothers browsers but not

Probably because the other browsers support the CSS3 standards (and do not require a vendor prefix).

[TopStyle Support]

7) topstyle don't detect same selector in the same css file in the CSS selectors windows , the detection occur only in the style cheker tab . the style checker don't locate the line number for this 2 locations selectors ( number line)

Can you send me your CSS documents plus repeatable steps, please? Thanks!

10) site report work after using the top menu View Site report even tab report is at the bottom !!!

The Reports tab you're referring to does not display Site Reports -- it displays output for various validators (such as the W3C validators, for example)