Re: [css-d] Tool to tell me where a rule is used

[russ]

So, are you wanting a tool that will look through the CSS and report which 
of the classes or ids do, or don't, show up in the HTML?

I don't have a suggestion, I'm just trying to understand the goal.

Russ


- Original Message - 
From: "Ellen Herzfeld" 
To: 
Sent: Thursday, July 08, 2010 10:49 AM
Subject: [css-d] Tool to tell me where a rule is used


> Hello,
>
> I am doing a make over of a large site. There is a lot of tweaking.
>
> I use firebug and the webkit dev tools (and even the IE dev tools 
> sometimes) but I'm looking for something different.
>
> When I go over my stylesheets to clean them up and organize them in a way 
> that's comprehensible to me at least, I sometimes wonder why I have this 
> rule. I use some classes and ids for the selectors when I can't figure out 
> how to do otherwise, but I mostly try to avoid having them all over the 
> place. When the stylesheet starts getting a bit long I find that the 
> reason for a rule isn't always totally obvious and it sometimes takes me a 
> while to remember or figure out where it is used. I also want to avoid 
> putting comments everywhere.
>
> I would like a tool that takes a rule and goes through my pages and gives 
> me a report on where the rule is actually really used.
>
> So if it isn't used anywhere anymore (most likely because I changed 
> something somewhere) I will be able to remove it safely.
>
> Does this make sense? Does such a tool exist?
>
> Ellen
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ 

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Tool to tell me where a rule is used

[Climis, Tim]

> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
> boun...@lists.css-discuss.org] On Behalf Of Ellen Herzfeld
> Sent: Thursday, July 08, 2010 2:17 PM
> To: css-d@lists.css-discuss.org
> Cc: jta...@rocketmail.com
> Subject: Re: [css-d] Tool to tell me where a rule is used
> 
> 
> On 8 Jul 2010, at 19:00, Jay Tanna wrote:
> 
> >
> > The only way I can think of is to to do a search for class name or ID
> name.  Notepad is pretty good doing this.  Try Edit, Find.  Then you can
> use Find Next to go to the next occurence.  For ID you will have only
> one item on the page so that is not the problem.
> >
> > hth
> >
> 
> 
> As I said in my post, though obviously not clearly, I use very few classes
> and ids. I'm on a Mac and have powerful text editors that can search
> through many files quickly, even using regular expressions. But with
> mostly descendant selectors, I think it would be mostly useless.
> 

Quick thought that could be totally useless...

I've never used jQuery (which is why this might be useless), but it's my 
understanding that it allows you to select dom elements via css syntax.  
Perhaps you could do an onload script that uses any rules that you're wondering 
about, and then email you the page name if the rule matches something.

Then you'd have to do something to load every page in your site, which can 
probably be done with some script or another.

But it certainly seems like there ought to be an easier way.

---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Tool to tell me where a rule is used

[Ellen Herzfeld]

On 8 Jul 2010, at 19:00, Jay Tanna wrote:

> 
> The only way I can think of is to to do a search for class name or ID name.  
> Notepad is pretty good doing this.  Try Edit, Find.  Then you can use Find 
> Next to go to the next occurence.  For ID you will have only one item on the 
> page so that is not the problem.
> 
> hth
> 


As I said in my post, though obviously not clearly, I use very few classes and 
ids. I'm on a Mac and have powerful text editors that can search through many 
files quickly, even using regular expressions. But with mostly descendant 
selectors, I think it would be mostly useless.

Ellen
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Tool to tell me where a rule is used

[Dejan Kozina]

Nearly there! I believe this Firebug extension might be what you're
looking for:
http://robertnyman.com/firefinder/

"Firefinder is an extension to Firebug (in Firefox) and offers the
functionality to, in a quick way, find HTML elements matching chosen CSS
selector(s) or XPath expression. It allows you to instantly test your
CSS selectors in the page while seeing the content at the same time, and
matching elements will be highlighted."

And there's another one that does more or less what Dust-me does:
https://addons.mozilla.org/en-US/firefox/addon/10704

djn

David Laakso wrote:
> Ellen Herzfeld wrote:
>> I would like a tool that takes a rule and goes through my pages and gives me 
>> a report on where the rule is actually really used.
>>
>> So if it isn't used anywhere anymore (most likely because I changed 
>> something somewhere) I will be able to remove it safely.
>>
>> Does this make sense? Does such a tool exist?
>>
>> Ellen
>>   
> 
> 
> 
> 
> 
> 
> 
> 
> Perseverance and a "clock without hands" work well... :-)
> 
> In the meantime, this finds unused CSS selectors:
> 
> 
> Best,
> ~d
> 
> 
> 
> 
> 
> 

-- 
-
Dejan Kozina Web design studio
Dolina 346 (TS) - I-34018 Italy
tel./fax: +39 040 228 436 - cell.: +39 348 7355 225 skype: dejankozina
http://www.kozina.com/  - e-mail: de...@kozina.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Tool to tell me where a rule is used

[Ellen Herzfeld]

On 8 Jul 2010, at 19:01, Chris F.A. Johnson wrote:
> 
>  There's a standard tool on *nix systems called grep.
> 
>  For example, searching for the class 'nav', this will print the
>  line numbers as well as lines containinf it:
> 
> grep -n 'class=".*nav.*"' file.html
> 
>  I believe it can be installed on Windows systems.
> 


I'm acquainted with regular expressions and have a number of editors on my Mac 
that I could use. The problem, which I apparently didn't make clear in my 
initial post, is that I use very few ids and classes.

So I don't think grep will be much help when I'm using mostly descendant 
selectors.

Ellen

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Tool to tell me where a rule is used

[Ellen Herzfeld]

On 8 Jul 2010, at 19:04, David Laakso wrote:
> 
> Perseverance and a "clock without hands" work well... :-)
> 
> In the meantime, this finds unused CSS selectors:
> 
> 
> Best,
> ~d
> 


Thanks for the tip. I'll try it out and will report back.

Strange that this doesn't seem to be something that was seen as a "need" a long 
time ago.

To tell the truth, I didn't formulate the need to myself till recently. But 
then it may be that when using lots of ids and classes everywhere, as I did 
previously, it's much easier to see and find things.

This time around, I'm trying, for a number of reasons, to limit classes and ids 
to a bare minimum.

Ellen
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Tool to tell me where a rule is used

[David Laakso]

Ellen Herzfeld wrote:
> I would like a tool that takes a rule and goes through my pages and gives me 
> a report on where the rule is actually really used.
>
> So if it isn't used anywhere anymore (most likely because I changed something 
> somewhere) I will be able to remove it safely.
>
> Does this make sense? Does such a tool exist?
>
> Ellen
>   








Perseverance and a "clock without hands" work well... :-)

In the meantime, this finds unused CSS selectors:


Best,
~d






-- 
desktop
http://chelseacreekstudio.com/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Tool to tell me where a rule is used

[Jay Tanna]

The only way I can think of is to to do a search for class name or ID name.  
Notepad is pretty good doing this.  Try Edit, Find.  Then you can use Find Next 
to go to the next occurence.  For ID you will have only one item on the page so 
that is not the problem.

hth


--- On Thu, 8/7/10, Ellen Herzfeld  wrote:


> Hello,
> 
> I am doing a make over of a large site. There is a lot of
> tweaking.
> 
> I use firebug and the webkit dev tools (and even the IE dev
> tools sometimes) but I'm looking for something different.
> 
> When I go over my stylesheets to clean them up and organize
> them in a way that's comprehensible to me at least, I
> sometimes wonder why I have this rule. I use some classes
> and ids for the selectors when I can't figure out how to do
> otherwise, but I mostly try to avoid having them all over
> the place. When the stylesheet starts getting a bit long I
> find that the reason for a rule isn't always totally obvious
> and it sometimes takes me a while to remember or figure out
> where it is used. I also want to avoid putting comments
> everywhere.
> 
> I would like a tool that takes a rule and goes through my
> pages and gives me a report on where the rule is actually
> really used.
> 
> So if it isn't used anywhere anymore (most likely because I
> changed something somewhere) I will be able to remove it
> safely.
> 
> 


  
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Tool to tell me where a rule is used

[Chris F.A. Johnson]

On Thu, 8 Jul 2010, Ellen Herzfeld wrote:

> Hello,
> 
> I am doing a make over of a large site. There is a lot of tweaking.
> 
> I use firebug and the webkit dev tools (and even the IE dev tools sometimes) 
> but I'm looking for something different.
> 
> When I go over my stylesheets to clean them up and organize them in a way 
> that's comprehensible to me at least, I sometimes wonder why I have this 
> rule. I use some classes and ids for the selectors when I can't figure out 
> how to do otherwise, but I mostly try to avoid having them all over the 
> place. When the stylesheet starts getting a bit long I find that the reason 
> for a rule isn't always totally obvious and it sometimes takes me a while to 
> remember or figure out where it is used. I also want to avoid putting 
> comments everywhere.
> 
> I would like a tool that takes a rule and goes through my pages and gives me 
> a report on where the rule is actually really used.
> 
> So if it isn't used anywhere anymore (most likely because I changed something 
> somewhere) I will be able to remove it safely.
> 
> Does this make sense? Does such a tool exist?

   There's a standard tool on *nix systems called grep.

   For example, searching for the class 'nav', this will print the
   line numbers as well as lines containinf it:

grep -n 'class=".*nav.*"' file.html

   I believe it can be installed on Windows systems.

-- 
   Chris F.A. Johnson, 
   Author:
   Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Tool to tell me where a rule is used

[Ellen Herzfeld]

Hello,

I am doing a make over of a large site. There is a lot of tweaking.

I use firebug and the webkit dev tools (and even the IE dev tools sometimes) 
but I'm looking for something different.

When I go over my stylesheets to clean them up and organize them in a way 
that's comprehensible to me at least, I sometimes wonder why I have this rule. 
I use some classes and ids for the selectors when I can't figure out how to do 
otherwise, but I mostly try to avoid having them all over the place. When the 
stylesheet starts getting a bit long I find that the reason for a rule isn't 
always totally obvious and it sometimes takes me a while to remember or figure 
out where it is used. I also want to avoid putting comments everywhere.

I would like a tool that takes a rule and goes through my pages and gives me a 
report on where the rule is actually really used.

So if it isn't used anywhere anymore (most likely because I changed something 
somewhere) I will be able to remove it safely.

Does this make sense? Does such a tool exist?

Ellen
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari 'overlabel' absolute position problem

[Eystein Alnaes]

> > Hi,
> > I'm using the jQuery version (
> >
> http://scott.sauyet.com/thoughts/archives/2007/03/31/overlabel-with-jquery/
> )
> > of the overlabel.js script from A List Appart (
> > http://www.alistapart.com/articles/makingcompactformsmoreaccessible).
> >
> > Hold on - this is a CSS question!
> > I've triggered some weird behaviour in Safari (Chrome/webkit) which I
> assume
> > comes from the absolute positioning of the  element. To see it in
> > action go to http://unf-j016.universalfavourite.com.au/, fill in a
> couple
> > characters in the "Enter your e-mail to join…" field, then try clicking
> with
> > the mouse to set the marker in between the characters you just filled in.
> It
> > doesn't work.
> >
> > I'm pretty sure it's CSS related, because this issue doesn't appear on
> the
> > script's demo page (http://scott.sauyet.com/Javascript/Demo/Overlabel/).
>
> I find this to be at least in part a javascript problem.
> In Safari I was able to duplicate your observed behavior.
> But, when I entered preferences, disabled javascript, then reloaded
> the page the behavior was gone.
>
> I did not trace the javascript. It is possible that the javascript is
> loading css definitions. I did not look.
>
> At the moment, all I have verified is the existence of your issue in
> Safari with js enabled and the absence of the problem in Safari with
> js disabled.
>
> Regards,
> Claude Needham
>

Yes, you are correct - the javascript adds classes to the DOM, which is
styled with the CSS. That is why the problem will go away with javascript
disabled. I'm still no closer to finding the reason for the bug though.

Eystein
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/