CSS rules ignored

thiago.eec · 11-29-2020, 09:04 AM

Hi, Kovid.

I'm having an issue with some books that have CSS rules with similar names (identical, except for the use of capitals).

Example:

Code:

.Body-Text {
   font-style: normal;
}

.Body-text {
   font-style: italic;
}

In this situation, the Editor Preview uses both rules, but the Viewer uses only the last one, considering it like the same rule, so the text is always in italics.

kovidgoyal · 11-29-2020, 09:41 AM

class names in css selectors are case insensitive.

JSWolf · 11-29-2020, 10:27 AM

You should never use the same named classes with different case. This can lead to the problem you are having.

jackie_w · 11-29-2020, 11:16 AM

Should/shouldn't isn't really the issue. The fact is some publishers *do* produce this nonsense CSS.

I'd quite like calibre Check Book to flag this as a Warning if it was easy to do.

thiago.eec · 11-29-2020, 02:19 PM

Quote:

Originally Posted by jackie_w

Should/shouldn't isn't really the issue. The fact is some publishers *do* produce this nonsense CSS.

I'd quite like calibre Check Book to flag this as a Warning if it was easy to do.

Exactly. I'm talking about books I bought. I would never do such a thing.

Quote:

Originally Posted by kovidgoyal

class names in css selectors are case insensitive.

Well, there is something odd: the Editor treats CSS selectors as case-sensitive (as Sigil and ADE), but the Viewer treats them as case-insensitive (as Azardi and Readium).

Also, digging a little bit, I found this:

1) CSS selectors are indeed case-insensitive, but...
2) HTML class names are case-sensitive, according to the specs* (except in quirks mode, for HTML5).

* https://www.w3.org/TR/REC-html40/str...l.html#h-7.5.2
https://www.w3.org/TR/html50/disable...se-sensitivity

Does the viewer and the preview panel (editor) use both the exact same version of Chrome?

JSWolf · 11-29-2020, 03:37 PM

Quote:

Originally Posted by thiago.eec

Does the viewer and the preview panel (editor) use both the exact same version of Chrome?

Yes as they are both using the save version of QTWebKit.

JSWolf · 11-29-2020, 03:42 PM

Why is preview case specific and the viewer case non-specific?

kovidgoyal · 11-29-2020, 10:04 PM

Quote:

Originally Posted by thiago.eec

Does the viewer and the preview panel (editor) use both the exact same version of Chrome?

yes, they do.

11-29-2020, 09:04 AM	#1
thiago.eec Wizard Posts: 1,295 Karma: 1436993 Join Date: Dec 2016 Location: Goiânia - Brazil Device: iPad, Kindle Paperwhite, Kindle Oasis	CSS rules ignored Hi, Kovid. I'm having an issue with some books that have CSS rules with similar names (identical, except for the use of capitals). Example: Code: .Body-Text { font-style: normal; } .Body-text { font-style: italic; } In this situation, the Editor Preview uses both rules, but the Viewer uses only the last one, considering it like the same rule, so the text is always in italics.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
remove unused CSS rules	rjwse@aol.com	Editor	13	09-18-2019 10:39 AM
CSS Rules	deback	Conversion	1	01-31-2019 04:59 PM
CSS rules	Sebastian Kane	Calibre	1	07-19-2017 08:25 AM
Remove unused CSS Rules	Divingduck	Editor	2	06-21-2014 08:51 AM
Conditional CSS rules	Jellby	ePub	10	01-20-2009 09:32 AM

11-29-2020, 09:41 AM	#2
kovidgoyal creator of calibre Posts: 45,702 Karma: 28549304 Join Date: Oct 2006 Location: Mumbai, India Device: Various	class names in css selectors are case insensitive.

11-29-2020, 10:27 AM	#3
JSWolf Resident Curmudgeon Posts: 81,161 Karma: 150263703 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	You should never use the same named classes with different case. This can lead to the problem you are having.

11-29-2020, 11:16 AM	#4
jackie_w Grand Sorcerer Posts: 6,281 Karma: 16800000 Join Date: Sep 2009 Location: UK Device: ClaraHD, Forma, Libra2, Clara2E, LibraCol, PBTouchHD3	Should/shouldn't isn't really the issue. The fact is some publishers do produce this nonsense CSS. I'd quite like calibre Check Book to flag this as a Warning if it was easy to do.

11-29-2020, 03:42 PM	#7
JSWolf Resident Curmudgeon Posts: 81,161 Karma: 150263703 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Why is preview case specific and the viewer case non-specific?