Usage of PICTURE element in HTML

Community feedback

• 

  Bernardo Poggioni•6,430

  @R3ygoskiPosted 4 days ago

  Olá novamente Bianca, mais uma vez parabéns pela conclusão e principalmente por ter ido além do que o desafio propunha, isso ajuda muito a se desenvolver como dev.

  Primeiro eu gostaria de falar sobre a animações da imagem, em telas responsivas ela sai de tela, o que pode causar uma estranheza para o usuário. Além do mais, a imagem retorna de forma abrupta, isso ocorre porque você colocou o transition-duration dentro do #product:hover, para deixar mais suave basta mover essa propriedade para #product.

  Sobre suas dúvidas:

  Q: Flex é a melhor opção aqui?

  A: Isso é algo que depende muito, tanto grid quanto flex estão corretos para essa situação, só que teoricamente o grid caberia melhor já que ele é capaz de alinhar em múltiplas direções. Mas usar o flex não está errado.

  Q: Como encaixar melhor a imagem a fim de fazer o responsivo funcionar?

  A: Bom, seu responsivo já está funcionando, então não acho que tenha muito o que fazer nesse trecho, tanto a imagem quanto o responsivo estão corretos.

  Q: Como eu poderia parar o <span> de animar.

  A: Bom você poderia colocar uma <div> que engloba o preço (<p>) e o <span>, dessa forma:

  <div class="container-preco">
    <p id="promo">$149.99</p>
    <span id="preço">$169.99</span>
  </div>
  

  .container-preco {
    display: flex;
    align-items: center;
  }
  
  #preco {
    /*Remova as props: position e top*/
  }
  

  Dessa forma só o preço ficará animado e não o <span>.

  Sobre a <picture>, você não precisa passar esse campo: <source media="(min-width: 570px)" srcset="images/image-product-desktop.jpg">.

  Isso porque a image-product-desktop já é a imagem padrão. Tanto que se você remover, você não verá diferença.

  Sobre a imagem ter ficado em um tamanho diferente por causa de rem isso provavelmente está acontecendo pelas suas configurações do tamanho de fonte, mas teoricamente se você utilizar 18.75rem o tamanho ficará o mesmo, já que 16 * 18.75 = 300.

  Edit: Esqueci de mencionar, mas opte por utilizar classes para estilização. Não é errado usar ID, mas id's tendem a ser mais utilizados para trabalhar com o JS. E também não é muito recomendado utilizar caracteres especiais como ç que foi utilizado em preço.

  E é isso, novamente parabéns, caso tenha ficado qualquer dúvida, já sabe, só comentar abaixo que tentarei ajudar.

  Marked as helpful

  1

  ---

  

  Professora Bianca•140

  @ProfessoraBiancaPosted 4 days ago

  @R3ygoski Olá Herói! hahahahaha

  Como eu poderia resolver o problema que você mencionou da animação da imagem saindo da tela?

  (e obrigada pela dica do retorno da animação, eu tinha tentado colocar isso no hover e não deu certo hahahaha)

  Sobre a questão da imagem responsiva:

  • Observe que ao diminuir a largura da tela, em certo momento, os textos reduzem de tamanho porém, a imagem continua igual. Gostaria que a imagem diminuísse junto com o texto. Em outros projetos isso dava certo, porém como tive que colocar um tamanho fixo nessa, não funcionou. Nem mesmo quando colocava como max-widht.

  Sobre a <div> do <span> :

  • Então, eu até pensei em fazer isso, mas achei que seria uma <div> desnecessária e que talvez pudesse ser resolvido de uma forma melhor hehehehe

  Sobre classes e id's:

  • Sua sujestão se mantém mesmo quando temos classes que não serão reutilizadas em outros elementos?

  1

  

  Bernardo Poggioni•6,430

  @R3ygoskiPosted 4 days ago

  Olá Bianca, sobre o problema da animação, você pode resolver de duas formas, uma seria tirando a animação, que pode ser feito assim:

  #product:hover {
    transform: none;
    border-radius: 0.5rem 0.5rem 0 0;
  }
  

  E a segunda é adaptando a animação. que pode ser feita assim:

  #product:hover {
    transform-origin: bottom; /*O valor pode ser top também*/
    transform: scale(1.125)
  }
  

  Isso evitará de que a imagem escape da tela visível. E uma dica quanto a animação, opte por utilizar o transform: translate(x,y) que ele tem um controle mais fino sobre como mover os elementos, daí se quiser usar por exemplo translate e scale você pode fazer isso:

  transform: translate(0, 100px) scale(1.125);
  

  Sobre a imagem responsiva, agora eu entendi sua dúvida, bom, para resolver você pode fazer isso:

  Na sua <picture> crie uma classe, aqui vou chamar de image-container.

  .image-container {
    min-width: 50%;
  }
  
  #product {
    width: 100%;
  }
  

  Note que a imagem também irá diminuir na vertical (altura), isso porque ela não tem um height definido. Você pode tanto definir esse height no main quanto no #product. Caso defina no main lembre-se de adicionar height: 100%; ao #product. E também lembre de atualizar os valores na @media.

  Sobre as classes e id's, sim, pois por mais que não seja reutilizada isso tende a deixar mais claro que é algo relacionado a estilização, enquanto id's são mais relacionados a interatividade do JS. Tanto que manter classes mesmo para elementos únicos, ajuda na escalabilidade do CSS.

  Tanto que fica uma sugestão, dê uma olhada sobre a Metodologia BEM, ela ajuda e muito na parte de nomeação do CSS. Metodologia BEM

  E não há de que, qualquer dúvida já sabe, só comentar abaixo ;)

  Marked as helpful

  1