[css4-background][css3-box] -vertical/-horizontal Shorthands <= -top/-right/-bottom/-left + -start/-end

Lately there has been discussion whether to amend many properties that come in directional flavor with ‘…-start’ and ‘…-end’ variants which would take the context (block, word or character) progression into account. I believe the solution agreed upon was to do so.

Assuming those were cheap to support (in terms of memory), authors would also sometimes like to be able to specify the vertical (‘…-top’, ‘…-bottom’) or the horizontal (‘…-right’, ‘…-left’) aspects of a property at once without affecting the other dimension. Currently every shorthand property requires at least the ‘top’ value to be set.

Any CSS preprocessor should support such shorthand properties and expand them accordingly – since I don’t use one I haven’t checked any. If those shorthands should also cover ‘…-start’ and ‘…-end’ this can only be done at run-time.

So for some future level of all affected modules I propose to add ‘…-vertical’ and ‘…-horizontal’ shorthands to all properties that have directional variants. This includes ubiquitous ‘margin’, ‘padding’, ‘border’ and more.

A common use case (without progression dependence) is horizontal centering with ‘margin’ where you have to write

  margin-right: auto; margin-left: auto;

which can only then be abreviated to

  margin: TB auto;

or

  margin: T auto B;

if the values TB or T and B for top and bottom margin shall be set to. With this proposal accepted it would instead always be possible to write

  margin-horizontal: auto;

PS:  I’m aware that this wouldn’t fix anything in the short run.
PPS: Sometimes vertical is associated with the letter ‘y’ and horizontal with ‘x’.
     I refrained from using them here.

Received on Thursday, 16 September 2010 18:26:36 UTC