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

CSS moderno para Web Semântica

Rafael Dantas
November 28, 2018
0
29

CSS moderno para Web Semântica

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

Rafael Dantas

November 28, 2018
Tweet

More Decks by Rafael Dantas

See All by Rafael Dantas
O estado do CSS em 2019
raffaeldantass
1
190
CSS animations under the hood
raffaeldantass
0
42
Leve seu CSS para o futuro
raffaeldantass
0
13
Houdini e o futuro mágico do CSS
raffaeldantass
1
200
Dismistificando o CSS Grid Layout
raffaeldantass
0
110
Houdini e o Futuro das CSS
raffaeldantass
1
430
Dismistificando o CSS Grid Layout
raffaeldantass
1
53

Featured

See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
Into the Great Unknown - MozCon
thekraken
15
1k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
66
14k
The Pragmatic Product Professional
lauravandoore
26
5.8k
Making the Leap to Tech Lead
cromwellryan
125
8.5k
From Idea to $5000 a Month in 5 Months
shpigford
378
45k
Rails Girls Zürich Keynote
gr2m
91
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k

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