CSS3 vs CSS - Les feuilles de style en cascade ou CSS sont un élément clé de la conception Web. En tant que développeur ou concepteur Web, vous devez avoir une compréhension approfondie de CSS, en particulier la différence entre CSS3 et CSS.

Vous avez peut-être entendu ou rencontré le terme CSS3 si vous avez lu des informations sur le développement Web ou la conception Web. Si vous avez déjà pensé à la différence entre CSS3 et CSS, voici où tous vos doutes seront dissipés: ils sont tous les deux les mêmes.

C'est vrai: CSS3 vs CSS sont aussi différents les uns des autres que HTML et HTML5. CSS3 est simplement la dernière itération de CSS. Les gens qui parlent de coder CSS en ce moment se réfèrent en fait à CSS3.

HTML5 et CSS3 sont généralement devenus des mots à la mode, avec des significations au-delà de leurs technologies réelles. Ils symbolisent l'adhésion à certaines normes fondamentales du développement Web au lieu d'utiliser des logiciels propriétaires. Pour l'essentiel, le battage médiatique autour de ces mots à la mode s'est déjà éteint. La plupart des entreprises, même celles qui jurent en gardant tout en interne, conviendraient que le respect de ces normes fondamentales facilite la vie de tous.

Maintenant, cela fait un bon moment que CSS3 a été lancé et accepté par tous. Cela a apporté beaucoup de grandes choses à l'industrie et a marqué un grand pas en avant pour le développement Web en général. La version précédente, CSS2, a été lancée en 1998. Cela fait presque 20 ans. La seule révision qu'il a reçue après son lancement était en 2011, appelée CSS2.1. Même avec la révision, la plupart des experts avaient déjà commencé à dire que CSS3 était inévitable. CSS3 est venu avec un certain nombre de fonctionnalités et de capacités qui étaient devenues entièrement nécessaires à ce moment-là.

Ce que vous ne saviez peut-être pas sur CSS3, c'est qu'il a commencé son développement juste un an après la soumission de sa version précédente. Cela signifie que le W3C travaillait sur la version améliorée depuis 1999. Il a fallu plus de 12 ans pour publier la première version stable de CSS3.

Il existe d'énormes différences entre CSS3 et CSS (que nous verrons bientôt). Mais le fait est que les navigateurs Web étaient déjà prêts pour les ajouts à CSS3 au moment de sa sortie. En conséquence, ils se sont adaptés assez rapidement à la nouvelle version. Tous les principaux navigateurs Web prennent désormais en charge CSS3, même Internet Explorer!

Bien sûr, le W3C continue de développer CSS3 et HTML5, donc une version finale est peu probable. Pour être juste, une version finale n'est pas non plus nécessaire pour le moment, étant donné la vitesse à laquelle Internet progresse. Avec les exigences du Web et l'industrie elle-même en croissance et en évolution si rapide, le codage doit avancer aussi rapidement, sinon plus.

CSS3 vs CSS Infographics

Définition des différences CSS3 vs CSS

Maintenant que vous en savez un peu sur l'arrière-plan derrière CSS3, regardons de plus près ce qu'il a changé. La plus grande différence entre CSS3 et la version précédente qu'il a remplacée est peut-être la séparation des modules. En CSS2, tout était une seule grande spécification qui définissait différentes fonctionnalités. Cependant, CSS3 a changé cela en introduisant plusieurs documents appelés modules. Chaque module a ses propres nouvelles fonctionnalités qui n'affectent pas la compatibilité de la version CSS stable précédente.

Requêtes médias

Il existe de nombreux modules disponibles, mais seulement quatre sont publiés en tant que recommandations formelles par le W3C. Ces quatre grands modules sont les suivants:

  1. Couleur, publié 2011
  2. Selectors Level 3, publié en 2011
  3. Namespaces, publié 201
  4. Requêtes des médias, publié 2012

Parmi ceux-ci, le module le plus important est les requêtes multimédias. En fait, ce module pourrait sans doute être l'ajout le plus important que CSS3 a apporté à CSS en général. Les requêtes multimédias sont assez simples: elles permettent d'appliquer certaines conditions à différentes feuilles de style. Cela permet aux sites Web d'être fluides ou «réactifs» à différentes tailles d'écran. En d'autres termes, les sites Web peuvent ajuster leurs dimensions et leurs éléments pour s'adapter à différents appareils. Aujourd'hui, la conception de sites Web réactifs est probablement le plus grand mot à la mode. Étant donné que la majorité de l'utilisation d'Internet se fait désormais sur les appareils mobiles, la conception réactive est absolument essentielle et les requêtes médiatiques y contribuent. Le module permet également aux développeurs d'adapter les sites Web à diverses résolutions sans modifier ni supprimer le contenu.

Les requêtes multimédias sont également assez faciles à comprendre et à ajouter. Une fois que vous les utilisez plusieurs fois, vous pouvez à peu près comprendre le reste. Voici quelques exemples de lignes de code:

@media screen and (max-width: 600px) (

fond: #FFF;

)

Cela semble assez simple, non? Avec ces quelques lignes de code, vous pouvez activer le style pour les écrans d'une largeur maximale de 600 pixels. Cela signifie que tous les écrans d'une largeur maximale de 600 pixels afficheront un fond blanc. La largeur maximale n'est qu'une des nombreuses conditions que vous pourriez appliquer à une feuille de style sur CSS3. Un autre est la largeur maximale de l'appareil. Il s'agit de la résolution d'écran et non de la zone de visualisation. En outre, une valeur minimale peut être indiquée au lieu de maximale; utilisez simplement 'min' au lieu de 'max'. Vous pouvez également combiner les deux, comme ci-dessous:

@media screen and (min-width: 600px) and (max-width: 900px) (

fond: #FFF;

)

Ici, le style ne s'applique qu'aux écrans d'une largeur de vision de 600 à 900 pixels. CSS3 est livré avec des feuilles de style prédéfinies pour les appareils mobiles populaires, comme l'iPad et l'iPhone d'Apple. En voici quelques uns:

Il devrait maintenant être assez clair à quel point les requêtes des médias sont importantes. Ce module est très pratique pour les développeurs qui souhaitent créer une conception Web réactive avec le moins de codage possible.

Bordures arrondies

CSS3 est également livré avec des considérations de conception Web très importantes. Par exemple, les bordures peuvent être arrondies sans hacks avec CSS3 introduisant des bordures arrondies. C'était un énorme avantage pour les développeurs et les concepteurs Web qui avaient déjà du mal avec les frontières CSS. Sans surprise, certaines de ces fonctionnalités ne fonctionnent toujours pas dans les anciennes versions d'Internet Explorer. Le seul code supplémentaire que vous devez ajouter à la classe spécifique dans la feuille de style est, par exemple:

-moz-border-radius: 5 pixels;

-webkit-border-radius: 5px;

bordure: 2px solide # 897048;

Ainsi, CSS3 facilite la vie du développeur et concepteur Web. La version est également venue avec des dégradés, ce qui n'était étonnamment pas disponible dans les versions précédentes.

Cours recommandés

  • Formation en ligne sur les services Web en Java
  • Développement de jeux professionnels en formation C ++
  • Programme de piratage éthique
  • Pack de formation Vegas Pro 13

Images de bordure, ombres de texte

D'autres éléments ajoutés avec CSS3 mais manquants dans les versions précédentes comprenaient des images de bordure et des ombres de zone / texte. CSS3 a rendu les choses beaucoup plus simples, supprimant la nécessité d'ajouter des hacks pour l'un des éléments de style communs ci-dessus. Par exemple, voici la ligne de code solitaire à ajouter pour les ombres de texte:

text-shadow: 2px 2px 2px # ddccb5;

Colonnes

CSS3 a également simplifié la façon d'ajouter des colonnes au contenu. Il ne vous reste plus qu'à ajouter quatre lignes de code:

  1. nombre de colonnes
  2. largeur de colonne
  3. écart de colonne
  4. règle de colonne

Arrière-plans multiples

La dernière version CSS a également ajouté la possibilité d'initier directement plusieurs arrière-plans de CSS plutôt que d'utiliser des hacks de rond-point comme auparavant. Le code est incroyablement simple à mémoriser et à écrire, et est également très important pour créer des éléments de conception Web modernes. Voici un exemple:

.multiplebackgrounds (

hauteur: 100px;

largeur: 200 px;

rembourrage: 20px;

fond: url (top.gif) en haut à droite sans répétition,

url (bottom.gif) en haut à gauche répéter-y,

url (middle.gif) bottom repeat-z;

)

Préfixes du fournisseur

Les préfixes des fournisseurs étaient fréquemment utilisés au moment où CSS3 venait de sortir. Ils ont aidé les navigateurs à interpréter le code CSS. Ils sont utilisés à ce jour, au cas où votre navigateur Web ne serait pas en mesure de lire le code. Voici les préfixes des fournisseurs pour les principaux navigateurs:

  • -moz- : Firefox
  • -webkit- : navigateurs Webkit comme Apple Safari et Google Chrome
  • -o- : Opéra
  • -ms- : Internet Explorer

Le préfixe d'Opera est également devenu redondant depuis que la société a basculé son navigateur mobile et de bureau sur la plate-forme Webkit à partir de son moteur de rendu Presto. Bien que le préfixe du fournisseur continue d'être utilisé dans une certaine mesure, il a surtout disparu à ce stade.

Ajout de pseudo-classes

Avec l'ajout de CSS3, nous avons également obtenu de nombreuses pseudo-classes supplémentaires, y compris des structures pour cibler les éléments en fonction de leur position dans le document et de leur relation avec d'autres éléments différents. En voici quelques uns:

  • : root cible l'élément racine du document
  • : not (s) vise les éléments qui ne correspondent pas aux sélecteurs spécifiés dans (s)
  • : premier enfant cible le premier enfant d'un conteneur, quel que soit le type d'élément
  • : le premier de type cible le premier type d'élément spécifié dans un parent
  • : nth-child (n) utilise des valeurs numériques dans (n) pour cibler les éléments enfants par rapport à leur position dans le parent. Par exemple, vous pouvez l'utiliser pour ajouter des couleurs d'arrière-plan alternées aux commentaires de blog
  • : les éléments cibles vides qui n'ont ni texte ni enfants, comme les éléments vides tels que
  • : seul l'enfant cible des éléments dans une arborescence de documents qui est le seul élément enfant dans le parent

Nouveaux sélecteurs CSS3

CSS3 propose plusieurs façons d'écrire des règles CSS à travers les nouveaux sélecteurs, une nouvelle combinaison et des pseudo-éléments: voici les trois nouveaux sélecteurs d'attributs:

  • Pour les correspondances exactes, élément (foo = ”bar”)
  • Pour faire correspondre un élément avec un attribut appelé foo commençant par 'bar', élément (foo $ = ”bar”)
  • Pour faire correspondre un élément avec un attribut appelé foo se terminant par 'bar', élément (foo * = ”bar”)

CSS3 est livré avec plusieurs nouvelles pseudo-classes, dont certaines ont été discutées ci-dessus. En voici encore plus:

  • : nth-last-child (n) correspond aux éléments enfants exacts du dernier
  • : le nième type (n) correspond aux éléments frères ayant le même nom devant eux dans l'arborescence du document
  • : nth-last-of-type (n) correspond aux éléments frères ayant le même nom en bas
  • : le dernier type cible le dernier type d'élément spécifié dans un parent
  • : only-of-type cible l'élément dont il est le seul type
  • : cibler les éléments cibles ciblés par l'URI de référence
  • : enabled correspond à l'élément lorsqu'il est activé
  • : désactivé correspond à l'élément lorsqu'il est désactivé
  • : coché cible l'élément lorsqu'il est coché via une case à cocher ou un bouton radio

Un nouveau combinateur

CSS3 est également livré avec un tout nouveau combinateur: elementA ~ elementB

Ce nouveau combinateur correspond lorsque elementA est suivi quelque part par elementB, mais pas immédiatement après.

Nouvelles propriétés de style de boîte

CSS3 propose le même modèle de boîte que la version précédente, mais avec de nouvelles propriétés de style qui vous aident à styliser les bordures et les arrière-plans de vos boîtes. Les nouvelles propriétés d'arrière-plan dans CSS3 sont:

  • clip de fond

Cette propriété est utilisée pour définir comment découper une image d'arrière-plan. Les dimensions d'écrêtage par défaut sont la zone de bordure, mais vous pouvez la remplacer par la zone de contenu ou la zone de remplissage.

  • fond-origine

Cette propriété particulière est utilisée pour déterminer si l'arrière-plan doit être placé dans la zone de bordure, la zone de contenu ou la zone de remplissage.

  • taille d'arrière-plan

Cette propriété permet au développeur d'indiquer la taille de l'image d'arrière-plan et d'étirer des images plus petites pour ajuster la page.

CSS3 a également modifié certaines des propriétés de style d'arrière-plan existantes. Voici un aperçu des changements:

  • Répétition du fond

Cette propriété propose désormais deux nouvelles valeurs: round et space. Round redimensionne l'image pour la recouvrir plusieurs fois dans une boîte. L'espace espace uniformément l'image en mosaïque dans la boîte sans écrêtage.

  • fond-attachement

La propriété no inclut une valeur «locale» de sorte que l'arrière-plan défile avec le contenu de l'élément au cas où l'élément possède une barre de défilement.

Nouvelles propriétés de bordure

CSS3 permet aux bordures d'être stylisées comme doubles, pleines, en pointillés ou même comme une image. Les images de bordure sont un ajout intéressant: elles vous permettent de créer une image des quatre bordures, puis d'indiquer à CSS d'appliquer l'image aux bordures. Voici quelques-unes des nouvelles propriétés de bordure fournies avec CSS3:

  • border-radius, border-bottom-right-radius, border-top-right-radius, border-top-left-radius, border-bottom-left-radius vous permettent de créer des bordures arrondies
  • border-image-source vous permet de spécifier un fichier source d'image au lieu d'utiliser des styles de bordure prédéfinis
  • border-image-slice représente les décalages vers l'intérieur à partir des bords des images de bordure
  • border-image-width définit la valeur de largeur de votre image de bordure
  • border-image-outset spécifie la quantité au-delà de la zone de bordure à laquelle l'image s'étend
  • border-image-stretch définit le pavage ou la mise à l'échelle des parties centrale et latérale de l'image de la bordure

Conclusion - CSS3 vs CSS

Vous en apprendrez beaucoup plus sur CSS3 à mesure que vous coderez. Mais il y a une mise en garde: vous ne pouvez pas maîtriser CSS3 à moins de connaître CSS. Apprendre CSS3 implique de s'appuyer sur votre compréhension et votre expérience avec CSS. Si vous ne connaissez pas CSS, vous devez l'apprendre par le haut avec CSS3. La bonne chose est que si vous n'êtes pas familier avec CSS, il devrait être plus facile d'associer à la fois CSS3 et CSS pour les rendre plus faciles et plus rapides.

Articles recommandés

Voici quelques articles qui vous aideront à obtenir plus de détails sur CSS3 vs CSS, il vous suffit donc de passer par le lien.

  1. CSS vs HTML
  2. Excitant de connaître les éléments essentiels de Flexbox CSS pour les débutants
  3. HTML5 vs JavaScript Meilleure chose à apprendre
  4. CSS vs CSS3: Différences

Catégorie:

Développement de logiciels