Speaking of css bloat...

Post here if your topic is about CSS HTML Validator but doesn't fit in another forum.
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Speaking of css bloat...

Post by RSteinwand »

... I'd like CSE tell me that I have css inlined that isn't be used. :D

Hi Albert,

If I have several classes and id's in inlined css and those classes and id's can't be found on the page, could CSE let me know? I'm not talking about anything obscure (like input type=password), just the low hanging fruit, classes and id's?

BTW, this is more of a want, than a need. :P
Rick
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Speaking of css bloat...

Post by Albert Wiersch »

Thanks. It's an interesting idea... it would have to be a simple check, like you said. I've made a note of it for possible future implementation but I can't guarantee anything. :D
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Speaking of css bloat...

Post by RSteinwand »

Thanks.
Rick
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Speaking of css bloat...

Post by Albert Wiersch »

I spent the day adding a simple check for inline CSS classes and IDs to v18/2018. The validator will keep a simple internal list of all inlined CSS classes and IDs and a list of all CSS classes used in "class" attributes and all IDs used in "id" attributes and then check if any classes or IDs were specified in the inline CSS but not used in the "class" or "id" attributes in the document.

Appropriate warning messages will be generated for CSS classes and IDs that were not used in the HTML. For unused classes, one warning message will be generated that lists the unused classes and for unused IDs another warning message will be generates that lists the unused IDs.

I hope this will be helpful and I'm not overlooking something. :)
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Speaking of css bloat...

Post by RSteinwand »

THANK YOU SANTA! :P
Rick
User avatar
Lou
Rank V - Professional
Posts: 295
Joined: Fri Jul 29, 2005 5:55 pm
Location: CO
Contact:

Re: Speaking of css bloat...

Post by Lou »

Now that is a tool!!
Lou
Say what you will about Sisyphus. He always has work.
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Speaking of css bloat...

Post by RSteinwand »

Can't wait to play with it. Every page on my site has critical css inlined via a Dreamweaver template, but also has critical css inlined for what's needed just for that page (like buttons or form css).

Are you filtering out :hover, :active, :focus, :checked? What about *?

Are you sorry you started this? :P
Rick
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Speaking of css bloat...

Post by Albert Wiersch »

Hi Rick,

It just looks at ".classname" and "#id". Nothing fancy... and pays no attention to the element/type selector that the class or ID is applied to, yet I still think it should be quite helpful. There may be something I'm overlooking though (the devil is always in the details).

I'll see if I can get a version to you to try soon via email or PM, but you may need to buy an upgrade since it needs a v18/2018 key now (although it should/may run in trial mode for awhile without it). UPDATE: I sent you a PM with a version to try.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Speaking of css bloat...

Post by RSteinwand »

Hi Albert,

It looks like you're missing CssClass.

Code: Select all

<div class="divtd valign"><asp:textbox id="Search" runat="server" CssClass="Textbox"></asp:textbox></div><div class="divtd nowrap">&nbsp;&nbsp;</div>
<div class="divtd valign"> <asp:button id="srchbtn" runat="server" CssClass="button" Text="Search" onclick="srchbtn_Click"></asp:button></div>
Here's a link: https://www.intercepteft.com/searchsite.aspx

I have classes & ids that are inlined, but used by my external menu script, so will have to mentally ignore them.

Haven't found any to remove yet, but the day is young. Thanks for adding this feature and letting me test it.
Rick
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Speaking of css bloat...

Post by Albert Wiersch »

Thanks. I'm working on improving this.

I've added a function you can use in a TNPL script to specify classes and IDs that you want to ignore even if CSS HTML Validator doesn't see them. Note that this will require the pro or higher edition because it requires the use of user functions.

I'm also working on recognizing the classes in the CssClass attribute for asp:* tags.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Speaking of css bloat...

Post by RSteinwand »

Cool!

Thanks!
Rick
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Speaking of css bloat...

Post by RSteinwand »

Albert do you have any plans to expand past classes and id's?

For example, my css reset included table elements for my home page, yet there was no table there at all. These were not used anywhere so were removed:

Code: Select all

sup,fieldset,table,tbody,tr,th,td
So far I've found this feature very useful and I've only used it on my home page. :D
Rick
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Speaking of css bloat...

Post by Albert Wiersch »

I had not thought about that but it seems like that would be a similar test to what is implemented for classes so I can probably get that in too, but probably not for the first official release that I hope to release very soon (next week if all goes well).

I'm glad you've found the new feature very useful. :)
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Speaking of css bloat...

Post by RSteinwand »

All that's missing now is double-clicking on the class name in Message Window and having the editor cursor move to the (highlighted) inlined css, like the Results window does.

Still anxiously waiting for styled message window content (html).
Rick
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Speaking of css bloat...

Post by Albert Wiersch »

RSteinwand wrote: Fri Dec 15, 2017 10:11 am All that's missing now is double-clicking on the class name in Message Window and having the editor cursor move to the (highlighted) inlined css, like the Results window does.

Still anxiously waiting for styled message window content (html).
Due to buggy components I had to revert the Message Window editor back to an older component that works with fewer bugs but that does not hyperlink the links. Is hyperlinking the links in the Message Window what you mostly mean by wanting styled message window content? If not then can you be more specific?

As for double-clicking on a class name, it may be possible to make it so that whenever you double-click on a word in the Message Window then it highlights the word and searches for it. Would that be helpful? You could then quickly do a search on any word in the Message Window, and this should include class names and IDs.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Post Reply