Melhores práticas na utilização de uma linguagem.. Bem, em última instância, a melhor prática é a que melhor funciona para cada um.

Mas vou sair um pouco dos extremos para apresentar algumas práticas na criação de folhas de estilo que são unanimidade entre os web designers. Também farei algumas observações a respeito de outras que dividem opiniões.

E qual a importância de padronizar a forma como são escritas as regras CSS? Para ficar nas duas principais: menor peso do arquivo e facilidade na manutenção.

É importante ressaltar que não importa a versão do CSS, o ganho será o mesmo.

Framework

Inicio já com uma questão polêmica. Os frameworks CSS. A proposta é agilizar o desenvolvimento resolvendo as discrepâncias entre os navegadores, criando classes genéricas e arquivos para mídias específicas. Tem até módulos para estilizar formulários e cuidar da tipografia.

Frameworks de outras linguagens já provaram que vale a pena utilizá-los. Dizem que você não precisa reinventar a roda. O conselho é de que você somente comece a usar quando dominar completamente o CSS para que saiba o porque de determinadas regras e com isso possa aumentar realmente a produtividade.

Resetar Os Valores

Assim como em uma guerra, quem sofre mesmo não são as partes que lutam, mas quem esta entre eles, os civis, na guerra dos browsers, os maiores prejudicados são os desenvolvedores.

Apesar de caminharmos para uma padronização ainda existem muitas versões dos navegadores no mercado e cada uma possui um valor padrão diferente para um mesmo elemento.

Para evitar dores de cabeça, a solução é resetar os valores padrões. Existem diversas abordagens, algumas tentam englobar todos os elementos, outras fazem somente o básico. Testando você encontrará uma que melhor se encaixe à sua forma de desenvolver.

O exemplo abaixo é um dos mais conhecidos e foi desenvolvido por Eric Meyer (http://meyerweb.com/eric/tools/css/reset/index.html).

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;

}

blockquote:before, blockquote:after,

q:before, q:after {

  content: '';

  content: 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;

}

Ordem

Crie uma ordem para declarar as regras. Seja alfabética ou de estrutura. O importante é que se você precisar alterar o código daqui um ano, você rapidamente encontre a regra a ser modificada.

Eu por exemplo, divido as regras para divs, textos, formulários, links, listas e classes genéricas. Em seguida as classes e elementos são organizados por ordem alfabética. Tudo deve ser comentado.

Tenha cuidado com o efeito cascata e a especificidade. Regra declarada por último ou mais específica tem predominância.

Nomenclatura

O nome das classes deve seguir uma nomenclatura padronizada que facilite a leitura. Lembre-se que você pode reutilizar partes de um código CSS em outros projetos ou precisar voltar para manutenção.

Ao invés de underline ( _ ) em nomes compostos, use traço ( – ). Escreva tudo em minúsculas e não comece o nome das classes com números.

Evite utilizar ids. Deixe-as para manipulação com javascript.

Agrupar seletores

Quando diversos elementos possuem o mesmo valor para uma propriedade, ao invés de escrevê-la diversas vezes, agrupe os seletores em torno dela.

Um uso comum é com divs. Diversas precisam ser posicionadas à esquerda do conteúdo. Então ao invés de escrever repetidamente “position:relative; float:left;” você agrupa os seletores:

.menu-div, .conteudo-esq {position:relative; float:left}

Combinar Propriedades

Algumas propriedades podem ser agrupadas em uma única declaração. Um exemplo é a borda. É possível estilizar a grossura, o tipo e a cor. Uma declaração comum é:

.caixa{ 

border-width:3px; 

border-style:dotted;

border-color:#000;}

Mesmo que seja posto tudo em uma linha, ainda existem declarações desnecessárias. Acostume-se a escrever assim:

.caixa{border: 3px dotted #000;}

A leitura das declarações será facilitada.

Dentre as propriedades que podemos utilizar as abreviações esta á font, margin e padding. Contudo, é necessário seguir regras nas declarações. Na margin e padding você precisa declarar os valores em sentido horário, topo, direita, base e esquerda. Se mesmo assim não lembrar da ordem tente “TRouBLEd”, em inglês Top, Right, Bottom, LEft.

Classes Genéricas

Muitas vezes você precisa definir apenas uma propriedade para o elemento. Digamos uma imagem que precisa ser flutuada à esquerda do texto. Ao invés de criar uma classe específica para aquela imagem, utilize um nome genérico e intuitivo que possa ser usado em outros elementos.

Ao invés de :

.imagemtexto{float:left;}

Escreva:

.esquerda{float:left;} // ou .left

Assim, se você precisar flutuar uma div à esquerda e que tenha borda, vai precisar apenas declarar a borda economizando código.

<div class=”left borda1”></div>

Utilize com parcimônia, pois caso contrário ao invés de enxugar o código você terá uma extensa lista de simples declarações. Reserve apenas para declarações mais comuns.

Menos Classes

Antes de criar uma classe, analise outras possibilidades. Veja se é possível aproveitar um elemento HTML, a descendência, valor dos atributos ou se já não existe outra classe com a mesma declaração.

<div class=”texto”>



<p>Lorem ipsum amet <img src=”imagem.jpg” alt=”imagem”></p>



</div>

Para adicionar uma borda à imagem acima, ao invés de criar uma classe para ela, vamos aproveitar a descendência:

.texto img{border:1px solid #000;}

/* ou */

img[alt=imagem]{border: 1px solid #000;}

O código HTML fica limpo, assim como o arquivo da folha de estilo.

Saber a diferença entre elementos nível de bloco e inline ajuda a evitar a criação de divs desnecessárias. O elemento ul utilizado na criação de listas desordenadas, comuns na estruturação dos menus é um elemento nível de bloco. Então não precisa criar uma div somente para posicionar o menu.

Mínimo De Hacks E Nada De Behavior E Filter

A quase totalidade dos hacks necessários é para minimizar as diferenças em relação ao IE6-7. O velhinho ali já esta caindo fora, mas os hacks estarão por aí por um longo tempo ainda. Isso porque não existe cuidado na programação.

Entender como os navegadores interpretam as regras CSS ajuda a evitar inconsistência na apresentação do conteúdo entre eles.

O Internet Explorer disponibiliza a interpretação dos behaviors e filters inseridos nas folhas de estilo. São basicamente códigos javascript para gerar alguns efeitos. E por isso mesmo não deve estar em um arquivo CSS. Javascript é para arquivo javascript!

Medidas

Existe muito debate em torno de qual medida é a melhor para definir o tamanho dos textos. Enquanto o pixel depende da resolução do monitor, o em é relativo ao documento.

Para usar em você precisa entender a relação entre os elementos. Enquanto o pixel é bastante depende da resolução.

A dica é conhecer a audiência do website. Acessam através do computador ou celular? Preferem textos grandes ou um tamanho menor esta ok?

Acessibilidade

Existem tantos dispositivos e navegadores para acessar o conteúdo online que não há como garantir que todos conseguirão ver a mesma formatação da página. Mesmo assim devemos deixar o conteúdo apresentável em todas.

Com o CSS3 ainda sendo implementado é imprudência formatar um elemento utilizando somente as declarações desta versão.

Existe uma vertente de desenvolvedores que diz para você desenvolver testando antes nos navegadores atuais e depois nas versões anteriores. Fazendo o graceful degradation. Outra postula que é prioritário garantir o funcionamento nos navegadores antigos e só depois partir para recursos mais sofisticados visíveis apenas nos browsers atuais. São do progressive enhancement.

Tendo em vista que o usuário médio demora muito para atualizar o navegador e existe tanto IE6 por aí, é mais sensato pensar como os últimos. Em suma, o website não deve depender da versão do navegador para funcionar 100%. A funcionalidade vem antes da aparência.

Index Da > Série Aprende CSS Com Maicon Sobczak

CSS – Melhores Práticas é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Related posts:

1. Melhores Práticas Na Criação De Formulários
2. Newsletters – Definição e Boas Práticas
3. Menu Drop Down Com CSS

O design das páginas web 2.0 é marcado por gradientes sutis, sombras na medida e cantos arredondados. O problema é que para atingir esta aparência é necessário cortar imagens e adicionar marcação extra. Ou em alguns casos usar código javascript.

Com as novas especificações do CSS3, transpor o design do programa gráfico para a realidade dos browsers tornou-se um processo mais produtivo e rápido.

Neste último tutorial sobre as novas propriedades CSS3 veremos as que tratam sobre a criação do layout. São elas:

• box-sizing
• background, background-size e background-origin
• border-radius
• border-colors
• border-image
• box shadow
• opacity
• gradients
• rgba
• hsl
• resize
• transform e transition

Muitas dessas propriedades já foram implementadas há tempos nos browser modernos, outras, no entanto, funcionam apenas em um ou dois. Só uma coisa é certa: no IE8 o suporte é praticamente nulo.

Neste tutorial não vou abordar nenhum filter ou mostrar as soluções javascript para que alguma das propriedades funcione no IE. O foco é somente CSS.

box-sizing

Em uma definição simples, o box model especifica quais propriedades da folha de estilo são somadas para definir o tamanho do elemento. Em uma div, por exemplo, por padrão a largura não é somente a que foi definida no width, mas também a soma da borda, e do espaçamento.

.caixa{

-moz-box-sizing: padding-box; /* Firefox */

-webkit-box-sizing: padding -box; /* Chrome */

box-sizing: padding -box; /* IE8 e Opera */



-moz-box-sizing: border-box; /* Firefox */

-webkit-box-sizing: border-box; /* Chrome */

box-sizing: border-box; /* IE8 e Opera */



}

Usando o box-sizing, ao invés do padding ser aplicado a partir do tamanho definido em width, e com isso alargar mais a div, ele é aplicado para dentro, deixando menos espaço para o conteúdo. A mesma coisa acontece com o border. Ao invés de somarem com a largura, elas subtraem.

Esta propriedade interfere diretamente no arranjo do layout, e como somente as últimas versões dos navegadores aceitam, vamos ter que esperar mais um tempo para começar a usar.

background, background-size e background-origin

Com o CSS3 podemos adicionar diversas imagens de fundo em um sistema de camadas. Cada imagem pode ser posicionada independentemente possibilitando resultados incríveis. E o melhor é que é utilizada a mesma propriedade background do CSS2.

.caixa{

background:url(imagem01.jpg) no-repeat top left; 

background: url(imagem01.jpg) no-repeat top left, url(imagem02.jpg) no-repeat bottom right;

}

Primeiro é declarado o background normalmente para os browsers que não implementaram múltiplos backgrounds. Em segunda é declarada novamente a propriedade e são listadas as imagens utilizadas. Uma na parte superior esquerda e outra na inferior direita.

Adicionando a propriedade background-size é possível criar mosaicos e redimensionar a imagem de fundo conforte o tamanho do elemento. Aceita medidas em porcentagem, pixels e em.

.caixa{

background:url(imagem01.jpg) no-repeat top left; background: url(imagem01.jpg) no-repeat top left, url(imagem02.jpg) no-repeat bottom right; 

background-size:60% 50%;

}

Somente o Safari, Konqueror e Chrome implementaram esta função e parece que o Firefox 3.6 então nem adianta adicionar o prefixo do navegador.

Por padrão a imagem de fundo começa na extremidade do elemento, se ele tiver borda esta ficara sobre a imagem. Com o background-origin você escolhe se começa a partir da borda, do espaçamento ou do conteúdo.

.caixa{

background-origin: border-box; /* A partir da borda */

background-origin: content-box; /* A partir do início do conteúdo*/

background-origin: padding-box; /* A partir do espaçamento */



}

border-radius

Lembra do trabalho cansativo que era criar cantos arredondados? Pois os seus problemas acabaram! Basta adicionar border-radius na declaração e tudo esta resolvido.

.caixa{

border-radius:10px; /* Chrome */

-moz-border-radius: 10px;} /* Firefox */

Se você quer apenas um dos cantos arredondados basta informar:

border-top-left-radius:10px; 

border-bottom-right-radius:10px; 

-moz-border-radius-topleft: 10px;

-moz-border-radius-bottomright: 10px;

Como você pode ver o Firefox interpreta bem ao seu jeito. E além dele somente o Chrome, que interpreta a especificação CSS3 possibilitam esta funcionalidade.

border-image

Chega de borda pontilhada ou sólida. Com o border-image você pode criar bordas com a aparência que quiser. Informe o endereço da imagem como ela deve ser cortada e o padrão de repetição. Para que ela funcione é necessário que a largura da borda seja definida com o border-width.

.caixa{

border-width: 10px;

border-image: url(“borda.png”) 20 10 20 10 round;

-webkit-border-image: url(“borda.png”) 20 10 20 10 round;

-moz-border-image: url(“borda.png”) 20 10 20 10 round;

Esta propriedade basicamente corta a imagem em 9 partes e os quatro valores são para informar a porcentagem do corte. Conforme a largura da borda a imagem é ajustada.

Somente Chrome, Safari e Firefox implementaram.

border-colors

Com a melhora do border-color é possível definir tantas cores quanto a espessura da borda. Se a borda tem 5px, cada pixel pode ser de uma cor.

.caixa {border:10px solid #0C0; 

-moz-border-left-colors: #060 #333 #333 #333 #903 #CF9 #09F;}

É feita a declaração normal da borda para os browsers que não implementaram esta funcionalidade e em seguida usamos a border-colors. O único navegador que interpreta esta proprieadade é o Firefox, por isso o prefixo –moz-.

É preciso definir as cores de cada um dos cantos, no exemplo foi apenas a esquerda (left), em seguida poderia ser posta a direita (right), base (bottom) e topo (top). Como a borda tem 10 pixels, mas apenas 7 cores foram definidas, a última se repete até fechar a conta.

box-shadow

Formando dupla com as bordas arredondas, o efeito de sombra em uma div é um dos efeitos mais comuns e interessantes. E também exigia bastante trabalho e marcação extra. Com o box-shadow tudo é feito em segundos.

.caixa{

box-shadow:5px 5px 5px #333; 

-moz-box-shadow:5px 5px 5px #333; 

-webkit-box-shadow:5px 5px 5px #333;}

Os quatro parâmetros são: deslocamento horizontal, vertical, desfoque e cor. Valores negativos para o deslocamento aplicam a sombra para a esquerda e para o topo. É possível aplicar mais de uma sombra para o mesmo elemento, basta separar as declarações com uma virgula.

.caixa{



box-shadow:5px 5px 5px #333, -10px -5px 3px #0ff; 

-moz-box-shadow:5px 5px 5px #333, -10px -5px 3px #0ff;

-webkit-box-shadow:5px 5px 5px #333, -10px -5px 3px #0ff ;}

Pelos prefixos você já deve ter entendido em quais browsers esta propriedade funciona.

opacity

Uma das propriedades do CSS3 mais implementada entre o browsers é a opacidade. O IE suporta somente com filtro.

.caixa{opacity: 0.7;}

Absurdamente fácil, não? Os browsers modernos nem precisam do prefixo para funcionar! Os valores vão do 0, que deixa transparente ao 1, opaco que é o valor padrão. No exemplo a opacidade é de 70%.

gradient

Quando esta propriedade estiver totalmente implementada, você não vai precisar fatiar as imagens para criar depois no navegador. As possibilidades de customização são muitas, assim como a aplicação. Cor de fundo, bordas e marcadores de lista são alguns.

.caixa{



background: -webkit-gradient(linear, left bottom, right top, from(#f00), color-stop(0.5, #000));}



background: -moz-linear-gradiente(45deg, red, black); /* FF 3.6*/

Se você usar o Chrome ou Safari poderá ver o resultado do código acima. Foi definido um gradiente linear, que começa da base esquerda em direção ao topo direito, indo do vermelho para o preto com a transição acontecendo no ponto médio (0.5).

É possível somar as declarações criando gradientes realmente complexos e também radiais. O valor da cor pode ser escrito também com a propriedade rgba, assim como a transição pode ser em percentagem. Muito que experimentar.

.caixa{ background: -webkit-gradient(linear, left bottom, left top, from(#f00), to(rgba(288,199,0,0)), color-stop(0.3, #000), color-stop(70%, #0C3));}

rgba

As cores apresentadas no monitor são formadas definindo valores diferentes para o vermelho, verde e azul. O 0 é ausência de cor e o 255 é a cor. Pelo sistema RGB o azul é

0 0 255

No rgba assim é que são formadas as cores. Decorar as cores no hexadecimal é muito mais fácil que isso, então qual a vantagem? A possibilidae de definir transparência, graças ao canal alfa que é a letra “a” no nome da propriedade. Um azul 30% de opacidade fica:

h1{color:rgba(0,0,255,0.3);}

A propriedade também aceita valores em porcentagem. Não precisa do prefixo do navegador para funcionar.

hsl e hsla

Outra alternativa para criar cores é usando o hsl, que usa um sistema diferente. O primeiro parâmetro é a posição da cor no círculo cromático, o segundo a saturação que é a adição de cinza na cor e por último a luminosidade. Uma variante é a hsla que aceita transparência.

h1{color:hsl(180,50%,50%);}}

h1{color:hsla(180,50%,50%, 0.8);}}

Adivinha qual o único navegador que não interpreta.

resize

Uma propriedade especial para textareas. Permite ao usuário redimensionar a caixa à vontade. Para limitar a direção do redimensionamento os valores disponíveis são horizontal e vertical. Para liberdade total use both.

textarea{resize:both;}

No momento apenas Chrome e Safari implementaram. Mas devido a grande utilidade em pouco tempo os outros browsers tomarão uma atitude.

transform e transition

Criar animações usando CSS.. Só o que faltava. Agora não falta mais! Esta é a novidade mais insana e legal do CSS3. Animações simples que vão levar a interação do usuário com o website ao extremo.

Dentre as possibilidades está rotacionar, esticar, redimensionar e deslizar. Que podem ser somadas e não alteram o layout.

img{transition: all 1s ease-in-out; 

-webkit-transition: all 1s ease-in-out; 

-moz-transition: all 1s ease-in-out;}



img:hover{transform: rotate(360deg) scale(3); 

-webkit-transform: rotate(360deg) scale(3); 

-moz-transform: rotate(360deg) scale(3);}

Quando a seta do mouse parar obre uma imagem ela ficará 3 vezes maiores depois de uma rotação de 360 graus. No Firefox a animação não é muito boa, então teste no Chrome ou Safári.

Veja neste vídeo o que esta por vir.

Conclusão

Como explicado durante a apresentação das propriedades, a maioria ainda não está ganhando suporte. Não depender delas para que o site funcione é uma decisão inteligente.

Leia também o nosso artigo CSS – Criação de Layout

Tutorial Seguinte Da Série Aprende CSS Com Maicon Sobczak > CSS – Melhores Práticas

Especial! CSS3 – Layout é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Related posts:

1. ESPECIAL! – Layout De Revista Com HTML5 E CSS3
2. Especial! CSS3 – Selectores
3. Especial! CSS3 – Efeitos Em Textos

O excitamento dos desenvolvedores com o CSS3 é quase infantil (no bom sentido). É um novo brinquedo que facilita a criação dos layouts e permite aplicar efeitos que outrora exigiam o fatiamento de diversas imagens somadas a dezenas de linhas de código.

Isso significa menos arquivos e requisições http resultando em páginas que carregam mais rápido. É possível até criar pequenas animações. E tudo com muito pouco código!

Saindo do mundo das maravilhas e entrando no mundo real, é importante saber que o suporte ao CSS3 ainda é precário. Os navegadores vem implementando essa geração do CSS já algum tempo, mas ao seu modo. Eles precisam que você adicione um prefixo na frente da propriedade para que possam interpretá-la.

Você verá nos exemplos o prefixo –webkit- para que funcione no Safari e Chrome, o –moz- para o Firefox, -khtml- para Konqueror, -o- para Opera e –ms- para Internet Explorer.

Este último será raro já que o Internet Explorer 8 não oferece suporte praticamente a nenhuma das novidades do CSS3. E já adianto que não serão mostrados os famosos filtros para o IE. Estamos falando aqui de propriedades CSS e não códigos para rodar nas folhas de estilo.

Este tutorial faz parte da Série Especial sobre CSS3 e vai abordar os efeitos em textos. São eles:

• @font-face
• word-wrap
• column
• text-shadow

A princípio o Firefox 3.5+, Opera 10+ e Safari 3.1+ interpretam as propriedades apresentadas.

@font-face

Todo web designer em algum site já quis utilizar outras fontes que não Arial, Verdana, Courier ou Times New Roman. Para isso as soluções mais comuns ainda são em javascript com Cufón ou flash no sIFR.

A @font-face permite incorporar fontes com regras na folha de estilo sem que elas estejam instaladas no computador do usuário. Isso não chega a ser uma novidade para os veteranos, já que o @font-face já existia na versão CSS2. E o único que implantou foi o Internet Explorer (!) para fontes Open Type somente.

No CSS3 esta propriedade vem com mais força graças aos esforços para criar licenças de utilização que beneficiem não somente os desenvolvedores, mas também as empresas que criam as fontes.

Os formatos de fonte aceitos são TrueType(.ttf) e Opentype(.otf). Para utilizar a fonte, primeiro precisamos apontar o caminho do arquivo da fonte, escolher o nome que usaremos para referenciá-la e em seguida usar normalmente.

@font-face(font-family:’aller’ src: url(‘aller.ttf’);}

p(font-family:’aller’);

Você olha essas duas linhas e lembra o quanto já sofreu para poder usar uma fonte não padrão e fica com a certeza de que um mundo melhor é possível. O mais incrível é que até o IE8 aceita na boa! E renderiza a fonte melhor que todos os outros navegadores!

É facultativa a utilização do format na declaração para informar o tipo da fonte, se é ‘truetype’ ou ‘opentype’. Uma boa prática é utilizar o local na declaração para que antes de baixar a fonte do servidor, o navegador verifique se ela já não existe no computador do usuário.

@font-face{font-family:’aller’ src: local(‘Aller’), url(‘aller.ttf’) format(‘truetype’);}

Da forma como foi declarada, a fonte só pode ser usada regularmente. Para aplicar negrito e itálico é preciso incluir o arquivo da fonte bold.

@font-face{font-family:’aller’ src: local(‘Aller’), url(‘aller.ttf’) format(‘truetype’);}

@font-face{font-family: ‘aller’; font-weight:bold; src: url(‘aller-bold.ttf’);}

Dependendo do tamanho dos arquivos, e observando somente isso, pode ser menos vantajoso usar esta propriedade do que as soluções já existentes em javascript e flash.

Um cuidado importante ao usar uma fonte incorporada pelo @font-face é listar outras alternativas caso haja algum problema no download da fonte.

@font-face(font-family:’aller’ src: url(‘aller.ttf’);}

p{font-family:'aller', Arial, sans-serif;}

word-wrap

Ao colocar o endereço inteiro de um link no texto, por não admitir espaços, às vezes ocorre de a palavra ultrapassar os limites do contêiner. Com esta propriedade, se a palavra chegar ao limite da largura da div, por exemplo, e ainda tiver mais algumas letras, a palavra é quebrada e a parte que ficaria fora é posta na linha de baixo.

a{word-wrap:break-word;}

Com a linha acima, todos os endereços de link que forem mais largos que o espaço disponível serão separados e continuarão na linha de baixo.

Os únicos navegadores que interpretam corretamente esta propriedade são o Firefox 5+, Safari e Chrome.

column

Disponibilizar o texto em colunas sempre exigiu muito trabalho com divs. No CSS3 temos à disposição uma propriedade especial para organizar o texto em colunas. O, porém é que os navegadores implementaram ao seu modo. Então para funcionar em alguns, é preciso adicionar o prefixo do navegador.

Antes de criar o código vejamos as opções:

• column-count – Número de colunas criadas ;
• column-gap- Distancia entre as colunas;
• column-rule – Separador entre as colunas:
  1. column-width – Largura do separador;
  2. column-style – Estilo do separador;
  3. column-color – Cor do separador.
• column-width – Determina a largura das colunas;

Outras propriedades para trabalhar com colunas, mas que não foram implantadas por nenhum navegador podem ser conferidas na documentação do W3C.

Para criar 3 colunas com o conteúdo da div “.coluna” com espaçamento de 20 pixels e uma linha entre elas escrevemos:

O prefixo –moz- para funcionar no Firefox e o –webkit- para funcionar no Chrome e Safari. |Nos navegadores que não entendem a regra o texto será mostrado normalmente.

Não definindo o column-count, o Firefox faz os cálculos e divide em quantas colunas puder para que o conteúdo fique ajustado e alinhado na base. Já no Chrome as colunas não são criadas.

O column-width foi implementado por Safari e Chrome.

text-shadow

O text-shadow aliado ao @font-face vão elevar o design web baseado na tipografia ao nível mais elevado. O text-shadow permite aplicar sombras, não apenas a clássica borrada, mas somar diversas e criar efeitos fantásticos.

Os quatro argumentos para esta propriedade na ordem são: o deslocamento horizontal, o vertical, o nível do desfoque e a cor da sombra. Os dois primeiros valores quando positivos, deslocam para a direita e para baixo, quando negativos, para a esquerda e acima.

h1{text-shadow:2px 2px 4px #0ff;}

No código acima definimos que a sombra se desloca dois pixels para a direita e para baixo, com desfoque de quarto pixels e da cor azul.

Diversas sombras podem ser aplicadas a um mesmo texto, basta separar os valores por vírgula.

h1{text-shadow:2px 2px 4px #0ff, -2px -2px 4px #0f0;}

Adicionando cores claras e desfoque maior é possível também criar efeitos luminosos. É possível definir a cor utilizando a propriedade rgba, de possibilita definir além da cor a opacidade.

O de personalização e combinações é tão grande que todo dia aparece alguém apresentando um efeito fora de série utilizando esta propriedade.

Conclusão

Em tratando-se de texto e como o navegador mais popular do mercado não dá suporte a maioria das novas propriedades, é preciso ter cuidado e não depender do suporte a elas para que eles fiquem legíveis.

Tutorial Seguinte Da Série Aprende CSS Com Maicon Sobczak > Especial! CSS3 – Layout

Especial! CSS3 – Efeitos Em Textos é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Related posts:

1. ESPECIAL! – Layout De Revista Com HTML5 E CSS3
2. Especial! CSS3 – Layout
3. Especial! CSS3 – Selectores

Entraram nas especificaçõe do CSS3 importantes seletores. Alguns já eram usados, mas sem uma padronização.

Agora o controle sobre a estilização fica mais refinado e enxuto. É possível até criar pequenas formulas para selecionar elementos muito específicos.

Veremos neste tutorial como selecionar elementos baseados em atributos, localização na árvore da página, que com certeza é o que mais oferece opções, estilização de formulário, um grande avanço entre outros.

Mas o navegador da Microsoft oferece suporte apenas para seletores de atributo. Quanto aos outros navegadores modernos, todos oferecem suporte total em suas últimas versões.

Seletores

Os seletores servem para que você possa alterar a aparência dos elementos referenciando a representação da realidade HTML dele, como h1, ou através dos atributos e valores destes.

Nem todos são novidade, mas agora finalmente fazem parte das especificações do CSS3.

Por atributo

Estes selecionam baseados no valor do atributo:

[att^=”valor”] – O valor do atributo inicia com “valor”.

a[title^=”noticia”] 

[att$=”valor”] – O valor atribuído termina com “valor”. Pode ser apenas um fragmento da palavra.

a[title$=”cia”]

[att*=”valor”] – O valor atribuído contém o fragmento.

a[title$=” ici”]

O valor do atributo diferencia maiúsculas e minúsculas. Inclusive o IE7 e 8 aceitam esta forma de seleção.

Seletores combinados

Para aplicar borda em todas as imagens que dividam o mesmo elemento pai que uma div com a classe .fotos agora basta usar:

.fotos~img{border:1px solid #00ff00;}

Para os desatentos, o truque é o til (~). Ele conecta os irmãos.

Pseudo-classes

Selecionar elementos baseado na localização ou estado destes tornou-se mais fácil com novas pseudo classes.

nth-child

Algumas são complexas, como a nth-child, que permite estilizar um elemento em determinada posição, podendo-se usar para encontrar a localização, até uma fórmula. Um exemplo? Claro, vários.

ul li:nth-child(2){color:#00ff00;} /* Seleciona o segundo item da lista */

ul li:nth-child(-n+3){color:#00ff00;} /* Seleciona os três primeiros itens */

ul li:nth-child(4n+1){color:#00ff00;}/* A cada três itens o quarto tem a cor do texto verde */

Para criar tabelas listradas, adicione even e odd entre os parênteses.

tr:nth-child(odd){background-color:#00ff00;}

tr:nth-child(even){background-color:#ff0000;}

nth-last-child

Com o nth-last-child a contagem começa de trás para frente. Para estilizar os três últimos parágrafos existentes na div, o código fica:

div p:nth-last-child(-n+3){background:#060;}

div p:nth-last-child(3){background:#060;} /* Somente o terceiro de baixo para cima */

nth-of-type

O nth-of-type encontra elementos do mesmo tipo descendentes do mesmo pai. Como diversos parágrafos dentro de uma div.

.textos>p:nth-of-type(3n+1){background:#96C;}

A cada dois parágrafos, o terceiro tem o fundo lilás. Enquanto o nth-child faz uma contagem corrida dos elementos, este procura por específicos. Somente do tipo (of-type). Se entre os parágrafos houver tabelas, ela não entra na contagem, somente parágrafos.

first-of-type e last-of-type

Com o first-of-type é estilizado apenas o primeiro elemento filho do tipo. O last-of-type seleciona o último do tipo. Para que a primeira imagem da div tenha borda vermelha e a última borda preta escrevemos:

div img:first-of-type{border:10px solid #F00;}

div img:last-of-type{border:10px solid #000;}

O nth-last-of-type faz o mesmo trabalho que o nth-last-child, mas antes procura elementos específicos. As últimas três do texto com borda vermelha:

div img:nth-last-of-type(-n+3){border:10px solid #F00;}

only-of-type

A pseudo-classe only-of-type seleciona o elemento que é o único filho do tipo. Se você tem um layout que apresenta no conteúdo número variável de imagens e deseja estilizar de maneira diferente quando houver apenas uma imagem pode fazer assim:

.texto img:only-of-type{border:2px solid #F00;}

Se houver mais de uma imagem na div “texto” não será aplicada a borda vermelha.

Para não restar dúvidas: o nth-child, nth-last-child aplicam o estilo baseados na posição não importando quais elementos estão incluídos na contagem. Já os seletores que tem o of-type, contam apenas os elementos do tipo especificado.

last-child

O last-child seleciona o último elemento. Uma alternativa a ele é usar o :nth-last-child(1).

Para estilizar elementos do formulário como checkboxes ao serem selecionadas chegou a :checked. Ela altera a aparência do quadrado ou círculo. Um fundo azul quando for selecionado:

input[name=elemento]:checked{background:#00F;}

empty

O :empty estiliza um elemento que não tenha filhos ou esteja vazio. Infelizmente não pode ser usado em elementos que recebem conteúdo dinamicamente porque, no Firefox a estilização será como se o elemento ainda estivesse vazio.

enabled, disabled e not

Elementos habilitados são os que podem ser selecionados, receber textos, caso dos campos de um formulário, receber o foco ou ser clicado. O :enable estiliza o elemento que pode receber as ações listadas acima. Útil principalmente em formulários.

input:enabled{border:1px solid #F00;}

Todos os inputs do formulário terão borda vermelha e no Opera 10 até o checkbox entra na dança. O :enable também seleciona os submits. O que não é bom se você deseja criar um botão com aparência diferente dos outros itens do formulário. Mas não precisa criar uma classe ou outra declaração para o submit, basta usar a pseudo-classe :not.

input:enabled:not([type="submit"]){border:1px solid #F00;}

Todos os inputs terão borda vermelha menos o do tipo submit. Uma expressão refinada e de incrível utilidade! O :not aceita outros seletores como tabelas, parágrafos e até mesmo classes.

Para que o :not funcione corretamente cuide para utilizar colchetes quando o seletor tiver aspas no caso de type=”submit”. Se for classe ou elemento, bastam os parênteses.

Para selecionar os campos do formulário que estão desabilitados use :disabled.

target

Para navegar dentro de uma mesma página criamos as ancoras e atribuímos nome a elas. Desta forma para um link levar à determinada seção da página incluímos a tralha (#) e o nome da seção.

O :target permite estilizar a seção da página para a qual o link clicado leva.

<style type=”css”>



:target{background:#0FF;}



</style>



<div id=”destino”>Texto</div>

<div id=”outra”>Outra div</div>



<a href=”#destino”>Link para div</a>

<a href=”#outra”>Link para outra</a>

Ao clicar no link que leva à div “destino”, esta ficará com a cor do fundo azul. Se o link de baixo for clicado, a div “outra” é que ficará com o fundo azul.

Pseudo Elementos

Ao selecionar um texto clicando e arrastando a seta do mouse o fundo fica azul ou no caso do IE8 preto. O único pseudo elemento oferecido pelo CSS3 permite alterar o fundo e a cor dos textos selecionados. O que possibilita maior controle e unidade do design.

O responsável por isso é o ::selection. Para que funcione no Firefox, é necessário adicionar o prefixo –moz-:

p::selection {background:#F93; color: #FFF;}

p::-moz-selection {background:#F93; color: #FFF;}

Os textos de parágrafo selecionados terão fundo alaranjado e texto branco. Se você quer que inclusive links e cabeçalhos sejam estilizados, adicione o asterisco na frente.

h1, a, p::selection {background:#F93; color: #FFF;}

*::-moz-selection {background:#F93; color: #FFF;}

Os elementos do formulário não são afetados por este pseudo elemento.

Conclusão

Como dito no início do tutorial, somente os navegadores mais avançados oferecem suporte ao CSS3, exceto IE8. Então é importante não depender disso para que a página funciona, já que é uma parcela pequena dos usuários que mantém os navegadores atualizados.

Em contra partida, quem tem navegador atualizado pode ser presenteado com um design único. Até porque você já pode usar todos os seletores pensando no suporte futuro.

Tutorial Seguinte Da Série Aprende CSS Com Maicon Sobczak > Especial! CSS3 – Efeitos Em Textos

Especial! CSS3 – Selectores é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Related posts:

1. Especial! CSS3 – Layout
2. ESPECIAL! – Layout De Revista Com HTML5 E CSS3
3. Especial! CSS3 – Efeitos Em Textos

Soluções CSS Para Problemas Com IE6

Escrever folhas de estilo compatíveis com todos os navegadores do mercado, muitas vezes torna-se um pesadelo. São mais de dez tipos de navegadores e cada um conta com outras tantas versões. E muitos decidiram reservar-se o direito de interpretar as regras de estilo de uma maneira bem particular.  E para nós restou descobrir formas de contornar estas diferenças.

Um conhecido causador de problemas é o Internet Explorer, principalmente na versão 6. Ele foi lançando em 2001, uma época pré-histórica em termos de padrões web, usabilidade e afins. Mas para aquele momento ele servida muito bem.

O tempo passou, a internet evolui e foram lançadas outras versões do Internet Explorer para seguir os padrões (tardiamente, mas foram). Só que aquela versão 6 estava tão enraizada, que ainda corresponde, em alguns casos, por pelo menos um terço do mercado de navegadores.

Campanhas são feitas com o intuito de extinguí-lo e alguns desenvolvedores já alardeiam que não irão mais dar suporte ao IE6 em seus códigos.

Eu já investi horas estressantes tentando fazer com que o layout das páginas fosse apresentado igualmente independente do navegador. Já decidi não dar suporte ao IE6. Depois tive que voltar atrás porque o número de usuários com esta versão ainda era muito grande.

E finalmente compreendi que grande parte dos problemas que encontramos são criados por códigos mal estruturados.

Atualmente existem soluções javascript para emular o comportamento dos navegadores modernos nos antigos, e foram desenvolvidas técnicas no próprio CSS para minimizar as diferenças entre eles.

Antes de apresentá-las vou deixar algumas dicas que vão ajudar a diminuir a necessidade de utilização dos hacks:

Estruture a página com código válido pelo W3C. Isso inclui definir o doctype da página corretamente para evitar que o navegador entre em quirks mode e use uma maneira própria para interpretar as propriedades da folha de estilo.

Entenda a relação de herança que existe entre os elementos da página. Isso possibilita que o desenvolvimento siga uma lógica e facilita na hora de encontrar os erros.

Vamos ver então algumas soluções CSS para alguns dos problemas mais comuns encontrados no dia-a-dia dos webdesigners.

Resetar O CSS

Os valores padrão para os elementos HTML diferem entre navegadores. Para compensar essas divergências, inserimos algumas linhas no início do arquivo de folha de estilo definindo os valores que serão utilizados por todos os navegadores, sobrescrevendo os nativos.

Um dos mais abrangentes é este:

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,

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-weight: inherit;

font-style: inherit;

font-size: 100%;

font-family: inherit;

vertical-align: baseline;

}

:focus {

outline: 0;

}

body {

line-height: 1;

color: black;

background: white;

}

ol, ul {

list-style: none;

}



table {

border-collapse: separate;

border-spacing: 0;

}

caption, th, td {

text-align: left;

font-weight: normal;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: "";

}

blockquote, q {

quotes: "" "";

}

Você pode torná-lo ainda maior ou enxugar para ajustar-se às suas necessidades.

Dominando O Box Model

O tamanho de um elemento não é somente o que foi definido com as propriedades width ou height do CSS. Estas propriedades definem apenas o espaço que pode receber conteúdo. Se você aplicar margem (margin), espaçamento (padding) ou borda (border) ao elemento, tudo isso entra na conta final para definir a largura ou altura do elemento.

.elemento {width: 300px; height:100px; padding-left: 20px; border:3px solid #000;}

No navegador, esta div terá a largura total de 326px (300 + 20 + 6). Por isso que duas divs de 500px e borda de 1px não ficam lado a lado em um espaço de 1000px, mesmo flutuando(float) as duas à esquerda.

E o box model nisso? O nome, que significa “modelo de caixa” é porque a borda se encaixa na largura e altura e são encaixadas na margem. Um retângulo/quadrado dentro do outro. Somando tudo temos o tamanho do elemento.

Todos os layouts são baseados neste modelo. Entendendo isso você evita muito soco no monitor.

Posicionamento Dos Elementos

Seguindo o que vimos sobre o box model , tendo um elemento com largura de 300px e aplicando uma margem esquerda de 20px, no final a largura dele é de 320px. O problema é que o Internet Explorer 6 duplica a margem dos elementos flutuados para o mesmo lado em que a margem é aplicada. No caso o tamanho final do elemento no IE6 será de 340px.

Para solucionar este problema, basta aplicar display:inline na declaração do elemento. Somente o Internet Explorer 6 será afetado.

/* Resulta em width: 340px no IE6 */

.elemento{float:left; width:300px; margin-left:20px;}



/* Problema resolvido com display:inline*/

.elemento{float:left; width:300px; margin-left:20px; display:inline}

Altura E Largura Mínima E Máxima

Fazer um layout flexível que se ajuste a diversas resoluções e conteúdos é uma maneira de tornar a apresentação dos dados mais eficiente. Podemos facilmente conseguir isso utilizando as propriedades max-width, min-width, max-height e min-height . Com elas, podemos definir qual a largura e altura máxima e mínima.

Mais uma vez o Internet Explorer 6 não vai interpretar corretamente estas propriedades.

Ele considera a altura definida (height) como a altura mínima. O truque é usar a declaração !important , que não interfere em outros navegadores.

.elemento{min-height:300px; height:auto !important; height:300px;}

Uma ressalva importante é para o fato de que, ao contrário de height e width, tanto o min-height quanto o max-height , não somam os valores de espaçamento, borda e margem para chegar ao resultado final da altura. A mesma coisa com o min-width e max-width quanto a largura.

Para que o max-height funcione no Internet Explorer 6 as soluções existentes são somente em javascript.As expressões, são uma solução específica para o IE6 que é o equivalente a rodar javascript dentro do arquivo de folha de estilo.

Para definir que um elemento tenha tamanho máximo de 330px, escrevemos:

* html .elemento {height: expression( this.scrollHeight > 329 ? "330px" : "auto" ); }



.elemento{max-height: 330px; }

A primeira linha começa com “* html” para atingir especificamente o Internet Explorer. Na expressão os valores estão um pouco diferentes para evitar que o Internet Explorer trave. Na segunda linha declaramos normalmente o max-height para funcionar nos navegadores mais atuais. Apesar de válido, utilizar expressões não é aconselhável já que teremos uma aberração com javascript rodando em um arquivo de folha de estilo.

Para o min-width e max-width funcionarem no Internet Explorer 6 também é necessário utilizar expressões dentro do arquivo CSS.

* html .elemento{width: expression( document.body.clientWidth < 329 ? "330px" : "auto" ); }

.elemento {min-width: 330px; }

Para definer max-width:



<code>

* html .elemento{width: expression( document.body.clientWidth &gt; 779 ? "800px" : "auto" ); }

.elemento {min-width: 800px; }

Esta solução torna o processamento do arquivo CSS um pouco mais lento e em caso de javascript desabilitado não funcionará.

Altura 100%

Para conseguir que um elemento atinja 100% de altura no Internet Explorer 6, basta especificar uma altura fixa para o elemento pai dele.

.pai {height:400px;}

.filho {height:100%;}

Se você precisa que um elemento ocupe toda a altura da tela, faça desta maneira:

html, body {height:100%;}

.elemento {height:100%;}

Menu Horizontal E Vertical

Quando você utiliza listas para criar um menu horizontal, pode acontecer que no Internet Explorer 6 os itens, ao invés de ficarem um ao lado do outro, ocupem toda a extensão disponível e formarem uma lista vertical.

Para resolver isso basta aplicar display:inline para os elementos. Nos menus verticais criados utilizando que contém elementos filhos declarados com display:block o Internet Explorer 6 adiciona espaço vertical entre eles.Dentre as soluções esta definir display:inline para os elementos e flutuar (float) os elementos filho.

Hacks

Quando não existe a possibilidade de resolver as diferenças entre navegadores adicionando apenas uma declaração, ainda existe a possibilidade de utilizar os chamados hacks.

/*Fix IE. Hide from IE Mac\*/

* html .elemento {margin-right:5px;}

/*End*/

O código acima, devido ao comentário condicional, será interpretado somente pelo Internet Explorer 6. Uma variante do exemplo acima:

.elemento {

margin-right: 10px; /* Todos os browsers */

*margin-right:8px; /* IE */

_margin-right:5px; /* IE6 */

.margin-right:10px; /* IE7 */

}

Esta última técnica não é validada pelos padrões da W3C. Então é aconselhável utilizar o primeiro exemplo.

Comentários Condicionais

Os comentários condicionais são interpretados somente pelo Internet Explorer e permitem definir uma folha de estilo ou arquivo javascript que será carregado somente por estes navegadores. É possível também especificar para qual das versões o código é valido.

<!--[if IE]>

Todas as versões do IE

<![endif]-->



<!--[if lte IE 7]&gt;-->

Acontece somente se a versão for menor do que o IE7



<!--[if IE 6]&gt;-->

Acontece se a versão do Internet Explorer for a 6

Soluções Javascript

As diferenças na interpretação do layout entre navegadores muitas vezes chegam às dezenas, e nem sempre conseguimos lidar com elas utilizando somente CSS. Partimos então para a utilização de bibliotecas e soluções javascript.

A mais conhecida delas, a JQuery, soluciona muitas das idiossincrasias dos navegadores.

Outra solução, que podemos chamar de IE7-JS, pois não tem um nome específico, faz com que o IE6 se comporte como um navegador web-standard e suporte transparência.

Campanha Para Eliminar Navegadores Antigos

O portal iMasters tem uma campanha em que você adiciona uma linha de código ao arquivo e, caso o navegador que acessar a página for antigo, será mostrada uma barra na parte superior da janela pedindo para que o navegador seja atualizado e mostrando as opções.

Conclusão

Tudo leva a crer que mais alguns anos e todos os navegadores vão seguir os padrões e não precisaremos perder horas para garantir que as páginas funcionem em todos.

O que podemos fazer até lá é desenvolver os códigos válidos pelos padrões e aprender todos os truques.

Tutorial Seguinte Da Série Aprende CSS Com Maicon Sobczak > Especial! CSS3 - Selectores

CSS – Diferença Entre Browsers é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Related posts:

1. A Guerra Dos Browsers
2. Algumas Diferenças Entre O PHP 4.x E O PHP 5.x
3. Descubra As Diferenças Entre WordPress.COM E WordPress.ORG

Somos desenvolvedores web. Estudamos para saber como tornar a visualização dos elementos da página o mais confortável possível para o internauta que vê a página do seu computador. São aplicados efeitos e ela entra para galerias como exemplo de design e conteúdo bem aplicados.

Aí um visitante decide imprimir um artigo interessante ou um case para estudo. Descobre então, que são impressas duas páginas só com menu e anúncios e que o texto é um filete que se estende por quatro páginas.

Pois é amigo. A deslumbramento com o mundo virtual fortalece a idéia de que se algo precisa ser visto é na tela do computador e que as outras mídias (entenda-se papel) não são mais utilizadas pelo internauta.

Precisamos entender que um número grande de pessoas prefere ler no papel, principalmente textos extensos. Outros tem medo de não conseguir mais encontrar a página ou o conteúdo online. Há também os que precisam levar a informação para locais sem acesso à internet ou para uma leitura no parque.

Motivos não faltam para dedicar algumas horas do desenvolvimento no preparo das informações para impressão. E esta mentalidade deve estar presente já na fase inicial do desenvolvimento e não deixada para depois que o website estiver online.

E se você pequisar um pouco verá que até grandes portais negligenciam esta parte.

Vamos ver neste tutorial quais propriedades CSS são aceitas na impressão, as melhores práticas e considerações.

Somente Na Impressão

Os arquivos de folha de estilo não formatam apenas os elementos para visualização no navegador, mas para outras mídias e dispositivos como televisão e impressoras. Podemos definir para qual mídia o arquivo CSS será válido através da regra media na tag de importação do arquivo. Para saber os valores possíveis visite o tutorial Princípios CSS desta série.

Ao importar o arquivo normalmente sem definir a mídia, ele é valido para todas. Para que seja válido apenas quando o documento for impresso atribuímos print à regra media.

<link rel="stylesheet" type="text/css" href="estilo.css" media="print" />

Uma variante da linha acima é utilizar o @import.

<style type="text/css">

@import url("estilo.css") print;

</style>

Um efeito colateral de utilizar o @import é um pequeno delay que às vezes ocorre no carregamento que faz com que o conteúdo da página fique alguns segundos sem a formatação.

Quando for importar duas folhas de estilo no mesmo arquivo defina para qual mídia são aplicáveis, pois se uma delas não tiver media ira afetar a outra devido ao efeito cascata do CSS.

A página

Vamos criar uma página básica, com menu, título, imagem, link e caixa de destaque.

<div class="global-div">



<ul class="menu">

<li><a href="#">Inicial</a></li>

<li><a href="#">Sobre</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Contato</a></li>

</ul>



<h1>CSS para Impressão</h1>

<img src="css.jpg" width="420" height="281" alt="CSS" />

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean odio sem, mattis malesuada, consectetuer eu, ultricies convallis, lacus. Praesent non orci. Donec sagittis metus vel massa. Nulla facilisi. Proin justo. Aenean ac massa. Quisque vel risus. Morbi ipsum. Integer odio eros, dapibus eget, egestas sed, lacinia dictum, nunc. Maecenas pellentesque rhoncus lectus. Nulla facilisi. Pellentesque eget libero et tortor hendrerit venenatis. Aliquam tempus, felis in ornare congue, lacus mi consectetuer risus, sit amet luctus orci nisl at dui. Aenean ligula sem, pretium sed, tincidunt sit amet, accumsan eget, justo. Nam in massa. Cras turpis velit, volutpat eu, vestibulum at, pellentesque vel, dui.</p>



<p><a href="#">Link para algum lugar</a></p>



<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent rutrum malesuada urna. Aliquam sollicitudin. Pellentesque id nisi. Duis in mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac elit. Etiam posuere venenatis ante. Nunc ullamcorper neque ac justo. Donec id purus. Aenean non enim eget diam aliquam tristique. Mauris pellentesque pulvinar dui. Donec et arcu ut leo laoreet vulputate. Aenean a magna et massa ornare congue. Phasellus a tellus vitae enim ornare laoreet.</p>



<div class="box">

<p>Integer viverra, odio sed sollicitudin malesuada, magna mauris cursus nulla, non ultricies arcu massa in tellus. Duis velit nibh, porttitor non, sodales at, iaculis eget, lectus. Curabitur vitae ante. </p>

</div>



<p>Integer viverra, odio sed sollicitudin malesuada, magna mauris cursus nulla, non ultricies arcu massa in tellus. Duis velit nibh, porttitor non, sodales at, iaculis eget, lectus. Curabitur vitae ante. Mauris dapibus consequat mi. Sed at quam a lacus varius tempus. Phasellus scelerisque suscipit justo. Morbi ac justo eu arcu ornare facilisis. Donec et est. Morbi et lectus. Suspendisse et augue. Vivamus enim eros, condimentum vel, sodales vel, ullamcorper vitae, purus.</p>



<p>Donec non felis quis augue interdum accumsan. Nulla at libero. Nunc ultricies auctor sapien. Praesent quis quam et massa tincidunt luctus. Vivamus nibh. Sed ligula. Nunc non est a augue tempor lacinia. Mauris lectus pede, porta tempus, ultrices sed, dignissim sed, justo. Suspendisse porta. Fusce arcu. Sed vehicula libero a odio.</p>



<h2 class="quebra">Subtitulo</h2>



<p>Ut magna urna, tincidunt nec, eleifend sit amet, auctor pretium, nisi. Suspendisse arcu enim, commodo at, facilisis in, feugiat sit amet, quam. Praesent ut lacus. Maecenas sed metus. Nulla sed urna. Donec vitae ipsum quis quam cursus porttitor. Curabitur justo elit, pulvinar eu, condimentum consectetuer, tristique vel, velit. Suspendisse libero massa, scelerisque eget, malesuada ut, ultricies aliquam, neque. Curabitur elementum est sed magna. Morbi enim. Ut dignissim mattis justo. Nunc justo.</p>



<p>Fusce purus. Curabitur eu ligula. Vestibulum ultricies hendrerit elit. Nulla a metus. Aenean aliquam. Phasellus nec massa. Nullam vehicula neque id magna ornare elementum. Phasellus luctus, lorem non ornare laoreet, ligula elit ultrices metus, vel scelerisque dolor velit nec risus. Ut orci. Nullam luctus, mauris et ultricies mattis, nisi felis auctor dui, sed elementum nisl felis sit amet lectus. Donec mauris odio, condimentum sit amet, semper sed, scelerisque eu, est. Aliquam pellentesque, ipsum id fermentum pretium, augue orci convallis magna, ut vulputate magna est vel enim. Nulla quis est mattis massa scelerisque tristique. Vestibulum id turpis. Proin ultrices. Proin lacinia nisi vehicula nunc. Nullam nec velit nec erat aliquam scelerisque.</p>

<p>Nullam luctus venenatis sapien. Praesent laoreet pharetra ipsum. Nulla diam nulla, vehicula vitae, venenatis a, sodales in, sem. Phasellus pulvinar ante ut sapien. Integer feugiat massa vel dolor. Integer luctus, ipsum a interdum blandit, dui odio pretium sapien, at vestibulum pede mi quis est. Cras odio. Donec urna. Sed viverra dictum elit. Quisque et magna eget leo lacinia feugiat. Nulla faucibus porttitor nisl. Vivamus sit amet lectus quis nisi euismod egestas. Aenean ultrices urna fringilla dui. Mauris id libero et turpis hendrerit pretium. Proin interdum pulvinar enim. Duis nunc.</p>



</div>

E estilizar com as regras abaixo:

/*----------------------RESET--------------------*/



body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,

li, dl, dt, dd, form, a, fieldset, input, th, td

{margin: 0; padding: 0; outline: none;}



body{line-height:1; font-size:62.5%; background:#fff; font-family:Arial, Helvetica, sans-serif;} /*---- 1.0 em = 10px---*/



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



/*----------------------RESET--------------------*/



p, a{font-size:1.3em; line-height:1.8em; margin-bottom:10px;}



.box p{margin:0;}



.box{position:relative; float:right; width:300px; padding:10px; margin:10px; background:#DCF1F1; border:1px solid #CDE2ED;}



.global-div{width:900px; height:auto; padding:0 15px 30px 15px; position:absolute; float:none; left:50%;  margin:5px 0 0 -470px ; border:5px solid #eaeaea; }



.global-div img{float:left; margin-right:20px; border:1px solid #eaeaea; z-index:500; }



h1{font:italic bold 5em Georgia, "Times New Roman", Times, serif; text-align:center; margin:20px 0; background:#333; color:#fff; padding:10px; letter-spacing:-0.04em; text-shadow:0px 0px 5px #eaeaea; }



h2{font:3em Georgia, "Times New Roman", Times, serif;}



ul{list-style:none; margin-left:300px;}



ul li{display:inline; margin-right:50px;}

Primeiramente foram resetados os valores para não haver discrepância na interpretação das regras pelos navegadores. Em seguida definidos os tamanhos de fonte, flutuação e cor das divs, aparência dos títulos e menu.

Sem complicação e na medida para que sejam explicados os principais aspectos e cuidados na formatação de uma página para impressão.

Propriedades Para Impressão

O CSS 2 possui algumas propriedades dedicadas apenas para formatação de conteúdo a ser impresso.

Quebra de página
As regras mais úteis são relacionadas a quebra de página e são aplicáveis apenas em elementos nível de bloco, como parágrafos, cabeçalhos (h1-6) ou display:block. Elas são:

• page-break-after – Quebra a página depois do elemento.
• page-break-before – Quebra a página antes do elemento especificado. Útil para deixar os títulos no topo da página.
• page-break-inside – Configura a quebra de linha dentro do elemento, como por exemplo, tabelas.

Vejamos os valores disponíveis para estas propriedades:

• auto – Comportamento padrão. Quebra somente quando necessário, se não incomodar deixa quieto.
• always – Sempre haverá quebra de página.
• avoid – Faz o possível para evitar uma quebra.
• left – Força a quebra de página para que o conteúdo inicie em uma página à esquerda.
• right – Força a quebra de página para que o conteúdo inicie em uma página à direita.

Número de linhas

Para definir quantas linhas serão deixadas no início ou final da página. Úteis em listas.

• orphans – Define o número mínimo de linhas que devem ficar no final da página quando a quebra de linha ocorrer no meio do elemento.
• windows – Mesma definição da orphans, mas para início da página.

@page

O CSS disponibiliza a regra @page para controle sobre outros aspectos da impressão, como tamanho da folha, extremidades e se é do lado direito ou esquerdo. O problema é que nem todos os navegadores interpretam esta regra, o que torna a implementação mais demorada e um tanto sem sentido.

Sendo assim, neste tutorial não será abordada a @page. Vou deixar alguns links para quem ficou curioso:

Página do W3C
Tutorial de formatação de um livro utilizando a @page.

Elementos Não Impressos

Os navegadores por padrão não suportam a impressão do plano de fundo dos elementos. Imagens ou cores são ignorados. Assim como efeitos introduzidos pelo CSS 3, como sombra.

Partindo para o bom senso, não há porque permitir a impressão do menu, dos links para outros blogs, publicidades (a não ser que pagas para isso também) e banners com animações que não terão sentido estáticas.

Para eles nós temos o display: none.

Os Textos

O CSS suporta a definição do tamanho dos elementos em pixels, centímetros, unidade relativa (em) e pontos. Cada um tem o seu lugar, sendo que o px e em geram melhores resultados no monitor. No papel funciona melhor o ponto. E para texto de parágrafo de preferência com o valor 12pt.

Nessa hora podemos pensar um pouco na economia de recursos e deixar a cor do texto um pouco menos preta. Ao invés de #000, um #333 ou até menos dependendo da importância do trecho. Mudança sutil, mas que faz diferença na quantidade dos recursos. Pense no meio-ambiente.

Links

Não há sentido em simplesmente mostrar um link na versão impressa. O leitor não terá como clicar nele e se tiver interesse, não saberá para onde o link leva. A solução é mostrar o endereço completo do link quando a versão for impressa.

Isso é possível utlilizando a regra :after do CSS.

a:after {content: " (" attr(href) ")";}

Depois de um link será inserido o conteúdo do atributo href. Nos navegadores atuais o funcionamento é 100%, já nas versões anteriores alguns não dão suporte, como o IE6.

Existe uma variante que é colocar os endereços dos links no rodapé das páginas. Útil quando a quantidade de links for grande. Pórem, você só atinge este resultado com javascript.

Na Prática

Vamos alterar o arquivo CSS que estiliza a página criada no ínicio do tutorial adicionando as regras para impressão e mudando alguns valores. Salve com o nome de “impressao.css”.

body{font-family:Georgia, "Times New Roman", Times, serif; margin:5% 3%; }



p, a{margin-bottom:10px; font-size:11pt; line-height:18pt; color:#333;}



a{color:#06F;}



.box p{margin:0;}



.box{position:relative; float:right; width:300px; padding:10px; margin:10px; border:1px solid #999;}



.global-div img{float:left; margin:5px 20px 0 0; border:1px solid #999;}



h1{font:italic bold 40pt Georgia, "Times New Roman", Times, serif; text-align:center; margin-bottom:12pt;}



h2{font:18pt Georgia, "Times New Roman", Times, serif;}



ul{display:none;}



.quebra{page-break-before:always;}



a:after {content: " (" attr(href) ")";}

Foi definida margem para o “body” que tornou-se o recipiente da página já que a “global-div” não foi estilizada simplesmente porque na impressão não desempenha papel relevante. O valor foi definido em porcentagem, mas pode ser em pontos, escolha sua.

Nos elementos de parágrafos foi alterado o tamanho da fonte, a medida para o espaçamento entre linhas e a cor. A formatação do link foi incluída porque o Internet Explorer 8 deixa os links a serem impressos automaticamente da cor preta.

A div “box” não tem definido a cor de fundo já que não adianta. Em compensação para as bordas foi escolhido um cinza escuro para destacar a caixa. Os cabeçalhos perderam os efeitos CSS 3 assim como cor de fundo, da letra (que fica automaticamente preta) e o espaçamento entre caracteres. Veja novamente que a medida das letras agora é em pontos.

No fim foi escondido o menu. O subtítulo que tinha uma classe sem serventia na versão para tela agora quebra a página e os links tem o endereço adicionados entre aspas ao lado deles.

Vá no menu “arquivo –> visualizar impressão” no seu navegador e veja o resultado.

A primeira página será igual a imagem acima. A segunda começa com o cabeçalho porque no arquivo definimos assim.

No Final

Indo pelas diretrizes apresentadas neste tutorial você não terá problemas na hora de estilizar uma página para impressão. Claro que existem casos específicos e nem sempre o que foi apresentado aqui resolvera os problemas que surgirem. Até adianto um, que é a respeito de float. Evite ao máximo esta regra ao estilizar para impressão e a dor de cabeça será muito leve.

DOWNLOAD: Descarregue o código utilizado neste tutorial: CSS Impressão, em formato .zip.

Tutorial Seguinte Da Série Aprende CSS Com Maicon Sobczak > CSS – Diferença Entre Browsers

CSS – Impressão é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Related posts:

1. CSS – Criação de Layout
2. CSS – Diferença Entre Browsers
3. CSS – Princípios