Em uma página web construída com HTML5 foi criado o seguinte...
Em uma página web construída com HTML5 foi criado o seguinte contêiner:
<div id="caixa"></div>
Para definir corretamente a cor de fundo gradiente linear para o contêiner no navegador Firefox, de cima para baixo, iniciando
com vermelho e realizando transição para azul, utiliza-se, na configuração CSS3 do contêiner, a propriedade
Gabarito comentado
Confira o gabarito comentado por um dos nossos professores
Alternativa correta: B - background: -moz-linear-gradient(red, blue);
Para resolver esta questão, é necessário entender como funciona a propriedade de gradiente linear em CSS3 e como os diferentes navegadores implementam essa funcionalidade. O CSS3 introduziu uma forma de criar gradientes diretamente com CSS, sem a necessidade de utilizar imagens. Isso permite uma página mais leve e uma maior flexibilidade no design.
Os gradientes lineares são definidos pela propriedade background-image
ou simplesmente background
quando usados como um atalho em conjunto com outras propriedades de fundo. A sintaxe para criar um gradiente linear é:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
No entanto, quando o CSS3 foi lançado, nem todos os navegadores suportavam a nova funcionalidade, e aqueles que suportavam muitas vezes requeriam o uso de prefixos específicos do navegador. Os prefixos são usados para que os navegadores possam implementar e testar novas funcionalidades antes que se tornem padrão e, assim, não afetarem a apresentação em navegadores de outros fabricantes.
Na questão, é solicitada a configuração correta de um gradiente linear para o navegador Firefox. O prefixo utilizado pelo Firefox para recursos experimentais é -moz. Isso nos leva à alternativa correta:
Alternativa B: background: -moz-linear-gradient(red, blue);
Esta declaração CSS cria um gradiente linear que começa com a cor vermelha (red
) no topo e transiciona para a cor azul (blue
) na parte inferior. Não é necessário especificar as palavras top
e bottom
na sintaxe do gradiente para o Firefox, pois por padrão, o gradiente linear é de cima para baixo se nenhuma direção for especificada.
As outras alternativas estão incorretas, pois utilizam prefixos para outros navegadores (-webkit
para o Chrome e Safari, -o
para o Opera) ou ainda adicionam parâmetros desnecessários que não são requeridos pela sintaxe correta do gradiente linear no Firefox.
Clique para visualizar este gabarito
Visualize o gabarito desta questão clicando no botão abaixo
Comentários
Veja os comentários dos nossos alunos
Resposta letra B) background: -moz-linear-gradient(red, blue); --> lembrar que para firefox (MOZila) usa o prefixo moz, para o Chrome usa webkit.
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */
background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1-12.0 */
background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6-15 */
background: linear-gradient(red,yellow,blue); /* Standard syntax */
Fonte: https://www.w3schools.com/cssref/func_linear-gradient.asp
Clique para visualizar este comentário
Visualize os comentários desta questão clicando no botão abaixo