What CSS prefixes should I use?

Remembering what CSS to prefix is hard. Today browsers develop quickly (yay) and things often change (boo). Preprocessors and mixin libraries are not always up to date.

This page has one purpose: simply show what prefixes are needed for a newer CSS property. Need more information? Check the awesome Can I Use or Autoprefixer, autoprefixer has an online version that allows you to enter your non-prefixed CSS and gives you a prefix-added css.

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), url(image2.png), url(image3.png) #FFF;
  background-clip: border-box;
  /*
  For the not-yet-standard value of ‘text’ WebKit and Edge need -webkit-!
  Firefox supports ‘text’ without prefixes:
  */
  -webkit-background-clip: text;
  background-clip: text;
  background-origin: padding-box;
  background-size: cover;
}

transitions

Transitions on css properties. E.g. on hover transition opacity.
```
.example {
          transition: width 1s linear .2s; /* IE 10, Fx 16+, Op 12.1+ */
}
```
Browser support Usage advice More info Edit this false

Method of transforming an element including rotating, scaling, etc.


.example {
  -webkit-transform: rotate(30deg); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
      -ms-transform: rotate(30deg); /* IE 9 */
          transform: rotate(30deg); /* 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/
  */
}

text-overflow

Append ellipsis when text overflows its containing element
```
.example {
     text-overflow: ellipsis; /* IE, Fx, Ch, Saf */
}
```
Browser support Usage advice More info Edit this false
@supports()

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; }
  ...
}
```
Browser support Usage advice More info Edit this false

Method of flowing content into multiple elements.


/*
  Avoid! 
  This is in active development and there are different WebKit Flags 
  needed to enable this.
  At the moment we should wait...
*/
.example {
  -webkit-flow-from: flow_name; /* Ch 15.0-18.0 (no further!) */
      -ms-flow-from: flow_name; /* IE 10 */
  -webkit-flow-into: flow_name;
      -ms-flow-into: flow_name;
}

pointer-events

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;
}
```
Browser support Usage advice More info Edit this false

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 */
}

object-fit

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.
```
		
			.example {
				-o-object-fit: fill;
				object-fit: fill;
			}
		
	
```
Browser support Usage advice Edit this true

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 flowing information in multiple columns


.example {
  -webkit-column-count: 2; /* Ch, Saf, And, BB  */
     -moz-column-count: 2; /* Fx */
          column-count: 2; /* IE 10, Op 11.1+ */

  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;

  -webkit-column-rule: 1px solid #000;
     -moz-column-rule: 1px solid #000;
          column-rule: 1px solid #000;
}

min-width

Method of setting a minimum width to an element.
```
.example {
  min-width: 10em;
}
```
Browser support Usage advice Edit this false
min-height

Method of setting a minimum height to an element.
```
.example {
  min-height: 10em;
}
```
Browser support Usage advice Edit this false

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) {
    ...
  }

max-width

Method of setting a maximum width to an element.
```
.example {
  max-width: 30em;
}
```
Browser support Usage advice Edit this false
max-height

Method of setting a maximum height to an element.
```
.example {
  max-height: 10em;
}
```
Browser support Usage advice Edit this false

Method of displaying part of an element, using a selected image as a mask


/* WebKit only thing at the moment. Avoid or look into Filters or SVG */
.example {
  -webkit-mask-image: url(mask.png); /* Ch 4.0-16, Saf 4.0-6.0, And 2.1-4.2, BB 7.0-10.0 */
}

Method of controlling when words at the end of lines should be hyphenated using the "hyphens" property.


.example {
  /* From: http://vlst.nl/x/e2 */
  -ms-word-break: break-all;
      word-break: break-all;

  /* Non standard for webkit */
       word-break: break-word;

  -webkit-hyphens: auto; /* Saf 5.1+ */
     -moz-hyphens: auto; /* Fx 6.0+ */
      -ms-hyphens: auto; /* IE 10+ */
          hyphens: auto; /* None yet */
}

grids

Method of using a grid concept to lay out content, providing a mechanism for authors to divide available space for lay out into columns and rows using a set of predictable sizing behaviors. Grids!
```
/* OMGWTFBBQ! Grids _only_ work in MS at the moment! */
.example-grid-wrapper {
  display: -ms-grid; /* IE 10 */
  display:     grid; /* None yet */

  /*
  Woah! TODO: look into this.
  If somebody can provide a quick _simple_ example ;)
  */
}
```
Browser support Usage advice More info Edit this true
gradients

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 */
}
```
Browser support Usage advice More info Edit this false

Method of applying advanced typographic and language-specific font features to supported OpenType fonts. Ligatures e.t.m!


.example {
  -webkit-font-feature-settings: "liga" off, "dlig"; /* Ch 16-26, BB 10, And 18.0 */
     -moz-font-feature-settings: "liga=0, dlig=1";   /* Fx 4-21 */
          font-feature-settings: "liga", "dlig";     /* IE 10, Saf 4.0-6.0 */
}

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 positioning elements in horizontal or vertical stacks. But really cool ;)


/* 
Here be dragons! Lots of (syntax) changes
Read: http://css-tricks.com/old-flexbox-and-new-flexbox/

Mixing both old- and new syntax http://css-tricks.com/using-flexbox/

Thank you @chriscoyier !
*/

.page-wrap {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
}

.main-nav,
.main-sidebar {
  -webkit-box-flex: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
  width: 20%;            /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;       /* Safari 6.1+. iOS 7.1+, BB10 */
  -ms-flex: 1;           /* IE 10 */
  flex: 1;               /* NEW, Spec - Firefox, Chrome, Opera */
}
/* Etc. But really: read the article! */

filters

Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG.
```
.example {
  -webkit-filter: grayscale(50%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
          filter: grayscale(50%); /* FF 35+ */
}
```
Browser support Usage advice Edit this true
css3-colors

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);
}
```
Browser support Usage advice More info Edit this false
calc

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+ */
}
```
Browser support Usage advice More info Edit this false
box-sizing

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+  */
}
```
Browser support Usage advice Edit this false
box-shadow

Method of displaying an inner or outer shadow effect to elements
```
.example {
  ...
  box-shadow: 3px 3px 0 #000;
}
```
Browser support Usage advice More info Edit this false

Method of displaying a reflection of an element


/* No official feature. Avoid... */
.example {
  -webkit-box-reflect: below 5px url(mask.png); /* Ch, Saf (+iOs +BB) */
}

border-radius

Method of making the border corners round
```
.example {
  border-radius: 10px / 20px;
}
```
Browser support Usage advice More info Edit this false
border-image

Method of using images for borders
```
.example {
          border-image: url(img.png) 10px / 20px round; /* Ch 16+, Saf 6+ */
}
```
Browser support Usage advice More info Edit this false

The appearance property defines how elements (particularly form controls) appear by default. By setting the value to none the default appearance can be entirely redefined using other CSS properties.

        
        /**
         * Microsoft Edge and IE mobile support this property width the -webkit-
         * prefix rather than -ms- for interop reasons.
         */
            .input-element {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
            }

Complex method of animating certain properties of an element


@-webkit-keyframes MyAnimation {
    0% { left: 0; }	
   50% { left: 200px; }	
  100% { left: 20px; }	
}
@keyframes MyAnimation {
    0% { left: 0; }	
   50% { left: 200px; }	
  100% { left: 20px; }	
}

.example.is-animating {
  ...
  -webkit-animation: MyAnimation 2s; /* Chr, Saf */
          animation: MyAnimation 2s; /* IE >9, Fx >15, Op >12.0 */
}

What CSS to prefix?

background-image-options

transitions

transforms

Toggle()

text-shadow

text-overflow

@supports()

regions

pointer-events

opacity

object-fit

multiple-backgrounds

multicolumn

min-width

min-height

media-queries

max-width

max-height

masks

hyphens

grids

gradients

font-feature-settings

font-face

flexbox

filters

css3-colors

calc

box-sizing

box-shadow

box-reflection

border-radius

border-image

appearance

Animations