How do I replace color: windowtext;


Tags: css,css3

Problem :

I'm working with an old CSS stylesheet and several of the entries are similar to:

.calibre18 {
  color: windowtext;
  font-family: "Book Antiqua", "serif";
  font-size: 1.29167em;
  line-height: 1.2;
}

This keeps erroring out on color: windowtext; I find that it has been deprecated "in favor of the CSS3 UI appearance property". Unfortunately, that seems to be deprecated as well.

How can I recreate the authors original intent?



Solution :

The old CSS2 system color names have been deprecated for a couple reasons:

These color names have been deprecated, however, as they are insufficient for their original purpose (making website elements look like their native OS counterparts), and represent a security risk, as it makes it easier for a webpage to "spoof" a native OS dialog.

As seen at http://dev.w3.org/csswg/css-color-4/#system-colors

Another relevant quote:

User agents must support these keywords, but should map them to "default" values, not based on the user’s OS settings (for example, mapping all the "background" colors to white and "foreground" colors to black). Authors must not use these keywords.

IMHO, you shouldn't try to recreate the authors' original intent nor rely on user agents' default support but define actual colors.


    CSS Howto..

    How to fit elements in 100% width without absolute positioning?

    How to make my text appearing while scrolling website

    CSS/Bootstrap: How to stretch containers within cols full-height?

    Rich HTML emails in Outlook 2007 and 2010… how do you remove the top margin?

    How to make header/body/footer 'popup' div with variable height body?

    How can I avoid using too many classes in CSS?

    how to align horizontally using CSS

    How to use very large font sizes in Internet Explorer with CSS that won't affect design?

    How can I separate a column on a web page depending on whether or not the browser is mobile?

    CSS - Superfish, how to float 4th level of dropdown

    In jQuery, how do I animate the “max-height” CSS property?

    How to not use absolute positioning CSS

    CSS:How to properly remove border using CSS when border-radius is used?

    How to set minimum height to the 100% of the viewing screen and half of the page?

    How to set vertical align middle for a div enclose another div

    How to set continuous box-shadow through all inline-block centered li elements

    How to make this css crossbrowser?

    SASS: How to exclude part of selector

    How to add CSS to all tds of a particular tr in jQuery?

    How to properly set the 100% DIV height to match document/window height?

    How to handle long string where characters stick together

    How to change the label color by its id with css?

    How can I increase input text elements' width via CSS?

    CSS: How to style text in a box with a limited height

    How to make div height fit the content using css

    How to float menu list elements

    How to serve different size SVG graphic in css background image?

    How to move a span after an img?

    How to target itemid=“” in CSS

    CSS: How to place next to each other 2 images with 50 % width?