Le CSS (Cascading Style Sheets) est un langage essentiel pour la présentation et l'apparence des pages web. Il permet de séparer le contenu (HTML) de la mise en forme, offrant ainsi une plus grande flexibilité et maintenabilité. Cet article explore divers aspects des sélecteurs CSS, y compris les nouveautés de CSS4 et leur application dans le web scraping.
Introduction aux Sélecteurs CSS
Une feuille de style CSS est composée d'un ensemble de règles. Dans l'exemple ci-dessus, body {} est le sélecteur, color: est la propriété et red est la valeur. Le symbole : délimite la propriété de la valeur. Le couple propriété-valeur est appelé une déclaration. Une règle peut contenir une ou plusieurs déclarations, délimitées par le symbole ;. Le ; de la dernière ligne est facultatif.
Le code CSS s'écrit dans un fichier avec l'extension .css. Le lien entre le fichier HTML et le fichier CSS s'effectue dans l'en-tête du fichier HTML. Grâce à la balise <link>, les instructions codées dans le fichier CSS s'appliqueront à la page HTML. L'attribut rel="" précise que la ressource est une feuille de style.
Structure de Base d'un Fichier CSS
Un fichier CSS est structuré de manière spécifique:
- Sélecteur: Indique à quel(s) élément(s) HTML la règle s'applique.
- Propriété: Caractéristique à modifier (ex: couleur, taille).
- Valeur: Définition de la propriété (ex: rouge, 12px).
Par exemple:
body { color: red;}Si l'on vulgarise la déclaration du CSS, elle veut dire en français : "Colore tous les textes de la balise <body> en rouge". Or, étant donné que tout notre contenu est à l'intérieur, on peut également en déduire que cela va colorer tout le texte de la page web.
Types de Sélecteurs
Nos premières manipulations le démontrent bien, les sélecteurs d'éléments ciblent les balises en fonction de leur nom. Vous connaissez tout un tas de balises HTML, vous pouvez dorénavant les sélectionner très facilement en CSS. Par exemple, le sélecteur p {} va cibler toutes les balises <p> de votre page HTML. Ce sera de même avec le sélecteur strong {} qui ciblera toutes les balises <strong> et ainsi de suite.
Sélecteur Universel
Avant de continuer avec des choses plus complexes, prenons le temps de découvrir le sélecteur universel. Il permet de cibler toutes les balises sans exception. Le caractère qui identifie le sélecteur universel est *. *|* est une règle générale de type « s'applique à tout ».
Sélecteur d'Identifiant
Nous savons cibler tous les éléments ou seulement les éléments répondant à un même nom de balise, mais comment différencier deux paragraphes par exemple ? Le sélecteur d'identifiant utilise l'attribut id="" d'une balise HTML pour sélectionner un élément spécifique. L'identifiant d'une balise devant être unique dans une page web, le sélecteur d'identifiant est donc utilisé pour sélectionner un élément unique. Pour sélectionner un identifiant, il faut utiliser le caractère croisillon #.
Sélecteur de Classe
À l'inverse d'un identifiant, un ou plusieurs éléments peuvent avoir la même classe. Le sélecteur de classe sélectionne les éléments avec un attribut de classe spécifique. Pour sélectionner des éléments avec une classe spécifique, il faut utiliser le caractère point ..
Vous n'êtes pas obligé de faire une déclaration par élément. Il est même préférable de regrouper les sélecteurs pour minimiser le code.
Combinateurs
Le nom est assez explicite, les combinateurs permettent de combiner différents types de sélecteurs pour en former un nouveau plus précis. On peut donc inclure entre chaque sélecteur un combinateur. Il en existe 4 grands types mais nous nous focaliserons uniquement sur celui qui permet de sélectionner des enfants, à savoir l'espace. Les notions de parent et d'enfant sont clairement expliquées dans le prochain chapitre.
Après avoir abordé les combinateurs, pour parachever la démonstration de la flexibilité des sélecteurs en CSS, il est bon de préciser que tous les types de sélecteurs peuvent être additionnés. Cela a tendance à créer un mélange assez complexe et très précis. La bonne pratique veut que les sélecteurs soient le moins précis possible.
Dans l'exemple ci-après, seuls les éléments <p> avec la classe .crazy et ayant pour parent l'élément #super, seront ciblés.
Commentaires en CSS
Comme en HTML et dans tous les langages de programmation, le CSS permet les commentaires. Ces derniers sont utilisés pour expliquer le code et peuvent vous aider lorsque vous modifierez le code ultérieurement. En CSS, un commentaire commence par /* et se termine par */. Ils peuvent couvrir plusieurs lignes.
Nouveautés CSS4
Oui, la spécification CSS4 est déjà en cours d'élaboration (pour les sélecteurs en tout cas). Attention, je vous rappelle qu'il s'agit d'un travail en cours, c'est-à-dire que certaines informations seront peut-être modifiées ou pourront disparaître alors que d'autres pourront s'ajouter. Mais cela vous donnera quand même une idée de ce que sera la véritable spécification CSS4.
Sélecteur :not()
Vous avez peut-être déjà entendu parler du sélecteur :not(), qui a été introduit en CSS3. La spécification CSS4 précise que :not() peut être utilisé aussi bien avec des sélecteurs qu'avec des pseudo-classes. Malgré tout, il ne fonctionnera pas avec :after ou :before, mais tous les autres seront acceptés. Utile non ? Sur des projets importants, cela va certainement permettre de réduire le code.
Un élément E qui ne correspond ni au sélecteur composé s1, ni à s2.
Sélecteur :matches()
Ce sont certainement deux de mes nouveautés préférées. Un élément E qui correspond au sélecteur composé s1 et / ou s2.
:matches() peut s'appliquer à n'importe quelle pseudo-classe. Vous ne pouvez pas combiner :matches() et :not(). La spécification précise clairement que vous ne pouvez pas faire :matches(:not( ... )). De toute façon, ça n'aurait pas beaucoup de sens !
Sélecteur :nth-match()
Comme vous l'avez peut-être remarqué, le sélecteur :match() n'est pas, en soi, particulièrement intéressant et utile. CSS4 a donc ajouté quelques sélecteurs de type nth-type. Vous pouvez ainsi sélectionner un certain nombre d'occurrences. Vous pouvez par exemple avoir envie de récupérer les quatrièmes éléments de rang d'une sélection. Pour cela, vous pouvez utiliser div:nth-match(4n). Si au contraire seul le quatrième élément vous intéresse, alors la syntaxe sera nth-match(4).
Sélecteur :local-link
Les sélecteurs de type :local-link seront quant à eux très utiles, en particulier en ce qui concerne la navigation. Jusqu'à présent, nous devions utiliser des classes spécifiques à appliquer pour les liens internes, qu'il faut ajouter soit en PHP soit manuellement. Avec :local-link, nous pourrons cibler directement les liens internes à la page en cours. Plutôt simple, non ? Mais on peut aller un peu plus loin en précisant l'arborescence de l'URL.
Un élément E source d'un hyperlien dont la cible est le document courant. Un élément E source d'un hyperlien dont la cible est le domaine courant.
Autres Sélecteurs CSS4
- E!>F: Un élément E parent d'un élément F.
- ul!>li:hover: C'est le parent qui est sélectionné lorsqu'un élément de liste est survolé.
- E[foo=bar i]: Un élément E dont l'attribut foo correspond à bar, quelle que soit la casse de caractères.
- E:nth-column(n): Un élément E représentant une cellule appartenant à la colonne n d'une grille ou d'une table.
- E:nth-last-column(n): Un élément E représentant une cellule appartenant à la colonne n d'une grille ou d'une table en partant de la dernière.
- E:lang(fr, en): Un élément E dont la langue est "fr" ou "en".
- E:indeterminate: Un élément E dans un état indéterminé (ni sélectionné ni non sélectionné).
- E:default: Un élément E ayant sa valeur par défaut.
- E:in-range, E:out-of-range: Un élément E dans ou hors d'un intervalle.
- E:required, E:optional: Un élément E requis ou optionnel.
- E:read-only, E:read-write: Un élément E pouvant, ou non, être édité.
XPath et CSS pour le Web Scraping
En matière de web scraping, trouver la bonne méthode pour localiser les éléments d'une page est essentiel pour garantir efficacité et précision. Les sélecteurs XPath et CSS sont deux méthodes populaires utilisées par les développeurs. Chacune a ses avantages, et savoir quand utiliser l'une plutôt que l'autre peut faire toute la différence dans vos projets de scraping.
XPath (XML Path Language) est un langage de requête pour trouver des nœuds dans un document XML. Étant donné que le HTML est structuré comme le XML, XPath est utilisé dans le scraping Web pour trouver des éléments sur une page. XPath peut trouver des éléments par leurs balises, leurs attributs, leur position et même leur contenu textuel, ce qui en fait une option très polyvalente.
Les sélecteurs CSS sont utilisés à des fins de style dans la conception Web, mais ils sont également très efficaces pour le scraping Web. Ils recherchent des éléments HTML par classes, identifiants et balises, comme dans le code CSS pour le style. Les sélecteurs CSS sont plus simples et plus lisibles, c'est pourquoi ils sont populaires dans le web scraping pour les tâches simples.
Le choix entre les sélecteurs XPath et CSS dépend de la structure et de la complexité de la page.
Avantages et Inconvénients
Voici un tableau comparatif décrivant les avantages et les inconvénients des sélecteurs XPath et CSS pour vous aider à décider quelle option convient le mieux à vos besoins de scraping Web.
| Caractéristique | XPath | CSS |
|---|---|---|
| Complexité | Plus complexe, mais plus puissant | Plus simple et lisible |
| Structure HTML | Idéal pour les structures complexes | Adapté aux structures simples |
| Performance | Peut être plus lent | Généralement plus rapide |
| Support | Supporté par de nombreuses bibliothèques | Très bien supporté, surtout avec JavaScript |
Scénarios d'Utilisation
- XPath: Structures HTML complexes, sélection positionnelle, filtrage avancé.
- CSS: Structures HTML simples, pages avec beaucoup de JavaScript, besoins en performances.
UnoCSS : Génération de Règles CSS Utilitaires
UnoCSS est un outil qui va vous permettre de générer des règles CSS utilitaires à la demande. La génération des règles est personnalisable et il est possible de créer des règles dynamiques spécifiques. Le point fort d'UnoCSS réside dans sa personnalisation qui permet de créer des règles sur mesures. La configuration se fait au travers d'un fichier uno.config.ts dans lequel vous pouvez ajouter différentes options.
Bien qu'il y ait quelques subtilités, notamment dans la partie preset, les différences avec Tailwind restent relativement légères. Cela permet d'utiliser un vocabulaire auquel on est déjà habitué.
Un autre point intéressant est la possibilité de créer ses propres règles. Pour des projets qui utilisent beaucoup de classes utilitaires, l'outil permet de générer des classes sur mesure, ce qui est très pratique. La partie preset est également intéressante puisqu'elle permet d'ajouter de nouvelles fonctionnalités, comme les icônes ou la typographie.
Le premier inconvénient réside dans la création de ses propres règles, qui conduit à une configuration spécifique à chaque projet. Le vocabulaire des classes utilitaires créées peut ne pas être partagé ou connu par d'autres développeurs, contrairement aux règles standardisées de Tailwind où tout le monde parle le même langage par exemple.
Un autre inconvénient concerne la documentation. Bien que le système de documentation interactive soit intéressant, il ne couvre pas toutes les possibilités. Enfin, l'utilisation des shortcuts dans UnoCSS peut aussi poser des problèmes. Cela peut éloigner l'utilisateur de l'approche des classes utilitaires, créant ainsi une confusion entre les classes utilitaires et sémantiques.