How to Memorize All CSS Shorthands

How can I memorize all CSS shorthands?

Here’s a decent CSS shorthand cheat sheet (PDF).

A mnemonic for the order of CSS margin and padding shorthand properties

If you don't get it right, there will be TRouBLe

In css is there a shorthand notation for the text-... properties?

There is not, you can check the "Text properties" of the Css Reference.

CSS Border Shorthand for everything except top

CSS

border: solid 1px #CCC;
border-top: none;

Leaving certain values unchanged when using CSS shorthand properties

This isn't currently possible, unfortunately. You'll have to stick with assigning margin-top and margin-bottom respectively.

A shorthand property always changes the values of all its component (longhand) properties. Namely, any values omitted in a shorthand property will default to initial for their respective properties, unless resolved by cascading or by some other rules depending on the shorthand property. For example, the following results in auto margins on all sides except the bottom due to the margin-bottom longhand that appears after the shorthand:

#header {
/*
* Note: this is short for margin: auto auto auto auto;
* none of the longhands are set to initial! Different shorthands
* have different rules, but a shorthand always changes the values
* of all its longhands.
*/
margin: auto;
margin-bottom: 1em;
}

If there were separate shorthands for horizontal margins and vertical margins, you would be able to do this without having to worry about keeping specific longhand values, but no such shorthands exist at the moment.

As I mentioned in my comment, margin: 1em inherit is invalid as the CSS-wide keywords inherit (along with initial and others introduced in later standards) may only appear by themselves in property declarations, and this includes shorthand declarations. Even if margin: 1em inherit did work, the element would inherit horizontal margins from its parent element, and not from its own cascade (since that's not what inheritance means). It is not possible to retrieve a cascaded or specified value for a property on a given element, and being able to do this would almost certainly be error-prone due to the fact that the bottommost declaration from the most specific selector that contains the resolved value could be anywhere.

jQuery and Setting CSS with Shorthand

Open up the console if you are on firefox or chrome. Type this:

jQuery(".post-text"); // will select the post of this answer, you should see it in the console
jQuery(".post-text").css("margin"); // will be "", the shorthand returns NOTHING
jQuery(".post-text").css("margin-top"); // will be "0px", the real notation works
jQuery(".post-text").css("margin","10px 10px 10px 10px"); // we just set all margins with shorthand, you should notice a change in the UI of stackoverflow.
jQuery(".post-text").css("margin-top"); // is "10px" now
jQuery(".post-text").css("margin"); // is still ""

I hope this clarifies the concept. Short answer: You can set, but not get shorthand css proprieties.



Related Topics



Leave a reply



Submit