Chegamos ao 2º episódio do GrifoCast. Hoje falaremos sobre HTML5 e a forma que utilizamos ele no nosso dia-a-dia. Falaremos também de CSS3Pie e Less.

Agora contamos com melhores equipamentos e a edição está mais direta e com menos cortes. Mas, é claro, ainda temos muito a melhorar! Portanto continuem nos enviando críticas, sugestões, dúvidas, sua opinião e é claro, temas que você acha importantes para serem discutidos nos próximos episódios.

E por favor, compartilhem com seus amigos e colegas de trabalho o GrifoCast para melhorarmos cada vez mais.

Edição:
Filipe Medina – @filipemedina

Participantes:
Renatho Rosa – @renatho
Ricardo Tomasi – @ricardobeat
Marcelo Oliveira – @askoth

Mas ainda falta uma peça crucial: background gradients. Não há menção pela Microsoft de suporte futuro a essa funcionalidade no IE9, o que nos preocupa bastante. Estamos usando o CSS3Pie em alguns projetos, que nos permite definir sombras, border radius e gradientes no CSS, que são renderizados via VML no IE 6, 7 e 8. Como o IE9 não suporta mais VML, ficamos de mão abanando.

Sorte nossa é que a versão 9 suporta SVG. A solução que encontramos utiliza CSS, SVG e um script server-side: geramos um gradiente dinamicamente a partir de parâmetros passados no CSS. O resultado no CSS é meio gordo mas funciona em praticamente todos os browsers, do IE6 ao Opera. Veja o código abaixo:

(gradient.php)

<?php
	header( 'Content-type: image/svg+xml' );
	function _get($k){	echo $_GET[$k] ? $_GET[$k] : 'fff';	}
?>
<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
			<stop offset="0%" style="stop-color:#<?php _get('from') ?>; stop-opacity:1"/>
			<stop offset="100%" style="stop-color:#<?php _get('to') ?>; stop-opacity:1"/>
		</linearGradient>
	</defs>
	<rect width="100%" height="100%" fill="url(#grad)" />
</svg>

CSS:

#xis {
  background: #dbdbdb; // fallback para browsers sem suporte
  background: url(gradient.php?from=ededed&to=d8d8d8); // IE9, Opera
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ededed), to(#d8d8d8)); //Chrome, Safari, Mobile Webkit
  background: -moz-linear-gradient(top, #ededed, #d8d8d8); // Firefox
  -pie-background: linear-gradient(#ededed, #d8d8d8); // IE 6-8
  behavior: url(../js/PIE.php);
}

Uma baita mão escrever tudo isso só pra um gradiente, não? Por isso usamos o less.js no desenvolvimento. Com esse mixin:

.gradient(@from, @to){
	background: (@from+@to)/2;
	@svgG: e(%('url(gradient.php?from=%d&to=%d)', @from, @to));
	@svgGradient: e(`this.svgG.toJS().replace(/#/g, '')`); //svg IE9
	background: @svgGradient;
	background: e(%('-webkit-gradient(linear, 0% 0%, 0% 100%, from(%d), to(%d))', @from, @to));
	background:	e(%('-moz-linear-gradient(top, %d, %d)', @from, @to));
	-pie-background: e(%('linear-gradient(%d, %d)', @from, @to));
	.pie();
}

Só precisamos escrever isso no CSS:

#xis {
  .gradient(#fcfcfc, #999999);
}

Exemplo aqui.

A limitação no momento é que só funcionam gradientes lineares verticais, mas é só alterar o código server-side que dá pra gerar qualquer tipo de gradiente.

Esperamos que a dica seja útil

As duas grandes sacadas para a personalização do input file são as seguintes:

• Utilizaremos o campo com opacidade 0 por cima do campo falso, assim como nos outros casos de personalização de formulário;
• Se você já tentou fazer esse teste, provavelmente teve problemas para aumentar o tamanho do campo conforme o layout que está trabalhando. A forma de fazer isto é aumentando o tamanho da fonte.

Vamos montar um exemplo passo a passo e no final disponibilizaremos o link com o exemplo completo. Não trapaceie, monte o exemplo com suas próprias mãos e depois veja o link.

Começamos pelo HTML:

<div class="inputFile">
	<span>Selecione um arquivo</span>
	<input type="file" name="arquivo" id="arquivo" />
</div>

O span será utilizado para mostrar o nome do arquivo selecionado.

Agora através do CSS vamos posicionar o input sobre o span e ocultá-lo com opacidade. Desta forma, quando o usuário clicar no span (que é o que estará visível), na verdade estará clicando no input.

.inputFile {
	width: 185px;
	height:40px;
	position: relative;
	overflow: hidden;
	background: red;
}
.inputFile span {
	display: block;
	position: absolute;
}
.inputFile input {
	position: absolute;
	right: 0;
	z-index: 2;
	font-size: 100px; /* Aumenta tamanho do campo */
	opacity: 0;
	filter: alpha(opacity=0);
}

Note a propriedade font-size: 100px no input. Isto é utilizado para aumentar o tamanho do campo que não respeita as propriedades width e height em alguns browsers.

Agora só falta exibir no span o valor selecionado no input. Isto é feito com poucas linhas utilizando jquery:

$("#arquivo").change(function() {
	$(this).prev().html($(this).val());
});

E está pronto. Simples não? Conseguiu se segurar e montar antes de abrir o link de exemplo? Então agora acesse personalização de input file

As técnicas mostradas foram testadas em IE6 e superiores, Firefox 3.6, Chrome e Safari. Qualquer problema que encontrarem em outras versões de browser, mobile ou outros do gênero nos avisem para tentarmos aprimorar a técnica. Sugestões de melhoria também são bem-vindas.

Abraços e até a próxima!

O resultado final do que explicaremos aqui será um select oculto com um span o sobrepondo e exibindo o valor. Ao clicar no select as opções dele são exibidas normalmente da forma nativa.

O único problema desta técnica é que não funciona no IE6 (segundo o Jeremias: “IE IE IE é safado tem q morrer“), pois ele (browser burro) não suporta opacidade no select, então para IE6 podemos apenas colocar uma cor de fundo no select para não destoar muito do desenho – Isto chama-se Graceful Degradation (que por sinal também merece um futuro Post).

Como é de praxe, começamos pelo HTML:

<div class="styleCombobox">
  <select title="Selecione">
    <option value="1">Opção 1</option>
    <option value="2">Opção 2</option>
    <option value="3">Opção 3</option>
  </select>
</div>

Utilizamos uma div encapsulando o select, pois através do script vamos inserir um span antes do select exibindo o valor selecionado. No atributo title podemos inserir um valor inicial (valor que não precisa aparecer nas opções da combobox – ex.: “Selecione uma opção”).

Agora vamos criar um CSS para os estilos da nossa combobox conforme o desenho. No nosso exemplo colocaremos apenas um background cinza para não sair do foco do post.

Além dos estilos do desenho, vamos deixar o select sem opacidade – Os browsers ocultam somente a parte do valor do select, então quando clicarmos nele as opções serão exibidas.

.styleCombobox {
  width:200px;
  background:gray;
}
.styleCombobox span {
  position:absolute;
}
.styleCombobox select {
  width:100%;
  opacity:0;
  filter:alpha(opacity=0);
}

No script que estamos disponilibizando também colocamos a funcionalidade de foco para o select, então precisamos criar outro estilo para ele:

.comboboxFocus {
  border:dotted 1px #CCC;
}

Como comentado no início do post, no caso do IE6 você pode criar hacks para alterar as cores do select para ficar mais próximo do desenho, mas não entraremos no mérito.

Agora você precisa baixar o plugin desenvolvido pela Grifo neste link styleCombobox e importá-lo na sua página. A chamada fica dessa forma:

<script type="text/javascript">
  $(".styleCombobox select").styleCombobox({
    classFocus:"comboboxFocus"
  });
</script>

Para usuários com javascript desabilitado, vamos exibir os selects normais do browser com o noscript:

<noscript>
  <style type="text/css">
  .styleCombobox select {
    filter:alpha(opacity=1);
    opacity:1;
  }
  </style>
</noscript>

As técnicas mostradas foram testadas em IE6 (apesar de neste funcionar parcialmente) e superiores, Firefox 3.6, Chrome e Safari. Qualquer problema que encontrarem em outras versões de browser, mobile ou outros do gênero nos avisem para tentarmos aprimorar a técnica. Sugestões de melhoria também são bem-vindas.

Veja um exemplo de personalização de combobox em funcionamento.

Abraços e até a próxima!

Você já deve saber o clique em um label que referencia algum campo (Ex.: <label for="idDoCampo">) tem a função de foco para este campo. E no caso dos checkbox e radios a função é o clique do campo (marcar / desmarcar). Esta é a essência da solução. Já começou cair a ficha né?

Nosso HTML será composto por uma label que encapsula o input e o texto, desta forma tudo que estiver dentro do label estará na área clicável.

Veja o código:

<label for="radioButton1"><input type="radio" name="radioButton" id="radioButton1" /> Radio 1</label>
<label for="radioButton2"><input type="radio" name="radioButton" id="radioButton2" /> Radio 2</label>

<label for="checkbox1"><input type="checkbox" name="checkbox" id="checkbox1" /> Checkbox 1</label></div>
<label for="checkbox2"><input type="checkbox" name="checkbox" id="checkbox2" /> Checkbox 2</label></div>

Através do CSS vamos ocultar os inputs e fazer a personalização sacana que o designer desenhou.

.styleRadio input, .styleCheckbox input {
   cursor:pointer;
   filter:alpha(opacity=0);
   opacity:0;
}

.styleRadio, .styleCheckbox {
   cursor:pointer;
   height:30px;
   background:url(controls.gif) no-repeat;
}

.styleRadio {
   background-position:0 -500px;
}
.styleCheckbox {
   background-position:0 0;
}

Beleza! já tá funcionando, não está vendo ainda? Usuários cegos já, pois o código está acessível.

Ok, vamos deixar acessível sem screen reader também. Para isso a Grifo fez um plugin do jquery exclusivamente para você, leitor do nosso blog. O plugin pode ser baixado neste link: styleRadioCheckbox.

O plugin trabalha com a estrutura HTML que citamos acima. Você precisará criar 2 classes além da classe para estado normal dos inputs: uma classe para ele marcado e outra para o foco.

Exemplo:

.inputRadioChecked {
   background-position:-500px -500px;
}
.inputCheckboxChecked {
   background-position:-500px 0;
}
.inputFocus { /* Este está genérico nos para radio e checkbox, mas também pode ser uma classe para cada */
   border:dotted 1px #CCC;
}

Agora só falta a chamada do plugin, onde passaremos por parâmetro as classes de estados criadas no passo anterior.

Código de chamada do plugin:

$("input:checkbox").styleRadioCheckbox({
   classChecked:"inputCheckboxChecked",
   classFocus:"inputFocus"
});
$("input:radio").styleRadioCheckbox({
   classChecked:"inputRadioChecked",
   classFocus:"inputFocus"
});

Pronto. Agora tudo está funcionando! Mas espere aí, no início do post não dizia que a técnica era feita com javascript não-obstrutivo? Desativando o javascript não está funcionando. – Pergunta pro usuário cego se não está funcionando, aposto que pra ele tá que é uma beleza. Mas ok, vamos achar uma solução para ficar acessível sem screen reader de novo.

Para solucionar este problema iremos inserir uma tag noscript que vai exibir os inputs novamente:

<noscript>
  <style type="text/css">
  .styleCheckbox input, .styleRadio input {
     filter:alpha(opacity=1);
     opacity:1;
  }
  </style>
</noscript>

As técnicas mostradas foram testadas em IE6 e superiores, Firefox 3.6, Chrome e Safari. Qualquer problema que encontrarem em outras versões de browser, mobile ou outros do gênero nos avisem para tentarmos aprimorar a técnica. Sugestões de melhoria também são bem-vindas.

Veja um exemplo de personalização de radio e checkbox em funcionamento.

Abraços e até a próxima!