File last modified on August 18, 2022

CSS Shorthand

Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.^*

Margin

Margin should be coded as shorthand when top, right, bottom and left are declared, reference Margin Properties. When an ePub is exported from InDesign the CSS will not be in the shorthand format, example:

css
1.foo {
2  margin-bottom: 0;
3  margin-left: 0;
4  margin-right: 0;
5  margin-top: 0;
6}

This can be converted with regex:

bash
1## Find
2margin-bottom:([0-9.]{1,5})(px|em|);\s+margin-left:([0-9.]{1,5})(px|em|);\s+margin-right:([0-9.]{1,5})(px|em|);\s+margin-top:([0-9.]{1,5})(px|em|);
3## Replace
4margin:\7\8 \5\6 \1\2 \3\4;

Padding

Padding should be coded as shorthand, reference Padding Properties.

Border

InDesign CSS for a table by default lists everything out and if no variation to width, style or color exists than it should be coded in shorthand:

css
1.table .foo td {
2  border-left-width: 1px;
3  border-left-style: solid;
4  border-left-color: #000000;
5  border-top-width: 1px;
6  border-top-style: solid;
7  border-top-color: #000000;
8  border-right-width: 1px;
9  border-right-style: solid;
10  border-right-color: #000000;
11  border-bottom-width: 1px;
12  border-bottom-style: solid;
13  border-bottom-color: #000000;
14}

shorthand:

css
1.table .foo td {
2  border: 1px solid #000000;
3}

ON THIS PAGE

Documentation

Introduction

Guidelines

META-INF

OPF

CSS

Fonts

Images

XHTML

TOC / NCX

CSS Shorthand

Margin

Padding

Border