Michelle Barker med favorittblogginnlegget mitt: kort, praktisk, og gir deg en verdifull gullkorn for tiden din. Her, hun kommer inn i logiske eiendomsstenografier i CSS, spesielt de som setter lengder bare på en enkelt akse, si bare blokkaksen (vertikal) eller bare den inline (horisontale) aksen.
Jeg sier "blokk" og "inline" fordi, når det gjelder logiske egenskaper, kan x-aksen like godt oppføre seg som en vertikal akse avhengig av strømmen writing-mode.
Altså der vi alltid har hatt det padding, marginog border stenografier som kan støtte en syntaks med flere verdier, ingen av dem lar oss deklarere lengder på en spesifikk akse uten også å sette en lengde på den andre aksen.
For eksempel:
/* This gives us margin on the inline axis */
margin: 0 3rem;…men vi måtte sette den andre aksen for å komme dit. Med logiske egenskaper har vi imidlertid flere stenografier for hver akse, noe som betyr at vi kan følge opp margin-inline stenografi for å jobbe spesifikt på den innebygde aksen:
margin-inline: 3rem;Michelle nevner min favorittlogiske egenskap stenografi i forbifarten. Hvor mange ganger plasserer du noe til denne typen melodi:
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Vi kan få de fire linjene inn med inset: 0. Eller vi kan målrette blokken og inline-aksen direkte med inset-block og inset-inlineHhv.
Mens vi snakker stenografi, liker jeg alltid å sette et forsiktig ord om "tilfeldig" CSS-tilbakestilling. Bare en av de vanlige CSS-feil jeg gjør.
