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
0
41

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
Tweet

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
66
Leve seu CSS para o futuro
Avatar for Rafael Dantas raffaeldantass
0
22
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
460
Dismistificando o CSS Grid Layout
Avatar for Rafael Dantas raffaeldantass
1
53

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
300
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
460
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
480
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
820
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
530
How to make the Groovebox
Avatar for あそなす asonas
2
2k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
150

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