Comments on: CSS Font Shorthand Property Cheat Sheet

By: Frank

Frank — Wed, 13 Jul 2011 10:02:17 +0000

ou, i should use “weight” before “size” in the font-shorthand.. now i know why does the weight/size does not appear

By: Joseph

Joseph — Mon, 27 Jun 2011 16:44:27 +0000

I think it would depend on what you are more comfortable to use when doing your work. Some would think that terse CSS is far much better than doing the longer version of it. I believe that as long as it works, and you are confident that your parameters and syntax are correctly put, then all is good. These are points added to our help-codes that may come in handy someday. My take…Keep it coming!

By: Wandering Dude

Wandering Dude — Tue, 10 May 2011 16:27:48 +0000

Alexa, it really doesn’t matter. Some people are obsessed with the idea of writing very terse CSS, Javascript, or other code. Some do it because they are control freaks, some think it optimizes( if you are using any form of decent content compression, it’ll remove redundancies itself ), while others do it purely because they think its “the right way” and it makes them feel superior because the write hard to read code.

Personally, I avoid any syntax that is fragile ( like font short-hand, it breaks easily ) and less informative of intent. Many other CSS styles allow things in no particular order, so why this? Making special cases is a bug not a feature.

By: Alexa

Alexa — Sun, 08 May 2011 14:26:38 +0000

Hi I was wondering your reason of why you don’t agree with using shorthand. I tend to always use the longer version but have been told not to by another developer so I want to find what is the industry standard.

By: Formas simplificadas ou abreviada em CSS « Bruno Leite Alves

Formas simplificadas ou abreviada em CSS « Bruno Leite Alves — Fri, 11 Mar 2011 18:07:50 +0000

[...] declaraÃ§Ã£o para forma simplificada dessa propriedade nÃ£o Ã© muito simples, achei um Cheat Sheet com as informaÃ§Ãµes sobre a abreviaÃ§Ã£o, fiz uma pequena traduÃ§Ã£o da imagem para um melhor [...]

By: Louis Lazaris

Louis Lazaris — Wed, 02 Feb 2011 04:15:04 +0000

I've now tested this, and yes, !important does work at the end of a font shorthand property, as is expected. Interestingly, if you accidentally put a comma before the !important keyword, then it won't work, because it's looking for another font family (the font family is always listed last in shorthand). But if you add yet another !important keyword at the end, it still doesn't work, so this would be invalid:


p {
	font: italic small-caps bold 20px/30px "Times New Roman", Times, serif, !important !important;
}

It seems like the above code should work, because the 2nd last use of !important should be treated like a font-family, but that doesn't seem to be the case.

By: Louis Lazaris

Louis Lazaris — Thu, 27 Jan 2011 17:20:35 +0000

That’s actually an interesting observation because, technically “color” affects anything in the foreground, which is almost always text content.

But that’s not all it affects. Take the following CSS:


#element {
	color: red;
	border: solid 1px;
}

The element above will not only have red text, but will also have a red border. The “color” applies also to the border, which doesn’t have a set color.

More info here: http://reference.sitepoint.com/css/color

By: Stu Goymer

Stu Goymer — Thu, 27 Jan 2011 12:28:39 +0000

What about colour? Surely this is not omitted from the rule? Seems pointless having a shorthand that doesn’t meet all the properties. Tried in a few positions but bit breaks. Can anyone confirm this?

Cheers

By: Louis Lazaris

Louis Lazaris — Mon, 24 Jan 2011 14:45:53 +0000

That’s actually a good question…. I would assume the answer is yes, but would be interesting to confirm, and see if there are any bugs. I will post a comment here once I’ve tested it.

By: midi

midi — Mon, 24 Jan 2011 13:57:37 +0000

can we use !important at the end of this shorthand method?