Examinando o “squishiness” no Intrinsic Web Design

Chen Hui Jing Blocked Desbloquear Seguir Seguindo 8 de janeiro

Um dos destaques no mundo do web design para 2018 foi quando Jen Simmons criou o termo Intrinsic Web Design e o compartilhou com o mundo. O Intrinsic Web Design não é um framework. Não é um conjunto de regras para seguir também. Pelo contrário, é uma coleção de conceitos que destacam o que é agora possível com o CSS moderno. Como escolhemos utilizar esses conceitos para melhorar a direção de arte na Web e criar layouts melhores, isso depende de nós.

Jen cobriu os seis principais conceitos a seguir quando falou sobre o Intrinsic Web Design:

  • combinando fluidos e fixos
  • estágios de squishiness
  • layouts verdadeiramente bidimensionais
  • contextos aninhados
  • expansão e contratação de conteúdo
  • consultas de mídia, conforme necessário

Você notará que nenhum desses conceitos aponta uma propriedade ou módulo CSS específico. Isso ocorre porque o CSS funciona melhor quando várias propriedades complementares são usadas juntas. Neste post, quero falar sobre o conceito de estágios de squishiness e como isso vai melhorar muito a direção de arte do conteúdo editorial na web.

Dimensionando itens com CSS

Vamos começar com algumas noções básicas. Os navegadores executam muitos cálculos para garantir que todos os elementos sejam renderizados corretamente em uma página da web. Cada elemento deve ter todos os valores de propriedades CSS possíveis resolvidos e calculados antes de poderem ser dispostos na página.

De acordo com o modelo de formatação visual, cada elemento na árvore de documentos gera zero ou mais caixas. E existem vários fatores que influenciam as dimensões dessas caixas.

A especificação CSS que cobre isso em detalhes é o Módulo de dimensionamento intrínseco e extrínseco de CSS nível 3 . O dimensionamento extrínseco é baseado no contexto do elemento, sem levar em conta seu conteúdo, enquanto o dimensionamento intrínseco é baseado no conteúdo do elemento, sem levar em conta seu contexto.

A maioria de nós estaria familiarizada com o dimensionamento extrínseco porque normalmente é o que usamos para dimensionar itens em nossas páginas da web. Quase todos os desenvolvedores web que eu conheci começaram fazendo coisas como configurar width e height com unidades CSS fixas como px , ou unidades CSS relativas, como porcentagens.

Então nós aprender sobre rem e em unidades, e gravitar em torno desses. Alguns de nós também começaram a usar unidades de viewport, que eram outro tipo de unidade relativa. O dimensionamento dessa maneira ignora completamente o conteúdo do elemento, conforme ilustrado nos seguintes Codepens :

https://codepen.io/huijing/pen/wRwYee/

Não é que o tamanho intrínseco é uma coisa nova, eu acho que é mais que o uso de dimensionamento intrínseco significasse simplesmente deixar as coisas em paz. O navegador está fazendo o dimensionamento para nós com base na quantidade de conteúdo dentro do elemento.

Existe um longo conjunto de regras para determinar a largura e a altura de um elemento, dependendo do tipo (bloco ou linha, substituído ou não, esquema de posicionamento, etc.), que pode ser encontrado na especificação CSS2.1 se estiver interessado. E o Módulo de dimensionamento intrínseco e extrínseco de nível 3 da CSS estende ainda mais a especificação.

Uma coisa que quero lembrar a todos quando se trata das propriedades de width e height é que essas duas propriedades de dimensionamento não se aplicam a elementos in-line. A largura de um elemento in-line é determinada pela largura do conteúdo renderizado, enquanto a altura de um elemento in-line é determinada pelo tamanho da fonte.

A especificação Level 3 adiciona novas palavras-chave baseadas em conteúdo às propriedades width e height , a saber: min-content , max-content e fit-content() , que permite que elementos não-inline tenham mais opções de dimensionamento baseadas em conteúdo.

Todos esses valores são suportados quando usados em um contexto de formatação de grade. No entanto, sua milhagem pode variar se você quiser usá-las nas propriedades de dimensionamento no momento.

https://codepen.io/huijing/pen/VqLqMz/

Dimensionamento relativo de elementos

Um padrão de design comum para o design responsivo na Web é ter colunas de conteúdo ajustadas para se ajustarem à viewport. Os desenvolvedores codificariam esses layouts com várias consultas de mídia, já que a largura de cada coluna deveria ser especificada em pontos de interrupção específicos. Essa abordagem seria obtida com floats ou inline-block, mas o mecanismo de usar várias consultas de mídia é o mesmo.

https://codepen.io/huijing/pen/BvNMZB/

À medida que você redimensiona a janela e observa as colunas crescendo e encolhendo, observe que todas as colunas crescem e encolhem na mesma proporção . Isso é esperado porque cada coluna é dimensionada como uma porcentagem da largura da viewport.

Uma conseqüência desse comportamento é que é mais difícil criar layouts que apresentem diferentes tipos de conteúdo em um tamanho ideal em um amplo espectro de tamanhos de viewport. O conteúdo com proporções intrínsecas, como imagens, exigiria mais consideração do que o conteúdo textual, que pode fluir e se adaptar mais facilmente.

Dimensionamento com taxas variáveis de mudança

Vamos dar uma olhada nas situações em que o tamanho das colunas aumenta e diminui em taxas diferentes . Tais situações podem surgir quando estamos operando em um contexto de formatação flexível, um contexto de formatação de grade quando determinados tamanhos de trilha são aplicados ou quando o dimensionamento baseado em conteúdo é usado.

Para este exemplo do Flexbox, recomendo a leitura da explicação passo-a-passo de Rachel Andrew sobre como o algoritmo de dimensionamento funciona. Aqui você pode ver quando há mais conteúdo na última coluna. Flexbox dá mais espaço e encolhe a segunda coluna "anterior" para o exemplo de baixo contra o de cima.

https://codepen.io/huijing/pen/xmZJMB/

Grid introduz a unidade fr , que é definida como a fração do espaço restante no contêiner de grade. Ele se comporta de maneira semelhante ao modo como os itens flexíveis ocupam espaço dentro de um contêiner flexível.

Uma vez que todas as faixas não flexíveis tenham atingido seu tamanho máximo, o tamanho total de tais linhas ou colunas é subtraído do espaço disponível, gerando o espaço restante, que é então dividido entre as linhas e colunas de tamanho flexível na proporção de seu fator flex .

Para este exemplo baseado em Grade, as colunas são dimensionadas com uma variedade de valores e isso afeta o comportamento resultante quando o tamanho da viewport é alterado. Para o primeiro exemplo, a primeira coluna é dimensionada com 1fr , o que significa que ocupa o espaço necessário para o conteúdo, além de qualquer espaço livre disponível. Por isso, continuará crescendo se a janela de visualização ficar mais ampla.

Como a viewport encolhe, no entanto, seu comportamento é determinado pela forma como as outras colunas são dimensionadas. As outras duas colunas são auto e fit-content(400px) , que, à medida que o espaço é retirado, comportam-se da mesma forma porque o fit-content resolvido para minmax(auto, max-content) , exceto que é clicado no valor do argumento fornecido.

https://codepen.io/huijing/pen/VqeGba/

Para o segundo exemplo, a última coluna é dimensionada com minmax(200px, 400px) . Observe que essa coluna mantém seu tamanho máximo pelo maior tempo possível, enquanto outras colunas diminuem. A coluna fr encolhe primeiro, seguida pela coluna auto . Mas as colunas auto e minmax() atingem seu tamanho mínimo ao mesmo tempo.

Melhor direção de arte responsiva

Agora vamos aplicar isso a um design real. Este exemplo poderia ser para um artigo em destaque em uma publicação editorial, com uma grande imagem de herói, cabeçalho e algum texto de abertura. Mais uma vez, é altamente recomendável abrir essa demonstração em uma janela separada, para que o comportamento em toda a largura da viewport possa ser observado.

O primeiro exemplo é feito com o dimensionamento de porcentagem e a limitação aqui é dupla. Sobreposição do cabeçalho sobre a imagem é um pouco desajeitada porque é feito com margens negativas. Em segundo lugar, a imagem e o texto encolhem com a mesma taxa, no tamanho mais estreito, a imagem é um pouco pequena demais e o texto também é um pouco apertado demais.

https://codepen.io/huijing/pen/YdXMPZ/

Com o Grid, a sobreposição é muito mais fácil de gerenciar, já que colocar itens dentro da grade é uma questão de atribuí-los às linhas e colunas necessárias, e não há limite para que vários itens ocupem o mesmo espaço na grade.

Se você tiver o Firefox instalado, abra o DevTools e ative o Grid inspector, que mostrará como as faixas estão se ajustando à medida que o tamanho da viewport é alterado. Além disso, o uso de minmax() para o dimensionamento de trilhas permite que o conteúdo na coluna do meio “mantenha” seu tamanho o maior tempo possível, enquanto as faixas são dimensionadas para auto encolher primeiro.

O Firefox tem a melhor ferramenta de inspeção de grade

Conclusão

Esse comportamento dá aos designers e desenvolvedores da Web melhores opções e maior flexibilidade em termos de direção de arte e garante que o foco do conteúdo nunca seja perdido, independentemente do contexto em que é visualizado.

Eu incentivo os desenvolvedores a experimentar essas propriedades e técnicas mais novas, já que foi através da experimentação que eu percebi muitas dessas coisas. Com mais desenvolvedores e designers usando essas novas ferramentas, teremos um conjunto maior de ideias e inspiração para criar designs que realmente se adequem à natureza da web.

Plug: LogRocket , um DVR para aplicativos da web

https://logrocket.com/signup/

LogRocket é uma ferramenta de registro de front-end que permite que você repita problemas como se eles tivessem ocorrido em seu próprio navegador. Em vez de adivinhar por que os erros ocorrem ou solicitar aos usuários capturas de tela e log dumps, o LogRocket permite que você repita a sessão para entender rapidamente o que deu errado. Ele funciona perfeitamente com qualquer aplicativo, independentemente do framework, e possui plugins para registrar o contexto adicional do Redux, Vuex e @ ngrx / store.

Além de registrar as ações e o estado do Redux, o LogRocket registra logs do console, erros de JavaScript, rastreamentos de pilha, solicitações / respostas de rede com cabeçalhos + corpos, metadados do navegador e logs personalizados. Ele também instrumenta o DOM para gravar o HTML e CSS na página, recriando vídeos com pixels perfeitos até mesmo dos aplicativos de página única mais complexos.

Experimente Grátis.