Agora que o Internet Explorer 8 morreu, e o número de usuários do Internet Explorer 9 é quase insignificante, há uma porção de recursos do CSS que finalmente podemos usar.

1. Yes we can!Yes we can!

3. vw / vhvw / vh
vmin / vmaxvmin / vmax

4. Entre os nossos clientes:Entre os nossos clientes:
93,63% - Navegadores de Verdade
4,64% - Internet Explorer 10 e 11
1,73% - Internet Explorer 9 ou menor

5. IE 8 morreuIE 8 morreu
IE 9 subiu no telhadoIE 9 subiu no telhado

6. ::placeholder::placeholder

7. https://css-tricks.com/snippets/https://css-tricks.com/snippets/
css/style-placeholder-text/css/style-placeholder-text/

8. CountersCounters

9. http://davidwalsh.name/css-couhttp://davidwalsh.name/css-cou
ntersnters

10. Background position edgesBackground position edges

11. background-position:background-position:
bottom 50px right 20pxbottom 50px right 20px

12. Background sizeBackground size

13. background-size: 20px 30px;background-size: 20px 30px;
background-size: contain;background-size: contain;
background-size: cover;background-size: cover;

14. https://css-tricks.com/almanachttps://css-tricks.com/almanac
/properties/b/background-size//properties/b/background-size/

15. Multiple backgroundsMultiple backgrounds

16. http://www.css3.info/preview/http://www.css3.info/preview/
multiple-backgrounds/multiple-backgrounds/

17. Box-shadowBox-shadow

18. http://www.cssmatic.com/boxhttp://www.cssmatic.com/box
-shadow-shadow

19. RGBARGBA

20. http://tableless.com.br/css3-bhttp://tableless.com.br/css3-b
reve-introducao-a-rgba/reve-introducao-a-rgba/

21. GradientesGradientes

22. http://www.colorzilla.com/gradhttp://www.colorzilla.com/grad
ient-editor/ient-editor/

23. Text-shadowText-shadow

24. Text-shadow
Text-shadow
Text-shadow
Text-shadow
Text-shadow
Text-shadow

25. min-width / max-widthmin-width / max-width
min-height / max-heightmin-height / max-height

26. .slide {.slide {
width: 100vw;width: 100vw;
height: 100vh;height: 100vh;
}}

27. #quadrado {#quadrado {
width: 90vmin;width: 90vmin;
height: 90vmin;height: 90vmin;
}}

28. remrem
http://tableless.com.br/unidadhttp://tableless.com.br/unidad
e-pixels-em-rem/e-pixels-em-rem/

29. box-sizingbox-sizing

30. http://www.binvisions.com/artihttp://www.binvisions.com/arti
cles/box-sizing-property-diffecles/box-sizing-property-diffe
rence-content-border/rence-content-border/

31. ColunasColunas

32. http://www.css3.info/preview/http://www.css3.info/preview/
multi-column-layout/multi-column-layout/

33. CálculosCálculos

34. http://www.maujor.com/tutorialhttp://www.maujor.com/tutorial
/css3-funcao-css-calc.php/css3-funcao-css-calc.php
div {div {
width: calc(50% - 100px);width: calc(50% - 100px);
height: calc(100vh - 50px);height: calc(100vh - 50px);
}}

35. FlexboxFlexbox

36. https://css-tricks.com/snippets/https://css-tricks.com/snippets/
css/a-guide-to-flexbox/css/a-guide-to-flexbox/

37. Que mais?Que mais?

38. Mais:Mais:
OutlineOutline
word-break: break-allword-break: break-all
text-overflowtext-overflow
TransformaçõesTransformações

39. Mais:Mais:
border-radiusborder-radius
::before e ::after::before e ::after
Transições e animaçõesTransições e animações

40. Elcio FerreiraElcio Ferreira
elcio@visie.com.brelcio@visie.com.br
twitter: @elciotwitter: @elcio
http://elcio.com.br/http://elcio.com.br/