Michelle Barker med mit foretrukne sorta blogindlæg: kort, praktisk og efterlader dig med en værdifuld guldklump til din tid. Her, hun kommer ind i logiske egenskaber stenografi i CSS, især dem, der sætter længder kun på en enkelt akse, f.eks. kun blokaksen (lodret) eller kun den inline (vandrette) akse.
Jeg siger "blok" og "inline", fordi hvad angår logiske egenskaber, så kunne x-aksen lige så godt opføre sig som en lodret akse afhængig af strømmen writing-mode.
Altså hvor vi altid har haft padding, marginog border stenografier, der kan understøtte en syntaks med flere værdier, giver ingen af dem os mulighed for at erklære længder på en specifik akse uden også at indstille en længde på den anden akse.
For eksempel:
/* This gives us margin on the inline axis */
margin: 0 3rem;…men vi var nødt til at indstille den anden akse for at nå dertil. Med logiske egenskaber har vi dog yderligere stenografier for hver akse, hvilket betyder, at vi kan følge med margin-inline stenografi til at arbejde specifikt på den inline-akse:
margin-inline: 3rem;Michelle nævner min yndlingslogiske egenskab stenografi i forbifarten. Hvor mange gange placerer du noget til denne slags melodi:
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Vi kan få de fire linjer ind med inset: 0. Eller vi kunne målrette blokken og inline-aksen direkte med inset-block , inset-inline, henholdsvis.
Mens vi taler stenografi, vil jeg altid gerne komme med et advarselsord om "utilsigtet" CSS-nulstilling. Bare en af de almindelige CSS-fejl, jeg laver.
