hideout-lastation.com
CSS Shorthand vs. Longhand - Quand utiliser
Sténo et Longhand - un est concis et l'autre précis. L'un est venu à l'existence par manque de brièveté, tandis que l'autre reste ferme pour préserver la clarté. Quoi qu'il en soit, ils ont leurs fins, avantages et inconvénients, pour ainsi dire.
Cet article mettra en lumière à la fois les notations sténographiques CSS et les notations manuscrites, tout en concluant qu'il est préférable d'utiliser pour quelle situation .
Qu'est-ce que Shorthand Property?
La propriété raccourci est une propriété qui prend les valeurs pour d'autres ensembles de propriétés CSS. Par exemple, nous pouvons assigner une valeur pour border-width, border-style et border-color utilisant la propriété border seule.
Fondamentalement,
bordure: 1px bleu uni;
est le même que:
border-width: 1px; style de bordure: solide; border-color: bleu;
Avec cela, nous n'avons pas à déclarer séparément les valeurs des propriétés individuelles (ce qui est redondant, prend beaucoup de temps et d'espace). Il réinitialise également les propriétés laissées de côté 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 sténographie, l'ordre n'a pas d'importance si toutes les valeurs de propriété dans la sténographie sont d'un type différent comme dans la frontière . Pour les propriétés avec des types de valeurs similaires, comme la marge, l' ordre est important . En cas de doute, rappelez-vous du sens des aiguilles d'une montre
Maintenant, que faire si nous manquons une propriété ou deux dans la déclaration? Dans l'exemple ci-dessus, disons que nous avons ignoré le border-style .
bordure: 1px bleu;
Nous ne serons plus en mesure de voir les frontières, non pas parce que la propriété raccourcie n'a pas fonctionné mais parce que le border-style que nous avons omis a la valeur par défaut none . C'est ainsi que cette propriété sténographique a été rendue.
bordure: 1px none bleu;
Maintenant, laissons tomber le 1px pour border-width et gardons les deux autres:
bordure: bleu uni;
Nous serons en mesure de voir les bordures, seulement avec une largeur plus grande et c'est parce que la propriété border-width obtenu le medium valeur par défaut.
bordure: bleu uni moyen;
Ceci conclut pour nous que lorsqu'une valeur de propriété est omise dans une déclaration sténographique, cette propriété prend sa valeur par défaut (même si elle doit remplacer toute valeur précédente assignée pour la même chose).
S'il y a border-width: 1px; pour un élément quelque part avant la border: solid blue; pour le même, la largeur de la bordure va être medium (la valeur par défaut), pas 1px .
Une autre chose qui mérite d'être mentionnée est que nous ne pouvons pas utiliser des valeurs comme inherit, initial ou unset, qui sont disponibles pour toutes les propriétés CSS, en notation abrégée. Si nous utilisons ceux-ci, le navigateur ne sera pas capable de savoir exactement quelle propriété cette valeur est supposée représenter dans la sténographie - la déclaration entière sera supprimée .
all biens
Il existe une propriété raccourcie CSS qui peut définir la valeur de toutes les propriétés CSS . Les valeurs CSS inherit, initial et unset sont applicables à toutes les propriétés et sont donc les seules valeurs acceptées par la propriété all .
div {all: initial} Cela fera en sorte que l'élément div jettera TOUTES les valeurs de propriété CSS qu'il possédait et réinitialisera la valeur par défaut dans chacun d'entre eux.
⚠ Avertissement
N'abusons pas de all propriétés. Ce besoin ne peut survenir que dans de très rares circonstances, lorsque nous ne sommes pas en mesure de toucher un code CSS précédent d'un élément auquel nous souhaitons appliquer cette propriété.
Remarque: La color propriété CSS prend une valeur hexadécimale avec une notation abrégée si les deux nombres de la valeur hexadécimale dans chaque canal de couleur sont identiques. Par exemple, background: #445599; - background: #445599; est identique à l' background: #459; .
Qu'est-ce que la propriété de longhand?
Les propriétés individuelles qui peuvent être incluses dans une propriété raccourcie sont appelées propriétés longhand. Certains exemples sont; background-image, margin-left, animation-duration, etc.
Pourquoi devrions-nous l'utiliser?
Même si les alternatives sténographiques sont pratiques, elles ont un inconvénient. Rappelez-vous au début, nous avons vu comment raccourcir les propriétés laissées de côté avec leurs valeurs par défaut? Cela peut poser un problème si la réinitialisation n'est pas souhaitée.
Prenez la propriété raccourci de font par exemple. Utilisons-le dans l'élément h4 (qui a un style de navigateur par défaut: font-weight:bold )
police: 20px "courrier nouveau";
Dans le code de raccourci ci-dessus, il n'y a pas de valeur pour la propriété font-weight, donc la font-weight:bold (style par défaut du navigateur) sera surchargée par la valeur par défaut font-weight:normal faisant perdre à l'élément h4 son style gras, ce qui n'a peut-être pas été prévu.
Ainsi, pour l'exemple ci-dessus, deux propriétés simples, font-size et font-family sont parfaites.
En outre, l'utilisation de raccourcis pour affecter uniquement une ou deux valeurs de propriété n'est pas très utile . Pourquoi donner au navigateur un surcroît de travail pour interpréter chaque propriété (y compris les propriétés manquantes) dans la sténographie, alors qu'une seule est nécessaire pour travailler?
En dehors de la production, en phase de développement, certains développeurs (surtout les débutants) peuvent trouver que l'utilisation de la notation longue main est beaucoup plus facile à travailler que la sténographie pour une meilleure lisibilité et clarté .
Conclusion De nos jours avec la possibilité de codage rapide (à l'aide d'outils comme Emmet) et de minimisation, une haute fiabilité en sténographie n'est pas nécessaire, mais en même temps, il est très logique de taper margin: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.
Instapaper Premium est gratuit pour tout le monde
En août, Pinterest a acquis Instapaper, un service qui vous permet d'enregistrer des choses sur le Web pour les lire ultérieurement. Les bonnes nouvelles sont avec Instapaper étant "mieux équipé", Instapaper Premium est maintenant un service gratuit.À partir d'aujourd'hui, tous ceux qui s'inscrivent à Instapaper auront accès aux fonctionnalités Premium telles que :50 articles de Kindle Digests, un service qui résume automatiquement vos articles sauvegardés pour vous.Une recher
Comment configurer WordPress en utilisant OpenShift
OpenShift est une plate-forme en tant que service du leader Open Source, Redhat. Il fonctionne sur le code OpenShift open source fonctionnant sur les systèmes RHEL. OpenShift peut être utilisé pour héberger et exécuter une variété de logiciels, et il prend en charge diverses technologies et bases de données open source. Il a u
