Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Matthieu Bué

June 19, 2015
Tweet

More Decks by Matthieu Bué

Other Decks in Programming

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