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 !
   

   View Slide

2. D’abord, questions…
   

   View Slide

3. YOU’RE
   AWESOME!
   YOU’RE
   AWESOME!
   YOU’RE
   AWESOME!
   

   View Slide

4. View Slide

5. Les pseudo-éléments
   

   View Slide

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

   View Slide

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

   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. démo
    
    Lorem ipsum dolor sit amet.
    
    div::before {
    content: "before"; color: red;
    }
    div::after {
    content: "after"; color: blue;
    }
    

    View Slide

11. résultat
    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 {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
    }
    La classe .clearfix
    

    View Slide

20. 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";
    }
    

    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.png"); }
    [href^="https"]::before { content: url("secure.png"); }
    [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 puce et rotation
    

    View Slide

27. Démo info-bulle
    

    View Slide

28. Ok.
    Creative time!
    

    View Slide

29. Démo ombres sous vignettes
    

    View Slide

30. Démo lien de galerie
    

    View Slide

31. Démo champs de saisie et focus
    

    View Slide

32. Démo champ de saisie UX sur focus
    

    View Slide

33. Démo survol de liens boutons
    

    View Slide

34. Démo survol de bouton et 3D
    

    View Slide

35. Démo survol de lien boutons et 3D
    

    View Slide

36. Démo compteur CSS
    

    View Slide

37. Démo checkbox et labels + compteur
    

    View Slide

38. Démo fil d’Ariane avec flèche et compteur
    

    View Slide

39. Démo bouton menu “burger” et active
    

    View Slide

40. Démo nav et fullpage trigger
    

    View Slide

41. …et bien d’autres
    exemples
    

    View Slide

42. View Slide

43. View Slide

44. MERCI !
    MERCI !
    MERCI !
    Matthieu Bué
    @twikito
    twikito.com
    

    View Slide