Vamos começar.

A marcação HTML5

Primeiro, precisamos criar um html documento com a seguinte marcação:

 
 
 
 
IPhone da Apple 4 - 16 GB
 
O iPhone mais incrível ainda.
 
 
 
  
 
 
O chip A5 dual-core mais veloz. A câmera de 8MP com ótica totalmente nova também grava vídeo HD 1080p. E introduzindo Siri. É o iPhone mais incrível ainda.
 
 
características do produto
 
 
Câmera de 8 megapixels com gravação de vídeo 1080p
 
Siri voz assistida
 
iCloud
 
Air Print
 
Tela Retina
 
Geotagging de foto e vídeo
 
 
 Compre 
 
 

Usamos várias tags novas da especificação HTML5, como o cabeçalho, hgroup, figura, seção, e um que já discutimos antes; a detalhes e resumo tag.

No entanto, não vamos nos aprofundar nessas tags, não porque não estamos dispostos a isso, mas sim esses são tópicos básicos que você pode encontrar facilmente em outros lugares. Então, se você é realmente novo no HTML5, eu recomendo que você leia as seguintes referências dessas tags; eles os explicaram de forma abrangente:

• Vamos falar sobre a semântica
• O elemento de cabeçalho HTML5
• O elemento hgroup
• Referência de tag HTML5

Agora vamos ver a primeira aparição da nossa página.

Bem, parece sensato sem qualquer estilo. No topo há o cabeçalho, e depois vem a seção para a imagem, descrição e por fim o botão "Comprar agora". Agora, vamos animar esta página.

Os estilos

Começaremos normalizando todos os estilos padrão usando essa folha de estilo e adicionando um fundo gradiente ao html tag.

 html height: 100%; plano de fundo: # f3f3f3; background: -moz-linear-gradient (superior, # f3f3f3 0%, #ffffff 50%); background: -webkit-gradiente (linear, superior esquerdo, inferior esquerdo, cor-stop (0%, # f3f3f3), cor-stop (50%, # ffffff)); background: -webkit-linear-gradient (superior, # f3f3f3 0%, # ffffff 50%); background: -o-linear-gradient (superior, # f3f3f3 0%, # ffffff 50%); background: -ms-linear-gradient (superior, # f3f3f3 0%, # ffffff 50%); background: gradiente linear (top, # f3f3f3 0%, # ffffff 50%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Lembre-se de que nossos elementos de produto são todos envolvidos dentro de um div com a classe de produto. Então, aqui gostaríamos de centralizar o wrapper e definir a largura para ser sobre 650 px.

 .wrapper largura: 650px; margem: auto; preenchimento: 25 px 0 px; 

A seção de cabeçalho

Na seção de cabeçalho, temos dois títulos h1 e h4, então vamos estilizar esses elementos.

 h1, h4 família da fonte: Helvetica Neue, Arial, sans-serif; font-weight: normal; margem: 0;  h1 tamanho da fonte: 24pt;  h4 tamanho da fonte: 16pt; cor: #aaa; 

E, em seguida, adicione um pouco de espaço na parte inferior do cabeçalho com uma margem.

 cabeçalho margin-bottom: 20px; 

Se você olhar para o lado direito do cabeçalho, haverá muito espaço em branco nesse lado.

Então, por que nós também não colocamos o logotipo da Apple lá?.

 cabeçalho margin-bottom: 20px; background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') não-repetir o centro direito; 

A imagem do produto

Em seguida, flutue a imagem para a esquerda e defina a largura máxima da imagem para 350 px.

 figura flutuar: esquerda;  figura img max-width: 350px; 

Desde que a imagem foi empurrada para a esquerda, então vamos flutuar a seção de descrição para a direita e definir a largura para 300 px.

 seção família da fonte: Tahoma, Arial, sans-serif; altura da linha: 150%; flutuar: certo; largura: 300px; cor: # 333; 

Agora vamos ver o resultado até agora.

Começa com boa aparência, mas a tag de detalhes ainda não funciona (exceto no Chrome), então vamos estilizar o botão ao lado.

O botão

Para os estilos de botão, vamos imitar o da Apple.com Store. E aqui está toda a sintaxe que você precisa colocar na sua folha de estilo para o botão.

 botão fundo: # 36a9ea; background: -moz-linear-gradient (superior, # 36a9ea 0%, # 127fd2 100%); background: -webkit-gradient (linear, superior esquerdo, inferior esquerdo, cor-stop (0%, # 36a9ea), cor-stop (100%, # 127fd2)); background: -webkit-linear-gradient (superior, # 36a9ea 0%, # 127fd2 100%); plano de fundo: -o-linear-gradiente (superior, # 36a9ea 0%, # 127fd2 100%); background: -ms-linear-gradient (superior, # 36a9ea 0%, # 127fd2 100%); plano de fundo: gradiente linear (superior, # 36a9ea 0%, # 127fd2 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); borda: 1px sólido # 00599d; cor: #fff; preenchimento: 8 px 20 px; -webkit-border-radius: 3px; raio de fronteira: 3px; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, 1), inserção 0px 1px 0px 0px rgba (250, 250, 250, .3); box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, 1), inserção 0px 1px 0px 0px rgba (250, 250, 250, .3); text-shadow: 0px 1px 1px # 156cc4; filter: dropshadow (cor = # 156cc4, offx = 0, offy = 1); tamanho da fonte: 10pt;  button: hover background: # 2f90d5; background: -moz-linear-gradient (superior, # 2f90d5 0%, # 0351b7 100%); background: -webkit-gradiente (linear, superior esquerdo, inferior esquerdo, cor-stop (0%, # 2f90d5), cor-stop (100%, # 0351b7)); background: -webkit-linear-gradient (superior, # 2f90d5 0%, # 0351b7 100%); plano de fundo: -o-linear-gradiente (superior, # 2f90d5 0%, # 0351b7 100%); plano de fundo: -ms-linear-gradiente (superior, # 2f90d5 0%, # 0351b7 100%); plano de fundo: gradiente linear (superior, # 2f90d5 0%, # 0351b7 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  button: active background: # 127fd2; -webkit-box-shadow: inserção 0px 2px 1px 0px rgba (0, 47, 117, 0,5), 0px 1px 1px 0px rgba (0, 0, 0, 0); box-shadow: inserção 0px 2px 1px 0px rgba (0, 47, 117, 0,5), 0px 1px 1px 0px rgba (0, 0, 0, 0); 

Agora o botão deve ficar melhor.

Problema no Internet Explorer

Como de costume, o IE (Internet Explorer) sempre causa alguns problemas; se você abrir isso em qualquer IE menor que 9, a página permanecerá sem estilo.

Isso ocorre porque o Internet Explorer não reconhece os novos elementos (seção, cabeçalho, etc.) para que os estilos que especificamos não sejam aplicados. Assim, no próximo passo, vamos trabalhar na resolução deste problema.

Testando o Suporte do Navegador

Em nosso post anterior, abordamos o suporte ao navegador para o elemento details usando esse polyfill; para que funcionasse nos navegadores não suportados. No entanto, desta vez vamos tentar diferentes maneiras de fazê-lo com Modernizr.

Do seu site oficial, "Modernizr é uma biblioteca JavaScript de código aberto que ajuda você a construir a próxima geração de HTML5 e CSS3-sites com tecnologia". Tecnicamente, o Modernizr testará o suporte ao navegador para certos elementos e recursos novos. Se o suporte não for fornecido, devemos fornecer uma alternativa, seja dando estilos diferentes ou fornecendo polyfills. Neste caso, usaremos o Modernizr para nos ajudar a testar os detalhes e o elemento de resumo.

1. Vá para Modernizr e vá para sua página de download.

2. Na página de download, Modernizr fornece algumas opções para configurar a biblioteca, então você só tem que selecionar certos recursos que você realmente precisa para o seu site. Neste caso, precisamos:

   • HTML5Shiv 3.4
   • Adicionar classes CSS, esse recurso inserirá automaticamente as classes na tag html.
   • a Modernizr.load,
   • vá para a caixa de complementos da comunidade e selecione detalhes-elem,
   • Na seção Extensibilidade, selecione Modernizr.addTest.
3. Gere e baixe o arquivo.
4. Vincule-o ao seu html e recarregue a página no Internet Explorer. Agora, a página deve ter sido estilizada, já que o Internet Explorer agora pode reconhecer as tags.

E, se você visualizar a fonte ou inspecionar o elemento, verá que a classe sem detalhes foi inserida na tag html; indicando que o navegador onde estamos visualizando a página; atualmente não está suportando o elemento de detalhes. @@@@ [Não consigo entender esta frase. ]

Podemos, então, criar um fallback usando essa classe como o gancho, o que faremos na próxima etapa.

O retorno

Nesta etapa, forneceremos semelhante detalhes funcionalidade de elemento para outros navegadores (excluindo o Chrome). Na postagem anterior, essa etapa foi feita automaticamente usando esse script, mas desta vez vamos criá-lo por conta própria.

Nota: Apenas revendo um pouco do nosso post anterior; Atualmente, o elemento de detalhes é suportado apenas no navegador Google Chrome.

Então, vamos começar a trabalhar no CSS primeiro.

Na tag de resumo, alteramos o modo de cursor para ponteiro, para que o usuário perceba que é clicável.

 resumo cursor: ponteiro; tamanho da fonte: 12pt; esboço: 0; 

Para dar mais espaços na parte superior e inferior do elemento de detalhes com uma margem.

 detalhes margin: 20px 0px; 

Por padrão, a tag de resumo terá uma seta. Mas aqui gostaríamos de substituí-lo por um ícone de mais-menos.

Nota: Antes de prosseguir, eu anteriormente baixei os ícones desta coleção da Fugue, baixei e os espiei em um arquivo.

Vamos adicionar um pseudoelemento anterior e anexar o ícone como plano de fundo. Observe que, neste momento, a posição de fundo está no topo, o que mostrará o ícone mais.

 detalhes> summary: before width: 16px; altura: 16px; display: bloco inline; conteúdo: "! importante; plano de fundo: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') sem repetição do início; margem direita: 5px; position: relative; top: 2px;

Então, quando o elemento de detalhes estiver aberto, a posição do plano de fundo será movida para a parte inferior, mostrando o ícone de menos.

 detalhes [open]> resumo: antes, detalhes.open> resumo: antes background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) não-repete centro inferior; 

o [abrir] sinal é um seletor. Nesse caso, ele selecionará o atributo open details no navegador de suporte.

Por fim, devemos ocultar a seta que, por padrão, é mostrada no Chrome.

 detalhes> resumo :: - webkit-details-marker display: none; 

Então, vamos ver o resultado em um navegador por um tempo.

A seta padrão agora foi substituída pelo nosso ícone e, se você a vir no Chrome, você já terá um efeito de alternância ao clicar nele; o ícone mudará de acordo. Mas, em outros navegadores, nada vai acontecer ainda. Então, no próximo passo vamos tentar replicar o efeito com jQuery.

O efeito de alternância com jQuery

Antes de começarmos com a parte do jQuery, eu gostaria de agradecer a Ian Devlin pela inspiração, o script abaixo é na verdade uma pequena modificação de sua.

Tudo bem, vamos criar uma variável para armazenar a tag de resumo.

 var summary = $ ('resumo dos detalhes'); 

Então nós envolvemos todos os elementos irmãos do resumo com um div.

summary.siblings (). wrapAll ('
');

E esconder essa div quando o elemento de detalhes não tiver a classe aberta.

$ ('detalhes: não (.open) resumo'). siblings ('div'). hide ();

Quando o resumo é clicado, queremos que o div oculto seja mostrado, e o oposto, quando o div estiver inicialmente aberto, ele estaria oculto.

 summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('detalhes'). toggleClass ('open');); 

Para se certificar de que essas funções serão executadas apenas nos navegadores não suportados, nós os colocamos dentro desta declaração condicional.

 if ($ ('html'). hasClass ('no-details')) // o código vai aqui

E abaixo está o código que temos:

 if ($ ('html'). hasClass ('não-detalhes')) var summary = $ ('resumo dos detalhes'); summary.siblings (). wrapAll ('
'); $ ('detalhes: não (.open) resumo'). siblings ('div'). hide (); summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('detalhes'). toggleClass ('open');); 

Agora vamos testá-lo no navegador; o efeito de alternância já deveria ter funcionado em todos os navegadores, eu pessoalmente verifiquei (até o Internet Explorer 7).

• Demonstração
• Fonte de download

Dicas: Alternativamente, você pode mudar o .alternancia() com .slideToggle () para criar um efeito de slide. Além disso, se você deseja que os detalhes sejam abertos inicialmente, você pode adicionar uma classe aberta no elemento details.

Conclusão

Passamos por todas as etapas da criação de uma única página de produto usando HTML5, depuração para navegadores não compatíveis e também para replicar o efeito de alternância para o elemento de detalhe por nossa conta. Assim, esperamos que você possa aprender muito com isso.

No entanto, estou ciente de que não expliquei tudo detalhadamente neste post, portanto, se você quiser esclarecer alguma coisa, sinta-se à vontade para postar a pergunta na caixa de comentários abaixo.