Quelles sont les grandes différences entre CSS2 et CSS3 ?

C'est quoi CSS ?

Que signifie CSS ?

Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML où par exemple vous pouvez définir les marges, ou choisir les polices de votre site et plus encore. Les standards définissant CSS sont publiés par le World Wide Web Consortium.

La plus grande différence entre CSS2 et CSS3 est que CSS3 a été divisé en différentes sections, appelées modules . Chacun de ces modules fait son chemin dans le W3C à différentes étapes du processus de recommandation. Ce processus a facilité l'acceptation et l'implémentation de divers éléments de CSS3 dans le navigateur par différents fabricants.

Si vous comparez ce processus à ce qui s'est passé avec CSS2, où tout a été soumis en tant que document unique avec toutes les informations des feuilles de style en cascade , vous commencez à voir les avantages de diviser la recommandation en morceaux plus petits et individuels. Étant donné que chacun des modules est travaillé individuellement, les développeurs bénéficient d'une gamme beaucoup plus large de prise en charge du navigateur pour les modules CSS3.

Nouveaux sélecteurs CSS3

CSS3 offre plusieurs nouvelles façons d'écrire des règles CSS avec de nouveaux sélecteurs CSS, ainsi qu'un nouveau combinateur et de nouveaux pseudo-éléments.

Il existe trois nouveaux sélecteurs d'attributs :

• Le début de l'attribut correspond exactement : element [foo ^ = "bar"] L'élément a un attribut appelé foo qui commence par "bar" par exemple
• La fin de l'attribut correspond exactement : element [foo $ = "bar"] L'élément a un attribut appelé foo qui se termine par "bar" par exemple
• L'attribut contient la correspondance : element [foo * = "bar"] L'élément a un attribut appelé foo qui contient la chaîne "bar".

16 nouvelles pseudo-classes ont été introduites :

• :root - L'élément racine du document.
• :nth-child(n) - Utilisez-le pour faire correspondre des éléments enfants exacts ou utilisez des variables pour obtenir des correspondances alternées.
• :nth-last-child(n) - Faites correspondre les éléments enfants exacts en comptant à partir du dernier.
• :nth-of-type(n) - Faites correspondre les éléments frères avec le même nom avant lui dans l'arborescence du document.
• :nth-last-of-type(n) - Faites correspondre les éléments frères avec le même nom en comptant à partir du bas.
• :last-child - Correspond au dernier élément enfant du parent.
• :first-of-type - Correspond au premier élément frère de ce type.
• :last-of-type - Correspond au dernier élément frère de ce type.
• :only-child - Correspond à l'élément qui est le seul enfant de son parent.
• :only-of-type - Faites correspondre l'élément qui est le seul de son type.
• :empty - Faites correspondre l'élément qui n'a pas d'enfants (y compris les nœuds de texte).
• :target - Correspond à un élément qui est la cible de l'URI de référence.
• :enabled - Faites correspondre l'élément lorsqu'il est activé.
• :disabled - Faites correspondre l'élément lorsqu'il est désactivé.
• :checked - Faites correspondre l'élément lorsqu'il est coché (bouton radio ou case à cocher).
• :not(s) - Correspond lorsque l'élément ne correspond pas aux sélecteurs simples .

Il y a un nouveau combinateur :

• elementA ~ elementB : Correspond lorsque l'élémentB suit quelque part après l'élémentA, pas nécessairement immédiatement.

Nouvelles propriétés

CSS3 a également introduit plusieurs nouvelles propriétés CSS. Beaucoup de ces propriétés créent des styles visuels qui s'associeraient probablement davantage à un programme graphique comme Photoshop . Certains d'entre eux, comme border-radius ou box-shadow, existent depuis l'introduction de CSS3. D'autres, comme flexbox ou même CSS Grid, sont des styles plus récents qui sont encore souvent considérés comme des ajouts CSS3.

En CSS3, le modèle de boîte n'a pas changé. Mais il existe un tas de nouvelles propriétés de style qui peuvent vous aider à styliser les arrière-plans et les bordures de vos boîtes.

Plusieurs images d'arrière-plan

À l'aide des styles d'image d'arrière-plan, de position d'arrière-plan et de répétition d'arrière-plan, vous pouvez spécifier plusieurs images d'arrière-plan à superposer les unes sur les autres dans la zone. La première image est la couche la plus proche de l'utilisateur, avec les suivantes peintes derrière. S'il y a une couleur d'arrière-plan, elle est peinte sous tous les calques d'image.

Ajout des nouvelles propriétés de style d'arrière-plan

Il existe également de nouvelles propriétés d'arrière-plan dans CSS3 :

• background-clip : Cette propriété définit la façon dont l'image d'arrière-plan doit être découpée. La valeur par défaut est la zone de bordure, mais elle peut être remplacée par la zone de remplissage ou la zone de contenu.
• background-origin : Cette propriété détermine si l'arrière-plan doit être placé dans la zone de remplissage, la zone de bordure ou la zone de contenu.
• background-size : Cette propriété indique la taille de l'image d'arrière-plan . Il vous permet d' étirer des images plus petites pour les adapter à la page .

Modifications des propriétés de style d'arrière-plan existantes

Quelques modifications ont également été apportées aux propriétés de style d'arrière-plan existantes :

• background-repeat : Il y a deux nouvelles valeurs pour cette propriété - espace et rond . L'espace espace l'image en mosaïque uniformément dans la boîte sans être découpé. Round redimensionne l'image d'arrière-plan de manière à la recouvrir d'un nombre entier de fois dans la zone.
• background-attachment : Une nouvelle valeur "local" est ajoutée afin que l'arrière-plan défile avec le contenu de l'élément lorsque cet élément possède une barre de défilement.
• background : La propriété de raccourci d'arrière-plan ajoute les propriétés de taille et d'origine.

Propriétés de bordure CSS3

En CSS3, les bordures peuvent être les styles auxquels nous sommes habitués (solide, double, en pointillés, etc.) ou elles peuvent être une image. De plus, CSS3 prend en charge les coins arrondis. Les images de bordure sont intéressantes parce que vous créez une image des quatre bordures puis dites au CSS comment appliquer cette image à vos bordures.

Des nouvelles propriétés de style de bordure

Il existe de nouvelles propriétés de bordure dans CSS3 :

• border-radius : border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius. Ces propriétés vous permettent de créer des coins arrondis sur vos bordures.
• border-image-source : Spécifie le fichier source d'image à utiliser à la place des styles de bordure déjà définis.
• border-image-slice : Représente les décalages vers l'intérieur à partir des bords de l'image de bordure.
• border-image-width : Définit la valeur de la largeur de votre image de bordure.
• border-image-outset : Spécifie l'étendue de la zone d'image de bordure au-delà de la zone de bordure.
• border-image-stretch : Définit la façon dont les côtés et les parties centrales de l'image de bordure doivent être tuilés ou mis à l'échelle.
• border-image : Propriété abrégée de toutes les propriétés de l'image de bordure.

Propriétés CSS3 supplémentaires liées aux bordures et aux arrière-plans

Lorsqu'une boîte est rompue lors d'un saut de page, d'un saut de colonne ou d'un saut de ligne (pour les éléments en ligne), la propriété box-decoration-break définit la façon dont les nouvelles boîtes sont entourées de bordure et de remplissage. Les arrière-plans se répartissent entre plusieurs cases cassées à l'aide de cette propriété.

Une nouvelle propriété box-shadow ajoute des ombres aux éléments de la boîte.

Avec CSS3, vous pouvez désormais facilement configurer une page Web avec plusieurs colonnes sans tableaux ni structures de balises div complexes . Vous indiquez simplement au navigateur le nombre de colonnes que l'élément de corps doit avoir et leur largeur. De plus, vous pouvez ajouter des bordures (règles) et des couleurs d'arrière-plan qui s'étendent sur la hauteur de la colonne, et votre texte traversera automatiquement toutes les colonnes.

Définissez le nombre et la largeur des colonnes

Trois nouvelles  propriétés  vous permettent de définir le nombre et la largeur de vos colonnes :

• column-width : Définit la largeur de vos colonnes. Le navigateur fera ensuite couler le texte pour remplir l'espace avec des colonnes aussi larges.
• column-count : Définit le nombre de colonnes sur la page. Le navigateur crée alors des colonnes suffisamment larges pour tenir dans l'espace, mais uniquement le nombre que vous spécifiez.
• columns : Propriété abrégée dans laquelle vous pouvez définir la largeur ou le nombre (ou les deux, mais cela a rarement du sens).

Écarts et règles des colonnes CSS3

Les lacunes et les règles sont placées entre les colonnes dans le même scénario à plusieurs colonnes. Les lacunes écarteront les colonnes, mais les règles ne prennent pas de place. Si une règle de colonne est plus large que son espace, elle chevauchera les colonnes adjacentes. Il existe cinq nouvelles propriétés pour les règles de colonne et les espaces :

• column-gap : Définit la largeur des espaces entre les colonnes.
• column-rule-color : Définit la couleur de la règle.
• column-rule-style : Définit le style de la règle (solide, pointillé, double, etc.).
• column-rule-width : Définit la largeur de la règle.
• column-rule : Propriété abrégée définissant les trois propriétés de règle de colonne à la fois.

Sauts de colonne CSS3, colonnes étendues et remplissage de colonnes

Les sauts de colonne utilisent les mêmes options CSS2 que celles utilisées pour définir les sauts dans le contenu paginé, mais avec trois nouvelles propriétés: break-before, break-after et break-inside.

Comme pour les tableaux, vous pouvez définir des éléments pour s'étendre sur des colonnes avec la propriété column-span. Cela vous permet de créer des titres qui s'étalent sur plusieurs colonnes plus comme un journal.

Le remplissage des colonnes décide de la quantité de contenu dans chaque colonne. Les colonnes équilibrées essaient de mettre la même quantité de contenu dans chaque colonne tandis que auto transfère simplement le contenu jusqu'à ce que la colonne soit pleine, puis passe à la suivante.

Plus de fonctionnalités dans CSS3 qui ne sont pas incluses dans CSS2

Il existe de nombreuses fonctionnalités supplémentaires dans CSS3 qui n'existaient pas dans CSS2, notamment :

• CSS Template layout module et CSS3 Grid positioning module : Création de grilles avec CSS.
• CSS3 Text module : décrivez le texte et créez même des ombres portées avec CSS.
• CSS3 Color module : Maintenant avec opacité.
• Les modifications apportées au modèle de boîte : Y compris un  chapiteau propriété qui agit comme la balise IE.
• Module d'interface utilisateur CSS3 : vous offrant de nouveaux curseurs, des réponses aux actions, des champs obligatoires et même des éléments de redimensionnement.
• Media Queries :  les requêtes multimédias vous offrent plus de flexibilité lors de la définition de la manière dont une feuille de style doit être utilisée. Par exemple, vous pouvez définir une feuille de style uniquement pour les appareils portables dont la fenêtre est supérieure à 20 em.
• Module Ruby CSS3 : prend en charge les langues qui utilisent Ruby textuel pour annoter des documents.
• Module CSS3 Paged Media : pour encore plus de support pour les médias paginés (papier, transparents, etc.).
• Contenu généré : exécution d'en-têtes et de pieds de page, de notes de bas de page et d'autres contenus générés par programme, en particulier pour les médias paginés.
• Module de parole CSS3 : Modifications apportées au CSS auditif.

Intéressé par le CSS? Vous pouvez toujours consulter notre "Aide mémoire" pour maitriser CSS !