@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

CSS Sprites consiste em unirmos imagens em apenas um arquivo, utilizando CSS para posicioná-las e mostrá-las em seu HTML.

O principal objetivo da utilização desta técnica é a economia de requisições HTTP, fazendo com que seu site ganhe performance e economize banda.

Imagem

Para começar, unimos todas as imagens utilizadas em apenas uma:

HTML

Montamos uma lista inserindo uma classe para cada “a”, desta forma conseguiremos manipular cada imagem separadamente:

<ul>
<li><a href="#" title="Aspira Soldier" class="aspira_soldier">Aspira Soldier</a></li>
<li><a href="#" title="Elite Soldier" class="elite_soldier">Elite Soldier</a></li>
<li><a href="#" title="Sniper Soldier" class="sniper_soldier">Sniper Soldier</a></li>
<li><a href="#" title="Gas Soldier" class="gas_soldier">Gas Soldier</a></li>
</ul>

CSS

Definimos no “a” o background com a imagem e nas classes criadas manipulamos onde serão buscados os trechos desejados da imagem através da propriedade “background-position”.

Seguindo esta mesma linha, definimos o “a:hover” de cada classe:

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

/* Soldiers */
ul li{float:left}
ul li a{float:left;display:inline;margin-right:5px;border:1px solid #eee;width:100px;height:100px;text-indent:-15000px;background-image:url(soldiers.gif)}
ul li a:hover{border-color:#999}

/* Aspira Soldier */
ul li a.aspira_soldier{background-position:0 0}
ul li a.aspira_soldier:hover{background-position:0 -100px}

/* Elite Soldier */
ul li a.elite_soldier{background-position:-100px 0}
ul li a.elite_soldier:hover{background-position:-100px -100px}

/* Sniper Soldier */
ul li a.sniper_soldier{background-position:-200px 0}
ul li a.sniper_soldier:hover{background-position:-200px -100px}

/* Gas Soldier */
ul li a.gas_soldier{background-position:-300px 0}
ul li a.gas_soldier:hover{background-position:-300px -100px}

Resultado

Neste caso temos o efeito rollover, onde passando o mouse sobre cada imagem ela é trocada por outra:

Declaração única

A declaração única consiste em compactar diversas propriedades com a mesma finalidade em apenas uma.

Aqui 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 hexadecimais forem iguais:

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

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

Se todos os pares de hexadecimais forem iguais:

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

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

Importante

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 cor (border-color, background-color, etc).

Método otimizado

Diferente da identação convencional utilizada no HTML (com TAB’s) o CSS pode utilizar um método otimizado.

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

/* CSS Reset */

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

/* Menu */

ul li {
float: left;
}

ul li a {
float: left;
display: inline;
margin-right: 5px;
padding: 10px;
border: 1px solid #eee;
font: bold 12px arial;
color: #666;
background: #fff;
}

ul li a:hover {
border-color: #999;
}

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

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

/* Menu */
ul li{float:left}
ul li a{float:left;display:inline;margin-right:5px;padding:10px;border:1px solid #eee;font:bold 12px arial;color:#666;background:#fff}
ul li a:hover{border-color:#999}

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).

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.

Parece pouco?

Vamos supor que um grande portal tenha em média 1 milhão de acessos por dia:

355 bytes * 1.000.000 = 355.000.000 bytes (identação convencional)
291 bytes * 1.000.000 = 291.000.000 bytes (método otimizado)
355.000.000 bytes – 291.000.000 bytes = 64.000.000 bytes (economia)
64.000.000 bytes = 62.500 megabytes = 61 gigabytes

Economia de 61 gigabytes por dia para um trechinho de CSS! Ainda parece pouco?

Talvez pelo termo “Framework” estar tão associado à idéia de facilitar o desenvolvimento “back-end” do sistema, que a primeira vista podemos encarar um “Framework CSS” como alguma coisa que vai processar folhas de estilo do lado do servidor, que vai gerar CSS dinamicamente ou algo do tipo.

Se você (assim como eu), também teve essa percepção sobre o assunto antes de explorá-lo, pode ter ficado com uma impressão ruim a respeito dos frameworks CSS.

Não podemos dizer que é um erro de nomenclatura. A palavra “framework” significa “estrutura” e se encaixa perfeitamente no contexto, se observarmos o propósito dos frameworks. Mas talvez a primeira impressão que a palavra deixa seja um motivo para que essas ferramentas não sejam aproveitadas e respeitadas como merecem.

Veremos mais adiante que apesar das inúmeras diferenças, podemos fazer várias comparações entre um framerwork css com um framework de software. Falemos um pouco então sobre o que eles são e como eles podem nos ajudar muito no desenvolvimento.

O que é?

É uma biblioteca compatível com padrões web, cross-browser, otimizada, com estilos CSS básicos pré-definidos que resolvem a maioria das situações comuns de desenvolvimento das interfaces web na linguagem CSS. Em suma, é um ou mais arquivos *.css válido(s), pronto(s) para uso e homologado(s) na maioria dos navegadores do mercado.

Vantagens:

Aqui vão alguns bons motivos para aderir ou pelo menos explorar as possibilidades dos CSS frameworks.

Equipe de desenvolvimento

A grande maioria dos CSS frameworks é desenvolvida pela comunidade, pelos melhores especialistas no assunto. É muito luxo você poder contar com equipes assim pra resolver problemas estruturais para o seu projeto não é? rs

Cross-browser

As estruturas definidas pelos CSS frameworks são testadas na maioria dos navegadores do mercado. Quem utiliza, não precisa se preocupar com o que é oferecido pelo framework, porque já houve uma equipe preocupada em testar cada detalhe em todos os navegadores.

Agilidade

A principal vantagem que esperamos de qualquer framework: Agilidade. No mundo da internet isso é primordial, recursos de desenvolvimento são escassos, o trabalho é grande e as mudanças são constantes. Ganhar tempo para conseguir dar o máximo de qualidade naquilo que realmente precisa se feito é extremamente necessário.

Flexibilidade

Na maioria dos CSS Frameworks podemos escolher configurações que se adequem ao nosso projeto, sendo assim podemos fazer a escolha mais “econômica” se tratando de consumo de banda e peso de página, e que vai nos oferecer os recursos que necessitarmos para o projeto entre esses recursos estão:

• . Grid customizado,
• . Tipografia,
• . css-reset,
• . Folhas de estilo otimizadas por mídia (Impressão, Tela/Projetor).
• . Suporte para layouts fluídos
• . Templates com estruturas SEO-friendly

Padrão de Código

Com o tempo, os desenvolvedores vão se acostumar com o padrão estrutural das páginas e isso poderá facilitar muito o trabalho, não só do desenvolvedor como do webmaster. Mais um ganho enorme em agilidade de desenvolvimento e qualidade.

Suporte / Documentação

Eu ainda não conheço equipe que faça documentação da implementação de CSS, como estruturar ou utilizar cada classe, ID ou coisas assim. Utilizando um framework você e sua equipe “ganham de brinde”, na maioria dos casos, uma ótima documentação e guia de consulta.

Mitos / Paranóias

Talvez pra alguns seja melhor mais saber o que um CSS framework NÃO é antes mesmo de saber o que ele realmente é. Segue uma lista de falsidades sobre o assunto:

- O trabalho do Webmaster se torna dispensável com os CSS frameworks.

Não!!!! Assim como um framework de software, o framework não faz nada sozinho. Além do mais as decisões relacionadas a escolha de um bom framework, com a configuração ideal para o projeto também é responsabilidade do webmaster. Não há porque temerem pelos seus empregos (pelo menos não por isso )

- O framework gera código automaticamente

Também Não!!! Apesar de existirem algumas iniciativas para tornar o CSS dinâmico, processado server-side. <desabafo>Sou completamente avesso a essas tecnologias e ficarei assim até que me provem que realmente isso pode ser útil, e que compensa substituir um CSS bem escrito que não consome mais recursos de servidor)</desabafo>, Os CSS frameworks que tem como objetivo gerar código dinamicamente.

- O Webmaster vai “desaprender” como faz CSS usando framework

Mais uma bobagem! Assim como um desenvolvedor não esquece como se programa quando usa um framework de software, o webmaster também não esquece como se faz HTML/CSS usando um framework. Se alguém até aqui ainda acha que não precisa mais conhecer (bem) CSS por causa de um framework, por favor, reinicie a leitura, obrigado!

- CSS Frameworks são pesados

Mais um engano. A grande maioria deles são bem leves e geralmente oferecem uma versão “minified”, ou seja, compactada. Você certamente teria que desenvolver “na unha” aquelas linhas de código de qualquer forma e talvez nem escreveria tão otimizado quanto.

Desvantagens

Como nem tudo são flores e aqui não é uma Central de Vendas de frameworks, existem sim desvantagens ao se utilizar CSS frameworks que devem ser pesadas na hora da escolha:

Bugs herdados

Se por um acaso a versão que você tiver utilizando tenha algum bug esse poderá ser herdado pelos seus elementos, já que como o próprio nome da tecnologia diz: são estilos em cascata.

Excesso de código

Como qualquer framework, nós nunca utilizamos 100% dos recursos oferecidos em nossos projetos, isso faz com que algumas linhas de código estejam perdidas sem nunca serem utilizadas. Por isso, a escolha do framework e da configuração deve ser bem pensada antes de começar o projeto.

Lista de CSS frameworks

Existem muitas opções de frameworks no mercado. Uma rápida pesquisa na rede trará vários deles, alguns bem completos, outros nem tanto, mas cabe á equipe optar pelo que melhor atende e explorá-lo. A dica é que não variar muito entre frameworks para que não haja confusão no padrão de nomenclaturas de classes, estruturas etc, porque no fim das contas vai exisitir uma curva de aprendizado do framework em que os usuários vão ter que se adaptar. Também não precisamos tornar um framework como “a única salvação” como se fosse uma religião ou time de futebol (Isso acontece muito quando se trata de framework de software). É preciso estar sempre atento às outras boas alternativas que existem por aí.

Como qualquer framework, é importante que a decisão sobre o seu uso seja bem planejada na concepção do projeto. Pode ser uma experiência arriscada migrar ou até mesmo atualizar um framework, uma vez que ja existe toda uma estrutura “pendurada” nele. Fica a dica.

- Blueprint – http://www.blueprintcss.org/

- YUI Grids – http://developer.yahoo.com/yui/grids/

- YAML – http://www.yaml.de/en/

- Elastic – http://elasticss.com/

- 960 Grid System – http://960.gs/

Padronização para elementos comuns em sites

Qual a vantagem real disso? Um desenvolvedor esperto perceberá que, usando ou criando os devidos plugins, a extração e conversão de dados para qualquer formato em uma página é muito mais fácil. Um exemplo interessante disso é o hCard, que permite puxar e exportar dados cadastrais ou eventos em um formato reconhecível por qualquer gerenciador de e-mails  (seja online, seja um outlook da vida).  Num futuro pode-se até pensar em browsers que já venham com funções nativas voltadas que use este tipo de recurso, valendo-se de APIs como o Google Maps ou o Yahoo Maps, por exemplo.

E claro, como toda padronização, ela auxilia na usabilidade,  pois facilita a vida de vários “interpretadores” (screen readers, browsers, aplicativo Air, etc) na forma de usar a informação fornecida.

Melhora na qualidade para indexadores de busca

Não encontramos dados do quanto de relevância os buscadores estão a dar para os microformats, embora tanto o Google quanto Yahoo já tenham anunciado suporte. De qualquer forma, o fato dos algorítimos de busca interpretarem qualquer coisa como texto (mesmo que sejam tags), já indica que os microformatos por si só são “alimentadores de relevância” por natureza.

Um exemplo que pode ser visto é este:  quando realizamos uma esta busca no Google, um dos resultados apresentados (o terceiro, logo abaixo do título) já possui quantidade total de reviews a respeito do estabelecimento procurado.  Isto é possível graças ao hReview que, como o proprio nome sugere, serve para destacar uma opinião sobre um produto, serviço ou quaquer outra coisa.

Humanamente “entendível”

Ao contrário de outros formatos de proposta similar, os microformats tem como conceito ser primeiro compreensível por seres humanos e somente depois por máquinas.  A sintaxe é muito mais intuitiva, mais simples de compreender e memorizar. Acredito que essa é de longe sua principal vantagem sobre o RDFa, por exemplo, que não só é um código mais complexo como ainda por cima possui uma série de padrões diferenciados. Outra vantagem sobre RDFa é que os microformatos permitem ao desenvolvedor a escrever BEM menos código, mantendo uma sintaxe simples, limpa e totalmente intelígivel para qualquer outra pessoa que mexa no código depois – mesmo que não familiarizada com estas definições (no futuro pretendemos entrar novamente no assunto RDFa x microformatos, agora não é o momento).

Aplicável ao HTML 5, XHTML 2

As próximas versões de HTML e XHTML tem, entre outras propostas, aplicar para a web do futuro o conceito de Web Semântica (aquela história de que toda informação deve ser um ‘pacote completo’ de dados e referências, manja?), o que vai suprir parte da necessidades propostas pelos Microformats. Embora muita gente já esteja usando estas definições, a web ainda não está pronta para lidar com eles – Por que não usar os microformatos, que não impactarão em absolutamente nada na codificação e já são aceitos e usados? Ele não conflitará em absolutamente nada com HTML 5 ou XHTML 2 e, de lambuja, ainda ajudará os buscadores a indexar e classificar seu site de forma bastante precisa.

Problemas com microformats

Em 2008 a BBC renunciou ao uso dos microformatos por conta do formato hCalendar. Este formato cria um problema de acessibilidade por usar a tag abbr como marcador e não como uma abreviação propriamente, o que confunde boa parte dos screen readers. Num contexto normal, ela seria usada assim:

<abbr title="Organização Mundial de Saúde">O.M.S</abbr>

Um screen reader habilitado para ler siglas por extenso leria este trecho como “Organização Mundial de Saúde”.

No caso do hCalendar, a tag é usada da seguinte forma:

<abbr title="20070312T1700-06">March 12, 2007 at 5 PM</abbr>

O screen reader não leria como data,  mas sim  “Vinte milhões, sete mil e trezentos e 12 TÊ mil e setecentos traço zero seis”.  Já existe um fix para isso sugerido pela própria Microformats.org (que são os pais da criança), usar span no lugar de abbr.

Até onde testamos e pesquisamos este foi a única problema registrado. Usamos o FANGs para emular a acessibilidade para deficientes visuais.

Mas é só isso?

Por enquanto sim. O assunto é extenso demais para ser tratado num único post – num futuro não muito distante voltaremos a ele e nos aprofundaremos em pontos mais específicos. Enquanto isso não ocorre, a lista abaixo fornece uma bela gama de coisas para brincar. Divirta-se!

Microformatos – Referências

http://microformats.org – site oficial do projeto. Todas referências, exemplos, geradores automáticos, wiki e lista de discussão estão lá.

http://en.wikipedia.org/wiki/Microformat – tópico na wikipédia, a informação técnica resumida.

https://addons.mozilla.org/pt-BR/firefox/addon/4106 – Operator, ADD-on do firefox que detecta e importa dados de microformatos. Tem alguns problemas ainda, mas já dá uma bela visão de usos.

https://addons.mozilla.org/pt-BR/firefox/addon/402 – FANGS: um emulador de screen reader. Infelizmente, após a atualização do Firefox para a versão 3.5 ele perde a compatibilidade. Espero que resolvam logo este problema, estava usando-o para uma pesquisa de acessibilidade.

http://www.semanticfocus.com/blog/entry/title/microformats-vs-rdf-how-microformats-relate-to-the-semantic-web/ – Artigo que aprofunda-se um pouco na discussão a respeito do formato RDFa vs Microformats.

http://googlewebmastercentral.blogspot.com/2009/05/introducing-rich-snippets.html – mostra a implementação feita pelo google para o formato hReview

http://www.google.com/search?q=Drooling+Dog+BarBQ – Link para a busca com o resultado do google.