CSS rules ignored

thiago.eec · 11-29-2020, 08: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, 08:41 AM

class names in css selectors are case insensitive.

JSWolf · 11-29-2020, 09: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, 10: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, 01: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, 02: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, 02:42 PM

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

kovidgoyal · 11-29-2020, 09: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, 08:04 AM	#1
thiago.eec Wizard Posts: 1,198 Karma: 1355861 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 09:39 AM
CSS Rules	deback	Conversion	1	01-31-2019 03:59 PM
CSS rules	Sebastian Kane	Calibre	1	07-19-2017 07:25 AM
Remove unused CSS Rules	Divingduck	Editor	2	06-21-2014 07:51 AM
Conditional CSS rules	Jellby	ePub	10	01-20-2009 08:32 AM

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

11-29-2020, 09:27 AM	#3
JSWolf Resident Curmudgeon Posts: 79,398 Karma: 145491800 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, 10:16 AM	#4
jackie_w Grand Sorcerer Posts: 6,251 Karma: 16539642 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, 02:42 PM	#7
JSWolf Resident Curmudgeon Posts: 79,398 Karma: 145491800 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?

Advert

Advert