CSS Shorthand vs Longhand - Quand utiliser lequel?

Shorthand et Longhand - l'un est concis et l'autre précis. L'un est né par manque de brièveté, tandis que l'autre reste ferme pour préserver la clarté. De toute façon, ils ont leurs objectifs, leurs avantages et leurs inconvénients, pour ainsi dire.

Cet article mettra en lumière à la fois les notations sténographiques CSS et les notations longues, tout en concluant quelle est la meilleure utilisation pour quelle situation..

Qu'est-ce qu'une propriété raccourcie??

Shorthand property est une propriété qui prend les valeurs d'autres ensembles de propriétés CSS. Par exemple, nous pouvons attribuer une valeur à largeur de la bordure, style de bordure et couleur de la bordure en utilisant le frontière propriété seule.

Fondamentalement,

 bordure: 1px bleu uni; 

est le même que:

 largeur de la bordure: 1px; style de bordure: solide; couleur de bordure: bleu;

Avec cela, nous n’avons pas à déclarer séparément les valeurs de propriété individuelles (ce qui est redondant, prend du temps et de l’espace). Il réinitialise également les propriétés laissées dans la déclaration, ce qui peut être exploité.

Comment ça marche?

Comme mentionné précédemment, nous écrivons un ensemble d'autres valeurs de propriété en abrégé, l'ordre n'a pas d'importance si toutes les valeurs de propriété en abrégé sont d'un genre différent comme dans frontière. Pour les propriétés avec types similaires de valeurs comme marge, l'ordre importe. En cas de doute, rappelez-vous dans le sens des aiguilles d'une montre!

Maintenant, que se passe-t-il si nous manquons une propriété ou deux dans la déclaration? Dans l'exemple ci-dessus, supposons que nous avons ignoré style de bordure.

 bordure: bleu 1px; 

Nous ne pourrons plus voir les frontières, non pas parce que la propriété abrégée ne fonctionnait pas, mais parce que style de bordure que nous avons laissé de côté, a la valeur par défaut aucun. Voici comment cette propriété abrégée a été rendue.

 bordure: 1px pas de bleu; 

Maintenant laissez tomber le 1px pour largeur de la bordure et garder les deux autres:

 bordure: bleu uni;

Nous serons en mesure de voir les frontières, seulement avec une largeur plus épaisse et c'est parce que le largeur de la bordure la propriété a la valeur par défaut moyen.

 bordure: bleu moyen; 

Ceci conclut pour nous que lorsqu'une valeur de propriété est omise dans une déclaration abrégée, cette propriété prend sa valeur par défaut (même s'il doit remplacer toute valeur précédente assignée pour la même chose).

S'il y a largeur de la bordure: 1px; pour un élément quelque part avant bordure: bleu uni; pour le même, la largeur de la bordure va être moyen (la valeur par défaut), pas 1px.

Une autre chose à noter est que nous ne pouvons pas utiliser des valeurs comme hériter, initiale ou non fixé, qui sont disponibles pour toutes les propriétés CSS, en notation abrégée. Si nous les utilisons, le navigateur ne pourra pas savoir exactement quelle propriété cette valeur est supposée représenter dans le raccourci. - l'intégralité de la déclaration sera supprimée.

le tout propriété

Il existe une propriété abrégée CSS qui peut définir la valeur pour toutes les propriétés CSS. Valeurs CSS hériter, initiale et non fixé sont applicables à toutes les propriétés et par conséquent ce sont les seules valeurs acceptées par le tout propriété.

 div tout: initial

Cela fera la div élément fossé TOUTES les valeurs de propriétés CSS dont il disposait, et réinitialiser la valeur par défaut dans chacune d’elles.

⚠ Avertissement

N'abusons pas du tout propriété. Son besoin peut ne survenir que dans de très rares circonstances, lorsque nous ne sommes pas en mesure de toucher le code CSS précédent d'un élément auquel nous souhaitons appliquer cette propriété..

Remarque: Propriété CSS Couleur prend une valeur hexadécimale avec une notation abrégée si les deux nombres de valeur hexadécimale dans chaque canal de couleur sont identiques. Par exemple, arrière-plan: # 445599; est identique à arrière-plan: # 459;.

Quelle est la propriété longhand?

le propriétés individuelles Les propriétés pouvant être incluses dans une propriété abrégée sont appelées propriétés étendues. Quelques exemples sont; image de fond, marge gauche, durée d'animation, etc.

Pourquoi devrions-nous l'utiliser?

Même si les alternatives abrégées sont pratiques, elles présentent un désavantage. Rappelez-vous qu'au début, nous avons vu comment le raccourci remplace toutes les propriétés laissées avec leurs valeurs par défaut. Cela peut poser problème si la réinitialisation n'est pas souhaitée.

Prendre le Police de caractère propriété abrégée par exemple. Utilisons-le dans le h4 element (qui a un style de navigateur par défaut poids de police: gras)

 police: 20px "courrier nouveau"; 

Dans le code abrégé ci-dessus, aucune valeur n’existe pour le poids de la police la propriété, d'où le poids de police: gras(style par défaut du navigateur) sera remplacé par la valeur par défaut poids de la police: normal causant la h4 élément à perdre son style audacieux, qui n'a peut-être pas été destiné.

Donc, pour l'exemple ci-dessus, deux propriétés simples main longue, taille de police et famille de polices sont parfaits.

De plus, en utilisant un raccourci pour assigner seulement une ou deux valeurs de propriété n'est pas très utile. Pourquoi donner au navigateur un travail supplémentaire pour interpréter chaque propriété (y compris celles laissées de côté) dans le raccourci, alors qu’il ne faut qu’une seule pour fonctionner?

La production mise à part, au cours de la phase de développement, certains développeurs (en particulier les débutants) peuvent trouver qu'il est beaucoup plus facile d'utiliser la notation à longue frappe que la sténographie pour meilleure lisibilité et clarté.

Conclusion

De nos jours, avec la possibilité de codage rapide (à l’aide d’outils comme Emmet) et de minification, il n’est pas nécessaire d’obtenir une grande fiabilité de la sténographie, mais il est également très logique de taper marge: 0;. Le contexte dans lequel nous préférons nos notations CSS variera et tout ce que nous avons à faire est de déterminer quelle notation fonctionnera le mieux pour nous et quand.