Na coluna da semana passada, discuti a Yahoo! Developer Network, com foco nos recursos JavaScript (mais importante, calendário) disponíveis na biblioteca da interface do usuário do Yahoo! Eu queria dedicar um pouco mais de tempo cobrindo outra área da biblioteca YUI que fornece ferramentas CSS. Essas ferramentas permitem combinar facilmente design baseado em CSS com aplicativos da web.
Suporte ao navegador
Uma das principais características da ferramenta CSS é que ela foi classificada para fornecer suporte perfeito para navegadores Classe A. A classificação do suporte do navegador é puramente uma classificação do Yahoo!, e você pode ver a descrição completa em seu site, que basicamente descreve como o CSS se comporta bem nos navegadores do mercado hoje.
Nesta tabela online, os navegadores são divididos em três níveis de suporte a navegadores (A, C e X). O nível A é o nível mais alto de suporte. Ao aproveitar o poder dos padrões web modernos, a biblioteca YUI descobre uma experiência Classe A que oferece funcionalidade avançada e fidelidade visual. As categorias de suporte e os arquivos relacionados dão uma ideia de onde o CSS é suportado, mas deve estar disponível em todos os navegadores (com possíveis downgrades).
CSS reutilizável
A biblioteca YUI inclui três áreas ou recursos CSS, abrangendo formatação, introdução de fontes e layout baseado em grade (colunas e linhas). Esses termos são usados no site para descrever esses três elementos:
Grades de página: permite incorporar de uma a quatro grades de colunas dentro da capacidade do modelo que você está usando.
Fontes: Fornece padronização e controle de tipografia entre navegadores. Em geral, ele fornece fontes e alturas de linha consistentes, ao mesmo tempo que oferece suporte total aos ajustes de fontes do usuário (dentro do navegador).
Redefinir: fornece padronização entre navegadores de atribuições padrão para elementos HTML. Ele também remove expressões padrão comuns em navegadores, como o uso de negrito para elementos enfatizados, para ajudar a garantir que todas as definições de fonte sejam intencionais e que os elementos sejam sempre usados por seu significado semântico e não pela expressão visual habitual.
Depois de instalado, cada elemento do download da biblioteca YUI fica disponível nos seguintes diretórios/arquivos no servidor web:
Grades de página : buildgridsgrids.css
Fontes: buildfontsfonts.css
Redefinir: construir eset eset.css
Você pode instalar esses diretórios base em seu próprio servidor web ou colocá-los em seu site para que possa referenciá-los conforme necessário. Uma característica importante do CSS (além de ser gratuito) é que ele é exaustivamente testado e depurado antes de ser lançado. Vamos dar uma olhada mais de perto nas ferramentas CSS em ação.
Layout de página de grade
O layout baseado em grade é a força motriz por trás de quase qualquer design de site ou layout de página. No passado, isso geralmente era feito por meio de tabelas HTML, mas o CSS oferece um tremendo poder e flexibilidade para o layout da página. Page Grid fornece código para construir páginas com colunas e linhas de acordo com suas necessidades.
No nível mais básico da grade de página, ele fornece sete modelos de página da Web, seis dos quais definem layouts detalhados de conteúdo principal/barra de ferramentas, o sétimo modelo define um layout sem barras de ferramentas, e o conteúdo principal ocupa toda a largura da página; Os nomes desses modelos são os seguintes:
yui-t1: Contém uma barra de ferramentas com largura de 160px à esquerda e uma área principal com largura de 570px.
yui-t2: Contém uma barra de ferramentas com largura de 180px à esquerda e uma área principal com largura de 550px.
yui-t3: Contém uma barra de ferramentas com largura de 300px à esquerda e uma área principal com largura de 430px.
yui-t4: Contém uma barra de ferramentas com largura de 180px à direita e uma área principal com largura de 550px.
yui-t5: Contém uma barra de ferramentas com largura de 240px à direita e uma área principal com largura de 490px.
yui-t6: Contém uma barra de ferramentas com largura de 300px à direita e uma área principal com largura de 430px.
yui-t7: Contém uma área principal com largura de 750px e sem barras de ferramentas.
Você pode combinar (ou editar, se for ousado o suficiente) esses modelos para atender aos seus propósitos. A Listagem A usa o primeiro layout para fazer o layout de uma página (nota: a ferramenta CSS é instalada no diretório padrão do servidor web).
Lista A
<html><head>
<title>Exemplo 1 de ferramentas CSS do Yahoo</title>
<link rel="stylesheet" type="text/css" href="build/grids/grids.css">
</head>
<corpo>
<div id="doc" class="yui-t2">
<div id="hd">Cabeçalho da página</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">Área Principal</div>
</div><div class="yui-b">Coluna Esquerda</div>
</div>
<div id="ft">Rodapé da página</div>
</div></body></html>
Algumas notas na página HTML:
O layout é fornecido para a página inteira - a tag div principal recebe a classe yui-t2. Isso mostra que o segundo modelo é usado.
A página é dividida em áreas de cabeçalho, corpo e rodapé. O cabeçalho recebe o identificador hd, o corpo é bd e o rodapé é ft.
O corpo principal da página é dividido na área esquerda (se o modelo suportar) e na área principal. Ambos recebem a classe yui-b, mas a área principal é anexada ao atributo identificador yui-main em sua tag div.