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, CSS3 Please and HTML5 Please. Also: read this ‘Disclaimer’… :)
Transitions on css properties. E.g. on hover transition opacity.
.example {
-webkit-transition: width 1s linear .2s; /* Ch, Saf 3.2 */
-moz-transition: width 1s linear .2s; /* 4 < Fx <16 */
-ms-transition: width 1s linear .2s; /* IE 10 */
-o-transition: width 1s linear .2s; /* 10.5 < Op < 12.1 */
transition: width 1s linear .2s; /* IE 10, Ch 26+, Fx 16+, Op 12.1+ */
}
Method of transforming an element including rotating, scaling, etc.
.example {
-webkit-transform: rotate(30deg); /* Ch, Saf */
-moz-transform: rotate(30deg); /* Fx <16 */
-ms-transform: rotate(30deg); /* IE 9 */
-o-transform: rotate(30deg); /* Op <12.1 */
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/
*/
}
Append ellipsis when text overflows its containing element
.example {
-o-text-overflow: ellipsis; /* Op <11, Op Mini, Op Mob <12.1 */
text-overflow: ellipsis; /* IE, Fx, Ch, Saf */
}
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;
}
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 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;
}
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 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+ */
hyphens: auto; /* None yet */
}
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 ;)
*/
}
Method of defining a linear or radial color gradient as a CSS image.
.example {
background: -webkit-linear-gradient(top, #333 0%,#EEE 100%);
background: -moz-linear-gradient(top, #333 0%,#EEE 100%);
background: linear-gradient(to bottom, #333 0%,#EEE 100%); /* Fx 10+, Op 11.6+, Ch 26+, IE 10 */
}
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.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
.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 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.main-nav,
.main-sidebar {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* Etc. But really: read the article! */
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%); /* None yet */
}
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: -webkit-calc(50% - 20px); /* Ch <26, Saf 6, BB 10 */
width: -moz-calc(50% - 20px); /* Fx <16 */
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 {
-webkit-box-sizing: border-box; /* Saf <5.1, */
-moz-box-sizing: border-box; /* Fx */
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 displaying a reflection of an element
/* No official feature. Avoid... */
.example {
-webkit-box-reflect: below 5px url(mask.png); /* Ch, Saf (+iOs +BB) */
}
Method of making the border corners round
.example {
border-radius: 10px / 20px;
}
Method of using images for borders
.example {
-webkit-border-image: url(img.png) 10px / 20px round; /* Ch <16, Saf <6 */
-moz-border-image: url(img.png) 10px / 20px round; /* Fx <15 */
-o-border-image: url(img.png) 10px / 20px round; /* Op (not mini) */
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;
}
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 */
}