Les pseudo-éléments, c'est bon !

(Présenté à la Kiwiparty le 19 juin 2015)

Les pseudo-éléments, ça n'a l'air de pas grand chose, mais ces petits trucs de CSS ont un potentiel incroyable.

L'idée ici sera de faire une piqûre de rappel, et de montrer à quel point, combinés à d'autres techniques CSS, les pseudo-éléments peuvent-être une réelle opportunité à la créativité et à l'optimisation du code.

Retrouvez les exemples sur http://codepen.io/collection/AkEdeb/.
Retrouvez l'audio de la conférence sur http://2015.kiwiparty.fr/.

Transcript

1. C’EST BON ! LES PSEUDO-ÉLÉMENTS C’EST BON ! C’EST BON !
2. D’abord, questions…
3. YOU’RE AWESOME! YOU’RE AWESOME! YOU’RE AWESOME!
5. Les pseudo-éléments
6. ::first-line ::first-letter ::before ::after ::selection
7. ::spelling-error (lvl 4 WD) ::grammar-error (lvl 4 WD) ::marker (lvl 4 WD) ::placeholder (lvl 4 WD)
8. ::before et ::after Du contenu généré par CSS
9. Toujours spécifier la propriété content.
10. démo <div> Lorem ipsum dolor sit amet. </div> div::before { content: "before"; color: red; } div::after { content: "after"; color: blue; }
11. résultat beforeLorem ipsum dolor sit amet.after <div> ::before Lorem ipsum dolor sit amet. ::after </div>
12. La propriété content
13. content: none; content: normal;
14. content: “hello”; content: url(‘nyan-cat.svg’);
15. content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote;
16. content: counter(var); content: attr(class);
18. Exemples connus
19. .clearfix:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } La classe .clearfix
20. <span class="fa fa-github"></span> github Les polices d’icônes .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); } .fa-github::before { content: "\f09b"; }
21. Cas simples
22. [href$=".pdf"]::after { content: "(pdf)"; } [href$=".zip"]::after { content: "(zip)"; }
23. [target="_blank"]::after { content: url("external.png"); } [href^="https"]::before { content: url("secure.png"); } [href^="#"]:hover::before, [href^="#"]:focus::before { content: "#"; }
24. @media print { [href]::after { content: " (" attr(href) ")"; } }
25. Démo flèche de bulle
26. Démo puce et rotation
27. Démo info-bulle
28. Ok. Creative time!
29. Démo ombres sous vignettes
30. Démo lien de galerie
31. Démo champs de saisie et focus
32. Démo champ de saisie UX sur focus
33. Démo survol de liens boutons
34. Démo survol de bouton et 3D
35. Démo survol de lien boutons et 3D
36. Démo compteur CSS
37. Démo checkbox et labels + compteur
38. Démo fil d’Ariane avec flèche et compteur
39. Démo bouton menu “burger” et active
40. Démo nav et fullpage trigger
41. …et bien d’autres exemples
44. MERCI ! MERCI ! MERCI ! Matthieu Bué @twikito twikito.com