Demo entry 2315402

prefixes

   

Submitted by anonymous on Jul 22, 2015 at 20:42
Language: CSS. Code size: 2.0 kB.

/* Wrong */
.bar {
	border-radius: 30px 10px;
	-webkit-border-radius: 30px 10px;
}

/* Right */
.bar {
	-webkit-border-radius: 30px 10px;
	/* It is important that the -webkit version is before the standardized version.
	 * Otherwise it will override it (as expected in CSS), including triggering the
	 * bugs the old -webkit- version has that WebKit has since fixed (in CSS3), but keeps
	 * in the old implementation (for backwards compatibility).
	 * see also: css-tricks.com/ordering-css3-properties
	 */
	border-radius: 30px 10px;
}

/* Wrong */
.foo {
	background-image: linear-gradient(top, #444444, #999999);
	background-image: -o-linear-gradient(top, #444444, #999999);
	background-image: -moz-linear-gradient(top, #444444, #999999);
	background-image: -webkit-linear-gradient(top, #444444, #999999);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
}

/* Right */
.foo {
	background-color: #444;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#999));
	background-image: -webkit-linear-gradient(top, #444, #999);
	background-image: -moz-linear-gradient(top, #444, #999);
	background-image: -o-linear-gradient(top, #444, #999);
	background-image: linear-gradient(to bottom, #444, #999);
}

/* Right (annotated) */
.foo {
	/* Fallback color in case background-image is broken or not supported */
	background-color: #444;
	/* Safari 4, Chrome 2, iOS 2 */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#999));
	/* Safari 5.1+, Chrome 10+, iOS 5 */
	background-image: -webkit-linear-gradient(top, #444, #999);
	/* Firefox 3.6 - 15 */
	background-image: -moz-linear-gradient(top, #444, #999);
	/* Opera 11.10 - 12.5 */
	background-image:  -o-linear-gradient(top, #444, #999);
	/* Standard (Firefox 16+, Opera 12.5+, IE10) */
	background-image: linear-gradient(to bottom, #444, #999);
}

This snippet took 0.00 seconds to highlight.

Back to the Entry List or Home.

Delete this entry (admin only).