Pseudo-éléments : Pseudos mais puissants !

(Présenté à BDX I/O le 21 octobre 2016)

Les pseudo-éléments, vous en avez sûrement au moins entendu parler, mais savez-vous réellement exploiter leurs potentiels servis sur un plateau ?
De la base avec des exemples simples à des cas concrets avancés, nous allons voir comment utiliser ces diableries en les combinant à d'autres techniques CSS, tout en gardant un code propre et optimisé.
L'objectif de cette présentation sera de vous montrer (de façon amusante) qu'il suffit bien souvent de faire preuve de créativité et d’imagination.
Attention : techniques velues probables !

—

Retrouvez les exemples sur http://codepen.io/collection/AkEdeb/.
Retrouvez la vidéo de la conférence sur https://youtu.be/7dVcF091v0I

Transcript

1. PSEUDO-ÉLÉMENTS pseudos mais puissants
2. D’abord, questions…
3. YOU’RE AWESOME!
5. Les pseudo-éléments
6. ::first-line ::first-letter ::before ::after ::selection ::inactive-selection
7. ::spelling-error (lvl 4 WD) ::grammar-error (lvl 4 WD) ::marker (lvl 4 WD) ::placeholder (lvl 4 WD) ::backdrop
8. ::before et ::after Du contenu généré par CSS
9. Toujours spécifier la propriété content.
10. <div> Lorem ipsum dolor sit amet. </div> div::before { content: "before"; color: red; } div::after { content: "after"; color: blue; }
11. 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 { display: table; clear: both; content: ""; }
20. <span class="fa fa-github"></span> github .fa { display: inline-block; font: normal normal normal 1em/1 FontAwesome; font-size: inherit; /* etc. */ } .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.svg"); } [href^="https"]::before { content: url("secure.svg"); } [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 marqueur d’accordéon
27. Démo info-bulle
28. Démo overlay
30. Démo ombre
31. Démo lien de galerie
32. Démo lien de galerie
33. Démo UX sur focus
34. Démo navigation effet 1
35. Démo navigation effet 2
36. Démo navigation effet 3D
37. Démo bouton effet 3D
38. Démo sommaire
39. Démo quotes internationales
40. Démo compteur CSS
41. Démo checkbox et compteur
42. Démo fil d’Ariane
43. Démo aspect ratio
44. Démo highlight de cellule de tableau
45. Démo icône menu burger
46. Démo nav et trigger fullpage
47. …et beaucoup d’autres possibilités
50. TANK YOU captures de Kung Fury ©Laser Unicorns
51. MATTHIEU BUÉ @twikito twikito.com