Em uma página web construída com HTML5 foi criado o seguinte...

Próximas questões
Com base no mesmo assunto
Q642667 Programação

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

Alternativas

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