Chapter 4. CSS Properties – Part 1

CSS properties are characteristics of an element in a markup language (HTML, SVG, XML, and so on) that control their style and/or presentation. These characteristics are part of a constantly evolving standard from the W3C.

A basic example of a CSS property is border-radius:

input {
 border-radius: 100px;
}

There is an incredible number of CSS properties, and learning them all is virtually impossible. Adding more into this mix, there are CSS properties that need to be vendor prefixed (-webkit-, -moz-, -ms-, and so on), making this equation even more complex.

Vendor prefixes are short pieces of CSS that are added to the beginning of the CSS property (and sometimes CSS values too). These pieces of code are directly related to either the company that makes the browser (the "vendor") or to the CSS engine of the browser.

There are four major CSS prefixes: -webkit-, -moz-, -ms- and -o-. They are explained here:

• -webkit-: This references Safari's engine, Webkit (Google Chrome and Opera used this engine in the past as well)
• -moz-: This stands for Mozilla, who creates Firefox
• -ms-: This stands for Microsoft, who creates Internet Explorer
• -o-: This stands for Opera, but only targets old versions of the browser

Google Chrome and Opera both support the -webkit- prefix. However, these two browsers do not use the Webkit engine anymore. Their engine is called Blink and is developed by Google.

A basic example of a prefixed CSS property is column-gap:

.column {
 -webkit-column-gap: 5px;
 -moz-column-gap: 5px;
  column-gap: 5px;
}

Knowing which CSS properties need to be prefixed is futile. That's why it's important to keep a constant eye on CanIUse.com. However, it's also important to automate the prefixing process with tools such as Autoprefixer or -prefix-free, or mixins in preprocessors, and so on.

However, vendor prefixing isn't in the scope of the book, so the properties we'll discuss are absent of any vendor prefixes. If you want to learn more about vendor prefixes, you can visit Mozilla Developer Network (MDN) at http://tiny.cc/mdn-vendor-prefixes.

Let's get the CSS properties reference rolling.