5 CSS rules you might not know

Some CSS rules that you might not know. Or maybe you do? How many of these did you know about?

Photo by Jeffrey Leung on Unsplash

#1 — Caret Color

This rule sets the color of the cursor in an element that is editable.

.input {
caret-color:red;
}

#2 — Hyphens

This defines if hyphenation is allowed to create a more soft wrap;

.text {
hyphens: none | manual | auto;
}

#3 — Page breaks

Two properties that allow control of page breaks for printed content. Perfect for use with @media print { ... }

.page {
page-break-before: always | auto | emptystring | left | right;
page-break-after: always | auto | emptystring | left | right;
}

#4 — Font Stretch

The font-stretch rule selects a normal, condensed or extended face from a font family.

.stretch {
font-stretch: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit;
}

#5 — Table Layout

The table-layout property allows you to fix the table layout so that the table renders much faster. Without this, on large tables, users won’t see any of the table until the whole table renders. This can give the impression of slow loading. Using the table-layout property will allow the browser to render the top while it’s still rendering the rest giving the impression of faster loading.

.table {
table-layout: auto | fixed;
}