Mobileread
"Delete unused stylesheet classes" problems with overloaded styles
#1  AlanHK 12-30-2020, 11:11 PM
I was looking at an ePub with these styles:
(passes ePubCheck , no warnings).

Code
.width-auto-rw .pc-rw { width: auto; }
.width-10-rw { width: 9%; }
.pc-rw { margin: 0; padding: 0; }
.pc-rw img { width: 100%; margin: 0; padding: 0; }
.pc-rw table { width: 100%; margin: 0; padding: 0; }
.pc-rw p { text-align: left; }
Used e.g. here to display an ornament:

Code
<div class="width-10-rw"> <div class="pc-rw"><img alt="" src="../Images/orncenter.gif"/></div> </div>

I run "Delete unused stylesheet classes" and the styles are reduced to

Code
.width-auto-rw .pc-rw { width: auto; }
.width-10-rw { width: 9%; }
.pc-rw { margin: 0; padding: 0; }

The display of the image using the code above is now messed up, as it is not constrained by "width: 100%;".

It's very confusing to me all the definitions of "pc-rw" and it seems it also confused "Delete unused stylesheet classes".

I understand that
.a, .b, .c {margin: 0;}
means three identical styles. And
table.a {color: red;}
p.a {color:blue;}

makes two different styles, one for each of the base styles named.
But what does omitting the comma do?


Also, after doing the "Remove", the display in Sigil was unchanged.
I opened a few chapters to check and they all looked unchanged, so I felt safe to commit and saved the file. Then the image size went whacky.

Fortunately I had a backup of the file to restore the missing styles and try to work out what had gone wrong.

I know that the CSS is bizarre, but it is valid.
Trying to simplify it is why I start with "Remove".
Reply 

#2  DiapDealer 12-30-2020, 11:18 PM
Does the css pass w3c validation before "Delete unused..."? Epubcheck does not validate css to my knowledge.
Reply 

#3  hobnail 12-30-2020, 11:31 PM
Try changing the ".pc-rw img" to "div.pc-rw img", or add it with the same css and see if that works. Not that I've seen a lot of css but I've never seen a descendant selector where the parent is a bare css class; I thought there had to be an html tag, with or without a class.
Reply 

#4  JSWolf 12-30-2020, 11:33 PM
Quote hobnail
Try changing the ".pc-rw img" to "div.pc-rw img", or add it with the same css and see if that works. Not that I've seen a lot of css but I've never seen a descendant selector where the parent is a bare css class; I thought there had to be an html tag, with or without a class.
The problem is that you won't know what will fail until after it's failed and you've already done a bit of editing. Besides, there should be no need to edit the CSS before removing unused classes.
Reply 

#5  hobnail 12-30-2020, 11:38 PM
Quote AlanHK
But what does omitting the comma do?
Think of it as a descendant selector.
Code
div p img { ... }
will match all img tags that are inside of p tags that are inside of div tags. Although the p could be inside of something else that's inside the div, likewise for the img; it's a descendant selector meaning the p could be a child, grandchild, great grandchild, etc. For immediate descendant (child) you'd use >;
Code
div > p > img { ... }
Reply 

#6  AlanHK 12-30-2020, 11:43 PM
Quote DiapDealer
Does the css pass w3c validation before "Delete unused..."? Epubcheck does not validate css to my knowledge.
Quote W3C CSS Validator
Congratulations! No Error Found.

This document validates as CSS level 3 + SVG !
And ePubcheck does validate CSS, at least it gives error messages if I introduce a mistake.
"ERROR(CSS-008): An error occurred while parsing the CSS: Token '{' not allowed here, expecting :."

It did not complain about the original file.
Reply 

#7  AlanHK 12-31-2020, 06:20 AM
Found another file:

Code
 <div class="chapter"> <p class="flush">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
.flush { text-indent: 0; margin-top: 0; margin-bottom: 1pt;
}
.chapter > p:first-of-type { text-indent: 0;
}
.chapter > p:first-of-type::first-line { font-weight: normal; -webkit-text-stroke: 1px black;
}
.chapter > p:first-of-type::first-letter { font-family: Goudy, serif; font-size: 6em; float: left; line-height: 0.65em;
}
After running "Delete unused", only the first of the above styles survived, and the first para of each chapter lost all its embellishments.
Reply 

#8  DiapDealer 12-31-2020, 09:22 AM
We'll look into it. Thanks for reporting the issue and providing examples.

@jswolf: please do us a favor and stay out of the trouble-shooting process. What should/shouldn't be necessary is not at all helpful when debugging a potential issue. Only steps to reproduce the potential issue, and steps to try and work around the potential issue are helpful. Extra noise is only a distraction.
Reply 

#9  Frenzie 12-31-2020, 09:46 AM
Quote hobnail
Try changing the ".pc-rw img" to "div.pc-rw img", or add it with the same css and see if that works. Not that I've seen a lot of css but I've never seen a descendant selector where the parent is a bare css class; I thought there had to be an html tag, with or without a class.
.pc-rw will match any element with a pc-rw class. E.g.:
Code
<p class="pc-rw">
<img alt="I'm matched by .pcrw img! :-D">
</p>
div.pc-rw will only match divs with a pc-rw class.
Code
<p class="pc-rw">
<img alt="I'm not matched by div.pcrw img! D-:">
</p>
Reply 

#10  DiapDealer 12-31-2020, 09:56 AM
Yes. Again ... we're aware of how css works. At this point, suggestions are being made to see if it they have any affect on what the "Delete Unused Stylesheet Classes" feature of Sigil removes. Please, everyone, refrain from turning this thread into a CSS course.
Reply 

  Next »  Last »  (1/9)
Today's Posts | Search this Thread | Login | Register