12-30-2020, 10:11 PM | #1 |
Guru
Posts: 674
Karma: 929286
Join Date: Apr 2014
Device: PW-3, iPad, Android phone
|
"Delete unused stylesheet classes" problems with overloaded styles
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; } 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". Last edited by AlanHK; 12-30-2020 at 10:30 PM. |
12-30-2020, 10:18 PM | #2 |
Grand Sorcerer
Posts: 27,976
Karma: 198535232
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Does the css pass w3c validation before "Delete unused..."? Epubcheck does not validate css to my knowledge.
|
Advert | |
|
12-30-2020, 10:31 PM | #3 |
Running with scissors
Posts: 1,557
Karma: 14325282
Join Date: Nov 2019
Device: none
|
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.
|
12-30-2020, 10:33 PM | #4 | |
Resident Curmudgeon
Posts: 76,055
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
12-30-2020, 10:38 PM | #5 |
Running with scissors
Posts: 1,557
Karma: 14325282
Join Date: Nov 2019
Device: none
|
Think of it as a descendant selector.
Code:
div p img { ... } Code:
div > p > img { ... } Last edited by hobnail; 12-30-2020 at 10:43 PM. |
Advert | |
|
12-30-2020, 10:43 PM | #6 | ||
Guru
Posts: 674
Karma: 929286
Join Date: Apr 2014
Device: PW-3, iPad, Android phone
|
Quote:
Quote:
"ERROR(CSS-008): An error occurred while parsing the CSS: Token '{' not allowed here, expecting :." It did not complain about the original file. |
||
12-31-2020, 05:20 AM | #7 |
Guru
Posts: 674
Karma: 929286
Join Date: Apr 2014
Device: PW-3, iPad, Android phone
|
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; } Last edited by AlanHK; 12-31-2020 at 05:24 AM. |
12-31-2020, 08:22 AM | #8 |
Grand Sorcerer
Posts: 27,976
Karma: 198535232
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
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. |
12-31-2020, 08:46 AM | #9 | |
Wizard
Posts: 1,668
Karma: 730583
Join Date: Oct 2014
Location: Antwerp
Device: Kobo Aura H2O
|
Quote:
Code:
<p class="pc-rw"> <img alt="I'm matched by .pcrw img! :-D"> </p> Code:
<p class="pc-rw"> <img alt="I'm not matched by div.pcrw img! D-:"> </p> |
|
12-31-2020, 08:56 AM | #10 |
Grand Sorcerer
Posts: 27,976
Karma: 198535232
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
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.
|
12-31-2020, 08:59 AM | #11 |
Grand Sorcerer
Posts: 27,976
Karma: 198535232
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Also keep in mind that any automated process's ability to accurately determine whether a css class is "in use" will never be 100%.
|
12-31-2020, 12:23 PM | #12 |
Enthusiast
Posts: 38
Karma: 467802
Join Date: Apr 2016
Device: none
|
Hi, since I didn't want to reappear just to point out that the plugin cssRemoveUnusedSelectors can be used to overcome some limitations of the builtin Delete Unused Stylesheet Classes, I took a peek at the Sigil source code to look for the culprit of this behavior.
If I correctly understood the code, Sigil in BookReports::AllClassesUsedInHTMLFileMapped retrieves all the couples tagname - classname used in xhtml files, and then look for a match with every css selector that happens to contain at least one .dot-preceded-classname (CSSInfo::getAllCSSSelectorsForElementClass). If the selector doesn't contain tagnames, it will match if it contains the appropriate classname, otherwise it will have to contain the appropriate sequence tagname.classname for the match to happen. This is problematic for compound selectors, since they can contain tagnames and classnames which don't refer to the same element: so, if a user have a selector like ".chapter p" it will probably never match anything, and I'm afraid it won't be easy to amend the code (at least, it wouldn't be easy if it was me that had to work on it...). A selector like "div.chapter p" will instead match if there is a div element in xhtml with the class chapter, even if it hasn't any p descendant - which can be good, I guess. Pseudo classes and pseudo elements, like :first-of-type and ::first-line, seems to me that they aren't handled in any way in CSSInfo, so I suppose that they become part of the classname or the tagname that precedes them. In fact, if you have Code:
<p class="matchthis:first-of-type"> Code:
p.matchthis:first-of-type {} (There is also the possibility that I misunderstood all the Sigil's source code and the answers are totally different. New year will tell... Cheers! ) |
12-31-2020, 02:00 PM | #13 |
Sigil Developer
Posts: 8,110
Karma: 5450184
Join Date: Nov 2009
Device: many
|
Long on my todo list is to add a real C or C++ library css parser but I have not found one that I like. If I do I will add it. Until we do, we have to live with the Sigil css parser which was designed in css2 epub2 days and unfortunately not my code at all so I am not 100% sure I am following it.
So the best we can offer in the case of compound tags is to split them internally and then assume any more complex structure is to be left alone, ie, not offered up as an unused selector of any sort. I will look into it. |
12-31-2020, 02:57 PM | #14 |
Running with scissors
Posts: 1,557
Karma: 14325282
Join Date: Nov 2019
Device: none
|
Agreed. My "fix" was using the assumption that Sigil doesn't handle bare classes in combinators. Possibly the css overgeneralized and the pc-rw was only used on divs, but otherwise it's not a good solution.
Last edited by hobnail; 12-31-2020 at 03:00 PM. |
12-31-2020, 03:23 PM | #15 | |
Bibliophagist
Posts: 39,855
Karma: 154464500
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
Quote:
I switched to using the plugin since it seemed to work better with some overly complex stylesheets. |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
alphabetizing stylesheet, check book, and remove unused styles | rjwse@aol.com | Calibre | 9 | 01-29-2020 06:48 PM |
Pseudo classes to be deleted as unused classes | Leonatus | Sigil | 2 | 09-23-2018 09:12 AM |
"unused stylesheet class" is actually used | AlanHK | Sigil | 6 | 06-20-2017 04:42 PM |
Search and Replace; delete "author" name from "serie" | roosten | Library Management | 6 | 12-17-2015 11:38 AM |
Cleaning a stylesheet of unused styles | roger64 | Sigil | 49 | 06-13-2012 05:23 AM |