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
34
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
49
Leve seu CSS para o futuro
raffaeldantass
0
15
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
450
Dismistificando o CSS Grid Layout
raffaeldantass
1
53
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
How STYLIGHT went responsive
nonsquared
100
5.6k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Documentation Writing (for coders)
carmenintech
72
4.9k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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