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.
Also: read this ‘Disclaimer’… :)
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; }
...
}
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 */
}
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;
}
Method of using images for borders
.example {
border-image: url(img.png) 10px / 20px round; /* Ch 16+, Saf 6+ */
}
Method of making the border corners round
.example {
border-radius: 10px / 20px;
}
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 displaying an inner or outer shadow effect to elements
.example {
...
box-shadow: 3px 3px 0 #000;
}
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 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 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 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+ */
}
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! */
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 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 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 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 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 */
}
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 setting a maximum height to an element.
.example {
max-height: 10em;
}
Method of setting a maximum width to an element.
.example {
max-width: 30em;
}
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 minimum height to an element.
.example {
min-height: 10em;
}
Method of setting a minimum width to an element.
.example {
min-width: 10em;
}
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 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;
}
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;
}
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 */
}
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 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;
}
Append ellipsis when text overflows its containing element
.example {
text-overflow: ellipsis; /* IE, Fx, Ch, Saf */
}
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/
*/
}
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 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+ */
}
Transitions on css properties. E.g. on hover transition opacity.
.example {
transition: width 1s linear .2s; /* IE 10, Fx 16+, Op 12.1+ */
}
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;
}