Expressá-la

CSS completou 10 anos existência este ano! Aqueles que estiveram ao redor por um tempo, ganhando o seu pão (ou não) usando o CSS, então você pode consciência de como temos fome de uma boa selecção de fontes. Mesmo com a falta de fontes designers como aqueles em CSS Zen Garden fizeram uso de imagens de fundo CSS para substituir fontes na busca de fazer alguma justiça a seus projetos. Nós também tentamos Flash / JavaScript ® hacks para atingir os objetivos de nosso projeto. De maneira nenhuma este é um caminho errado para obter as fontes que desejamos em nossos projetos de web, mas definitivamente, não é a forma mais desejável. e ao longo dos anos web designer, como eu, totalmente contou com dez ou mais fontes para seus projetos.

Desenvolvimentos recentes na web standards e formatos de letra tornam possível processar texto HTML em caracteres tipográficos que não sejam as mesmas fontes padrão antigo. Vem no "@ fontface" decleration CSS.

@ Fontface provids uma solução para link para o arquivo fonte real e recuperá-la na web. Usando @ fontface, os designers podem usar fontes sem ter que congelar o texto como imagens de fundo. A aplicação é muito simples, como mostrado abaixo, mas como todas as coisas boas têm um papel CON-lo, nem todos os navegadores suportam um "tipo de fonte" única. Se você estiver planejando usar fontface @ no site com necessidade de suporte cross-browser, então você terá que fornecer fontes para vários tipos de font-o mesmo.

1. TrueType - Um formato projetado para ficar bem na tela. Recomendado especialmente para o Windows navegadores (Chrome).
2. OpenType (CFF) - Este formato é melhor para o trabalho de impressão e nem sempre ficam bem em Windows.
3. EOT - Você precisa desse formato se você deseja direcionar o Internet Explorer. IE não vai usar qualquer outro formato. Nosso EOT seriam considerados "Lite", já que não são nem comprimida nem o domínio restrito.
4. SVG - Este é um formato XML suportada por alguns navegadores, incluindo o iPhone.
5. WOFF - Este cross-browser, web-somente o formato da fonte é leve (dados da fonte é compactado) e pode ser compilado com TrueType ou PostScript (CFF) descreve. Hoje é suportado pelo Firefox 3.6 +.

Usando @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular ';
 src: url ('CalligraphyFLF.eot');
 src: local ("CalligraphyFLF '), local (' CalligraphyFLF '), formato de url (' CalligraphyFLF.woff") ("WOFF '), url (' CalligraphyFLF.ttf ') formato (' truetype '), url (' CalligraphyFLF . svg # CalligraphyFLF ') formato (' svg ');
 }
 @ Font-face {
   font-family: "O tipo de letra";
   src: url ("fonts / font_filename.eot");
   src: local ("nome alternativo"), local ("Alternatename"),
     formato de url ("fonts / font_filename.woff") ("WOFF"),
     formato de url ("fonts / font_filename.otf") ("OpenType"),
     formato de url ("fonts / font_filename.svg # font_filename") ("svg");
   }
 h2 {font-family: "O tipo de letra", Georgia, serif;} 

Como você pode ver no exemplo acima, para incluir o tipo de letra escolhido, tem de se vincular a um conjunto de fonttypes para o mesmo tipo de letra. Daí as pessoas se referem a ele como "Kit Fonte".
Há Kits de fonte disponíveis que explicitamente permite a ligação com o @ propriedade CSS font-face-to-lo sob End User License Agreement (EULA).

Recursos úteis WebFont:

• Fontes disponíveis para @ font-face-embedding página wiki em http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Ele é um designer de renome fonte que fez centenas de interessantes fontes TrueType disponíveis gratuitamente para uso na web. Suas fontes são elegantes, decorativo, e brincalhão.
• Dieter Steffmann é outra grande fonte de designer. Ele também fez muitas fontes bonitas disponíveis para qualquer um usar.
• Loja Fonte : oferece fontes projetadas especificamente para uso na web. Mais de 30 das famílias FontFont mais bem-sucedidos estão agora disponíveis como FontFonts web. FontShop tem também um detalhado guia do usuário WebFont http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Esquilo Fonte : Vitrinas todas as fontes que Squirrel Font oferece para uso com a incorporação CSS @ font-face. Esquilo Font oferece uma quantidade impressionante de tipo, faz com que seja muito simples de escolher um para fora, e com folga oferece "kits" - a fonte de sua escolha, em diversos formatos, embalados com demo HTML & CSS que usa muito atual sintaxe @ font-face . Eles também oferecem uma maneira de fazer suas próprias @ font-face kits . Se o tipo de letra que pretende utilizar foi licenciado de forma adequada (os que vêm com o computador não são necessariamente bem), o gerador produz EOT, SVG, e hey! WOFF arquivos.

Outra tut rápido. Aqui é algo simples e agradável usando o poder do CSS ... mas foi concieve difícil (e certamente não era eu), para começar. Adicionando Dropshadow, pode ser um pedaço de bolo para muitos de nós, usando algumas ferramentas de edição de imagem como o Photoshop anf fogos de artifício etc
A razão pela qual, optei por sombra usando CSS é que, geralmente durante a criação de um design de página / html de um aplicativo, os requisitos de manter a iteração. O que quero dizer é, em um site já existente, com muitas imagens, como as que exibem freinds lista ou uma galeria de imagens, será difícil para o reprocessamento de toda a carga de imagens que já haviam sido descarregadas para adicionar ou remover as sombras, para que matéria.
Então, se você fez um pouco de pensamento frente ao criar os htmls para adicionar essas divisões extras ou geralmente a situação é que você tem uma lógica de loop gerando esses ícones / Miniaturas em XSL, PHP. JAVA ou qualquer linguagem de programação / scripting outro, você pode adicioná-la a qualquer momento, então é apenas a questão de mostrar e esconder essas sombras usando a propriedade Display CSS, como por os clientes em constante mudança requisitos ... Eu havn't feito esse tipo de visão de futuro antes disso ... mas ahev começou agora!

No exemplo abaixo, a imagem original é a sombra livre e as dropshadows são aplicados como necessário! Além disso, eu ter ido um pouco mais, usando os truques da minha Tut anteriores (Well! estes são, provavelmente, menor variedade de tutoriais, por isso só se justifica chamá-los de "Tut" 's) sobre Usando CSS propriedade do clipe para mostrar apenas

Imagem Original

Dropshadow Resultados CSS

Veja o Demo | Download de SourceFiles

Por que eu quero entender isso?? Humm ...!!

A maioria dos escritores CSS concordaria que o CSS propriedade Clip é provavelmente uma das propriedades não-utilizados CSS. Era tão verdadeiro para mim também e foi mais feliz para negligenciá-lo, até que comecei a modificar o MooTools DOIS Knob componente Slider (pino) (com indicador de Range) .

Houve uma boa sugestão de um dos utilizadores de componentes para modificar o componente deslizante utilizando imagens recortadas backgroud (contra uma divisão de largura variável) para indicar a gama deslizante. Assim chegou a minha hora de entrar na diversão, mas un fretado (para mim é claro) águas da propriedade Clip CSS.

Bem! quão difícil pode ser? Não muita coisa ... SIM e NÃO. A sintaxe a utilizar a propriedade Clip CSS é muito vertical, mas o significado / usuage é um pouco croocked. Com uma memória como a minha, toda vez que eu sento para retocar a minha Script Slider ... Tenho tokeep referindo-se ao uso desta propriedade CLIP, para me lembrar a lógica que eu criei no meu script .... DAÍ! pensado para pen-lo para baixo, com uma esperança de lembrar que o futuro (e também para o benefício daqueles que parecem boggled pela propriedade Clip CSS)

O que Clipe CSS fazer?

Clipe é parte do módulo de efeitos visuais do CSS 2,1. Simplificando, seu trabalho é colocar uma janela visível em cima de um objeto que está sendo cortada, portanto, recorte de imagens e criação de miniaturas sem ter que criar arquivos adicionais (Já coloquei este recurso para melhorar o uso do componente Slider )

Usando a propriedade Clip CSS, você pode criar um recorte usando a forma rect. Como muitas outras propriedades CSS (como margem de preenchimento etc,), utilizando rect requer quatro coordenadas superior, inferior, direita, esquerda (TRBL). A natureza croocked desta propriedade reflete quando você dar uma olhada no clipe como calcula a região de corte, usando essas quatro coordenadas (envia cérebro em um lance por um tempo). Agora, para confundi-lo do fundo começa a partir do topo, eo direito começa a partir da esquerda. . Você vê o que eu disse? .... Por isso este post ...

Esta pequena confusão pode facilmente desaparecer, com esta explicação visual da propriedade CSS Clip / rect como abaixo!!

Clipe Requisitos CSS

A tarefa que temos começado é para cortar a imagem em miniatura a seguir em uma imagem mais quadrada olhando (e também uma imagem de grande-angular)

Thumbnal Original / Imagem	Requisitos Clipe para Sqaure Thumbmail

Clipe Resultados CSS

Veja o Demo | Download de SourceFiles

Antes tínhamos que lidar com CSS para criar layouts de nossas páginas, alinhando algum conteúdo dentro de uma célula da tabela parecia jogar apenas criança. Basta definir o "alinhamento" ou propriedade "valign" da tabela para o alinhamento de sua escolha, pedaço de bolo!
Com layouts CSS, embora tenhamos "vertical-align" propriedade para os elementos, ele não parece ser tão simples como a "alinhar" ou "valign" propriedades. Para ser mais specifiic o "vertical-align" nunca parece resolver qualquer um dos seus problemas, especialmente se forem escrever uma peça de cross-browser CSS.

Sem o uso de tabelas HTML, o problema da centralização no objeto, seja uma imagem ou um texto dentro de uma divisão contendo, provavelmente tem sido cada UI / CSS pesadelo desenvolvedores em algum ponto. Este problema ainda extrapola as suas preocupações de alinhar, se o objeto a ser centralizado é de natureza dinâmica, isto é, quando a sua altura é variável (altura desconhecido).

Embora não há nenhuma solução conhecida para a frente que iria trabalhar em toda a gama de navegadores que temos de lidar, a solução que eu tentei chegar a faz parece funcionar em todos os navegadores poucos que eu tentei em (IE6, IE 7 , FF).

SOLUÇÃO:
Em navegadores como Mozilla, Opera e Safari, O estranho comportamento "vertical-align" propriedade pode ser trazido para os seus sentidos, simplesmente definindo o "display" de propriedade da divisão contendo a "table-cell" (display: table-cell) .

O problema ainda permanece com a família de navegadores IE, que, no entanto, parecem não entender o que com o "table-cell" propriedade e ignorantes como são, eles simplesmente ignorá-lo. A solução dada abaixo, embora simples, anúncios de alguns elementos mais para o seu DOM HTML para fazer as coisas acontecerem.

A CSS e HTML se parece com isso
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> visualizações: 3456 </ div>
</ Div>
</ Div>

O resultado se parece com isso: -

ver a demo aqui | baixar arquivos de origem (baixado 448 vezes)

TOP Alinhar CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> visualizações: 1234 </ div>
</ Div>
</ Div>

O resultado se parece com isso: -

Alinhar Parte Inferior CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> visualizações: 1234 </ div>
</ Div>
</ Div>

O resultado se parece com isso: -

ver a demo aqui | Faça o download aqui

Parece que as idades, desde que eu estava tentando encontrar uma solução razoável para este problema de alinhamento. Mas agora, com esta solução, me sinto em paz pouco.

Com uma esperança de que algum dia

• vertical-alinhamento propriedade em CSS funcionará como ele faz dentro de uma célula da tabela, sem ter que bater muito em torno do arbusto
• Pelo menos, estabelecendo margin-top: auto e margin-bottom: auto, dará como resultado mesmo com a margem esquerda ea margem direita conjunto para auto
• As guerras do navegador vai acabar algum dia.
• Haverá apenas um navegador para a ALL.

Faça o download do CSS e HTML da solução acima aqui (Transferido 448 vezes) .. de compreensibilidade, o CSS não está sendo otimizado

PS: E pelo jeito, são miniaturas de algumas fotos que tenham clicado ...

Se a sua exigência é para dividir um valor de nó em um XML, que contém uma seqüência de caracteres delimitada de valor, em itens individuais, então você chegou ao lugar certo ... ter um olhar para o exemplo abaixo. Se você está familiarizado com um pouco de XML e XSL ... Eu não acho que você iria precisar de qualquer explicação.
Além disso, este exemplo inclui o uso de funções como XSL xsl: call-template, xsl: substring, antes, xsl: substring-after, se é isso que você está depois.

XML para ser transformado (food.xml): -
Suponha que a tarefa é tokenize a seqüência de caracteres delimitados por vírgula, nos a tag "keywords"

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<keywords>Fruits, Vegetables, Pulses, Meat, Cereals </keywords>
</food>

XSL (food.xsl): -

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>XSL 1.0 Delimited String Tokeniser</title>
</head>
<body>
<xsl:value-of select="food/meta"/>
<div >
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="food/keywords" />
<xsl:with-param name="delimitr" select="','" />
</xsl:call-template>
</div>
</body>
</html>
</xsl:template>
<xsl:template name="tokenize">
<xsl:param name="string" />
<xsl:param name="delimitr" />
<xsl:choose>
<xsl:when test="contains($string, $delimitr)">
<div style="border:1px solid red;">
<h3><xsl:value-of select="substring-before($string,$delimitr)" /></h3>
<xsl:variable name="data" select="substring-before($string,$delimitr)"/>
</div>
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="substring-after($string, $delimitr)" /><xsl:with-param name="delimitr" select="$delimitr" /></xsl:call-template>
</xsl:when>
<xsl:otherwise>
<div style="border:1px solid red;">
<h3><xsl:value-of select="$string" /></h3>
</div>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>

Resultante de saída HTML: -

<div>
<div style="border: 1px solid red;">
<h3>Fruits</h3>
</div>
<div style="border: 1px solid red;">
<h3> Vegetables</h3>
</div>
<div style="border: 1px solid red;">
<h3> Pulses</h3>
</div>
<div style="border: 1px solid red;">
<h3> Meat</h3>
</div>
<div style="border: 1px solid red;">
<h3> Cereals </h3>
</div>
</div>

Escusado será dizer ... basta alterar o parâmetro "delimitr" para o delimitador de sua escolha

Se você já fez (ou fazer um) um menu vertical usando itens da lista (li) tags e CSS, você pode encontrar, este ainda um outro bug no Internet Explorer, onde o IE 6 insere estas lacunas entre os itens de lista que contêm elementos nível de bloco, ou seja, se há qualquer espaço em branco entre os itens da lista na marcação. Obrigado, mas não, obrigado, a versão do IE 7 parece livre desse bug.
Se gosta de mim, e muitos mais, você pertence a esse grupo de desenvolvedores frustrados, que ainda têm para obter os seus novos layouts, trabalhando no IE6 também, então isso pode ser útil. Dê uma olhada ...

Marcação de exemplo:

<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> Sobre </ a> </ li>
<li> <a href="#"> Serviços </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Fale Conosco </ a> </ li>
</ Ul>

Você pode criar um pouco de CSS, semelhante a um abaixo, para transfrom a marcação acima em um menu vertical ....

Exemplo de CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; width: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Os resultados que você verá ...

A solução para este bug ... (modificado / adicionado CSS em negrito e itálico)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * este contém itens de lista flutuou * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Isso corrige o * /
width: 100%; / bug * espaço em branco no IE6 * /
}
# Menu a {
bloco; cor:: display # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Se a solução acima doesnot parecem funcionar (por razões conhecidas apenas para IE6) ... tentar este método em vez

Basta adicionar esta adicionais IE6 estilos únicos a sua marcação ...

<! - [If lt IE 7>
<style type="text/css">
# Menu li a {display: inline-block;}
# Menu li a {display: block;}
</ Style>
<[Endif] ->

Se XML / XSL transforma é o seu Domian, então há momentos em que queremos um pedaço de código dinâmico para ser usado item de biblioteca (para ser re-utilizável). O que quero dizer, provavelmente poderia ser mais claro com este cenário de exemplo.

Imagine que você está criando um site (e usando XML, XSL transfroms é claro) ea maioria das páginas teria um Módulo de Comentários. Bem! em seguida, copiar ou colar esse código em cada modelo de página (que eu não tenho dizer, mas fazer a manutenção e retrabalho um pesadelo) ou ainda melhor, você cria um arquivo de inclusão que pode ser puxado, onde quer que você o quer em sua página ( s) ...
Então, como vamos criar um arquivo XSL INCLUDE e incluí-lo dentro de outro arquivo XSL? Aqui está como ...

Apenas para tornar as coisas claras ... aqui está a lista rápida de arquivos que você criar ... aqui, estaremos incluindo informações sobre frutas e verduras em uma página pai chamado alimentos.

1. food.xml - arquivo de dados XML em que a transformação será aplicada
2. food.xsl - arquivo XSL principal, que irá transformar o nosso food.xml
3. inc_fruits.xsl - XSL incluir o arquivo que irá processar dados frutas
4. inc_vegtables.xsl - XSL incluir o arquivo que irá processar dados vetetables

Eu não acho que tenho explicar muito, os códigos para elementos acima referidos, será auto-explicativo ...

FOOD.XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<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>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<hr/>
</ Body>
</ Html>
</ Xsl: template>
</ Xsl: stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Download de todos os arquivos acima aqui (250 downloads)

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

A redefinição CSS é / são CSS para definir um número de estilos de elementos para uma linha de base específica que cria consistência entre vários navegadores.

Todos nós temos sido através dos pesadelos de escrever CSS cross-browser do. Então, quando começamos a escrever nosso CSS, É uma prática para redefini-la primeiro para remover / redefinir as inconsistências cross browser. Redefine CSS, são simples linhas de CSS que você começa o seu CSS com, dando-lhe uma base limpa para começar a construir o seu em cima.

O redefine CSS que normalmente tendem a usar esta aparência

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ul, ol {
list-style: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

Redefinir o tamanho da fonte navegador
Além disso, note a reposição que tem sido aplicado ao tamanho do navegador de fonte na linha seguinte ...

html {font-size: 76%;}

O CSS acima redefine o tamanho da fonte navegador para 10 pixels, o que torna possível trabalhar com tamanhos de fontes relativos (que é todo importante a partir de um acordo WAI prespective)
Por exemplo, na seguinte definição, tamanho da fonte em um período é definido como 10 pixels e que na do n ° é definida como 14 pixels ...

span {font-size: 1em;}
p {font-size: 1.4em;}