Презентация - The power of pseudo-elements a css tale from ::before to ::after

На весь экран

Слайды и текст этой презентации

Слайд 1


The power of pseudo-elements A CSS Tale from ::before to ::after

Слайд 2


Geoffrey Crofte
Lead (System) Designer / UX Designer @
@geoffreycrofte geoffrey.crofte.fr/en/ creativejuiz.fr/blog/en
“Power of Pseudo-elements” — @geoffreycrofte
Luxembourg JS - 2020

Слайд 3


Overview
What are they? Why are we gonna talk about it? Some basics: how to use them? Demo and code examples. Go further, together.

Слайд 4


What are those pseudo-elements?

Слайд 5


Pseudo-what?
Pseudo-elements are often mistaken for pseudo-classes. A pseudo-element act like a new HTML element in your code. A pseudo-class helps you target precisely one or several elements among others.

Слайд 6


Pseudo-classes
p:first-child { font-weight: bold; } p.first { font-weight: bold; }

Lorem ipsum

Lorem ipsum


Lorem ipsum

Lorem ipsum

Слайд 7


Pseudo-elements

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, eligendi.

Lorem ipsum dolor sit amen, consectetur adipisicing elit. Nulla, eligendi.


p::first-letter { font-weight: bold; }
p span { font-weight: bold; }

Слайд 8


Which ones?
::before ::after
“Power of pseudo-elements” — @geoffreycrofte
Luxembourg JS 2020

Слайд 9


I won’t talk about these one
::first-letter ::first-line ::selection
“Power of pseudo-elements” — @geoffreycrofte
Luxembourg JS 2020

Слайд 10


What’s define those
Part of the “Generated Content” Ask to the User-Agent to generate a content that is not already in the DOM. “Tree-Abiding Pseudo Elements”, they respect the existing DOM structure.

Слайд 11


Principle
A content is generated before or after the content of the target. You can manipulate this content with (almost) all the CSS you want. One common example are the
    and
      elements. They generating content, dash and numbers.

Слайд 12


Why are we gonna talk about it?

Слайд 13


Yes, tell me why?
Indeed, pseudo-elements exist since 2003, in CR since 2011, CSS 2.1. In the end, they are used very little. When they are used, they are used mechanically. The basics of CSS are sometimes misunderstood, and they are quickly forgotten.

Слайд 14

Слайд 15

Слайд 16


“Don’t forget that old CSS still exists and is useful. You don’t need to use something fancy for every effect.”
— Rachel Andrew Front-End Conference Zurich - 30, 31 Aug. 2018

Слайд 17


How to use ::before and ::after

Слайд 18


Basic syntax

Слайд 19


Basic syntax

Слайд 20


Basic syntax

Слайд 21


Good to know
In CSS2.1 the first syntax of the pseudo- element was using colon mark (“ : ”) If you don’t need to support IE8, use (“ : : ”), it’s a good way to mark the difference between pseudo-class using : and pseudo- element using : : Modern browers support both syntax.

Слайд 22


Before & after what?

Слайд 23


Before & after what?

Слайд 24


Before & after what?

Слайд 25


Before & after what?

Слайд 26

Before and after the content of an element, within the content-box, no matter how many children in it.
Before & after what?
::before ::after

Слайд 27


In da content-box

Voici mon super contenu

p::before { content: 'BEFORE'; } p::after { content: 'AFTER'; }
BEFORELorem ipsum dolor sitAFTER

Слайд 28


Inspect the inspector
The content-box is in blue The margin-box is in yellow You can see the pseudo-elements generated next to the content before and after it, to help with debugging your CSS applied.

Слайд 29


Be careful with replaced content