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

CSS moderno para Web Semântica

Rafael Dantas
November 28, 2018
29

CSS moderno para Web Semântica

Apresentação feita no 7 Masters sobre semântica na web.

Rafael Dantas

November 28, 2018
Tweet

Transcript

  1. Usando CSS moderno para criar estruturas de marcação mais limpas
    Por Rafael Dantas

    View full-size slide

  2. @raffaeldantass
    @valleweb
    rafa-dantas.com.br

    View full-size slide

  3. Problemas que tínhamos antigamente na marcação
    Marcação não era muito declarativa
    As necessidades dentro da web evoluíram muito rápido
    HTML/CSS/JS não estavam acompanhando
    Resultado?
    Marcações muito inchadas

    View full-size slide

  4. COM CSS GRID

    View full-size slide

  5. COM CSS GRID

    View full-size slide

  6. Comparações entre as formas desenvolvidas
    Relembrando o layout proposto

    View full-size slide

  7. E o que concluimos?
    Através do exemplo, foi possível escrever menos código
    De maneira mais semantica
    Auxiliando na performance, manutenção, acessibilidade
    Resultado?
    Mais fácil de entender, mais rápido pra desenvolver

    View full-size slide

  8. @raffaeldantass
    OBRIGADO!
    Segue a gente!
    @valleweb
    rafa-dantas.com.br

    View full-size slide