Monday, 30 December 2013 00:00

Tutorial 003: Estilo para os placeholder (html5)

Written by 

campo enorme cum placeholder

Contextualizaçom

Um dos novos atributos que nos achegou o HTML5 foi o do placeholder. Este permite-nos engadir um pequeno texto dentro dum campo criado ca etiqueta <input> e que ademais desaparece ao começarmos a escrever nele. Estas qualidades convertem o placeholder numha ferramenta excelente à hora de criarmos formulários de contacto e caixas de procura, login e registo. Mas, ainda que de primeiras poderíamos decidir utilizá-lo como substituto dos <label> para desenharmos formulários visualmente mais compactos, a W3C recomenda o seu uso só como apoio da info que estes (<label>) mostram:

The objective of this technique is to use the placeholder attribute to assist users with data entry. The placeholder attribute is applied to the input element, and must have a value that is a short hint, word or phrase.

The placeholder attribute is not a substitute for the label element. Placeholder text can help people with cognitive disabilities see an example of the type of data they can enter. Placeholder text disappears visually when the input field is given focus, so the information is not persistent.

Estilo

Antes de dar-lhe estilo a um placeholder devemos saber que este nom é suportado polo IE9 e IE8. Se queres saber como utilizá-lo nestes casos, podes botar-lhe umha olhada a estas ligaçons: HTML5 Placeholder Input Fields Fixed with jQuery e HTML5 Placeholder jQuery Plugin

Quando engadimos o atributo placeholder numha etiqueta <input>, do mesmo jeito que no seguinte exemplo:

<input type="text" name="nome" placeholder="Hello I am..." />

o texto aparece no campo por defeito num gris claro. Mas se queremos dar-lhe outra cor, devemos empregar CSS:

input[placeholder] { color:orange; }

O resultado seria o seguinte:

caixa do <input> com placeholder

Com isto a priori abondaria. Mas nom sempre é tudo tam doado à hora de desenharmos webs ;)
Por exemplo, se visualizamos o mesmo campo no Chrome, o mais provável é que o texto continue a ser gris (esta situaçom tamém se repete noutros navegadores).

placeholder em gris a visualizar-se no Chrome

Isto acontece pola própria novidade do atributo, ainda sem desenvolver completamente em muitos navegadores. Para solucionarmos o problema, temos que utilizar vendor prefixes para poder atribuir-lhe umha cor, ou outra propriedade, ao texto do placeholder:

::-webkit-input-placeholder { color: orange; } /* Para o Chrome, Safari e Opera */
:-moz-placeholder { color: orange; } /* Firefox 18 e inferiores */
::-moz-placeholder { color: orange; }  /* Firefox 19 e superiores */
:-ms-input-placeholder {  color: orange;  } /* Internet Explorer */

Agora quando visualizamos o nosso campo no Chrome, o texto aparece já de laranja:

texto do placeholder já de laranja no Chrome

Um truco: nunca empreguedes os vendor prefixes juntos para umha mesma declaraçom

::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder , :-ms-input-placeholder { color: orange; } /* deste jeito nunca! */

se um navegador nom entende um dos seletores, invalidará a linha inteira e a propriedade (ou propriedades) nom se há aplicar ;)

Por último, comento-vos um pequeno detalhe que me houvo fazer tolear umha vez. Quando visualizamos o campo anterior no Firefox 19 (acho que no 20 tamém), co seu vendor prefixe no css, a simples vista podemos pensar que se está a ver corretamente na cor escolhida (orange), mas se observamos com detalhe, podemo-nos decatar de que realmente o laranja é um chisco mais claro do que o laranja original:

laranja do texto mais claro do que deveria ser como se vê no Firefox 19

texto do laranja atribuidocomo se deveria ver

Isto acontece porque o Firefox 19 baixa a opacidade por defeito a um valor de 0.54. Para evitarmos isto, devemos engadir a propriedade opacity:1; à nossa declaraçom:

::-moz-placeholder { opacity:1; color: orange; }  /* Thanks Thibaut! */

 

E aqui é até onde nós chegamos.
Se sabes algo mais, ou vês algum erro no post, podes dizer-no-lo nos comentários.
A tua ajuda será bem-vinda (e o post editado) ^-^

 

Related items