Expressá-la

Coloque Stylesheets no Topo

Se você quiser uma página para carregar progressivamente, ou seja, queremos que o navegador para exibir qualquer conteúdo ele tem o mais breve possível, coloque o CSS no topo da página dentro do cabeçalho do documento. Isto faz com que as páginas parecem ser mais rápido carregamento, como esta facilita processamento progressiva da página. Isto é especialmente importante para as páginas com muito conteúdo e para os usuários em conexões mais lentas.

É um fato documentado que para melhorar a experiência geral do usuário, é importante para fornecer indicadores de progresso e feedbacks visuais. Para evitar ter de redesenhar os elementos da página, no caso, se a sua mudança de estilos, alguns navegadores, incluindo o IE, blocos de renderização da página até a CSS está totalmente carregada. Devido a isso, o utilizador é consegue ver uma página em branco.

Os W3 especificações do HTML, dos também afirma que a CSS deve me incluir na seção HEAD da página HTML. at the bottom of the page, so it's best not to use it. Observe também que, no IE @import se comporta o mesmo que usar <link> na parte inferior da página, por isso é melhor não usá-lo.

Evite usar características específicas do navegador

Filtros: uso do filtro aumenta o consumo de memória e é aplicado por elemento, não por imagem, então o problema é multiplicado. Além disso, os filtros são IE Proprietário, portanto não vai funcionar conforme o esperado em outros navegadores. Se você quiser fundos transparentes ou gradiente, use 1pixel com imagens.
Expressions: expressões de CSS são um bom recurso para ter em CSS, mas ainda é característica específica do IE. Além disso, é importante notar que, estas expressões são avaliada quando a página é processada e redimensionadas, rolado e mesmo quando o usuário move o mouse sobre a página. Escusado será dizer que isso poderia afetar o desempenho da sua página. Assim, em palavras simples, evite usar expressões CSS, a menos que você sente seus prós "pesa mais do que seus contras '

Externalizar você CSS

Usando CSS externo irá resultar em um carregamento mais rápido de páginas porque os arquivos JavaScript e CSS são armazenados em cache pelo navegador. CSS inline em documentos HTML são baixadas sempre que o documento HTML é solicitada. Isto pode efectivamente reduzir o número de pedidos HTTP feitas mas subsequentemente aumenta o tamanho do documento HTML. CSS externo são armazenados em cache pelo browser, o tamanho do documento HTML é reduzido sem aumentar o número de solicitações HTTP.

Por favor note que, se os usuários do seu site tem várias exibições de página por sessão e muitas das suas páginas reutilizar os mesmos scripts e folhas de estilo, há um benefício maior potencial de cache de arquivos externos.

Embale seu arquivo CSS

Embalagem ou esmaga o CSS é a prática de retirar caracteres desnecessários do código para reduzir seu tamanho, assim, melhorar os tempos de carregamento.

O CSS pode me esmagou, removendo todos os comentários e quaisquer caracteres indesejados, como espaços em branco, novas linhas etc

Publicar IE 6, MSIE tem sido gentil o suficiente para nós desenvolvedores de interface do usuário, adicionando algumas mais propriedades CSS padrão para a maioria dos outros navegadores padrão. Uma dessas propriedades úteis em "min-height". Propriedade bastante simples que não precisa de explicação prolixo. Quando um min-height para uma divisão for definido, ele sempre mantém essa altura conjunto quando o conteúdo que abriga ocupa menos do que pode segurar e importante (ao contrário da simples propriedade "height" baunilha) escalas ou seja CSS, se comporta como um cisão, "height" é definido como "auto" ...

Para alguns de nós desenvolvedores pobres, que ainda são necessários para código CSS, que também deve funcionar no IE6, un disponibilidade do "min-height", poderia ser um empecilho algum ... desespero Donot.

Felizmente, temos peculiaridades suficientes no IE, que nós usaríamos a vantagem fora e cortar nosso caminho até chegar ao nosso objetivo ... ou seja, fazer uma divisão DIVISÃO como se a sua min-height no IE6

Solução 1: Usar o Hack sublinhado [ ... Leia mais ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML: -
<div class="box1">Some dynamic content with variable height ...</div>

---

Solução 2: Usando o atributo CSS hack Selector

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>


O atributo CSS hack Selector aproveita do fato de os navegadores anteriores IE6 tha ignorou um seletor de atributos dos. Note-se a exigência de uma outra divisão recipiente com class = "Algumaclasse". Apenas o presense do atributo de classe para essa divisão, substitui a altura da cernelha é automático para Opera, Mozilla e MSIE7 e posterior. IE6, que não suporta seletores atributos dos, ignora-lo.

Ver Demonstração do hack min-height para IE6

Se você usar XML e XSL, então você pode ter vindo através de um tempo, quando você tem que brincar com atributos e valores de nós XML em XSL você. Eles são um monte de sites com informação de fôlego longo sobre isso, mas nenhum que eu encontrei foram breve e preciso ... Esta é nenhum tutorial XML / XSL, mas a minha tentativa de colocar em conjunto uma espécie de fraude lista ...

A amostra XML que iremos trabalhar com esta aparência ...

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>
</food>

Então vamos começar a transformar o nosso XML acima usando XSL

Exemplo 1: Exibindo valor em um atributo escolhido

<xsl:value-of select="/food/fruits/item[@name='orange']" /><br />
to get more information about <a href="{/food/fruits/item[@name='orange']/@moreinfo}" target="new" ><xsl:value-of select="/food/fruits/item[@name='orange']/@name" /> </a>

Resultado será parecido com HTML

Orange is the color and rich in vitamin C,
to get more information about <a href="http://www.orange.com" target="new">

Exemplo 2: Percorrer e mostrar todos os nomes de atributo XML e seus valores

<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>,
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>

Resultado será parecido com HTML


attribute name : name, attribute value : mango
attribute name : moreinfo, attribute value : http://www.mango.com
attribute name : name, attribute value : banana
attribute name : moreinfo, attribute value : http://www.banana.com
attribute name : name, attribute value : orange
attribute name : moreinfo, attribute value : http://www.orange.com
attribute name : name, attribute value : Papaya
attribute name : moreinfo, attribute value : http://www.papaya.com


Assista a este espaço, eu vou continuar atualizando esta com novas descobertas ...