There are lot of new CSS3 properties we can use today. The website Can I use provides some examples of new properties with high support.
CSS filters - 81% support
CSS filters can be used to apply some effects such us blur, sepia, grayscale, contrast, hue, etc. I am very surprised that it has a nice support, except IE and Opera Mini.
Because of that, it's enough to drop the dirty hacks and use progressive enhancement. It's not a problem if IE users see the alpha version of an image, for example.
img {
transition: -webkit-filter .5s;
-webkit-filter: blur(0);
}.overlay img {
-webkit-filter: blur(1);
}
CSS3 selectors - 97.2% support
CSS3 selectors opens a new era in CSS. I am sure you are using CSS3 in your projects, but probably you do not know about new and interesting selectors you can find useful.
[foo^="bar"], the carat symbol is used as a regular expression to select attributes starting with bar in this case. For example, we can select all of external links with this selector.
a[href^="http"] {
color: red;
}[foo$="bar"], refers to matching end of string:
a[href$=â.jpgâ]:after {
content: â(JPG)â;
}:empty selects all the elements without HTML content, including comments.
//Will match
<div></div>//Won't match
<div> </div>
This selector is useful to hide empty elements can cause space in your DOM.
:not() is a negative selector, it takes a selector as a parameter. If the validation fails, the selector matches.
ul li:not(:last-child) {
margin-bottom: 10px;
}This example adds a bottom margin of all the elements of the list, except the last.
Calc - 80.6% support
This property is very useful, you can use mathematical operations with px, em, rem.
For example:
.example {
background-position: calc(100% - 20px) center;
}.example2 {
width: calc(100% - 10px);
}
CSS animation - 90.9% support
Luckily, this animations appears after the dead of Flash, with the -webkit prefix, we have a very nice 90.9% support.
The animations provide us a powerful tool to animate HTML elements, moving then and transforming. The result is a very nice UI.
.example {
-webkit-animation: down .6s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
animation: dropDown .6s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}@-webkit-keyframes down {
from {-webkit-transform: translate(0,-100px);}
to {-webkit-transform: translate(0,25px);}
}
@keyframes down {
from {-webkit-transform: translate(0,-100px);}
to {-webkit-transform: translate(0,25px);}
}
@supports rule - 70.3%
@supports give us the ability to check if a feature is supported in the browser, and then, add some functionality knowing this is supported. For example we can know if flexbox is supported in the browser with this code.
@supports (display: flex) {
div { display: flex; }
}@supports not (display: flex) {
div { float: left; }
}
While the supports is not ideal, you can use Modernizr for Opera Mini and IE.
Flexbox - 95.74 support
Flexbox is very useful to positioning elements horizontally and vertically with less code. Lot of projects uses grid systems instead of Flexbox. However, it's time to change because the support is very hight. Probably you need to use Autoprefixer to add the old specifications to have full support.
.row {
display: flex;
flex-direction: column-reverse;
}3D transforms - 90.57% support
This feature allows you to position elements in a third dimension: rotating, scaling, etc.
With the -webkit prefix we have an excellent support, remember to use Autoprefixer for that.
.example {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
transition: transform 1s;
}.example:hover {
-webkit-transform: rotateX(180deg) rotateY(180deg);
transform: rotateX(180deg) rotateY(180deg);
}