Page 1 of 2

Speaking of css bloat...

Posted: Wed Oct 11, 2017 12:03 pm
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

Re: Speaking of css bloat...

Posted: Wed Oct 11, 2017 12:55 pm
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

Re: Speaking of css bloat...

Posted: Wed Oct 11, 2017 1:05 pm
by RSteinwand
Thanks.

Re: Speaking of css bloat...

Posted: Tue Dec 05, 2017 6:18 pm
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. :)

Re: Speaking of css bloat...

Posted: Tue Dec 05, 2017 6:34 pm
by RSteinwand
THANK YOU SANTA! :P

Re: Speaking of css bloat...

Posted: Wed Dec 06, 2017 6:42 am
by Lou
Now that is a tool!!

Re: Speaking of css bloat...

Posted: Wed Dec 06, 2017 8:29 am
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

Re: Speaking of css bloat...

Posted: Wed Dec 06, 2017 10:30 am
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.

Re: Speaking of css bloat...

Posted: Mon Dec 11, 2017 9:28 am
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.

Re: Speaking of css bloat...

Posted: Mon Dec 11, 2017 1:58 pm
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.

Re: Speaking of css bloat...

Posted: Mon Dec 11, 2017 2:09 pm
by RSteinwand
Cool!

Thanks!

Re: Speaking of css bloat...

Posted: Fri Dec 15, 2017 8:35 am
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

Re: Speaking of css bloat...

Posted: Fri Dec 15, 2017 9:57 am
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. :)

Re: Speaking of css bloat...

Posted: Fri Dec 15, 2017 10:11 am
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).

Re: Speaking of css bloat...

Posted: Tue Dec 19, 2017 7:04 pm
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.