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
Rafael Dantas
November 28, 2018
0
30
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
190
CSS animations under the hood
raffaeldantass
0
46
Leve seu CSS para o futuro
raffaeldantass
0
13
Houdini e o futuro mágico do CSS
raffaeldantass
1
210
Dismistificando o CSS Grid Layout
raffaeldantass
0
110
Houdini e o Futuro das CSS
raffaeldantass
1
440
Dismistificando o CSS Grid Layout
raffaeldantass
1
53
Featured
See All Featured
Music & Morning Musume
bryan
43
5.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
GitHub's CSS Performance
jonrohan
1026
450k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Building Adaptive Systems
keathley
34
2k
Faster Mobile Websites
deanohume
303
30k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Designing the Hi-DPI Web
ddemaree
276
34k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
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