!important
Hi. You recently added !important to a lot of declarations in Common.css. Why?
This is bad practice in general. It buggers up accessibility for users who have to apply their own user CSS in the browser to be able to read. It overrides inline styles, for example where it has neutralized the display of italic letters in the tables in Appendix:Russian alphabet and Appendix:Ukrainian alphabet. —Michael Z. 2013-09-08 05:50 z
I had hoped that it would mean that those declarations would apply even if another element would override it. Essentially I wanted it to mean "always apply this, prevent it from being italic under any circumstances". That didn't work, though, so I think it can be removed?
Well, !important makes a declaration take precedence over all other declarations that select the same element. But the cascade still continues to work for elements contained within the selected element.
So .Cyrl { --- !important; } will trump the more-specific i.Cyrl { ---; }, but not neuter all declarations for child elements like .Cyrl i { ---; }.
The CSS3 spec[1] implies this, but doesn’t say it explicitly. It does, however, list some situations where !important could be useful.
Yes, these !importants should all be removed. Because !important breaks the normal cascade, it makes debugging a nightmare. It should only be used for outstanding circumstances, not as a shortcut for appropriate more-specific selectors.
You could use the following, although it may fail in various ways (e.g., an English phrase that contains italics quoted within a Russian paragraph):
i.Cyrl, .Cyrl i,em.Cyrl, .Cyrl em{ font-style: normal; }
But because the language attribute is inherited by child elements, the right way to do it is for each language:
i:lang(be), em:lang(be),i:lang(ru), em:lang(ru),i:lang(uk), em:lang(uk),[&c]{ font-style: normal; }
CSS ignores the rest of the language code beyond the first fragment, so :lang(sh-Cyrl) or :lang(*-Cyrl) selects nothing. This may seem unfortunate, but we really should be simplifying the code instead of complicating it as browsers’ language support improves. The typographic ideal is one font-family and font-size for all languages, rather than one for each language.
You could also use the universal selector to explicitly select an element and all of its descendants. Is is simple and will override unanticipated italics in elements other than i and em, but still can be overriden by still-more specific declarations and in inline CSS. It could still break in nested languages.
.Cyrl, .Cyrl *{ font-style: normal; }