Michelle Barker med mitt favoritblogginlägg: kort, praktiskt och ger dig en värdefull guldklimp för din tid. Här, hon hamnar i logiska egenskaper i CSS, särskilt de som anger längder bara på en enda axel, säg bara blockaxeln (vertikal) eller bara den inline (horisontella) axeln.
Jag säger "block" och "inline" eftersom, när det gäller logiska egenskaper, kan x-axeln lika gärna bete sig som en vertikal axel beroende på strömmen. writing-mode.
Alltså där vi alltid har haft padding, marginoch border stenografier som kan stödja en syntax med flera värden, ingen av dem tillåter oss att deklarera längder på en specifik axel utan att också ställa in en längd på den andra axeln.
Till exempel:
/* This gives us margin on the inline axis */
margin: 0 3rem;…men vi var tvungna att ställa in den andra axeln för att komma dit. Med logiska egenskaper har vi dock ytterligare förkortningar för varje axel, vilket betyder att vi kan komma igång margin-inline stenografi för att arbeta specifikt på den inline-axeln:
margin-inline: 3rem;Michelle nämner min favoritlogiska egenskap i förbigående. Hur många gånger placerar du något till den här typen av låt:
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Vi kan få in de fyra raderna inset: 0. Eller vi kan rikta in blocket och inline-axeln direkt med inset-block och inset-inline, Respektive.
Medan vi pratar stenografi, vill jag alltid säga ett varningens ord "oavsiktliga" CSS-återställningar. Bara en av de vanliga CSS-misstag jag gör.
