La différence entre CSS2 et CSS3

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 rendu beaucoup plus facile l'acceptation et la mise en œuvre 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 un seul document avec tous les Feuilles de style en cascade informations qu'il contient, vous commencez à voir les avantages de diviser la recommandation en morceaux individuels plus petits. Parce que chacun des modules est travaillé individuellement, les développeurs bénéficient d'une gamme beaucoup plus large de support de navigateur pour les modules CSS3.

Nouveaux sélecteurs CSS3

CSS3 propose 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 y a trois nouveaux sélecteurs d'attributs:

• L'attribut commençant correspond exactement :

  élément[foo^="bar"]

  L'élément a un attribut appelé foo qui commence par "bar", par ex.
• La fin de l'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".

16 nouvelles pseudo-classes ont été introduites:

• :racine
  • L'élément racine du document.
• :nième-enfant (n)
  • Utilisez ceci pour faire correspondre les éléments enfants exacts ou utilisez des variables pour obtenir des correspondances alternées.
• :nt-dernier-enfant (n)
  • Faites correspondre les éléments enfants exacts à partir du dernier.
• :nième-de-type (n)
  • Faites correspondre les éléments frères portant le même nom avant celui-ci dans l'arborescence du document.
• :nt-dernier-du-type (n)
  • Faites correspondre les éléments frères avec le même nom en comptant à partir du bas.
• :dernier enfant
  • Faites correspondre le dernier élément enfant du parent.
• :premier du type
  • Faites correspondre le premier élément frère de ce type.
• :dernier du type
  • Faites correspondre le 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
  • Faites correspondre l'élément qui est le seul de son type.
• :vider
  • Faites correspondre l'élément qui n'a pas d'enfant (y compris les nœuds de texte).
• :cible
  • Faites correspondre un élément qui est la cible de l'URI de référence.
• :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é
  • Faire correspondre l'élément lorsqu'il est coché (bouton radio ou case à cocher).
• :non(s)
  • Correspondance lorsque l'élément ne correspond pas au simple sélecteurs.

Il y a un nouveau combinateur:

• élémentA ~ élémentB
  • Correspondance 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.

Dans 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 background-image, background-position et background-repeat, vous pouvez spécifier plusieurs images d'arrière-plan à superposer les unes sur les autres dans la boîte. 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 de l'image.

Nouvelles propriétés de style d'arrière-plan

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

• fond-clip
• Cette propriété définit comment 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.
• arrière-plan-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 d'arrière-plan
• Cette propriété indique la taille de l'image de fond. Il vous permet de é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 y a deux nouvelles valeurs pour cette propriété — espace et rond. L'espace espace l'image en mosaïque de manière uniforme dans la boîte sans être rognée. Round redimensionne l'image d'arrière-plan pour qu'elle soit en mosaïque un nombre entier de fois dans la boîte.
• arrière-plan-attachement
  • Une nouvelle valeur "local" est ajoutée pour que l'arrière-plan défile avec le contenu de l'élément lorsque cet élément a une barre de défilement.
• Contexte
  • La propriété abrégée 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, pointillé, etc.) ou elles peuvent être une image. De plus, CSS3 prend en charge les coins arrondis. Les images de bordure sont intéressantes car vous créez une image des quatre bordures, puis dites 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:

• bordure-rayon
• bordure-haut-droite-rayon, bordure-bas-droit-rayon, bordure-bas-gauche-rayon, bordure-haut-gauche-rayon
• 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 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-départ
• 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 comment les côtés et les parties centrales de l'image de bordure doivent être mis en mosaïque ou mis à l'échelle.
• image-frontière
• La propriété abrégée pour toutes les propriétés border-image.

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

Lorsqu'une case est rompue à un saut de page, un saut de colonne ou un saut de ligne (pour les éléments en ligne), le boite-decoration-pause La propriété définit comment les nouvelles boîtes sont enveloppées avec une bordure et un remplissage. Les arrière-plans se divisent entre plusieurs boîtes cassées utilisant cette propriété.

Un nouveau boîte ombre La propriété ajoute des ombres aux éléments de boîte.

Avec CSS3, vous pouvez maintenant configurer facilement une page Web avec plusieurs colonnes sans tableaux ou compliqué div structures de balises. Vous indiquez simplement au navigateur combien de colonnes l'élément body doit avoir et quelle doit être 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éfinir le nombre et la largeur des colonnes

Il y a trois nouveaux Propriétés qui vous permettent de définir le nombre et la largeur de vos colonnes:

• largeur de colonne
  • Définit la largeur de vos colonnes. Le navigateur fera ensuite circuler 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.
• Colonnes
  • Propriété raccourcie où 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 écarts et les règles sont placés entre les colonnes dans le même scénario à plusieurs colonnes. Les espaces é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:

• espace-colonne
  • Définit la largeur des espaces entre les colonnes.
• couleur-règle-colonne
  • Définit la couleur de la règle.
• colonne-règle-style
  • Définit le style de la règle (solide, pointillé, double, etc.).
• colonne-règle-largeur
  • Définit la largeur de la règle.
• règle-colonne
  • 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 colonnes de remplissage

Colonne breaks utilise les mêmes options CSS2 que celles utilisées pour définir les pauses dans le contenu paginé, mais avec trois nouvelles propriétés: pause avant, pause après, et effraction.

Comme avec 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'étendent sur plusieurs colonnes, comme un journal.

Le remplissage des colonnes détermine 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 l'auto ne fait que couler 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 mise en page de modèle CSS et module de positionnement de grille CSS3: Création de grilles avec CSS.
• Module texte CSS3: décrivez le texte et créez même des ombres portées avec CSS.
• Module Couleur CSS3: Maintenant avec opacité.
• Modifications du modèle de boîte: Y compris un chapiteau propriété 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 médias: Requêtes médias vous permettent plus de flexibilité lors de la définition de la façon 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 d'affichage est supérieure à 20 em.
• Module Ruby CSS3: Fournit la prise en charge des langues qui utilisent le ruby ​​textuel pour annoter les documents.
• Module média paginé CSS3: Pour encore plus de support pour les supports paginés (papier, transparents, etc.).
• Contenu généré: en-têtes et pieds de page, notes de bas de page et autres contenus générés par programme, en particulier pour les médias paginés.
• Module vocal CSS3: Modifications apportées au CSS audio.