L'essentiel des CSS

Aborder les pseudo-éléments

Testez gratuitement nos 1270 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Explorez les possibilités des pseudo-éléments, notamment avec des types de balises comme les annotations. Ces types de balises vont pouvoir être personnalisés à souhait.
10:01

Transcription

Voyons maintenant avec les peudo-éléments, avec, par exemple, des éléments comme ::first line qui va affecter la première ligne du contenu donc là on va pouvoir le matérialiser autour du paragraphe pour venir cibler cet élément alors, là, l'exemple du pseudo-élément en gris placé autour est assez mal placé parce qu'il devrait, plutôt, être à l'intérieur de la balise paragraphe et ne cibler que la première ligne. Ce que je voulais dire c'est que ce sont vraiment des pseudo-éléments fictifs rajoutés qui peuvent être stylés à part entière On peut cibler ainsi la première lettre par exemple, d'un texte Vous voyez là, je l'ai remis à l'intérieur autour du "U" On a bien ce pseudo-élément encapsulé avec une balise ouvrante et une fermante... qui n'apparaîtront pas dans le DOM mais qui peuvent être ciblées et pouvoir être complètement stylées On peut mettre le before de la même manière, ça va se placer à l'intérieur du paragraphe on le démontrera avec un petit exemple qui va se placer au sein du paragraphe et qui sera un pseudo-élément qui contiendra son propre contenu qui, n'est pas forcément défini dans le DOM au départ ou dans le contenu. Bien sûr il y a d'autres types de pseudo-éléments qui vont être ciblés. Prenons un exemple, ça sera plus parlant. Faisons le tour de ce HTML sur lequel on va travailler qui est constitué de paragraphes avec la classe ligne pour travailler la première ligne la classe lettrine pour travailler la première lettre. Et puis, ici, on a des quotations. Alors, les quotes qui sont des notes courtes. Quand je discute avec des designers ils disent : "Mais des quotes dans des quotes?" Oui, les paroles d'un film par exemple, il y a une citation qui est donnée, donc, on a des guillemets qui vont ouvrir cette citation et à l'intérieur de la citation, la personne en parlant va placer un mot en notation, vous savez, comme quand on parle avec deux doigts en l'air qui disent "Coucou" entre guillemets, voilà le mot que je veux dire. Donc on peut avoir des quotes d'autres Par défaut, le navigateur les représente par des quotes ouvrantes et fermantes ici pour les premiers et de simples quotes à l'intérieur ouvrantes et fermantes ensuite. On va agir sur ces éléments avec des pseudos. Ici on travaillera sur un pseudo-before avec pareil un petit H1 pour montrer que ça s'adresse à tout type d'élément, et puis on va travailler cette fameuse P-classe before pour montrer que cette classe ne se trouve pas à l'extérieur de la balise, mais à l'intérieur. Alors venons sur nos CSS ici et travaillons dessus. Commençons par la first line, ça va être très simple. On va directement utiliser le p.ligne, donc le paragraphe qui a la classe ligne ::first line on va mettre une couleur, on enregistre, on actualise la plage, elle a bien la première ligne qui se liste. Attention si vous réduisez la ligne, seule la première ligne est atteinte. C'est pas donc le pseudo-élément, il est vraiment interactif avec l'interaction que pourra porter l'utilisateur à sa fenêtre de navigation. Pour la première lettre c'est un peu pareil. Dans le sens où l'on va faire un p.lettrine cette fois. ::first letter on va pouvoir donner une taille plus importante, donc c'est ce fameux A ici qu'on va venir cibler. On va lui mettre 80 pixels, on va pouvoir lui donner une couleur différente, on va le faire flotter, on verra la flottaison plus tard, c'est-à-dire que tout théoriquement, puisqu'on va devenir dans un type bloc ici, il ne faudrait pas que le A devienne gros, il faut que le T continue à pouvoir monter autour du A l'épouser, donc on va faire un flot left et puis on va mettre des marges autour, marge haute de 22 pixels pour le dessin [inaudible], 10 pixels à droite, 0 en dessous, 4 pixels à gauche, pour le faire. Il suffit d'enregistrer, de visualiser et voyez, on a pu faire notre lettrine. J'aurais pu faire une lettrine beaucoup plus petite, plus belle plus visuelle, mais il faut voir que la lettrine va être complètement interactive au niveau du texte qui va venir l'habiller. C'est-à-dire qu'ici au lieu de mettre 2 pixels de marge sur la partie haute je mettais 10 pixels, ctrl S, j'actualise, et on voit qu'on va pouvoir jouer sur notre lettrine. Donc maintenant, avant de passer sur la quotation, regardons par exemple, ce qui va pouvoir être fait. Commençons par la pseudo-classe before. Si je prends le paragraphe qui est juste en bas, classé comme before avec un p.before::before. Alors ici bien entendu je ne veux pas causer d'amalgame, ici cette classe a été choisie volontairement avec le terme before pour appartenir à un pseudo-before, vous pouvez l'appliquer à toute classe ou à n'importe quel élément qui ait une classe ou pas. Si par exemple, je lui dis : je veux un content, la propriété content c'est mot "Mot avant" et si je mets une couleur, regardez, j'actualise ma page, j'ai un "Mot avant" qui prend la couleur, qui se place tout seul avant cet élément. Alors, pour pouvoir montrer qu'on est bien à l'intérieur du B regardez ici, je vais classer sur mon P classe before, cette fois-ci, j'affecte sur la phrase directement, je lui met margin-left, regardez, tout l'élément s'en va avec le B. Et si maintenant je rajoute un margin -48 pixels à la pseudo, ici, donc ça vaudrait dire que si l'élément était vraiment avant, si le mot avant était placé à l'extérieur du P, donc avant, il serait seul à partir. Quand j'actualise, tout est bien parti le P a suivi, de cet élément là, cela permet de bien voir qu'on est ressortis. Maintenant, si on veut aller plus loin dans cet élément de before, on n'est pas obligé dans le before de placer systématiquement du contenu écrit "en dur". On va pouvoir aller piocher dans les attributs. Rappelez-vous ici j'ai une liste, où j'ai des attributs data rev qui sont pur HTML5 qui disent [inaudibles] qui sont des références de ces éléments de liste. Je vais pouvoir les afficher dans mes éléments. Si je prends ici un lit before et que je lui dis, dans la propriété content tu vas rajouter l'attribut data-rev, sans mettre les guillemets autour, tout simplement on cite l'attribut, et qu'après je concatène, en passant des doubles guillemets, un espace, un trait d'union, un espace, fermé par les guillemets, ici, qu'est-ce qui va se passer? Devant je vais rajouter les attributs directement de mes références. Je vais pouvoir aller piocher dans mes attributs HTML grâce au pseudo-classe pour pouvoir aller affecter ces éléments. Bien sûr il pourrait y avoir des animations etc. Tout peut être cumulé. Ce que je vous montre, c'est les possibilités que les pseudo éléments vont nous apporter. Pardon, parfois je dis pseudo-classe, ou élément, ici ce sont bien des pseudo-éléments avec lesquels on travaille. Parfois on fait un peu l'amalgame entre eux, qu'on appelle souvent tout court les pseudos. Ici je regarde au niveau de ma section. J'ai un titre H1 et ici je regarde j'ai préparé un petit icône, on ne le voit pas bien, mais c'est un petit carré avec un plus à l'intérieur. Je décide d'apporter ici, devant toutes les sections H1, cette image. Dans le content, je vais pouvoir lui dire : je veux une URL, et je vais la chercher. J'ai pris volontairement un ../css car dans l'arborescence des fichiers sources, elle se retrouve à deux niveaux intérieurs, puis dans un dossier CSS, nos fameux fichiers section.php. Je vais rajouter un petit espace après, donc je vais concaténer avec " " et je vais mettre un cursor pointer juste après. J'actualise. Vous voyez, j'ai ici un plus qui est apparu devant ma section, et quand je survole, pas le titre mais le plus, j'ai un petit curseur qui apparaît. Libre à moi de mettre un java script sur cet élément-là, et puis lui dire qu'en cliquant je veux ouvrir la section donc c'est très facile à faire avec des pseudos sur les CSS. Presque, on ferait que du pseudo, dorénavant. J'ai gardé le meilleur pour la fin, c'est au niveau des quotations ici, des mises en notes, on a des doubles guillemets et des simples et tout ça peut être redéfini avec les pseudos. Vous allez voir, vous pourrez faire comme vous voudrez, supprimer les pseudos par défaut ou rajouter les vôtres avec des images comme vu précédemment, mais tout en restant pur CSS regardez, ma balise Q, je vais définir la propriété quotes. Cette propriété me permet de définir quatre valeurs. Qui sont : le double guillemet ouvrant et le fermant le simple guillemet ouvrant et le fermant, pour chacune des valeurs. Je pourrais définir le même pour tous, avec une seule valeur. Mais si je prends des caractères, j'aurais pu taper des caractères : é, à, ä, etc. J'utilise volontairement des caractères unicodes récupérés dans un tableau unicode. Ici je dis : je veux ce double quote d'ouverture, celui de fermeture, je veux ce simple quote d'ouverture et celui de fermeture. Je vais définir la pseudo Q before et la pseudo Q after. Par contre, je vais lui dire en terme de contenu tu prends l'open quote. Et en after tu prends le close quote. Il saura si on est à l'intérieur d'une double ou d'un simple, il saura se situer tout court. Ce qu'il me reste à faire c'est d'aller les coder en couleur et en size pour les donner de manière différente. Quand j'actualise, j'ai pu mettre des caractères, un peu particuliers certes, et les distinguer, mais si je reprends les valeurs par défaut qui sont les valeurs du style de rendu du navigateur, donc ici je vais coder cet élément, le cacher. Si je fais ça, je fais ctrl S et j'ai pris les valeurs par défaut, je reviens bien à ma valeur par défaut d'ouverture et fermeture. Alors comment peut-on travailler, et bien dans ce tableau unicode on a tous les caractères et dès l'instant où on souhaite, un seul caractère on clique, on a sa valeur unicode. Donc il suffit de venir récupérer, par un backslash la valeur unicode qui nous intéresse. Je vous invite à vous rapprocher également des pseudo-classes et des pseudo-éléments, pour voir tout ce que vous avez sous le capot, prêts à être utilisés, et enfin, pour terminer sur ces pseudo-éléments, on a parlé de deux points, de simple point etc. Si je regarde ici en CSS2 versus CSS3, on avait les classes qui étaient séparées en CSS2 et CSS3 qui étaient les pseudo-classes :nth-child par exemple et en CSS2 toujours on avait, pour les pseudo-éléments CSS2 utilisait :before. Depuis CSS3, on va pouvoir faire la distinction parce qu'on faisait souvent la confusion entre pseudo-classes et pseudo-éléments en CSS3 on utilisera :nth-child et pour tout ce qui va être before first-line etc. ce sera :: Donc voilà une étape assez volumineuse pour les pseudo-classes et éléments, mais je pense qu'on a bien fait le tour de chacune de ces possibilités, à vous d'aller explorer, avec toutes les propriétés non explorées.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !