What CSS to prefix?

Transitions on css properties. E.g. on hover transition opacity.

.example {
          transition: width 1s linear .2s; /* IE 10, Fx 16+, Op 12.1+ */
}

The toggle() expression allows descendant elements to cycle over a list of values instead of inheriting the same value.

/* Not supported anywhere AFAIK. Avoid */
ul { list-style-type: disc; }
ul ul { 
  list-style-type: toggle(disc, circle, square, box); 
}

Method of applying one or more shadow or blur effects to text

.example {
  /* Do this... */
  text-shadow: 0 1px 0 rgba(0,0,0,0.3); /* Subtle */

  /* Do _not_ do this (Not so subtle :)
     http://mothereffingtextshadow.com/
  */
}

Append ellipsis when text overflows its containing element

.example {
     text-overflow: ellipsis; /* IE, Fx, Ch, Saf */
}

The ‘@supports’ rule is a conditional group rule whose condition tests whether the user agent supports CSS property:value pairs. See also the CSS.supports() DOM API

/* Unprefixed support in Fx, Ch, Op 25+, Android 4.4+. Note: no (iOS) Safari  */
@supports ( display: flexbox ) {
  body { display: flexbox; }
  ...
}

This CSS property, when set to "none" allows elements to not receive hover/click events, instead the event will occur on anything behind it.

/* Note: no IE (and old — pre WebKit — Opera) support */
.example {
  pointer-events: none;
}

Method of setting the transparency level of an element

.example {
  /* If you really need it there are IE filter work-arounds.. Google 'em :) */
  opacity: 0.5; /* Half-way transparent */
}

Method of using multiple images as a background

.example {
  background-color: #F00; /* Fallback */
  background-image: url(image1.png), url(image2.png);
  background-position: center bottom, left top;
  background-repeat: no-repeat;
}

Method of setting a minimum width to an element.

.example {
  min-width: 10em;
}

Method of setting a minimum height to an element.

.example {
  min-height: 10em;
}

Method of applying styles based on media information. Includes things like page and device dimensions

  /*
  Wide support except for < IE9
  - Make sure to (almost always) build 'mobile first': http://vlst.nl/x/e3
  - Build _logical_ minor/major breakpoints, not 'device width' breakpoints 
  - Make sure to think about using EM's: http://vlst.nl/x/e4
  */
  @media all and (min-width: 35em) {
    ...
  }

Method of setting a maximum width to an element.

.example {
  max-width: 30em;
}

Method of setting a maximum height to an element.

.example {
  max-height: 10em;
}

Method of defining a linear or radial color gradient as a CSS image.

.example {
  background:         linear-gradient(to bottom, #333 0%,#EEE 100%); /* Fx 10+, Op 11.6+, Ch 26+, IE 10 */
}

Method of displaying fonts downloaded from websites

/* 
  No prefixes needed but loads of different font formats!
  Use the awesome generator from http://www.fontsquirrel.com/
  to generate these...
  And remember to use custom fonts sparingly, they are heavy.
*/

@font-face {
  font-family: 'MyFontFamily';
  src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
  url('myfont-webfont.woff2')           format('woff2'), 
  url('myfont-webfont.woff')            format('woff'), 
  url('myfont-webfont.ttf')             format('truetype');
}

.example {
  font-family: MyFontFamily, Arial, sans-serif;
}

Method of describing colors using Hue, Saturation and Lightness (hsl()) rather than just RGB, as well as allowing alpha-transparency with rgba() and hsla().

.example {
  background: yellow; /* Fallback! */
  background: hsla(56, 100%, 50%, 0.3);
}

Method of allowing calculated values for length units, i.e. width: calc(100% - 3em)

.example {
  width: 500px; /* Fallback! */
  width:         calc(50% - 20px); /* IE 9+, Fx 16+, Ch 26+ */
}

Method of specifying whether or not an element's borders and padding should be included in size units

.example {
          box-sizing: border-box; /* Ch, Saf 5.1+, IE 8+, Op 9+  */
}

Method of displaying an inner or outer shadow effect to elements

.example {
  ...
  box-shadow: 3px 3px 0 #000;
}

Method of making the border corners round

.example {
  border-radius: 10px / 20px;
}

Method of using images for borders

.example {
          border-image: url(img.png) 10px / 20px round; /* Ch 16+, Saf 6+ */
}

New properties to affect background images, including background-clip, background-origin and background-size

.example {
  /* various options, see e.g. http://www.css3files.com/background */
  background: url(image1.png), 2 url(image2.png), 3 url(image3.png) #FFF;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: cover;
}