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

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/.

B0beb3dec0b3d42ad0eae3158d80f19c?s=128

Matthieu Bué

June 19, 2015
Tweet

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!

  4. None
  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);

  17. None
  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

  42. None
  43. None
  44. MERCI ! MERCI ! MERCI ! Matthieu Bué @twikito twikito.com