Récemment, j'ai décidé de mettre à jour toutes les propriétés de sténographie CSS. La meilleure façon d'apprendre quelque chose est de l'enseigner, voici donc ma tentative.
Aujourd'hui, nous allons apprendre à utiliser le raccourci CSS pour les arrière-plans, les marges et les marges intérieures, les bordures, les polices, les styles de liste et les transitions.
Contexte
Les images de fond CSS sont l’un des endroits les plus courants où je vois l’application abrégée de CSS. Il se peut qu’il y ait un peu plus de fonctionnalités ici que de profiter des utilisateurs. Commençons par un exemple typique de la manière normale de déclarer un arrière-plan.
Fond: Le long chemin
Sténographie
À partir de là, la plupart d’entre nous savons comment utiliser ces trois propriétés et les insérer toutes dans la propriété background. Découvrez combien de place cela économise.
Attachement et position
Deux autres propriétés que vous ne voyez pas en abrégé sont souvent la position et l'attachement. Pour rappel, regardons ce que sont ces deux choses.
Pièce jointe indique si l'image d'arrière-plan défile ou non avec la page. La valeur par défaut est faire défiler, ce qui signifie que vous perdrez de vue l’image lorsque vous faites défiler la page comme vous le feriez avec le reste du contenu. Si vous changez ceci en fixé, l’arrière-plan restera là où il se trouve lorsque le reste du contenu défilera par-dessus.
Position de fond fait référence à l'endroit où l'image est placée dans l'élément. Vous pouvez utiliser quelque chose de générique, tel que gauche en haut, bas à droite ou centre, ou quelque chose de plus spécifique, tel qu'un pourcentage ou une valeur en pixels.
Voici la version longue avec ces deux jeté dedans.
Prenez note de la commande ici car nous utiliserons la même commande dans la version abrégée:
- Couleur de fond
- image de fond
- Répétition du fond
- pièce jointe
- position de fond
Shorthand d'arrière-plan avec les cinq valeurs
Ici, nous jetons tout cela en respectant l'ordre que nous venons de décrire. Sentez-vous libre de laisser n'importe lequel d'entre eux pour revenir aux valeurs par défaut.
Marge et Rembourrage
Un autre endroit où vous avez sans doute vu un raccourci est celui des marges et du rembourrage. Ici, cela fonctionne exactement de la même manière pour les deux; je vais donc donner des exemples de marge et vous pouvez l’appliquer vous-même au rembourrage.
Marge: le long chemin
Ici, nous avons la manière normale de définir vos marges. J'ai défini chaque valeur sur une valeur arbitraire. Les éléments importants à prendre en compte sont l'ordre et le fait qu'ils sont tous différents. Les deux affecteront la sténographie.
Marge Sténographie
Déclarer les marges en sténographie est une technique assez polyvalente qui permet de gagner beaucoup d’espace, peu importe la façon dont vous le faites. Fondamentalement, vous venez de jeter toutes vos valeurs directement dans une ligne dans la propriété margin.
L'ordre ici est très important. Pour vous rappeler comment cela fonctionne, pensez à une horloge. Il commence au sommet et tourne dans le sens des aiguilles d'une montre, frappant chaque bord. D'abord, il y a marge en haut, puis marge à droite, marge en bas et marge à gauche.
Déclarer que toutes les propriétés de la marge sont identiques est encore plus facile. Si vous ne saisissez qu'une seule valeur, celle-ci s'appliquera à chaque propriété. Le code ci-dessous entraînera une marge de 10 pixels de chaque côté.
Supposons maintenant que vous souhaitiez travailler avec seulement deux valeurs différentes, ce qui signifie que les marges supérieure et inférieure auront une valeur et que les marges gauche et droite en auront une autre. Par défaut, lorsque vous déclarez la marge supérieure abrégée, le bas correspond et lorsque vous déclarez la marge droite abrégée, la gauche correspond.
Cela est vrai lorsque vous déclarez également trois valeurs. Ainsi, le code suivant définira les marges supérieure, droite et inférieure manuellement tandis que la gauche est automatiquement saisie à partir de la droite.
Frontière: le long chemin
La bordure comporte trois propriétés principales: largeur, style et couleur. Ceux-ci sont écrits individuellement comme suit:
Vous pouvez modifier un peu l'ordre de ces propriétés lorsque vous passez à la version abrégée, mais il est préférable de le conserver dans cet ordre standard pour assurer une compatibilité totale.
Shorthand de frontière
Voici la version abrégée de ces trois propriétés de bordure.
Une autre chose que vous pouvez faire avec les frontières est de déclarer chaque côté de la frontière différemment. Ici, nous pouvons voir le formatage abrégé des bordures toujours au travail, juste dans chacun individuellement.
Alternativement, vous pouvez cibler l'une des trois propriétés de la bordure et les appliquer dans le sens des aiguilles d'une montre, comme le faisait le mercredi avec le raccourci de marge. Remarquez comment la deuxième déclaration de largeur remplace la première.
Ce qui suit nous donnera une bordure rouge unie qui est 2px en haut, 4px à droite, 8 px en bas et 16px à gauche.
De même, cela nous donnera une bordure solide de 5 pixels qui est bleue en haut et en bas et rouge à gauche et à droite.
Sténographie
Je ne veux pas passer trop de temps sur la propriété de contour simplement parce que le support n'est pas excellent et que vous ne l'utilisez probablement presque jamais. L'avantage est que, contrairement à border, les contours n'affecteront pas votre mise en page. Si vous utilisez des contours, la syntaxe est assez proche de celle des bordures.
Ce qui suit représente les valeurs pour contour-largeur, style de contour et contour-couleur dans cet ordre.
Police: le long chemin
Il existe de nombreuses propriétés de police avec lesquelles vous pouvez jouer pour modifier l’apparence de votre typographie. Par conséquent, votre feuille de style peut rapidement se remplir de blocs de styles comme celui ci-dessous.
Police abrégée
Le raccourci de police est un très lourd frappeur dans la mesure où il gagne de la place. Nous pouvons prendre toutes les informations ci-dessus et les regrouper dans une ligne brève et étonnamment facile à lire.
La plupart du temps, ce que vous aurez est probablement beaucoup plus court simplement parce que vous n’avez pas besoin de toutes ces options de style. Vous pouvez abandonner le style de police, la variante et le poids et déclarer simplement une taille, une hauteur de trait et une famille de polices rapides.
Listes: Le long chemin
Liste sténographie est vraiment intéressant parce que je vois rarement quelqu'un de désordre avec ces propriétés de toute façon. Si vous êtes un gestionnaire de liste, vous pouvez utiliser les trois propriétés de style de liste indiquées ci-dessous.
Liste sténographie
Celui-ci est assez prévisible, il suffit de jeter ces trois propriétés dans? List-style? et vous êtes prêt à partir.
Les transitions CSS3: le long chemin
Les transitions CSS3 sont évidemment encore assez nouvelles et le support est donc différent selon les navigateurs. Ici nous allons utiliser transition mais vous auriez probablement le casser en -webkit-transition, -moz-transition, et -o-transition ainsi que.
Voici les propriétés de base répertoriées une par une:
Transition CSS Sténographie
Ceci est une propriété où vous voyez presque toujours le raccourci utilisé à la place de la version longue. Si vous avez déjà effectué des transitions CSS, vous êtes probablement plus familiarisé avec la syntaxe ci-dessous.
Et bien sûr, comme nous l'avons mentionné ci-dessus, étant donné que les navigateurs ne sont toujours pas uniformes, vous devez inclure ces vilains préfixes de vendeurs. Voici un exemple typique du code que vous utiliseriez pour une transition avec une compatibilité maximale (IE est toujours laissé de côté).
Conclusion
Le raccourci CSS est un outil formidable pour gagner du temps et de l’espace. Si vous connaissez la syntaxe, vous pouvez affirmer que le raccourci est en réalité plus lisible que la version longue. Cependant, pour les débutants, il est beaucoup plus facile de lire les propriétés étiquetées, alors gardez simplement à l’esprit votre objectif et votre public cible pour un projet donné. Si vous écrivez un tutoriel, vous voudrez peut-être énumérer des valeurs individuelles ou au moins expliquer votre sténographie. En production, la sténographie fonctionne parfaitement.
Laissez un commentaire ci-dessous et indiquez-nous les propriétés pour lesquelles vous utilisez généralement un raccourci et si vous avez appris quelque chose à partir des exemples ci-dessus.