Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS3 and Crossbrowser Support

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..

Orlando Del Aguila

March 21, 2012
Tweet

More Decks by Orlando Del Aguila

Other Decks in Programming

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