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

CSS moderno para Web Semântica

Avatar for Rafael Dantas Rafael Dantas
November 28, 2018
42
0

CSS moderno para Web Semântica

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

Avatar for Rafael Dantas

Rafael Dantas

November 28, 2018

More Decks by Rafael Dantas

See All by Rafael Dantas
O estado do CSS em 2019
Avatar for Rafael Dantas raffaeldantass
1
200
CSS animations under the hood
Avatar for Rafael Dantas raffaeldantass
0
68
Leve seu CSS para o futuro
Avatar for Rafael Dantas raffaeldantass
0
23
Houdini e o futuro mágico do CSS
Avatar for Rafael Dantas raffaeldantass
1
210
Dismistificando o CSS Grid Layout
Avatar for Rafael Dantas raffaeldantass
0
130
Houdini e o Futuro das CSS
Avatar for Rafael Dantas raffaeldantass
1
470
Dismistificando o CSS Grid Layout
Avatar for Rafael Dantas raffaeldantass
1
53

Featured

See All Featured
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
880
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
210
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
670
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
330
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.2k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
250
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
990
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k

Transcript

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

    Por Rafael Dantas

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

  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
  4. None
  5. None

  6. COM FLEXBOX

  7. COM FLEXBOX

  8. COM CSS GRID

  9. COM CSS GRID

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

  11. HTML

  12. CSS

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

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