Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

Nesse Cheat Sheet desenvolvido por Michael Leigeber você vai aprender a economizar algumas boas linhas de código em suas declarações CSS:

Download

• Mirror 1
• Mirror 2

A proriedade clip do CSS é utilizada para recortar imagens. Seu uso consiste no seguinte:

clip: rect(10px, 250px, 5px, 5px)

Só que é uma prorpiedade não muito utilizada por causar problemas no Internet Explorer, pois o mesmo não admite o uso de vírgulas nas sentenças. Para solucionarmso esse problema, basta eliminarmos as vírgulas, deixando da seguinte forma:

clip: rect(10px, 250px, 5px, 5px)
clip: rect(10px 250px 5px 5px)

A primeira declaração é para browsers Standard Compliance, onde o IE não entende, e a segunda é para o dito cujo.

Via: Gran Impetu - Internet Explorer y la propiedad clip

No site CSS Globe você pode encontrar um tutorial onde é possível fazer barras de progresso animadas somente com CSS, sem uso qualquer de JavaScript ou alguma linguagem de programação. Para quem achava que isso não era possível, fica aí a dica.

Utilizar ou não utilizar algum Framework? Essa é uma pergunta que se passa na cabeça de todo desenvolvedor. Eu, aprticularmente, não gosto muito deles, queria até desenvolver um Framework CSS, mas vi que não ia ter tempo para me dedicar a isso, e larguei mão desse projeto. Mas uma coisa é válida, se você puder estudá-los a fundo, é muito bom para conhecer novas técnicas, deixar vícios de lado, e quem não tem seus vícios não é? E visitando o site Kabytes descobri uma lista com os 12 melhores Frameworks em CSS:

• 1. Elements CSS Frameworks
• 2. WYMstyle: a CSS framework
• 3. YAML CSS Framework
• 4. YUI Grids CSS
• 5. Boilerplate CSS Framework
• 6. Blueprint CSS
• 7. Schema Web Design Framework
• 8. CleverCSS
• 9. Tripoli Beta CSS Framework
• 10. ESWAT Web Project Framework
• 11. CwS CSS Framework
• 12. My (not really mine) CSS Framework

Update: 23 Frameworks CSS

Caso você tenha que utilizar tabelas em seu site, quando se trata realmente de uma tabela, é conveniente ter em conta que existe uma propriedade no CSS não muito utilizada que pode melhorar e muito a renderização de nossas tabelas.

A propriedade se chama table-layout e nos permite indicar se queremos que a tabela tenha o seu fluxo com o tamanho fixo ou o seu tamanho acompanhe o fluxo do conteúdo:

.fixed_table {
    table-layout: fixed;
}

.auto_table {
    table-layout: auto;
}

O valor fixed nos permite renderizar a tabela de uma forma mais rápida, já que o tamanho das celulas depende das colunas, e não do conteúdo, por isso a renderização é mais rápida. Ótimo para se utilizar em tabelas muito grandes e que possuem conteúdo muito parecido. Já o valor auto é dependente dos valores das células, por isso é necessário ler toda a tabela, se recomenda utilizar quando a tabela tem conteúdo muito variado.

Referências

• Sentido Web - Render más rápido de las tablas con CSS.

Imagine a situação acima, ano de 2100, os browsers em versões altamente avançadas e nós desenvolvedores ainda testando os sites no Internet Explorer 7. Não duvido disso.

Via: Beast-Blog.com.

Umas das coisas que mais atormentam os desenvolvedores hoje em dia é a forma como cada browser trata diferentemente as propriedades CSS. Já basta as diferenças de renderização que existem entre os Internet Explorer 6 e 7, onde acaba aumentando ainda mais nossos problemas. Durante muio tempo eu sofri com isso, ao decorrer do desenvolvimento de um site, tudo corria bem, mas derrepente, tudo ia por água abaixo no IE, mais uma vez ele, estragando a nossa vida, insistindo em ser superior em tudo, não seguindo corretamente padrões estabelecidos. Mas espera aí, sempre que eu iniciava meu CSS, as primeiras declarações eram sempre essas:

* {margin:0; padding:0}

Isso fazia com que todos os objetos da página iniciassem com suas margens e paddings zerados, para tentar igualar os objetos entre os browsers, mas não era suficiente. Foi então que conheci uma solução proposta por Eric Meyer, onde ele reseta todas as propriedades HTML para que fiquem iguais em todos os navegadores.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

No começo senti uma certa resistência em utilizar todas essas propriedades CSS em meus projetos, sendo que um simples seletor universal resolvia tudo, mas após utilizá-los meus problemas diminuiram quase que totalmente, no Internet Explorer então, dava até gosto de ver, tudo bonitinho. Experimente você também, pelo menos uma vez, e poste aqui sua experiência. Depois não diga que eu não avisei.

Esse manual é uma tradução do artigo de Reinhold Weber: 50+ CSS Best Practices and Coding Guidelines.

Coisas a evitar

• CSS in-line.
• Tamanho de fontes absolutas.
• Utilizar “aspas” para marcar o caminho das imagens.
• CSS Hacks.
• Redeclarar valores herdados.
• Aplicar padding, bordas e larguras fixas para os elementos.
• !important e position:absolute.
• Nomes para Classes e IDs baseados em sua aparência.

Boas práticas

• Declarações CSS em uma única linha.
• Comente seu código.
• Organize seu arquivo CSS.
• Indentação conforme necessário.
• Construa um código de fácil leitura.
• Utilize um sistema de nomemclatura comum.
• Declarações em Ordem alfabética.
• O “;” não é necessário para a última declaração.
• Quando uma unidade declarada for 0 px/em/%/… você pode omitir a unidade.
• Utilizar o mínimo de divs, propriedades e seletores CSS.
• Agrupar seletores lhe permite selecionar vários elementos de uma só vez.
• Muitas propriedades podem ser abreviadas.
• Cores devem ser declaradas em modo Hexadecimal.
• Defina Pseudo-classes para seus links na seguinte ordem: LoVe/HAte.
• Defina elementos como margin, padding e bordas na seguinte ordem: TRouBLed.
• Faça uso seletores filho.
• Faça uso de diferentes tipos de mídia.
• Nomeie suas classes e ID’s referentes a função, e não a aparência.
• Aprenda a explorar o efeito cascata. CSS tem sofisticadas regras de herança.
• Faça uso de seletores de atributo. Seletores de atributo correspondem a elementos com base no valor dos atributos.
• Deixe os textos em letras maiúsculas através de CSS.
• Organize os elementos por grupo, como: header, container, footer…para uma melhor visão global.
• Se inspire nos códigos de grandes empresas.
• Busque inspiração com os gurus do design.
• Dê uma olhada no Framework CSS Blueprint, de lá você pode tirar grandes idéias.

Facilite sua vida

• Utilize algum Cheat Sheet CSS.
• Teste seu CSS primeiramente em browsers mais avançados, e depois nos outros, nunca antes.
• Quando estiver em dúvida, valide seu código.
• Teste embutido, lance importado.
• Mantenha uma biblioteca com classes úteis em CSS.
• Experimente utlizar algum compressor de CSS on-line, alguns dos métodos que eles utilizam para reduzir o tamanho dos seus arquivos CSS você pode utilizar para desenvolver um arquivo de forma racionalizada.
• Utilize a Web Developer Toolbar para Firefox.
• Utilize algum framework CSS, por exemplo “Blueprint”.

Você sabia?

• Você pode utilizar multiplas classes em um único elemento.
• Defina valores constantes ao longo de um documento CSS.

Uma opção simples é definir cores para cada estado em que você deseja. Ao decorrer do documento, você pode ir alterando se necessário. Isso é bastante trivial.

Uma vez que um elemento pode ter mais de uma classe sobre ele, você pode aplicar classes para cada constante ou variável que deseja criar, e em seguida atribuir essas classes a elementos (x)HTML que deseja afetar. Uma vez que um elemento pode ter mais de uma classe sobre ele, este não deve interferir em eventuais utilizações existentes. Portanto, se você deseja alterar a cor, tudo o que precisa fazer é alterar a cor na classe definida.

Pode utilizar linguagens Server-Side para escrever seu CSS.

Existem alguns exemplos de CSS Server-Side pré-configurados hoje. Parecem ser os melhores desenvolvidos.

• Pode adicionar estilos CSS aos seus Feed RSS.
• Pode previnir o Spam com CSS.
• Você pode customizar o design do seu site dinamicamente criando o arquivo CSS com PHP.
• Existem idéias para padrões de desenvolvimento em CSS.

É muito fácil se dar conta quando um site foi desenvolvido pensando no usuário ou não. Parece algo estúpido, mas não não todas as pessoas que entendem que o site irá ser visitado por pessoas que não são iguais a ela mesma. Nem todos se sentem bem em todos os lugares. Sem dúvida, sites que antes de seu desenvolvimento são extremamente “pensados” são muito mais ricos que os outros.

Esses sites compartilham algumas características que fazem a visita do usuário muito mais agradável e ajudam a cumprir seu objetivo pelo qual visitou o site de maneira muito mais simples e rápida.

Carregamento Rápido

Um site deve carregar o mais rápido possível. Se o visitante pode encontrar a informação solicitada em seu site em outro, não tenha dúvida que ele irá logo após seu site demorar alguns segundos para carregar. Existem várias maneiras de se fazer com que seu site carregue mais rápido, abaixo você pode ver algumas delas:

• Como fazer com que as páginas do Wordpress carreguem mais rápido.
• Arquivos CSS bem menores.
• Arquivos CSS menores.

Acessibilidade

Coo coentado anteriormente, nem todos visitam os sites com as mesmas condições, ou seja, não são todos que fazem o uso de um PC com uma conexão de 2.5 MB em um monitor de 17 polegadas com Firefox sob Windows XP. Você deve desenvolver os sites para serem acessíveis por todos os meios: PCs, Notebooks, Palms, Dispositivos móveis, etc.

Isso significa que nem sempre será possível ver as imagens, nem sempre será possível reproduzir Flash e nem ver Frames. Deve-se buscar uma forma alternativa de o conteúdo chegar ao usuário, muito mais hoje em dia onde a navegação móvel cresce rapidamente num futuro não tão distante.

Navegação

O usuário deve estar a todo momento a não mais de 2 clicks de seu destino. Isso não é fácil de fazer, mas facilita e muito as visitas. Além disso é importante que as áreas mais destacadas do site estejam á vista do usuário e sejam fáceis de acessar. Também é importante hierarquizar os links dentro de sua navegação, destacar seções em seu site, e essas também devem ser fáceis de acessar.

O que seu site não pode deixar de ter é uma área onde o usuário pode contactá-lo, é muito importane relacionar-se com seus visitantes. Os demais links e sua devida disposição servirão para orientar o usuário em uma espécie de visita guiada por seu site ajudando muitas vezes a cumprir o objetivo.

Informação

Cada visitante no geral chega a seu site buscando algo. Certamete aquilo que você sabe (ou deveria saber) é que deve servir aos usuários com uma bandeja de prata e uma boa taça de vinho. Ir ao ponto com o que você tem de dizer é uma boa maneira.

Referências

Tradução do artigo original de: Gran Impetu - Características de un sitio user friendly.

No Safari, quando temos o foco em algum campo input ou textarea, você pode ver que em volta deles é formado um rastro de cor azul para dizer que o campo ganhou o foco. Isso, por questões de acessibilidade é muito interessante, mas se você tem alguma imagem de fundo nos inputs que não tenham borda, isso é meio desastroso. Para solucionar esse problema, vaos utilizar a propriedade outline do CSS, que é a mesma uilizada para remover as linhas que ficam em volta dos links:

input, textarea  {
    outline:none;
}

Pronto, agora você não tem mais nenhum rastro azul em volta dos inputs e textareas.

Referências

• Daniel Mota - Evitar el halo azul en safari.