Question

From: Pro PHP and jQuery:

■ Tip The values returned are CSS shorthand properties.3 An added
bonus of jQuery is the ability to set CSS properties using CSS
shorthand, which doesn’t work using basic JavaScript.

From jQuery API Reference:

Shorthand CSS properties (e.g. margin, background, border) are not
supported. For example, if you want to retrieve the rendered margin,
use: $(elem).css(‘marginTop’) and $(elem).css(‘marginRight’), and so
on.

I’m confused, css shorthand can be set, but not read? Of course I’ll simply use a stylesheet, but, the question is for academic edification.

Answer 1

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.