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
Rank VI - Professional
Posts: 585
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Speaking of css bloat...

Post by RSteinwand » Wed Oct 11, 2017 12:03 pm

... 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
Site Admin
Posts: 3299
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Speaking of css bloat...

Post by Albert Wiersch » Wed Oct 11, 2017 12:55 pm

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
Image
Albert Wiersch

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

Re: Speaking of css bloat...

Post by RSteinwand » Wed Oct 11, 2017 1:05 pm

Thanks.
Rick

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

Re: Speaking of css bloat...

Post by Albert Wiersch » Tue Dec 05, 2017 6:18 pm

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. :)
Image
Albert Wiersch

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

Re: Speaking of css bloat...

Post by RSteinwand » Tue Dec 05, 2017 6:34 pm

THANK YOU SANTA! :P
Rick

User avatar
Lou
Rank V - Professional
Rank V - Professional
Posts: 255
Joined: Fri Jul 29, 2005 5:55 pm
Location: CO
Contact:

Re: Speaking of css bloat...

Post by Lou » Wed Dec 06, 2017 6:42 am

Now that is a tool!!
Lou
Say what you will about Sisyphus. He always has work.

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

Re: Speaking of css bloat...

Post by RSteinwand » Wed Dec 06, 2017 8:29 am

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
Site Admin
Posts: 3299
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Speaking of css bloat...

Post by Albert Wiersch » Wed Dec 06, 2017 10:30 am

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.
Image
Albert Wiersch

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

Re: Speaking of css bloat...

Post by RSteinwand » Mon Dec 11, 2017 9:28 am

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
Site Admin
Posts: 3299
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Speaking of css bloat...

Post by Albert Wiersch » Mon Dec 11, 2017 1:58 pm

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.
Image
Albert Wiersch

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

Re: Speaking of css bloat...

Post by RSteinwand » Mon Dec 11, 2017 2:09 pm

Cool!

Thanks!
Rick

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

Re: Speaking of css bloat...

Post by RSteinwand » Fri Dec 15, 2017 8:35 am

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
Site Admin
Posts: 3299
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Speaking of css bloat...

Post by Albert Wiersch » Fri Dec 15, 2017 9:57 am

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. :)
Image
Albert Wiersch

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

Re: Speaking of css bloat...

Post by RSteinwand » 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).
Rick

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

Re: Speaking of css bloat...

Post by Albert Wiersch » Tue Dec 19, 2017 7:04 pm

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.
Image
Albert Wiersch

Post Reply