PDA

View Full Version : Advanced css nerdery inside: help needed



Ashtagon
2013-09-01, 11:57 AM
I'm considering a theoretical ambiguity in the css font (http://www.w3schools.com/cssref/pr_font_font.asp) definition.

That font property allows for style, variant, and weight to be set in one go. "inherit" is specifically disallowed, which supposedly removes one source of ambiguity, but "normal" is allowed.

Suppose I have the following code:

.myclass { font: italic small-caps bold 20px Arial }

That will set the font to have all three of style, variant, and weight set to "on" (and look mighty ugly). Now suppose I want to turn off two of style, variant, and weight in a line of text inside that class.

.mysubclass { font: normal normal 20px Arial }

According to the definitions presented, this is valid code. But which two items are turned "off" in this example? Is there any way to set my choice of two of these to "off" while leaving the third undefined?

Djinn_in_Tonic
2013-09-01, 07:32 PM
.myclass { font: italic small-caps bold 20px Arial }

That will set the font to have all three of style, variant, and weight set to "on" (and look mighty ugly). Now suppose I want to turn off two of style, variant, and weight in a line of text inside that class.

.mysubclass { font: normal normal 20px Arial }

According to a quick test, the second class actually removes all the styling from the first class save for the size and font-family. Any number of "normals" entered before the font height and font-family seems to have the same effect (I've tested between 1 & 5, just to check).

The moment you use the font: property specifically, it appears to blanket override any inherited elements and expect entirely new elements in their place.

Ashtagon
2013-09-01, 11:14 PM
According to a quick test, the second class actually removes all the styling from the first class save for the size and font-family. Any number of "normals" entered before the font height and font-family seems to have the same effect (I've tested between 1 & 5, just to check).

The moment you use the font: property specifically, it appears to blanket override any inherited elements and expect entirely new elements in their place.

Thanks. I figured it out separately that the font property does indeed blank out and pre-existing settings. In effect, (undefined), "inherit", and "normal" are not valid entries inside the font property.

Prime32
2013-09-04, 09:24 AM
You could try setting the properties you want to stay as !important?