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
   

   View Slide

2. D’abord, questions…
   

   View Slide

3. YOU’RE
   AWESOME!
   

   View Slide

4. View Slide

5. Les pseudo-éléments
   

   View Slide

6. ::first-line
   ::first-letter
   ::before
   ::after
   ::selection
   ::inactive-selection
   

   View Slide

7. ::spelling-error (lvl 4 WD)
   ::grammar-error (lvl 4 WD)
   ::marker (lvl 4 WD)
   ::placeholder (lvl 4 WD)
   ::backdrop
   

   View Slide

8. ::before et ::after
   Du contenu généré par CSS
   

   View Slide

9. Toujours spécifier la propriété
   content.
   

   View Slide

10. 
    Lorem ipsum dolor sit amet.
    
    div::before {
    content: "before"; color: red;
    }
    div::after {
    content: "after"; color: blue;
    }
    

    View Slide

11. beforeLorem ipsum dolor sit amet.after
    
    ::before
    Lorem ipsum dolor sit amet.
    ::after
    
    

    View Slide

12. La propriété content
    

    View Slide

13. content: none;
    content: normal;
    

    View Slide

14. content: “hello”;
    content: url(‘nyan-cat.svg’);
    

    View Slide

15. content: open-quote;
    content: close-quote;
    content: no-open-quote;
    content: no-close-quote;
    

    View Slide

16. content: counter(var);
    content: attr(class);
    

    View Slide

17. View Slide

18. Exemples connus
    

    View Slide

19. .clearfix::after {
    display: table;
    clear: both;
    content: "";
    }
    

    View Slide

20. github
    .fa {
    display: inline-block;
    font: normal normal normal 1em/1 FontAwesome;
    font-size: inherit;
    /* etc. */
    }
    .fa-github::before {
    content: "\f09b";
    }
    

    View Slide

21. Cas simples
    

    View Slide

22. [href$=".pdf"]::after {
    content: "(pdf)";
    }
    [href$=".zip"]::after {
    content: "(zip)";
    }
    

    View Slide

23. [target="_blank"]::after {
    content: url("external.svg");
    }
    [href^="https"]::before {
    content: url("secure.svg");
    }
    [href^="#"]:hover::before,
    [href^="#"]:focus::before {
    content: "#";
    }
    

    View Slide

24. @media print {
    [href]::after {
    content: " (" attr(href) ")";
    }
    }
    

    View Slide

25. Démo flèche de bulle
    

    View Slide

26. Démo marqueur d’accordéon
    

    View Slide

27. Démo info-bulle
    

    View Slide

28. Démo overlay
    

    View Slide

29. View Slide

30. Démo ombre
    

    View Slide

31. Démo lien de galerie
    

    View Slide

32. Démo lien de galerie
    

    View Slide

33. Démo UX sur focus
    

    View Slide

34. Démo navigation effet 1
    

    View Slide

35. Démo navigation effet 2
    

    View Slide

36. Démo navigation effet 3D
    

    View Slide

37. Démo bouton effet 3D
    

    View Slide

38. Démo sommaire
    

    View Slide

39. Démo quotes internationales
    

    View Slide

40. Démo compteur CSS
    

    View Slide

41. Démo checkbox et compteur
    

    View Slide

42. Démo fil d’Ariane
    

    View Slide

43. Démo aspect ratio
    

    View Slide

44. Démo highlight de cellule de tableau
    

    View Slide

45. Démo icône menu burger
    

    View Slide

46. Démo nav et trigger fullpage
    

    View Slide

47. …et beaucoup
    d’autres possibilités
    

    View Slide

48. View Slide

49. View Slide

50. TANK YOU
    captures de Kung Fury ©Laser Unicorns
    

    View Slide

51. MATTHIEU BUÉ
    @twikito twikito.com
    

    View Slide