Michelle Barker avec mon article de blog préféré : court, pratique et vous laisse une précieuse pépite pour votre temps. Ici, elle entre dans les raccourcis de propriétés logiques en CSS, en particulier ceux qui définissent des longueurs uniquement sur un seul axe, disons uniquement l'axe du bloc (vertical) ou uniquement l'axe en ligne (horizontal).
Je dis "bloc" et "en ligne" car, en ce qui concerne les propriétés logiques, l'axe des abscisses pourrait tout aussi bien se comporter comme un axe vertical en fonction du courant writing-mode.
Alors, où nous avons toujours eu padding, marginet border raccourcis pouvant prendre en charge une syntaxe multi-valeurs, aucun d'entre eux ne nous permet de déclarer des longueurs sur un axe spécifique sans également définir une longueur sur l'autre axe.
Par exemple :
/* This gives us margin on the inline axis */
margin: 0 3rem;… mais nous avons dû régler l'autre axe pour y arriver. Avec les propriétés logiques, cependant, nous avons des raccourcis supplémentaires pour chaque axe, ce qui signifie que nous pouvons repérer le margin-inline raccourci pour travailler spécifiquement sur l'axe en ligne:
margin-inline: 3rem;Michelle mentionne en passant ma sténographie de propriété logique préférée. Combien de fois placez-vous quelque chose sur ce genre de mélodie :
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Nous pouvons intégrer ces quatre lignes avec inset: 0. Ou nous pourrions cibler le bloc et l'axe en ligne directement avec inset-block ainsi que inset-inline, Respectivement.
Pendant que nous parlons de raccourcis, j'aime toujours mettre en garde contre réinitialisations CSS "accidentelles". Juste un des erreurs CSS courantes que je fais.
