Michelle Barker met mijn favoriete blogpost: kort, praktisch, en je hebt een waardevol goudklompje voor je tijd. Hier, ze gaat in op logische eigenschapsteno's in CSS, vooral degenen die lengtes alleen op een enkele as instellen, zeg alleen de blok (verticale) as of alleen de inline (horizontale) as.
Ik zeg "blok" en "inline" omdat, wat logische eigenschappen betreft, de x-as zich net zo goed als een verticale as zou kunnen gedragen, afhankelijk van de huidige writing-mode.
Dus, waar we altijd hebben gehad padding, margin en border steno's die een syntaxis met meerdere waarden kunnen ondersteunen, geen van hen staat ons toe om lengtes op een specifieke as te declareren zonder ook een lengte op de andere as in te stellen.
Bijvoorbeeld:
/* This gives us margin on the inline axis */
margin: 0 3rem;…maar we moesten de andere as instellen om daar te komen. Met logische eigenschappen hebben we echter extra afkortingen voor elke as, wat betekent dat we de margin-inline steno om specifiek op de inline-as te werken:
margin-inline: 3rem;Michelle noemt terloops mijn favoriete logische eigenschapsteno. Hoe vaak positioneer je iets op dit soort melodie:
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}We kunnen die vier regels erin krijgen met inset: 0. Of we kunnen het blok en de inline-as rechtstreeks richten met inset-block en inset-inline, Respectievelijk.
Nu we het over steno hebben, wil ik altijd een waarschuwing geven over: ”toevallige” CSS-resets. Slechts een van de veelvoorkomende CSS-fouten die ik maak.
