14-css-shorthands.md

Shorthand

zkrácený zápis

---

Jedna hodnota

.foo { padding: 10px; }

.bar {
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}

• .foo i .bar dělají totéž

---

Dvě hodnoty

.foo { padding: 10px 5px; }

.bar {
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
}

• .foo i .bar dělají totéž

---

Čtyři hodnoty

.foo { padding: 10px 20px 30px 40px; }

.bar {
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 30px;
	padding-left: 40px;
}

• .foo i .bar dělají totéž

---

Ohraničení

.foo { border: 1px dotted red; }

.bar {
	border-width: 1px;
	border-style: dotted;
	border-color: red;
}

• .foo i .bar dělají totéž

---

Optimalizujeme stávající kód