CSS Shorthand for Positioning

CSS shorthand for positioning

2021 Update: The inset property is currently gaining adoption. This property uses the same multi-value syntax as the shorthand margin property. For browser compatibility, please see MDN.

No short-hand exists to combine all of these values. These are all different properties, unlike, for instance background, which has colors, images, positions and repeat instructions and as such can be coalesced into a short-hand form.

If you really wanted this type of control, you could use something like SASS and create a mixin.

Is there a css function that allows me to set the values of top, right, bottom, and left for position all in one line?

yes, it's called inset

This shorthand property sets the top, right, bottom, and left properties. Values are assigned to its sub-properties as for margin. ^ref

.box {
  position:fixed;
  inset:20px 50px 50% 10px;
  /*
  top:20px;
  right:50px;
  bottom:50%;
  left:10px;
  */
  background:red;
}

<div class="box">

</div>

Issues with background-position in background shorthand property

As stated in the documentation of the background property, background-size cannot be set alone and it should be used with background-position. Also inherit and initial aren't valid values for those properties.

Sample Image

CSS shorthand attribute with gaps

The problem isn't the missing background-image. The problem is with the background-size and background-position values. Unlike the rest of the longhands, values for those two have a very specific grammar: background-position followed by a / followed by background-size. See the spec.

This is what it should look like:

background: no-repeat center / contain;

You can always set a background-image separately.

Some other shorthands do have mandatory values. For example, font requires a font-size and a font-family. background does not have any mandatory values.

How can I minify CSS? Shorthand for property [ background-position ]?

An approach would be to encode the background-position in a class name and then use javascript to convert this into element styling.

 <p class="mnu" style="background-position: 0 -1690px">

becomes

 <p class="mnu bg p$0$-1690">

Then you do something like

$('.bg').each( function() {
  var elem = $(this);
  var classes = elem.attr('class').split(/\s+/);
  $.each(classes, function(index, classname) {
    if(classname.indexOf('p$') != -1) {
      var coords = new Array();
      coords = classname.split('$');

      elem.css('background-position', coords[1]+"px "+coords[2]+"px");
    }
  });
});

In effective, you've got your own de-minifier there. I'm not saying it's the best way to do it, but it does address your concern of HTML file size (at the expense of rendering time).

CSS Background Shorthand property not work?

Two problems you have to fixed:

You doesn't have the "" for the url.

You have to separately set the background-size:cover property.

Set it in the background will not work.

*Not sure if image/computer.png is a local image or an invalid image. If it is a local image, just replace the url back (I change the url to wikipedia icon for showing purpose)

*{
         padding: 0;
            margin: 0;
        }
        .container{
            width: 800px;
            height: 800px;
            margin: 0 auto;
            border: solid 2px;
            background: red url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/2244px-Wikipedia-logo-v2.svg.png")  0 0 no-repeat fixed;
           
        }

<div class="container">
    
        </div>

CSS Shorthand for Positioning