inline-sizeé uma propriedade lógica que define a largura de um elemento quando o modo de escrita é horizontal ou a altura do elemento quando writing-modeé vertical.
.element ( inline-size: 700px; writing-mode: vertical-lr; )Como você deve ter adivinhado pelo exemplo acima, a writing-modepropriedade altera a orientação do texto e o fluxo do layout em 90 graus. Existem duas razões principais pelas quais você deseja fazer isso.
Primeiro, como opção de design, você pode querer exibir texto vertical em um elemento, digamos um cabeçalho:
O segundo - e provavelmente o mais significativo - motivo pelo qual você pode querer usar uma propriedade lógica como tamanho embutido é acomodar a internacionalização em um site. Muitos scripts do Leste Asiático, como chinês, japonês e coreano, podem ser escritos horizontal ou verticalmente. Usando propriedades lógicas, podemos fornecer a direção correta de dimensionamento dos elementos com base no modo de escrita do usuário.
Jen Simmons tem um artigo e uma apresentação que aprofundam os modos de escrita CSS.
Por que não podemos simplesmente usar a 'velha widthpropriedade confiável ?
Você pode! No entanto, você pode querer alcançar em inline-sizevez disso se estiver preocupado com a mudança do contexto do seu conteúdo com base no idioma do usuário. widthé uma dimensão física, então quando o modo de escrita muda, um elemento mantém seu tamanho de largura horizontal, quebrando um layout quando é configurado para ser vertical. Propriedades lógicas, como inline-size, podem responder a essas mudanças e aplicar largura na direção adequada.
Por exemplo, se um elemento de parágrafo tiver 400px de largura usando largura, quando o modo de escrita estiver definido como vertical-lr, o conteúdo girará, alterando o layout, mas esse parágrafo permanecerá com 400px de largura em vez de 400px de altura.
Veja isso? Bem, inline-sizeé inteligente! Ele muda de largura para altura, dependendo do writing-modevalor.
Sintaxe
inline-size: - Inicial:
auto - Aplica-se a: o mesmo que
heightewidth - Herdado: não
- Porcentagens: quanto à propriedade física correspondente
- Valor calculado: igual a
heightewidth - Tipo de animação: por tipo de valor calculado
Valores
/* Length values */ inline-size: 250px; inline-size: 5rem;
/* Percentage values */ inline-size: 75%;
/* Keyword values */ inline-size: auto; inline-size: fit-content(5rem); inline-size: max-content; inline-size: min-content;
/* Global values */ inline-size: inherit; inline-size: initial; inline-size: unset; auto: O tamanho embutido do elemento seguirá o tamanho de seu elemento pai.fit-content(): Esta função permite que um contêiner cresça até o tamanho desejado, então faça o texto quebrar, efetivamente prendendo o conteúdo ao valor de tamanho fornecido. Ele pode ser usado em contêineres Grid, bem como dimensionamento de caixa, e enquanto caniuse mostra forte suporte para a função com tamanho em linha, nossos testes foram menos conclusivos. Isso pode ser devido ao status da especificação de Working Draft do Módulo de dimensionamento de caixa de nível 3.max-content: A largura preferida intrínseca, o que significa que o elemento estica o texto o máximo possível e fará com que a caixa seja tão longa quanto o texto.min-content: A largura mínima intrínseca, ou seja, a caixa do elemento se reduz ao tamanho mínimo de seu conteúdo. A caixa terá o tamanho da maior string de texto.
Demo
Suporte de navegador
| IE | Beira | Raposa de fogo | cromada | Safári | Ópera |
|---|---|---|---|---|---|
| Não | 79+ | 41+ | 57 | 12,1+ | 44+ |
| Android Chrome | Android Firefox | Navegador Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 12,2+ | 59+ |
Observe que o suporte para usar as funções a seguir pode ser diferente do suporte da propriedade:
fit-content()max-content()min-content()
Mais Informações
- Especificação de propriedades lógicas e valores CSS nível 1 (rascunho do editor)
- Documentação MDN
- CSS Logical Properties` (CSS-Tricks)
- Noções básicas sobre propriedades lógicas e valores (Smashing Magazine)
- Propriedades lógicas CSS (Adrian Roselli)
- Dimensionamento mínimo e máximo de conteúdo na grade CSS (Jen Simmons, vídeo)
- Regras horizontais bidirecionais em CSS (Hussein Al Hammad)