validate with W3C Validator question

[Capricorn]

Hi,

Most of the time I validate all stylesheets with the W3C Validator (right-click on the stylesheet and select in the menu "validate with W3C").

Sometimes I get messages like:
doesn't exist in CSS level 2.1 but exists in [css3] :

This happens for example with CSS elements like text-wrap or background-size...etc.

I have a tendency to simply remove such entries as they never seem to impact anything, at least in my experience.

However, if I leave them there, would that cause problems?

And if one day epub 3 takes the upper hand, would that be detrimental to those files. I understand epub 3 uses CSS3 but epub 2 uses CSS2.1.
My knowledge of CSS is limited. Enough to get by and have epubs to my liking.

Just trying to improve my understanding.

[rubeus]

I cant see any Sigil issue.

[Capricorn]

Originally Posted by rubeus

I cant see any Sigil issue.

As I use a function in Sigil, I thought I would have to ask it in the sigil forum. If this is not correct, I am sorry. If needed, please move it to the correct forum.

[DiapDealer]

Don't get too worried about it. While it's true that this may not be a Sigil-specific question, you did mention that you were using a Sigil feature that prompted you to go searching. So no real harm or foul. The proper response would probably include some helpful advice as to what would be the proper place to ask such questions. To which I would suggest the ePub format forum. I may move your question there, but please don't feel that it's a failure on your part (or punishment on mine) if I do so. "Help first" is my motto.

[rubeus]

This is defintly a epub question. Just because i'm drinking coffee while making an epub i dont ask in a forum for coffeemachines about CSS.

[DiapDealer]

I'm going to need to ask you to be more polite, Rubeus. "Not a sigil issue" is not a helpful response. If you don't want to help the user find the correct spot to ask their question, that's fine. You don't have to. But rather than posting unhelpful and/or belittling responses, make your opinion known behind the scenes by reporting the post in question. The moderators will see it and judge/take action accordingly. There's no need to make people unconfortable by commenting on it in the thread (if you're not going to be helpful in any way).

I'm going to start deleting all "not the right forum" posts from now on (in the Sigil forum) if they don't at least attempt to be polite and point the way. Users are instructed to use the Report Post feature from now on to point out what they deem to be non-topical posts (if they have no interest in offering assistance of any kind).

[Capricorn]

Originally Posted by DiapDealer

Don't get too worried about it. While it's true that this may not be a Sigil-specific question, you did mention that you were using a Sigil feature that prompted you to go searching. So no real harm or foul. The proper response would probably include some helpful advice as to what would be the proper place to ask such questions. To which I would suggest the ePub format forum. I may move your question there, but please don't feel that it's a failure on your part (or punishment on mine) if I do so. "Help first" is my motto.

Thank you very much for moving it to the proper forum.

[DiapDealer]

No problem. I hope we can get on to the business of getting you some answers, now.

[Tex2002ans]

Originally Posted by Capricorn

I have a tendency to simply remove such entries as they never seem to impact anything, at least in my experience.

Depends on what the CSS is!

For example, here is a topic about testing some selectors in CSS3:

https://www.mobileread.com/forums/sho...d.php?t=212300

Originally Posted by Capricorn

However, if I leave them there, would that cause problems?

Again, it depends on what the CSS3 is doing exactly. In the CSS standard, if the device doesn't recognize a given CSS property, it will completely ignore it.

For example, in Doitsu's EPUB example in the thread linked above, there is this code:

<h3>Capitulum Unum</h3>

with this CSS:

h3 {
    font-family: sans-serif;
    font-size: 2em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 2px 2px 3px grey;
    transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
}

Many devices don't know "text-transform: uppercase", so the fallback will show "Capitulum Unum" instead of appearing as "CAPITULUM UNUM".

If the device doesn't understand "transform: rotate(-3deg)", the chapter title will not be rotated a few degrees, but will stay horizontal.

(Similarly with the "text-shadow: 2px 2px 3px grey" showing shadows showing behind the text).

The book will still be completely readable/understandable without this fluff.

But, let us say you wrote a book in which every odd paragraph is blue, and every even paragraph is red ("nth-child(odd)" + "nth-child(even)"). All of a sudden, if the device doesn't implement that CSS3, your book will not be understandable when read on a CSS2 device.

Originally Posted by Capricorn

And if one day epub 3 takes the upper hand, would that be detrimental to those files. I understand epub 3 uses CSS3 but epub 2 uses CSS2.1.

And remember, EPUBs only support a subset of all CSS2.1. Similarly, EPUB3 devices will only support a subset of CSS3.

For example, I doubt CSS3 Animations/Transitions are going to be on e-ink EPUB3 readers:

http://www.w3schools.com/cssref/css3_pr_animation.asp

Something like iBooks might be able to run those animations (not that they really follow the EPUB standards in the first place), but I wouldn't be completely reliant upon it. It is just always a good idea to keep in mind the fallbacks.

[Capricorn]

Thank you for all that info. It will take some time to digest all that. It seems like it will always depend upon the exact element used in the CSS. So, I will have to verify more than I did in the past if I want to remove it.
It is very good to know that, if the device doesn't recognize a given CSS property, it will completely ignore it. So, leaving it there, might often be the easier solution.

[Tex2002ans]

Originally Posted by Capricorn

Thank you for all that info. It will take some time to digest all that.

And here are some images to help visualize.

With CSS3 (text-transform + text-shadow + transform):



Without text-transform:



Without text-shadow:



Without transform:



Without any:



Or even something as simple as:

border-top-left-radius: 10px;
border-top-right-radius: 10px;

which gives you rounded corners:

Originally Posted by Capricorn

It seems like it will always depend upon the exact element used in the CSS. So, I will have to verify more than I did in the past if I want to remove it.

Yep, it all depends. I typically just go visit w3schools whenever I run into a new CSS to see what it does:

http://www.w3schools.com/cssref/css3...der-radius.asp

[Capricorn]

Many, many thanks for the additional pictures. For me, it validates my strategy of trying to keep the CSS as simple as possible.

[dgatwood]

Originally Posted by Tex2002ans

For example, I doubt CSS3 Animations/Transitions are going to be on e-ink EPUB3 readers:

http://www.w3schools.com/cssref/css3_pr_animation.asp

Something like iBooks might be able to run those animations (not that they really follow the EPUB standards in the first place), but I wouldn't be completely reliant upon it. It is just always a good idea to keep in mind the fallbacks.

There are EPUB3 readers besides iBooks?