Michelle Barker com meu post de blog favorito: curto, prático e deixa você com uma pepita valiosa para o seu tempo. Aqui, ela entra em abreviações de propriedades lógicas em CSS, particularmente aqueles que definem comprimentos apenas em um único eixo, digamos apenas o eixo do bloco (vertical) ou apenas o eixo em linha (horizontal).
Eu digo “bloco” e “inline” porque, no que diz respeito às propriedades lógicas, o eixo x poderia se comportar como um eixo vertical dependendo da corrente writing-mode.
Então, onde sempre tivemos padding, margin e border abreviações que podem suportar uma sintaxe de vários valores, nenhuma delas nos permite declarar comprimentos em um eixo específico sem também definir um comprimento no outro eixo.
Por exemplo:
/* This gives us margin on the inline axis */
margin: 0 3rem;…mas tivemos que definir o outro eixo para chegar lá. Com propriedades lógicas, no entanto, temos atalhos adicionais para cada eixo, o que significa que podemos margin-inline abreviação para trabalhar especificamente no eixo inline:
margin-inline: 3rem;Michelle menciona minha abreviação de propriedade lógica favorita de passagem. Quantas vezes você posiciona algo nesse tipo de melodia:
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Podemos inserir essas quatro linhas com inset: 0. Ou podemos direcionar o bloco e o eixo embutido diretamente com inset-block e inset-inline, Respectivamente.
Enquanto estamos falando de taquigrafia, eu sempre gosto de colocar uma palavra de cautela sobre Redefinições de CSS "acidentais". Apenas um dos erros comuns de CSS que cometo.
