Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS moderno para Web Semântica
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Rafael Dantas
November 28, 2018
0
40
CSS moderno para Web Semântica
Apresentação feita no 7 Masters sobre semântica na web.
Rafael Dantas
November 28, 2018
Tweet
Share
More Decks by Rafael Dantas
See All by Rafael Dantas
O estado do CSS em 2019
raffaeldantass
1
200
CSS animations under the hood
raffaeldantass
0
65
Leve seu CSS para o futuro
raffaeldantass
0
21
Houdini e o futuro mágico do CSS
raffaeldantass
1
210
Dismistificando o CSS Grid Layout
raffaeldantass
0
130
Houdini e o Futuro das CSS
raffaeldantass
1
460
Dismistificando o CSS Grid Layout
raffaeldantass
1
53
Featured
See All Featured
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
0
3.4k
Discover your Explorer Soul
emna__ayadi
2
1.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Heart Work Chapter 1 - Part 1
lfama
PRO
5
35k
How STYLIGHT went responsive
nonsquared
100
6k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
240
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
The Curse of the Amulet
leimatthew05
1
8.7k
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
200
Leo the Paperboy
mayatellez
4
1.4k
Transcript
Usando CSS moderno para criar estruturas de marcação mais limpas
Por Rafael Dantas
@raffaeldantass @valleweb rafa-dantas.com.br
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
None
None
COM FLEXBOX
COM FLEXBOX
COM CSS GRID
COM CSS GRID
Comparações entre as formas desenvolvidas Relembrando o layout proposto
HTML
CSS
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
@raffaeldantass OBRIGADO! Segue a gente! @valleweb rafa-dantas.com.br