CSS3 and Crossbrowser Support

short presentation about css3 and crossbrowser support.. the styling is a cheap copy of the mojombo's presentation 'delivering happiness', i saw him giving that talk in the rubyconf argentina 2011 and i loved the slides..

Transcript

1. CSS3
   &
   Cross Browser
   Support
   

   View Slide

2. Orlando
   Del
   Aguila
   

   View Slide

3. @odelaguila
   orlandodelaguila
   orlandodelaguila.com
   www.bakedweb.net
   

   View Slide

4. Cross
   Browser
   

   View Slide

5. Cross
   Browser?
   

   View Slide

6. Cross-browser refers to the ability for a website, web
   application, HTML construct or client-side script to support all
   the web browsers. The term cross-browser is often confused
   with multi-browser. Multi-browser is a new paradigm in web
   development that allows a website or web application to
   provide more functionality over several web browsers, while
   ensuring that the website or web application is accessible to
   the largest possible audience without any loss in
   performance. Cross-browser capability allows
   a website or web application to be properly rendered by all
   browsers. The term cross-browser has existed since the web
   development began.
   

   View Slide

7. Que sirva en
   todos los
   navegadores
   

   View Slide

8. border-radius
   

   View Slide

9. border-radius
   gradients
   

   View Slide

10. border-radius
    gradients
    box-shadow
    

    View Slide

11. border-radius
    gradients
    box-shadow
    RGBA
    

    View Slide

12. border-radius
    

    View Slide

13. View Slide

14. Sirve
    Sirve
    Sirve
    No Sirve
    

    View Slide

15. View Slide

16. View Slide

17. PIE hace que Internet Explorer 6-9 sea
    capaz de renderizar (mostrar) las
    decoraciones que trae CSS3
    

    View Slide

18. PIE hace que Internet Explorer 6-9 sea
    capaz de renderizar (mostrar) las
    decoraciones que trae CSS3
    http://css3pie.com/download-latest
    

    View Slide

19. View Slide

20. View Slide

21. Sirve
    Sirve
    Sirve
    Sirve
    

    View Slide

22. border-radius
    gradients
    box-shadow
    RGBA
    

    View Slide

23. gradients
    

    View Slide

24. View Slide

25. Sirve
    Sirve
    Sirve
    No Sirve
    

    View Slide

26. View Slide

27. filter: progid:
    DXImageTransform.Microsoft.gradient
    (startColorstr=“#EEFF99”,
    endColorstr=“#66EE33”);
    

    View Slide

28. Sirve
    Sirve
    Sirve
    Sirve
    

    View Slide

29. border-radius
    gradients
    box-shadow
    RGBA
    

    View Slide

30. box-shadow
    

    View Slide

31. View Slide

32. Sirve
    Sirve
    Sirve
    No Sirve
    

    View Slide

33. View Slide

34. View Slide

35. Sirve
    Sirve
    Sirve
    Sirve
    

    View Slide

36. border-radius
    gradients
    box-shadow
    RGBA
    

    View Slide

37. RGBA
    

    View Slide

38. RGBA?
    

    View Slide

39. rgba(red,green,blue,alpha)
    

    View Slide

40. View Slide

41. Sirve
    Sirve
    Sirve
    No Sirve
    

    View Slide

42. View Slide

43. ARGB
    

    View Slide

44. http://bit.ly/y1LfQt
    

    View Slide

45. View Slide

46. Sirve
    Sirve
    Sirve
    Sirve
    

    View Slide

47. border-radius
    gradients
    box-shadow
    RGBA
    

    View Slide

48. Gracias 
    

    View Slide