CSS Tips

Muitos já perderam a paciência com CSS pelo menos uma vez na vida. No entanto, já também deram aquele suspiro de alívio quando um problema ou bug é resolvido. Fácil de aprender e difícil de dominar, o CSS é uma linguagem de fácil acesso e que esconde diversos segredos. A idéia da talk é abordar algumas dicas de alguém que já perdeu a paciência algumas vezes com CSS mas que ainda o ama. Sem ressentimentos.

Transcript

1. CSS tips @raphaelfabeni
2. CSS tips @raphaelfabeni
3. @raphaelfabeni raphaelfabeni.com.br
5. ANTES DE COMEÇARMOS...
6. CSS é muito legal! "Tá pronto! Falta só aplicar um CSS" ಥ_ಥ
7. É difícil aprender CSS?
9. certo errado
10. csswizardry.com Harry Roberts
11. difícil encapsulamento nada é imutável mexe aqui, estraga ali sem lógica dependência da ordem do código simples para gerar confusão
12. teoria das janelas quebradas
13. bit.ly/pikachu-css3
14. currentColor
15. // config.sass $brand--color: #883443 $brand--color-dark: darken($brand--color, 15%) // layout.sass .list border: solid 1px $brand--color // typography.sass .link-item color: $brand--color &:hover, &:focus color: $brand--color-dark
16. o currentColor é parecido mas diferente...
17. bit.ly/current-color-after
18. .btn { color: #888; ... } .btn:after { width: 0; height: 0; border: 0.4em solid transparent; border-left-color: currentColor; content: ''; display: inline-block; position: relative; top: 1px; left: 5px; transition: transform ease .3s; }
19. bit.ly/current-color-svg
20. .alert { color: gray; /**/ } .alert:after, .alert:before { /**/ background-image: linear-gradient( to bottom, currentColor 0%, currentColor 48%, #fff 49%, #fff 55%, currentColor 56%); } .alert svg { /**/ fill: currentColor; }
21. centralizando vh e vw
22. <div class="center"></div>
23. .center { width: 20vw; height: 20vh; background-color: #fff; }
25. tela 100% elemento 20% - o resto 80% =
26. elemento 20% resto 80% + margin 40% margin 40% +
27. .center { width: 20vw; height: 20vh; background-color: #fff; margin: 40vh 40vw; }
29. float-root
30. duvido vocês não conhecerem essa técnica! leia-se solução alternativa...
31. <div class="hold">
32. <div class="hold"> O Fabeni é um cara muito legal. Esse é um texto fake pra apresentação mas o Fabeni ainda assim é gente fina.
33. <div class="hold"> O Fabeni é um cara muito legal. Esse é um texto fake pra apresentação mas o Fabeni ainda assim é gente fina.
34. .hold { overflow: hidden; } #1 overflow .hold { overflow: auto; }
35. #2 clearfix .hold:after { content: ""; display: table; clear: both; }
36. <div class="hold"> O Fabeni é um cara muito legal. Esse é um texto fake pra apresentação mas o Fabeni ainda assim é gente fina.
37. .hold { display: flow-root; }
38. <div class="hold"> O Fabeni é um cara muito legal. Esse é um texto fake pra apresentação mas o Fabeni ainda assim é gente fina.
39. unset
43. p { font-size: 14px; color: deepSkyBlue; }
45. Aí você precisa mudar o estilo de apenas alguns textos..
47. <p>...</p> <div> <p>...</p> </div>
48. <p>E nessa loucura de dizer que não te quero <br> Vou negando as aparências<br> Disfarçando as evidências<br> Mas pra que viver fingindo<br> Se eu não posso enganar meu coração </p> <div class="my-class"> <p>Eu sei que te amo <br> Chega de mentiras <br> De negar o meu desejo <br> Eu te quero mais que tudo <br> Eu preciso do seu beijo <br> Eu entrego a minha vida <br> Pra você fazer o que quiser de mim <br> Só quero ouvir você dizer que sim </p> </div>
49. .my-class { color: lightCoral; }
51. .my-class { color: lightCoral; } .my-class p { color: unset; }
53. efeitos com transition
54. controlar estados de componentes usando transition pra deixar tudo bonitão...
55. um modalzinho da hora...
57. <!-- Modal --> <div id="modal" class="modal"> <div class="modal-box"> <button id="close-modal">Close</button> <h2>Lorem ipsum dolor.</h2> </div> </div>
58. .modal { position: fixed; background-color: rgba(0,0,0,.8); width: 100%; height: 100%; left: 0; top: 0; display: none; } .modal.is-open { display: block; } .modal-box { width: 100%; max-width: 600px; background-color: #fff; margin: 100px auto 0; padding: 20px; } Modal fechado. Modal aberto.
59. .modal { /**/ overflow: hidden; width: 0; height: 0; opacity: 0; } .modal.is-open { opacity: 1; width: 100%; height: 100%; }
61. .modal { width: 0; height: 0; opacity: 0; transition: all .3s ease; } .modal.is-open { opacity: 1; width: 100%; height: 100%; }
63. .modal { width: 0; height: 0; opacity: 0; transition: opacity .3s ease; } .modal.is-open { opacity: 1; width: 100%; height: 100%; }
65. .modal { width: 0; height: 0; opacity: 0; transition: opacity .3s ease, width .01s .3s, height .01s .3s; } .modal.is-open { opacity: 1; width: 100%; height: 100%; transition: opacity .3s ease; }
67. .modal-box { opacity: 0; transition: opacity .3s .3s ease; } .modal { width: 0; height: 0; opacity: 0; transition: opacity .3s ease, width .01s .3s, height .01s .3s; } .modal.is-open { opacity: 1; width: 100%; height: 100%; transition: opacity .3s ease; } .modal.is-open .modal-box { opacity: 1; }
69. .modal-box { opacity: 0; transition: opacity .3s ease; } .modal { width: 0; height: 0; opacity: 0; transition: opacity .3s .3s ease, width .01s .6s, height .01s .6s; } .modal.is-open { opacity: 1; width: 100%; height: 100%; transition: opacity .3s ease; } .modal.is-open .modal-box { opacity: 1; transition: opacity .3s .3s ease; }
71. .modal-box { opacity: 0; transform: translateY(-25px); transition: all .3s ease; } .modal { width: 0; height: 0; opacity: 0; transition: opacity .3s .3s ease, width .01s .6s, height .01s .6s; } .modal.is-open { opacity: 1; width: 100%; height: 100%; transition: opacity .3s ease; } .modal.is-open .modal-box { opacity: 1; transition: all .3s .3s ease; transform: translateY(0); }
74. design responsivo
77. tabelas
79. ಥ_ಥ
80. table { overflow-x: auto; display: block; }
82. table { overflow-x: auto; display: block; background: radial-gradient( ellipse, rgba(0,0,0, .3) 0%, rgba(0,0,0, 0) 75%), radial-gradient( ellipse, rgba(0,0,0, .3) 0%, rgba(0,0,0, 0) 75%); background-size: 10px 100%, 10px 100%; background-position: -3px center, calc(100% + 3px) center; background-repeat: no-repeat; background-color: #fff; }
84. table tbody td:first-child { background-image: linear-gradient(to right, red 50%, blue 100%); background-repeat: no-repeat; background-size: 20px 100%; } table tbody td:last-child { background-image: linear-gradient(to left, red 50%, blue 100%); background-repeat: no-repeat; background-position: 100% 0; background-size: 20px 100%; }
86. table tbody td:first-child { background-image: linear-gradient( to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%); background-repeat: no-repeat; background-size: 20px 100%; } table tbody td:last-child { background-image: linear-gradient( to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%); background-repeat: no-repeat; background-position: 100% 0; background-size: 20px 100%; }
88. #01 #02 #03 a b c d e f g h i
89. #01 #02 #03 a b c d e f g h i 3 grupos de informação
90. #01 a #02 b #03 c #01 d #02 e #03 f #01 g #02 h #03 i
92. table { border: none; } table, thead, tbody, th, td, tr { display: block; }
94. thead tr { position: absolute; top: -9999px; left: -9999px; } table tr + tr { margin-top: 20px; }
96. table td { position: relative; text-align: left; padding-left: calc(30% + 10px); border: solid 1px #bbb; } table td + td { border-top: none; }
98. table td:before { background-color: #f5f5f5; border-right: solid 1px #bbb; position: absolute; top: 0; left: 0; width: 30%; padding-right: 10px; height: 100%; padding-top: 10px; text-align: right; white-space: nowrap; content: ''; font-weight: bold; }
100. table td:nth-of-type(1):before { content: 'Name'; } table td:nth-of-type(2):before { content: 'Title #1'; } table td:nth-of-type(3):before { content: 'Title #2'; } table td:nth-of-type(4):before { content: 'Title #3'; } table td:nth-of-type(5):before { content: 'Title #4'; } table td:nth-of-type(6):before { content: 'Title #5'; } table td:nth-of-type(7):before { content: 'Title #6'; } table td:nth-of-type(8):before { content: 'Title #7'; } table td:nth-of-type(9):before { content: 'Title #8'; } table td:nth-of-type(10):before { content: 'Title #9'; } table td:nth-of-type(11):before { content: 'Title #10'; }
102. <td title="Name">Lorem ipsum.</td> table td:before { /**/ content: attr(title); }
104. adaptando seu conteúdo o problema do conteúdo variável
106. .list--3 li { width: 33.3%; } .list--4 li { width: 25%; } .list--5 li { width: 20%; } @media screen and (max-width: 768px) { .list li { width: 100%; } } Verificação prévia da quantidade de elementos.
107. <ul class="list list--3"> <!-- --> </ul> <ul class="list list--4"> <!-- --> </ul> <ul class="list list--5"> <!-- --> </ul>
109. contando elementos o cara nth-last-child
110. .list li:nth-last-child(3) { /* ┌(ಠ‿ಠ)┘ */ }
111. 01 02 03
112. 01 02 03 .list li:nth-last-child(3) { background-color: blue; }
113. 01 02 03 .list li:nth-last-child(3) { background-color: blue; } .list li:nth-last-child(4) { background-color: green; } 04
114. 01 02 03 .list li:nth-last-child(3) { background-color: blue; } .list li:nth-last-child(4) { background-color: green; } .list li:nth-last-child(5) { background-color: red; } 04 05
115. • saber quantidade de elementos • chegando no primeiro item da lista • selecionar elementos irmãos
116. 01 02 03 .list li:nth-last-child(3), .list li:nth-last-child(3) ~ li { background-color: blue; }
117. .list li:nth-last-child(4), .list li:nth-last-child(4) ~ li { background-color: green; } 01 02 03 04
118. .list li:nth-last-child(5), .list li:nth-last-child(5) ~ li { background-color: red; } 01 02 03 04 05
119. 01 02 03 01 02 03 04 01 02 03 04 05
120. .list li:nth-last-child(3), .list li:nth-last-child(3) ~ li { /*background-color: blue;*/ width: 33.3%; } .list li:nth-last-child(4), .list li:nth-last-child(4) ~ li { /*background-color: green;*/ width: 25%; } .list li:nth-last-child(5), .list li:nth-last-child(5) ~ li { /*background-color: red;*/ width: 20%; } @media screen and (max-width: 768px) { .list li:nth-last-child(n), .list li:nth-last-child(n) ~ li { width: 100%; } }
121. <ul class="list"> <!-- --> </ul> <ul class="list"> <!-- --> </ul> <ul class="list"> <!-- --> </ul>
123. check animation
124. css loader
127. gifs são legais... mas CSS é mais ✌
128. você fez algo... por mais simples que seja pra resolver um problema pra adicionar uma funcionalidade pra estudo pra nada por diversão porque o Fabeni pediu ajuda
129. aí aparece um novo projeto e você repara que pode usar aquele mesmo coisa que você já fez
130. AQUELA JOÇA? AQUELA JOÇA? AQUELA JOÇA? AQUELA JOÇA? AQUELA JOÇA? AQUELA JOÇA? ONDE EU COLOQUEI ONDE EU COLOQUEI ONDE EU COLOQUEI ONDE EU COLOQUEI ONDE EU COLOQUEI ONDE EU COLOQUEI ONDE EU COLOQUEI
133. futuro?
136. ... ufa!
137. bit.ly/css-tips
138. Referências Quantity Ordering With CSS | Drew Minns http://www.smashingmagazine.com/2015/07/quantity-ordering-with-css/ Quantity Ordering | Drew Minns http://quantityqueries.com/ Contando elementos com nth-last-child | Raphael Fabeni http://www.raphaelfabeni.com.br/contando-elementos-nth-last-child/ Usando o currentColor do CSS | Raphael Fabeni http://www.raphaelfabeni.com.br/current-color-css/ The end of the clearfix hack? | Rachel Andrew https://www.rachelandrew.co.uk/archives/2017/01/24/the-end-of-the-clearfix- hack/ lab css3 | Raphael Fabeni http://www.raphaelfabeni.com.br/lab-css3/ Viewport sizes | @stowball http://viewportsizes.com/ Continuing to make the web more mobile friendly | Klemen Kloboves https://webmasters.googleblog.com/2016/03/continuing-to-make-web-more- mobile.html The Lengths of CSS | Chris Coyier https://css-tricks.com/the-lengths-of-css/ Responsive data tables | Chris Coyier https://css-tricks.com/responsive-data-tables/ unset | MDN https://developer.mozilla.org/pt-BR/docs/Web/CSS/unset CSS escalável | Shankar Cabus https://medium.com/@shankarcabus/css-escalavel-parte-1-41e7e863799e Selectors level 4 | W3C Working Draft https://www.w3.org/TR/selectors4/ CSS Containment | Google Developers https://developers.google.com/web/updates/2016/06/css-containment
146. rfabeni@redventures.com
147. Valeu! @raphaelfabeni