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 traverse le W3C à différentes étapes du processus de recommandation. Ce processus a rendu beaucoup plus facile l'acceptation et la mise en œuvre de différents morceaux 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 sous la forme d'un document contenant toutes les informations relatives aux feuilles de style en cascade, vous commencez à voir les avantages de la séparation de la recommandation en éléments plus petits et individuels. Étant donné que chacun des modules est traité individuellement, nous avons une gamme de support de navigateur beaucoup plus large pour les modules CSS3.
Comme pour toute spécification nouvelle et évolutive, veillez à tester soigneusement vos pages CSS3 dans autant de navigateurs que de systèmes d'exploitation. Rappelez-vous que l'objectif n'est pas de créer des pages Web qui ont exactement la même apparence dans chaque navigateur, mais de garantir que tous les styles que vous utilisez, y compris les styles CSS3, aient une belle apparence dans les navigateurs qui les prennent en charge et qu'ils se replient harmonieusement pour les navigateurs plus anciens. ne pas.
Nouveaux sélecteurs CSS3
CSS3 offre de nombreuses nouvelles manières d'écrire des règles CSS avec de nouveaux sélecteurs CSS, ainsi qu'un nouveau combinateur et de nouveaux pseudo-éléments.
Trois nouveaux sélecteurs d'attributs:
- Le début d'attribut correspond exactement
élément foo ^ = "bar" L'élément a un attribut appelé foo qui commence par "bar", par exemple.
- La fin d'attribut correspond exactement
élément foo $ = "bar" L'élément a un attribut appelé foo qui se termine par "bar" par ex.
- L'attribut contient la correspondance
élément foo * = "bar" L'élément a un attribut appelé foo qui contient la chaîne "bar", par exemple.
16 nouvelles pseudo-classes:
- :racine
- L'élément racine du document. En HTML c'est toujours.
- : nième enfant (n)
- Utilisez-le pour faire correspondre des éléments enfants exacts ou utilisez des variables pour obtenir des correspondances en alternance.
- : nième-dernier-enfant (n)
- Faites correspondre les éléments enfants exacts à compter du dernier.
- : nième de type (n)
- Faites correspondre les éléments frères du même nom avant ceux-ci dans l'arborescence du document.
- : nième-dernier-de-type (n)
- Faites correspondre les éléments frères du même nom en partant du bas.
- :dernier enfant
- Correspond au dernier élément enfant du parent.
- : premier du type
- Correspond au premier élément frère de ce type.
- : dernier de type
- Correspond au dernier élément frère de ce type.
- :fils unique
- Correspond à l'élément qui est le seul enfant de son parent.
- : seulement de type
- Correspond à l'élément qui est le seul de ce type.
- :vide
- Correspond à l'élément qui n'a pas d'enfants (y compris les nœuds de texte).
- :cible
- Correspond à un élément qui est la cible de l'URI référent.
- :activée
- Faites correspondre l'élément lorsqu'il est activé.
- :désactivée
- Faites correspondre l'élément lorsqu'il est désactivé.
- :vérifié
- Faites correspondre l'élément lorsqu'il est coché (bouton d'option ou case à cocher).
- : pas (s)
- Correspond lorsque l'élément ne correspond pas au sélecteur simple s.
Un nouveau combinateur:
- elementA ~ elementB
- Correspond quand élémentB suit quelque part après élémentA, pas nécessairement immédiatement.
Nouvelles propriétés
CSS3 a également introduit un certain nombre de nouvelles propriétés CSS. Nombre de ces propriétés visaient à créer des styles visuels susceptibles de s'associer davantage à un programme graphique tel que 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 toute une série de nouvelles propriétés de style qui peuvent vous aider à attribuer un style aux arrière-plans et aux bordures de vos boîtes.
Fond multiple mages
En utilisant les styles background-image, background-position et background-repeat, vous pouvez spécifier que plusieurs images d'arrière-plan soient superposées dans la zone. La première image est le calque le plus proche de l'utilisateur, suivi des autres. S'il existe une couleur d'arrière-plan, celle-ci est peinte sous toutes les couches d'image.
Nouvelles propriétés de style d'arrière-plan
Il y a aussi quelques nouvelles propriétés d'arrière-plan dans CSS3.
- clip de fond
- Cette propriété définit le mode de découpage de l'image d'arrière-plan. 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.
- fond d'origine
- 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.
- taille de fond
- Cette propriété vous permet d'indiquer la taille de l'image d'arrière-plan. Il vous permet d’étirer des images plus petites pour les adapter à la page.
Modifications apportées aux 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:
- Répétition du fond
- Il existe deux nouvelles valeurs pour cette propriété: space et round. Espacer l'image en mosaïque de manière uniforme dans la boîte sans la couper. Arrondi redimensionne l’image d’arrière-plan afin qu’elle devienne mosaïque un nombre entier de fois dans la zone.
- pièce jointe
- Une nouvelle valeur "local" est ajoutée pour que l'arrière-plan défile avec le contenu de l'élément lorsque celui-ci comporte une barre de défilement.
- Contexte
- La propriété raccourcie d'arrière-plan ajoute les propriétés taille et origine.
Propriétés de la bordure CSS3
En CSS3, les bordures peuvent être les styles auxquels nous sommes habitués (solide, double, pointillé, etc.) ou être une image. De plus, CSS3 apporte la possibilité de créer des coins arrondis.Les images de bordure sont intéressantes car vous créez une image des quatre bordures, puis vous indiquez au CSS comment appliquer cette image à vos bordures.
Nouvelles propriétés de style de bordure
Il y a quelques nouvelles propriétés de bordure dans CSS3:
- rayon de la frontière
- bord-haut-droite-rayon, border-bottom-right-radius, frontière-bas-gauche-rayon, rayon en haut à gauche
- Ces propriétés vous permettent de créer des coins arrondis sur vos bordures.
- border-image-source
- Spécifie le fichier source de l'image à utiliser à la place des styles de bordure déjà définis.
- bordure-image-tranche
- Représente les décalages internes à 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 la quantité que la zone d'image de bordure s'étend au-delà de la zone de bordure.
- border-image-stretch
- Définit la manière dont les côtés et les parties centrales de l'image de bordure doivent être carrelés ou mis à l'échelle.
- image de bordure
- La propriété abrégée de toutes les propriétés de l'image de bordure.
Propriétés CSS3 supplémentaires associées aux bordures et aux arrière-plans
Lorsqu'une zone est cassée à la suite d'un saut de page, d'un saut de colonne pour un saut de ligne (pour les éléments incorporés), la propriété box-decoration-break définit comment les nouvelles boîtes sont entourées de bordure et de remplissage. Les fonds peuvent être divisés en plusieurs boîtes brisées à l'aide de cette propriété.
Il existe également une propriété box-shadow qui peut être utilisée pour ajouter des ombres aux éléments de la boîte.
Avec CSS3, vous pouvez désormais configurer facilement une page Web avec plusieurs colonnes sans tables ni structures de balises div complexes. Vous indiquez simplement au navigateur le nombre de colonnes que doit avoir l’élément body et leur largeur. De plus, vous pouvez ajouter des bordures (règles), des couleurs d'arrière-plan qui s'étendent sur la hauteur de la colonne et votre texte circulera automatiquement dans toutes les colonnes.
CSS3 Columns - Définir 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:
- largeur de colonne
- Définit la largeur que doivent avoir vos colonnes. Le navigateur transmettra ensuite le texte pour remplir l’espace avec des colonnes aussi larges.
- nombre de colonnes
- Définit le nombre de colonnes sur la page. Le navigateur créera alors des colonnes suffisamment larges pour tenir dans l'espace, mais uniquement le nombre que vous spécifiez.
- des colonnes
- 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).
Règles et espaces de colonne CSS3
Les espaces et les règles sont placés entre les colonnes dans le même scénario multicolonne. Les espaces séparent 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:
- écart de colonne
- Définit la largeur des espaces entre les colonnes.
- colonne-règle-couleur
- Définit la couleur de la règle.
- style de règle de colonne
- Définit le style de la règle (solide, en pointillé, double, etc.).
- colonne-règle-largeur
- Définit la largeur de la règle.
- règle de colonne
- Propriété abrégée définissant les trois propriétés de règle de colonne en même temps.
Sauts de colonne CSS3, colonnes couvrant et remplissant des colonnes
Les sauts de colonne utilisent les mêmes options CSS2 utilisées pour définir les sauts dans le contenu paginé, mais avec trois nouvelles propriétés: avant-rupture, break-after, et briser l'intérieur.
Comme avec les tables, vous pouvez définir des éléments pour étendre des colonnes avec la propriété column-span. Cela vous permet de créer des titres qui couvrent plusieurs colonnes, comme un journal.
Le remplissage des colonnes détermine la quantité de contenu dans chaque colonne. Les colonnes équilibrées tentent 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:
- Module de disposition de modèle CSS et module de positionnement de grille CSS3: Création de grilles avec CSS.
- Module de texte CSS3: Décrire le texte et même créer des ombres portées avec CSS.
- Module de couleur CSS3: Maintenant avec l'opacité.
- Modifications du modèle de boîte: Y compris une propriété de sélection qui agit comme la balise IE.
- Module d'interface utilisateur CSS3: Vous donnant de nouveaux curseurs, des réponses aux actions, des champs obligatoires et même des éléments de redimensionnement.
- Requêtes de médias: Les requêtes multimédia vous permettent plus de flexibilité lors de la définition de l'utilisation d'une feuille de style. Par exemple, vous pouvez définir une feuille de style uniquement pour les périphériques de poche dont la fenêtre de visualisation est supérieure à 20em.
- Module CSS3 Ruby: Fournit un support pour les langues qui utilisent Ruby textuel pour annoter des documents.
- Module de médias paginés CSS3: Pour encore plus de support pour les supports paginés (papier, transparents, etc.).
- Contenu généré: L en-têtes et pieds de page courants, notes de bas de page et autre contenu généré par programme, en particulier pour les médias paginés
- Module de parole CSS3: Modifications apportées au CSS sonore.
