Recipe: Media objects

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

Media Object (Objeto de Mídia) é um padrão que vemos em toda web. Nomeado por Nicole Sullivan refere-se a uma caixa de duas colunas com uma imagem de um lado e texto descritivo do outro, por ex. uma postagem no facebook ou tweet.

Exigências

O Padrão Media Object precisa de algumas ou todas as seguintes características:

  • Empilhados no Celular, duas colunas no Computador.
  • A imagem pode estar à esquerda ou à direita.
  • A imagem pode ser pequena ou grande.
  • Media Objects (Objetos de Mídia) podem ser aninhados.
  • O Media Object deve limpar o conteúdo, não importando o tamanho.

A receita

Escolhas feitas

Eu escolhi usar o Layout de Grade para o Media Object (Objeto de Layout), pois ele permite controlar o layout em duas dimensões quando preciso. Isso significa que, quando temos um rodapé, com conteúdo curto acima, o rodapé pode ser empurrado para a parte inferior do Media Object (Objeto de Layout).

Outro motivo para usar o Layout de Gride é para que eu possa usar fit-content para o tamanho da faixa de imagem. Usando fit-content com um tamanho máximo de 200 pixels, quando temos uma imagem pequena como o ícone, a faixa fica tão grande quanto o tamanho dessa imagem — o tamanho max-content. Se a imagem for maior, a faixa para de crescer em 200 pixels e, como a imagem possui max-width de 100% aplicado, ele diminui para que continue a caber dentro da coluna.

Usando grid-template-areas para alcançar o layout, eu posso ver o padrão no CSS. Eu defino minha grade quando tivermos uma largura máxima de 500 pixels, em dispositivos menores o Media Object empilha.

Uma opção para o padrão é girá-lo para mudar a imagem para o outro lado — isso é feito adicionando a classe media-flip, que define um modelo de grade invertida, fazendo com que o layout seja espelhado.

Quando aninhamos um media object (Objeto de Layout) dentro do outro, precisamons colocá-lo na segunda faixa no layout regular, e na primeira faixa quando invertida.

Fallbacks (Alternativas, Plano B)

Existem várias alternativas possíveis para esse padrão, dependendo dos navegadores que você deseja oferecer suporte. Um bom exemplo seria flutuar a imagem para a esquerda e adicionar uma correção clara à caixa para garantir que ela contivesse as flutuações.

Depois que os elementos flutuantes se tornam itens da grade, o flutuador não se aplica mais; portanto, você não precisa fazer nada de especial para limpá-lo.

O que você precisará fazer é remover as margens aplicadas ao item e as larguras que não precisamos em um contexto de grade (nós temos o gap propriedade para controlá-lo em grades, e a faixa assume o controle do dimensionamento).

Recursos relevantes no MDN

Compatibilidade do Navegador

Os vários métodos de layout tem suporte diferente para os navegadores. Veja os gráficos abaixo para obter detalhes sobre o suporte básico para as propriedades usadas.

A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, confira https://github.com/mdn/browser-compat-data e envie-nos uma solicitação de recebimento.

Áreas de Modelo de Grade

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
grid-template-areasChrome Full support 57
Full support 57
Full support 29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 16Firefox Full support 52
Full support 52
No support 40 — 59
Disabled
Disabled From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 44
Full support 44
Full support 28
Disabled
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 57
Full support 57
Full support 29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Full support 52
Full support 52
No support 40 — 59
Disabled
Disabled From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 43
Full support 43
Full support 28
Disabled
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Full support 10.3Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.

Flutuador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
floatChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
Flow-relative values inline-start and inline-endChrome No support NoEdge No support NoFirefox Full support 55IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 55Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support