@font-face{
	font-family:'Comic Book';
	src:local('Comic Book'),url('Comic Book.ttf') format('TrueType');
}
p{font-family:'Comic Book',arial,helvetica,sans-serif}

Valores:

• O valor “local” informa se a fonte já existe no sistema operacional do usuário antes de ser instalada
• O valor “url” informa o caminho da fonte que será instalada
• O valor “format” informa qual é o formato da fonte que será instalada

Formatos:

Os formatos aceitos pelos browsers são:

• Embedded OpenType – .eot
• OpenType – .otf
• Scalable Vector Graphics – .svg e .svgz (formato .svg “gzipado”)
• TrueType – .ttf

O Internet Explorer suporta apenas o formato Embedded OpenType (.eot), portanto deverão ser declarados dois formatos, sendo um exclusivo para as versões do Internet Explorer (.eot) e/ou outro(s) para os demais browsers (.otf, .svg, .svgz e .ttf). Exemplo:

@font-face{
	font-family:'Comic Book';
	src:url('Comic Book.eot'); /* IE */
	src:local('Comic Book'),url('Comic Book.ttf') format('TrueType'); /* DEMAIS BROWSERS */
}
p{font-family:'Comic Book',arial,helvetica,sans-serif}

Exemplo declarando outros formatos:

@font-face{
	font-family:'Comic Book';
	src:url('Comic Book.eot'); /* IE */
	src:local('Comic Book'),
	    url('Comic Book.otf') format('OpenType');
	    url('Comic Book.svg') format('Scalable Vector Graphics');
	    url('Comic Book.svgz') format('Scalable Vector Graphics');
	    url('Comic Book.ttf') format('TrueType')
}
p{font-family:'Comic Book',arial,helvetica,sans-serif}

Compatibilidade:

A propriedade @font-face é compatível com os principais sistemas operacionais e browsers (inclusive o Internet Explorer 6):

• Linux – Chrome e Firefox
• Mac OS – Chrome, Firefox, Opera e Safari
• Windows – Internet Explorer 6, 7, 8 e 9, Chrome, Firefox, Opera e Safari

Talvez ajude…

• @font-face Generator – Gerar fontes para outros formatos
• Free Font Converter – Converter fontes para outros formatos

O site StatCounter Global Stats publicou recentemente uma pesquisa informando que no mês de fevereiro, pela primeira vez, o Firefox 3 superou o Internet Explorer 6 em número de usuários.

Infelizmente o Internet Explorer 7 ainda lidera a maior fatia do mercado, com 35% dos usuários, o Firefox 3 ocupa a segunda posição, com 26% dos usuários. Juntos, IE6, IE7 e IE8 dominam aproximadamente 61% do mercado, enquanto o FF2 e FF3, 30%.

A versão 5 traz muitas novidades em comparação à atual 4.01 (que não é atualizada desde 1999), uma das novidades mais interessantes é a utilização de tags específicas, visando padronizar a criação da estrutura dos sites, por exemplo:

Atual estrutura usando HTML 4.01:

<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>

Nova estrutura usando HTML 5:

<header></header>
<nav></nav>
<article></article>
<footer></footer>

Também será possível substituir algumas funções realizadas com o auxílio de Ajax por código HTML, criar bancos de dados locais para facilitar o acesso local às informações, entre outras novidades. O HTML 5 continuará mantendo uma especificação aberta, livre de royalities para os usuários e, de acordo com o roadmap oficial, deverá ser aprovado em meados de 2012.

XHTML:

Criamos um simples parágrafo:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis sem non magna [...]</p>

CSS:

Usamos o pseudo-seletor “first-letter” no “p” para definirmos a formatação da primeira letra do parágrafo:

p:first-letter {float:left;margin-right:5px;font:bold 60px/60px arial}

Resultado:

É importante saber que:

No CSS deve haver um espaço entre o pseudo-seletor “first-letter” e a abertura da “{“, caso contrário o efeito não funcionará no IE6 (é mole?).

O site Typechart é um serviço online que permite visualizar e comparar diferentes tipografias Web (dentre elas o tipo da fonte, tamanho e formatação), gerando o código CSS para aplicação.

Uma das características mais interessantes do serviço é poder comparar a renderização das fontes tanto na plataforma Windows (ClearType) quanto na Mac. O ponto negativo fica por conta do CSS não ser gerado utilizando a declaração única.

XHTML:

Montamos uma lista inserindo um link para cada imagem:

<ul>
	<li><a href="#" title="Aspira Soldier"><img src="imagem.gif" alt="Aspira Soldier" /></a></li>
	<li><a href="#" title="Elite Soldier"><img src="imagem.gif" alt="Elite Soldier" /></a></li>
	<li><a href="#" title="Sniper Soldier"><img src="imagem.gif" alt="Sniper Soldier" /></a></li>
	<li><a href="#" title="Gas Soldier"><img src="imagem.gif" alt="Gas Soldier" /></a></li>
</ul>

CSS:

O uso do “overflow:hidden” é obrigatório para as imagens se manterem fixas. No “a:hover” definimos a espessura da borda e no “a:hover img” deslocamos negativamente as margens da imagem:

*{margin:0;padding:0;border:0;outline:0;list-style:none;text-decoration:none}
ul li{float:left;margin-right:5px}
ul li a,ul li a img{overflow:hidden;float:left}
ul li a:hover{border:5px solid #999}
ul li a:hover img{margin:-5px}

Resultado:

Finalmente o tão esperado WordPress 2.7 (codinome Coltrane) foi lançado oficialmente.

A versão 2.7 (que já possui a tradução PT-BR) está muito diferente em comparação à versão 2.6. A interface foi completamente reformulada e os novos recursos facilitam ainda mais a vida dos usuários. Confira ao lado o vídeo criado pelos desenvolvedores mostrando todas as novidades da nova versão.

Estruturando semanticamente um formulário:

<form id="form" method="post" action="#">
	<fieldset>
		<legend>Dados pessoais</legend>
		<label for="nome">Nome</label>
		<input id="nome" name="nome" type="text" title="Nome" tabindex="1" accesskey="n" />
		<label for="email">E-mail</label>
		<input id="email" name="email" type="text" title="E-mail" tabindex="2" accesskey="e" />
	</fieldset>
	<fieldset>
		<legend>Destinatário</legend>
		<label for="depto">Selecione o departamento</label>
		<select id="depto" name="depto" title="Departamento" tabindex="3">
			<optgroup label="Departamento 1">
				<option value="nome1" title="Nome do funcionário 1">Nome do funcionário 1</option>
				<option value="nome2" title="Nome do funcionário 2">Nome do funcionário 2</option>
			</optgroup>
			<optgroup label="Departamento 2">
				<option value="nome3" title="Nome do funcionário 3">Nome do funcionário 3</option>
				<option value="nome4" title="Nome do funcionário 4">Nome do funcionário 4</option>
			</optgroup>
		</select>
	</fieldset>
	<fieldset>
		<legend>Mensagem</legend>
		<label for="msg">Escreva sua mensagem</label>
		<textarea id="msg" name="msg" cols="" rows="" tabindex="4" accesskey="m"></textarea>
		<input id="enviar" name="enviar" type="submit" value="Enviar" tabindex="5" accesskey="e" />
	</fieldset>
</form>

Fieldset:

A tag “fieldset” permite controlar um determinado grupo de campos.

Legend:

A tag “legend” permite criar um título para um determinado grupo de campos.

Label:

A tag “label” permite referenciar um campo. O atributo “for” deve ser relacionado ao atributo “id” de seu respectivo campo.

Optgroup:

A tag “optgroup” permite criar grupos da tag “option”.

Atributos:

O atributo “title” permite exibir o valor declarado no formato tooltip.
O atributo “tabindex” permite controlar a navegação dos campos através a tecla TAB.
O atributo “accesskey” permite associar teclas de atalho aos campos.

Resultado:

A declaração única nada mais é do que compactar diversas propriedades com a mesma finalidade em apenas uma. Neste post veremos quais são essas propriedades e como utilizar a declaração única corretamente.

Margin e padding:

Se todos os valores forem iguais:

/* Declaração normal */
seletor {
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}

/* Declaração única */
seletor{margin:10px}

Se os valores top/bottom e right/left forem iguais:

/* Declaração normal */
seletor {
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 20px;
}

/* Declaração única */
seletor{margin:10px 20px}

Se os valores right/left forem iguais:

/* Declaração normal */
seletor {
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 30px;
	padding-left: 20px;
}

/* Declaração única */
seletor{padding:10px 20px 30px}

Se nenhum valor for igual:

/* Declaração normal */
seletor {
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 30px;
	padding-left: 40px;
}

/* Declaração única */
seletor{padding:10px 20px 30px 40px}

Border:

/* Declaração normal */
seletor {
	border-width: 1px;
	border-style: solid;
	border-color: #666666;
}

/* Declaração única */
seletor{border:1px solid #666}

Font:

/* Declaração normal */
seletor {
	font-style: italic;
	font-variant: small-caps;
	font-weight: bold;
	font-size: 12px;
	line-height: 18px;
	font-family: arial;
}

/* Declaração única */
seletor{font:italic small-caps bold 12px/18px arial}

Background:

/* Declaração normal */
seletor {
	background-color: #666666;
	background-image: url(imagem.gif);
	background-repeat: repeat-x;
	background-position: top;
}

/* Declaração única */
seletor{background:#666 url(imagem.gif) repeat-x top}

List-style:

/* Declaração normal */
seletor {
	list-style-type: disc;
	list-style-position: inside;
	list-style-image: url(imagem.gif);
}

/* Declaração única */
seletor{list-style:disc inside url(imagem.gif)}

Color:

Se todos os caracteres forem iguais:

/* Declaração normal */
seletor {
	color: #666666;
}

/* Declaração única */
seletor{color:#666}

Se todos os pares de caracteres forem iguais:

/* Declaração normal */
seletor {
	color: #6699CC;
}

/* Declaração única */
seletor{color:#69C}

É importante lembrar que:

Na declaração única os valores sempre devem seguir o sentido horário (top/right/bottom/left) e a compactação dos hexadecimais pode ser aplicada em qualquer propriedade que contenha color (border-color, background-color, etc).

Exemplo utilizando a identação convencional (338 bytes):

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	list-style: none;
	text-decoration: none;
}

ul {
	padding: 10px;
	border: 1px solid #CCC;
	width: 485px;
	height: 37px;
	background: #EEE;
}

ul li {
	float: left;
	padding: 10px;
	border: 1px solid #CCC;
	font: 12px arial;
	color: #666;
	background: #FFF;
}

Exemplo utilizando o método otimizado (285 bytes):

/* CSS Reset */
*{margin:0;padding:0;border:0;outline:0;list-style:none;text-decoration:none}

/* Menu */
ul{padding:10px;border:1px solid #CCC;width:485px;height:37px;background:#EEE}
ul li{float:left;padding:10px;border:1px solid #CCC;font:12px arial;color:#666;background:#FFF}

Lembrando que cada TAB, quebra de linha ou espaço consumirá 1 byte, devemos eliminá-los mesclando todos os seletores, propriedades e valores, removendo sempre o último “;” (ponto e vírgula) antes do fechamento da “}” (chave). Um outro ponto importantíssimo é sabermos mesclar as propriedades utilizando a declaração única.

Exemplo utilizando a declaração única:

/* Declaração normal */
ul li{border-top:1px solid #CCC;border-right:1px solid #CCC;border-bottom:1px solid #CCC;border-left:1px solid #CCC}

/* Declaração única */
ul li{border:1px solid #CCC}

A idéia é termos um documento leve afim de economizar R$ por conta da diminuição do consumo de banda, porém a organização é essencial para justificar a ausência da identação, para isso, procure adotar um padrão na ordem das propriedades e identifique cada bloco utilizando comentários.