Quella sporca dozzina a cascata - la vendetta

Dodici trucchi di cui nessuno vi parla, perchè la lobby dei framework vi nasconde la verità !1!!! Dodici (circa) semplici trucchi per migliorare la vostra vita di scrittori di CSS. Costruire forme astratte, numerare elementi del DOM e soprattutto fare il ganzo con gli amici grazie alla conoscenza di proprietà CSS misconosciute. Un talk leggero e spensierato, pieno di curiosità e consigli per divertirsi ancora scrivendo CSS.

Transcript

1. Quella sporca
   Quella sporca
   dozzina
   dozzina ( a c a s c a t a )
   ( a c a s c a t a )
   Davide Di Pumpo — WebAppConf 2018 >
   

   View Slide

2. Ma perchè?
   Ma perchè?
   

   View Slide

3. View Slide

4. BASTA!!1!
   BASTA!!1!
   

   View Slide

5. Make CSS great again!
   Make CSS great again!
   

   View Slide

6. Non stiamo parlando delle difficoltà del CSS
   Non stiamo parlando delle difficoltà del CSS
   

   View Slide

7. A tal riguardo...
   

   View Slide

8. Quindi?
   Quindi?
   

   View Slide

9. E il CSS è divertente!
   

   View Slide

10. Sì ma sto titolo?
    Sì ma sto titolo?
    

    View Slide

11. Let's start meow!!!
    Let's start meow!!!
    

    View Slide

12. #
    #1
    1 :checked
    :checked
    

    View Slide

13. input[type=checkbox]:checked {
    box-shadow: 0 0 50px 10px #E0168F;
    }
    

    View Slide

14. 
    

    View Slide

15. View Slide

16. 
    
    

    View Slide

17. Rendiamolo interessante
    Rendiamolo interessante
    

    View Slide

18. Sibling combinator
    Sibling combinator
    sel ~ sel
    

    View Slide

19. input[type=checkbox]:checked ~ .selector {
    background: #E0168F;
    }
    

    View Slide

20. Not checked
    Checked
    Demo
    Demo
    

    View Slide

21. Ok, nella vita vera?
    Ok, nella vita vera?
    Custom checkbox!!!
    Custom checkbox!!!
    

    View Slide

22. 
    
    
    
    
    
    
    What a wonderful checkbox
    
    
    

    View Slide

23. What a wonderful checkbox
    

    View Slide

24. Ma praticamente potete
    Ma praticamente potete
    gestire qualsiasi stato
    gestire qualsiasi stato
    binario
    binario
    

    View Slide

25. See the Pen by Terryl ( ) on .
    Pure CSS3 Off Canvas Menu @Terryl_Brown CodePen
    

    View Slide

26. See the Pen by Stephen Greig ( ) on .
    CSS Only Tabbed Content @stephengreig CodePen
    

    View Slide

27. See the Pen by keisuke Takahashi ( ) on .
    One Element Girl @ksksoft CodePen
    

    View Slide

28. Accessibilità?
    Accessibilità?
    

    View Slide

29. Il toggle deve avere un attributo aria-expanded con
    lo stato corrente
    Il toggle deve avere un attributo aria-controls che
    indichi cosa controlla
    Nel caso di contenuto nascosto, l'elemento deve avere
    un attributo aria-hidden che ne indichi lo stato
    

    View Slide

30. Cattiva notizia:
    Cattiva notizia:
    Ci vuole javascript per farlo
    Buona notizia:
    Buona notizia:
    C'è un js minuscolo (600 Byte) che lo fa in automatico
    a11y-toggle
    

    View Slide

31. #
    #2
    2 :empty
    :empty
    

    View Slide

32. div:empty {
    border: red;
    }
    

    View Slide

33. 
    
    
    
    
    

    View Slide

34. Bello ma che ci faccio?
    Bello ma che ci faccio?
    Nascondere elementi vuoti
    Tipo quello qua sopra
    

    View Slide

35. li:empty {display: none}
    Nascondere elementi vuoti
    Tipo quello qua sopra
    

    View Slide

36. Segnalare errori
    Segnalare errori
    

    View Slide

37. 
    .main:empty {
    background: #e74c3c;
    padding: 1em;
    margin: 1em 0;
    border-left: 5px solid #c0392b;
    }
    .main:empty::before {
    content: "The app is unavailable now!"
    }
    

    View Slide

38. The app is unavaible now!
    

    View Slide

39. Utilizzarlo per gestire il
    Utilizzarlo per gestire il
    loading
    loading
    

    View Slide

40. 
    .main2:empty::after {
    display: block;
    content: '';
    color: #ffffff;
    font-size: 90px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin: 72px auto;
    position: relative;
    transform: translateZ(0);
    animation: load6 1.7s infinite ease, round 1.7s infinite ease;
    }
    

    View Slide

41. View Slide

42. O perchè no, fare entrambe
    O perchè no, fare entrambe
    le cose
    le cose
    contemporaneamente!
    contemporaneamente!
    

    View Slide

43. The app is unavaible now!
    

    View Slide

44. In combo con :not
    In combo con :not
    

    View Slide

45. View Slide

46. .main4:not(:empty) {
    animation: empty-fade 1s, empty-translate-in 1s;
    }
    

    View Slide

47. #
    #3
    3 :target
    :target
    

    View Slide

48. è una CSS pseudo-class che seleziona un
    elemento univoco (l'elemento target) che abbia l'id che
    corrisponde a quello nell'url.
    :target
    

    View Slide

49. Già le vecchie ancore!
    Già le vecchie ancore!
    

    View Slide

50. Pippo Link
    PIPPO!!1!
    div:target {
    background: #E0168F;
    color: #fff;
    }
    

    View Slide

51. See the Pen by Davide Di Pumpo
    ( ) on .
    target example
    @MakhBeth CodePen
    

    View Slide

52. Eh ma come la mettiamo
    Eh ma come la mettiamo
    con il jump to?
    con il jump to?
    

    View Slide

53. Pippo Link
    
    PIPPO!!1!
    .target {
    position: fixed;
    top: 0; left: 0;}
    div:target + div {
    background: #E0168F;
    color: #fff;}
    

    View Slide

54. Via di esempi reali!!1!
    Via di esempi reali!!1!
    

    View Slide

55. See the Pen by The Curious Developer ( ) on .
    Simple Slider using :target @thecuriousdev CodePen
    

    View Slide

56. See the Pen by Jeff Ayer ( ) on .
    CSS only modal @DeptofJeffAyer CodePen
    

    View Slide

57. See the Pen by pollardld ( ) on .
    CSS Accordion @pollardld CodePen
    

    View Slide

58. #
    #4
    4 :nth
    :nth
    

    View Slide

59. Ci sono un sacco di trucchi che potete fare con:
    :nth-child
    :nth-of-type
    :nth-last-child
    E le combinazioni varie con ~ e +
    

    View Slide

60. Quantity Queries
    

    View Slide

61. Un altro trucco che adoro è:
    1. Item
    2. Item
    3. Item
    4. Item
    5. Item
    6. Item
    7. Item
    

    View Slide

62. ol li:nth-child(-n+5):nth-child(n+3) {
    background: #E0168F;
    }
    

    View Slide

63. #
    #5
    5 :placeholder-
    :placeholder-
    shown
    shown
    

    View Slide

64. Un semplice selettore che vi dice se il placeholder di un
    input è visibile o meno!
    

    View Slide

65. 
    input {
    border: 2px solid black;
    }
    input:placeholder-shown {
    border-color: #E0168F
    }
    

    View Slide

66. Placeholder
    Text
    

    View Slide

67. Un utilizzo reale?
    Un utilizzo reale?
    

    View Slide

68. See the Pen by Anton Staroverov ( ) on .
    Pure-CSS Float Label. Finally. @tonystar CodePen
    

    View Slide

69. Semplice facile e veloce,
    Semplice facile e veloce,
    no?
    no?
    ma...
    

    View Slide

70. View Slide

71. View Slide

72. View Slide

73. MA...
    MA...
    ... esiste un polyfill così piccolo da stare in una slide!
    

    View Slide

74. function placeholderPolyfill() {
    this.classList[this.value ? 'remove' : 'add']('placeholder-shown');
    }
    document.querySelectorAll('[placeholder]').forEach(el => {
    el.addEventListener('change', placeholderPolyfill);
    el.addEventListener('keyup', placeholderPolyfill);
    });
    

    View Slide

75. #
    #6
    6 :invalid
    :invalid
    

    View Slide

76. Seleziona un input o un form non validi (tramite gli attributi
    HTML5)
    In combo con gli altri selettori di form si possono stilare gli
    stati di un form
    

    View Slide

77. See the Pen by Davide Di Pumpo
    ( ) on .
    Example Form 1
    @MakhBeth CodePen
    

    View Slide

78. See the Pen by Davide Di Pumpo ( ) on .
    Example Form 1 @MakhBeth CodePen
    

    View Slide

79. Cose negative?
    Cose negative?
    No serio, io non le ho trovate
    

    View Slide

80. Siamo solo a
    Siamo solo a
    metà
    metà
    Acceleriamo!
    Acceleriamo!
    

    View Slide

81. #
    #7
    7 currentColor
    currentColor
    

    View Slide

82. È una variabile sempre valorizzata con il valore della
    propietà color corrente
    

    View Slide

83. Example
    <br/>.example-currentColor{<br/>color: #E0168F;<br/>border-bottom: 0.5em solid currentColor;<br/>box-shadow: 0px 0px 1px currentColor;<br/>}<br/>
    Example
    

    View Slide

84. Real life?
    Button Info Success Error
    .example-currentColor-1 button {
    background: transparent;
    border: 2px solid currentColor;
    }
    .example-currentColor-1 button.info {
    color: #3498db;
    }
    .example-currentColor-1 button.success {
    color: #27ae60;
    }
    .example-currentColor-1 button.error {
    color: #c0392b;
    }
    

    View Slide

85. View Slide

86. Il mio preferito è con le SVG!
    Button Info Success Error
    .example-currentColor-1 svg {
    fill: currentColor;
    }
    

    View Slide

87. #
    #8
    8 SVG path
    SVG path
    

    View Slide

88. Ci sono due proprietà stroke-dasharray e stroke-
    dashoffset che si riferiscono allo stroke di una svg
    

    View Slide

89. stroke-dasharray indica come tratteggiare la linea (un
    valore di 5 creerà dei dash di 5px distanziati da loro di
    5px
    stroke-dashoffset indica da dove, dall'inizio dell'svg
    si inizia a tratteggiare.
    

    View Slide

90. <br/>line.example-svg-1,<br/>line.example-svg-2 {<br/>stroke: white;<br/>stroke-width: 2;<br/>stroke-dasharray: 10;<br/>}<br/>line.example-svg-2 {<br/>stroke-dashoffset: 10;<br/>}<br/>
    
    
    
    

    View Slide

91. @keyframes example-svg-3 {
    0% {
    stroke-dashoffset: 600;
    }
    100% {
    stroke-dashoffset: 0;
    }
    }
    

    View Slide

92. nella vita reale?
    See the Pen by James Nowland ( ) on .
    What's My Name? @jnowland CodePen
    

    View Slide

93. Ma il mio esempio preferito?
    What a wonderful checkbox
    

    View Slide

94. Broken image
    #
    #9
    9 Broken images
    Broken images
    

    View Slide

95. Potete fare le UI più fighe dell'universo, ma
    quando si spacca un'immagine ve voglio
    vedè a fa i ganzi
    “
    ”
    Confucio
    

    View Slide

96. img { min-height: 50px; position: relative;
    display: inline-block; text-align: center;}
    img::before, img::after {
    display: block; position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);}
    img:before {
    content: " ";
    height: 100%; width: 100%;
    background-color: #ecf0f1;
    border: 10px dashed currentColor;}
    img:after {
    content: " Image not available: " attr(alt);
    color: #7f8c8d;}
    

    View Slide

97. Awesome stuff
    Image not available:
    Awesome stuff
    

    View Slide

98. Due cose:
    content: "..." attr(alt);
    Le brutte notizie
    

    View Slide

99. Sto trucco non funziona su IE e Safari...
    

    View Slide

100. #
     #10
     10 Escape the
     Escape the
     cage
     cage
     

     View Slide

101. Cats are frome here
     

     View Slide

102. View Slide

103. Lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id semper quam. Ut sodales
     venenatis enim, eget vestibulum purus commodo non. Etiam convallis mi sapien, eu mollis velit
     aliquam ac. Sed fringilla quis ipsum eget pharetra. Nullam commodo ligula sed mattis ornare. Sed
     ullamcorper luctus diam vel vehicula. Nulla facilisi. Phasellus orci est, tempor et diam a,
     consectetur interdum metus. Aliquam erat volutpat. Praesent porttitor velit eu fringilla
     condimentum. Curabitur sed massa dignissim elit vulputate tincidunt in ac eros. Maecenas a
     elementum leo, ut elementum risus. Morbi id pulvinar turpis. Duis posuere sapien libero, et
     tempus neque consequat sit amet.
     Sed lacus dolor, blandit et tempor at, consectetur luctus velit. Praesent a dapibus nunc. Duis vel
     orci vel justo sollicitudin accumsan. Proin convallis sapien ac arcu egestas vehicula. Maecenas
     nulla elit, volutpat eu nibh at, dictum fringilla dui. Aenean pharetra nisi feugiat rhoncus fringilla. Ut
     varius semper pharetra. Aenean non finibus ligula. Pellentesque consectetur ac quam ac sodales.
     

     View Slide

104. 
     
     Lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mo
     
     Sed lacus dolor, blandit et tempor at, consectetur luctus velit.
     
     
     

     View Slide

105. Lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id semper quam. Ut sodales
     venenatis enim, eget vestibulum purus commodo non. Etiam convallis mi sapien, eu mollis velit
     aliquam ac. Sed fringilla quis ipsum eget pharetra. Nullam commodo ligula sed mattis ornare. Sed
     ullamcorper luctus diam vel vehicula. Nulla facilisi. Phasellus orci est, tempor et diam a,
     consectetur interdum metus. Aliquam erat volutpat. Praesent porttitor velit eu fringilla
     condimentum. Curabitur sed massa dignissim elit vulputate tincidunt in ac eros. Maecenas a
     elementum leo, ut elementum risus. Morbi id pulvinar turpis. Duis posuere sapien libero, et
     tempus neque consequat sit amet.
     Sed lacus dolor, blandit et tempor at, consectetur luctus velit. Praesent a dapibus nunc. Duis vel
     orci vel justo sollicitudin accumsan. Proin convallis sapien ac arcu egestas vehicula. Maecenas
     nulla elit, volutpat eu nibh at, dictum fringilla dui. Aenean pharetra nisi feugiat rhoncus fringilla. Ut
     varius semper pharetra. Aenean non finibus ligula. Pellentesque consectetur ac quam ac sodales.
     

     View Slide

106. .our-div.free {
     width: 100vw;
     position: relative;
     left: 50%;
     transform: translateX(-50%);
     }
     

     View Slide

107. Ci sono altre soluzioni che prevedono calc che potete
     trovare online, simili a:
     .our-div.free {
     margin: 0 calc(-50vh + 50%);
     }
     body, html {
     overflow: hidden;
     }
     Non le adoro a causa di quell'overflow hidden;
     

     View Slide

108. #
     #11
     11 Lavorare con
     Lavorare con
     la legacy
     la legacy
     

     View Slide

109. Cambiate lavoro e:
     
     

     View Slide

110. Combattere il male con il male
     Combattere il male con il male
     

     View Slide

111. Potete raggruppare i selettori con caratteri non validi:
     
     
     
     

     View Slide

112. ./#utility {
     border: 1px solid red !important;
     }
     

     View Slide

113. Avete paura del global scope?
     Usate le emoji...
     Usate le emoji...
     

     View Slide

114. Le emoji sono selettori CSS validi
     . {<br/>border: 2px solid #E0168F;<br/>color: white;<br/>padding: 5rem;<br/>text-align: center;<br/>}
     
     

     View Slide

115. E ricordate che prima del !important
     Potete moltiplicare le classi
     Potete moltiplicare le classi
     per aumentare la
     per aumentare la
     specificità
     specificità
     

     View Slide

116. Colore!
     <br/>.example-double.example-double {<br/>background-color: #E0168F;<br/>}<br/>.example-double {<br/>background-color: red;<br/>}<br/>
     Colore!
     

     View Slide

117. #
     #12
     12 Bonus track
     Bonus track
     

     View Slide

118. Potete usare ::before e ::after con elementi
     autochiudenti che non effettuano replace
     See the Pen by Davide Di Pumpo ( ) on
     .
     YEqavq @MakhBeth
     CodePen
     

     View Slide

119. Grazie ad un selettore come a:not([href*="mio-
     sito.cool"]) potete segnalare tutti i link esterni al
     vostro sito
     Link interno
     Link a bellissimi siti di gatti
     a:not([href*="localhost"]) {
     color: red;
     }
     

     View Slide

120. Con le proprietà CSS counters potete numerare oggetti
     con il solo CSS
     Un esempio reale?
     

     View Slide

121. View Slide

122. Davide Di Pumpo
     Davide Di Pumpo
     Web Designer
     Senior Front-End Developer
     Co-organizzatore
     MakhBeth su: , ,
     Credimi
     Milano Frontend
     Twitter Github Internet
     

     View Slide

123. View Slide