Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Uma das diversas limitações apresentadas pelo IE6 está relacionada ao uso de pseudo-classes. Uma delas é a “:hover” que só pode ser usada em links.

Porém, em alguns casos, precisamos dela para fazer determinados efeitos ou funcionalidades do site, como menus dropdown.

Para poder aplicar a pseudo-classe “:hover”, “:active” ou “:focus” em qualquer elemento no IE6, você deve:

– Baixar o arquivo .htc neste link;
– Inserir o código abaixo em seu CSS, utilizando o caminho do arquivo .htc relativo ao HTML:

body { behavior: url(css/csshover2.htc); } /* inclui efeito :hover, :active e :focus para Internet Explorer 6 */

Última modificação: 26 março 2009

Para usar o atributo target="_blank" para que links abram em uma nova janela sem usar window.open() e ainda ter seu XHTML Strict válido, basta incluir o seguinte trecho de código no cabeçalho da sua página:

window.onload = function() {
  var links = document.links;
  for (var i = 0, s = links.length; i < s; i++) {
    if (links[i].rel == 'external') {
      links[i].target = '_blank';
    }
  }
};

Usando jQuery, o trecho de código que deve ser incluído é bem menor:

$(document).ready(function() {
  $('a[rel=external]').attr('target', '_blank');
});

Após usar este script, basta incluir o atributo rel="external" em seus links para que estes abram em nova janela:

&amp;amp;lt;a href=&amp;amp;quot;http://www.webstandards.blog.br/&amp;amp;quot; title=&amp;amp;quot;Melhor blog sobre Web Standards&amp;amp;quot; rel=&amp;amp;quot;external&amp;amp;quot;&amp;amp;gt;Blog Web Standards&amp;amp;lt;/a&amp;amp;gt;

Obs: este script foi escrito por Gustavo Straube.

Última modificação: 31 maio 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Há uma forma de conseguirmos fazer um elemento “englobar” os elementos que nele estão inseridos, mesmo usando “float”.

Por exemplo, em uma galeria de imagens, onde cada <li> usa “float: left”, a lista, teoricamente, não conseguiria agregar todos os itens, pois estes usam “float”.

Para reverter este caso, basta usar a classe “contemfloat”, bastante utilizada em nossos projetos:

/* contendo float */
.contemfloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.contemfloat { display: inline-block; }
/* Hides from IE-mac \*/
* .contemfloat { height: 1%; }
.contemfloat { display: block; }
/* End hide from IE-mac */

Caso você precise se algo mais rápido e prático, pode usar a propriedade overflow no CSS dessa forma:

overflow: hidden;

* Update: Reformulação do CSS padrão. Procuramos evitar o uso desse método, preferimos optar pelo uso do overflow e caso exista problema com o IE6 incluímos “height: 1%;” apenas para esse navegador.

29 2009 janeiro

Image replacement

Autor: Carlitos em CSS

Última modificação: 31 maio 2011

Quando o layout necessita utilizar alguma fonte customizada para títulos ou textos específicos, temos que utilizar imagens ao invés do texto puro.

A técnica image replacement serve justamente para exibir uma imagem (com a fonte customizada), ao mesmo tempo que no HTML há um texto limpo, para que este seja acessível aos sistemas de busca e leitores de tela, por exemplo.

Supondo que nosso HTML seja o seguinte:

<h1>Título do site</h1>

Faremos nosso CSS para que substitua este texto por uma imagem (de 200px por 50px por exemplo):

h1 { width: 200px; height: 50px; background: url(../imagens/titulo.png) no-repeat; text-indent: -999em; overflow: hidden; }

Obviamente que a largura, altura e caminho da imagem deverão ser ajustados, de acordo com a necessidade.

29 2009 janeiro

Abreviação das propriedades CSS

Autor: Carlitos em CSS

Última modificação: 31 maio 2011

Há diversas maneiras de definir determinadas propriedades do CSS como background, font, margin, padding, etc.

Background

Como o próprio nome diz, a propriedade background define o fundo do elemento, com uma cor sólida ou uma imagem. Neste último caso, pode-se dizer se esta será repetida, seu posicionamento e comportamento.

seletor {
background-color: #fff;
background-image: url(imagem.jpg);
background-position: bottom;
background-repeat: no-repeat;
}

Como pode-se perceber, esta maneira deixa seu código muito extenso, então vamos abreviar estas propriedades em uma única linha. Neste caso, não há importância na ordem pela qual você dispõe os valores, mas é interessante manter um padrão de escrita:

seletor { #fff background: url(imagem.jpg) bottom no-repeat; }

Color

Como nem todos ainda sabem, é importante comentarmos sobre a abreviação na declaração da escrita das cores. Quando utilizamos os valores hexadecimais, há casos nos quais podemos escrever apenas 3 caracteres, ao invés dos 6 que estamos acostumados.

seletor { color: #aaff00; }

Podemos abreviar desta forma:

seletor { color: #af0; }

A lógica da abreviação é simples: cada caractere representa um par de caracteres da escrita não abreviada.

Margin e padding

A lógica para abreviação das propriedades margin e padding é a mesma. Vejamos o exemplo da escrita sem abreviação:

seletor {
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;
}

Para abreviar existem algumas maneiras:
Neste caso, os valores são aplicados para todos os lados do elemento:

seletor { margin: 1px; padding: 1px; }

Se as unidades do topo e rodapé forem as mesmas (1px), esquerda e direita forem iguais entre si (5px), podemos escrever de outra forma:

seletor { margin: 1px 5px; padding: 1px 5px; }

Mas há situações nas quais precisa-se utilizar uma unidade para o topo (1px), outra (igual) para os lados (5px) e mais uma para o rodapé (6px):

seletor { margin: 1px 5px 6px; padding: 1px 5px 6px; }

E, por fim, uma maneira simplificada de escrever as dimensões para todos os lados, mas deve-se seguir o sentido horário, ou seja: top (1px), right (2px), bottom (3px) e left (4px):

seletor { margin: 1px 2px 3px 4px; padding: 1px 2px 3px 4px; }

Border

Para abreviar a propriedade border é tão fácil quanto a background, pois não exige uma ordem padrão. Segue abaixo exemplo da escrita sem abreviações:

seletor {
border-width: 1px;
border-style: solid;
border-color: #000;
}

Para abreviar esta propriedade é simples:

seletor { border: 1px solid #000; }

Caso queira estilizar somente a borda do topo, por exemplo, é só acrescentar “-top” após o “border”:

seletor { border-top: 1px solid #000; }

Font

Esta propriedade tem a função de estilizar o tamanho da fonte, sua linha, família, peso, etc. A forma mais complexa de escrita é a seguinte:

seletor {
font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 1em;
line-height: 1.3em;
font-family: "Trebuchet MS", Arial, sans-serif;
}

Muitos não sabem que a propriedade line-height se inclui nesta abreviação, por não ter o prefixo “font”. Veja agora a maneira simplificada de escrever a propriedade font:

seletor { font: normal small-caps bold 1em/1.3em "Trebuchet MS", Arial, sans-serif; }

Fique atento para a ordem de escrita e, caso o nome da fonte tenha espaço, escreva utilizando aspas duplas, como no exemplo acima.

List-style

A propriedade list-style é utilizada para estilizar a marcação de itens de lista. A escrita não abreviada é a seguinte:

seletor {
list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);
}

Para escrevê-la de forma simplificada não é necessária uma ordem certa das propriedades. Veja o exemplo da abreviação:

seletor { list-style: circle inside url(bullet.gif); }

Há outras propriedades que podem ser simplificadas, como a outline mas, devido sua falta de suporte, não é necessário exemplificá-la aqui.

29 2009 janeiro

Diferentes tipos de DOCTYPE

Autor: Carlitos em HTML

Última modificação: 31 maio 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

A renderização correta pelos navegadores depende, inicialmente, do DOCTYPE definido no início dos códigos HTML. Portanto é bem importante conhecermos as variações que podemos usar, de acordo com as necessidades impostas pelo projeto em questão:

HTML 4 STRICT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 TRANSITIONAL

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 STRICT

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.1 STRICT

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

* Update: Versão 5 do html – Vejo o documento base para HTML5.

29 2009 janeiro

Max e min width no IE 6

Autor: Carlitos em CSS, Hacks

Última modificação: 18 fevereiro 2009

Sabemos que o Internet Explorer 6 tem limitações em diversas propriedades do CSS 2.
Supondo que a largura mínima seja 333px, use a regra abaixo:

* html elemento { width: expression( document.body.clientWidth < 334 ? "333px" : "auto" ); } /* seta a min-width para o IE */

Agora, se a largura máxima seja 777px, use:

* html elemento { width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); }/* seta a max-width para o IE */

Última modificação: 25 agosto 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Procurando alguma boa solução para aplicação de transparência alpha do PNG no Internet Explorer 6?

Diversas soluções já foram apresentadas, desde um script que necessitava de um GIF transparente de 1×1 pixel e era aplicável somente às imagens em tags <img>, além de utilizar a propriedade filter direto no CSS, o que costumamos utilizar, pois temos total controle sobre a aplicação da funcionalidade no IE 6.

Porém, tanto esse script como a aplicação direta no CSS usavam o mesmo recurso (AlphaImageLoader Filter) para simular a transparência no Internet Explorer. Então ambos os casos apresentavam as mesmas limitações.

No caso de elementos que necessitavam de um background com o PNG, não poderíamos usar background-position, background-repeat, etc.; recursos fundamentais para aplicação de fundos via CSS, pois neste caso não se trata de um fundo propriamente dito, pois o IE não o interpreta dessa forma.

Então apresentamos a vocês o DD_belatedPNG, a solução definitiva para uso de PNG 24 bits no Internet Explorer 6!

Para utilizá-lo é bastante simples: basta baixar o script (procure mantê-lo atualizado) e usar a classe “.png_bg” (ou qualquer nome que você definir em seu código) nos elementos nos quais o PNG deve ser utilizado.

O ponto mais interessante é que, além da fácil aplicação dessa solução, o script usa outro método para simular a transparência alpha, ao contrário de tudo o que vinha sendo visto até hoje. Desta forma, poderemos utilizar background-position, background-repeat, cliques em links, elementos de formulário, etc., algo impossível de ser feito no Internet Explorer 6 até então.

Exemplo de aplicação

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
/* Nomeando a classe que definirá quais elementos terão a correção para PNG */
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->

Como vocês podem ver a aplicação é bem simples, mas caso haja alguma dúvida é só comentar 🙂

Update: Download atualizado para a versão 0.8a do script.

23 2009 janeiro

Documento base para CSS

Autor: g3 em CSS

Última modificação: 13 junho 2012

LESS

Para desenvolvimento CSS, utilizamos a linguagem dinâmica de estilos LESS, a qual nos permite estender o CSS com comportamento dinâmico através de variáveis, mixins, operações e funções.

Para usar LESS é necessário usar um JavaScript que permite ao browser interpretar diretamente a linguagem, ou algum compilador que converta seu código do formato LESS para CSS.

Existem vários compiladores para diferentes sistemas operacionais; no nosso caso utilizamos um compilador que, ao detectar a atualização do arquivo LESS, gera automaticamente o CSS minificado (sem espaços, comentários e quebras de linha), o qual puxamos diretamente em nossos HTMLs.

Organização dos arquivos CSS

Nosso padrão de organização para estilização é separado entre os seguintes arquivos:

Estilos gerais

  1. geral-min.less – Estilos para todos os dispositivos;
  2. desktop-min.less – Dispositivos com largura a partir de 769px;
  3. tablet-min.less – Dispositivos com largura de 480px até 768px;
  4. mobile-min.less – Dispositivos com largura de 320px até 479px;
  5. impressao-min.less – Estilos para versão de impressão.

Estilos específicos

Para grandes projetos deve-se manter os arquivos:

  1. desktop-templates-min.less – Estilos específicados por página (id) para versão desktop;
  2. tablet-templates-min.less – Estilos específicados por página (id) para versão tablet;
  3. mobile-templates-min.less – Estilos específicados por página (id) para versão mobile.

Conforme à dimensão do projeto é recomendavél adicionar o arquivo:

Além de todos arquivos utilizamos um arquivo como biblioteca de classes com estilos gerais. Nesse arquivo ficam as váriaveis e mixins globais do LESS, que podem ser utilizadas em qualquer definição de estilo.

  • elementos.less – Classes com estilos gerais, utilizados em todo os arquivos LESS.

Os arquivos com estilos gerais incluem os arquivos de estilos específicos via @import, portanto nos arquivos HTML são adicionados apenas os arquivos gerais.

Media Query

Incluímos no HTML nesse formato:

  <link href="css/geral-min.css?v=1" rel="stylesheet" />
  <link href="css/mobile-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 320px) and (max-width: 479px)" />
  <link href="css/tablet-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 768px)" />
  <link href="css/desktop-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 769px)" />
  <link href="css/impressao-min.css?v=1" rel="stylesheet" media="print" />
  <!--[if lt IE 9]>
    <link href="css/desktop-min.css?v=1" rel="stylesheet" />
    <script src="js/selectivizr-min.js"></script>
  <![endif]-->

*Selectivizr é um script que interpreta pseudo-classes e seletor por atributo no Internet Explorer 6-8.

Caso o projeto seja pequeno, não usamos nenhum arquivo específico para páginas, incluímos todos estilos nos arquivos: “geral.less”, “mobile.less”, “tablet.less” e “desktop.less”.

No documento de estilos gerais incluímos nosso padrão de estilização para formulários. Que incluí estilos prontos para determinados códigos HTML pré-definidos.

elementos.less

/*
  --------------
  BIBLIOTECA DE CLASSES
  --------------
*/


/*
  --------------
  PALETA DE CORES
  --------------
*/


@cor_textos: #000; // Textos de conteúdo.
@cor_body: #fff; // Cor do fundo do site.


/*
  --------------
  CLASSES
  --------------
*/


/* alinhamentos */
.direita { float: right; }
.esquerda { float: left; }
p {
  &amp;.direita,
  &amp;.esquerda { float: none; }
  &amp;.direita { text-align: right; }
  &amp;.esquerda { text-align: left; }
}
.centro { text-align: center; }

/* image replacement */
.rpl { font: 0/0 a; color: transparent; }

geral-min.less

/*
  Cliente: 
  Projeto: 

  --------------
  PADRÕES DE CODIGO - Frameworks FED v3.0
  --------------

  Nossos projetos são desenvolvidos de acordo com um padrão de escrita.
  Mais informações sobre ele em: http://www.webstandards.blog.br/checklist-para-desenvolvimento-css/
  Qualquer dúvida, mande um e-mail para: contato[at]webstandards.blog.br
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais


/*
  --------------
  ELEMENTOS e CLASSES
  --------------
*/


/* ------- ELEMENTOS ------- */

  /* reset */
  body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, menu, form, fieldset, legend, button, figure, section, summary { margin: 0; padding: 0; }
  article, aside, details, summary, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
  button, fieldset, iframe, img { border: 0; }
  input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; }
  details summary::-webkit-details-marker { display: none; }
  
  html { font: 100% Arial, Helvetica, sans-serif; color: @cor_textos; }
  body { background-color: @cor_body; font-size: .75em; } /* tamanho da fonte: 12px */


  /* formulário */
  form {
    @largura_label: 100px;
    @padding_right_label: 10px;

    #instrucoes-formulario { padding: 1.66em 0;
      p { margin-bottom: .83em;
        &amp;:last-child { margin-bottom: 0; }
      }
    }

    ol, ul { list-style: none; }

    ol {
      li { margin-bottom: .41em; padding: .41em 0; }

      /* label */
      label,
      p,
      ol li:first-child label { float: left; width: @largura_label; padding-right: @padding_right_label; line-height: 2em; text-align: right; }

      /* label interno */
      li li label,
      p.erro,
      li.confirmacao label { float: none; width: auto; padding-right: 0; text-align: left; }
      ul li label { margin-right: 0; }

      /* listas internas */
      ol,
      ul,
      li li { display: inline-block; vertical-align: top; }
      li li { margin: 0 10px 0 0; padding: 0; }
    }

    /* mensagem de erro */
    ol p.erro { display: block; }
    p.erro,
    ol li.erro { color: #e33; }
    li.erro { border-radius: 3px; }
    li.erro,
    input.erro,
    textarea.erro { background-color: #f7cac9; }
    ol li li p.erro { margin-left: 0; }

    /* margin left de alinhamento com os campos */
    #instrucoes_formulario,
    ol li p.erro,
    ol ol li:first-child p.erro,
    ol li.confirmacao label,
    button { margin-left: @largura_label + @padding_right_label; }
  }

  // correções ie

  /* linhas */
  .ie6 form ol li { height: 1%; overflow: hidden; }

  /* listas internas */
  .ie6, .ie7 {
    form {
      ol {
        ol,
        ul,
        li li { display: inline; }
      }
    }
  }

  /* mensagem de erro */
  .ie6 form ol p.erro { display: inline; float: left; }


/* ------- CLASSES ------- */

  /* paginação */
  .paginacao {
    li { display: inline-block;
      a[rel="prev"], a[rel="next"] {
        &amp;:hover {
        }
      }
    }
  }

  /* popup */
  .popup {
    display: none; position: absolute; z-index: 10;
    a.fechar { }
  }
  .pelicula { position: absolute; z-index: 9; }

  /* botões */
  .botao,
  .botao strong { display: inline-block; background: url(../images/botao.png) no-repeat; line-height: 25px; text-decoration: none; }
  .botao { padding-left: 10px;
    strong { padding-right: 10px; background-position: right 0; font-weight: normal; }
    &amp;:hover {
      background-position: 0 0;
      strong { background-position: right 0; }
    }
  }
  button.botao::-moz-focus-inner { border: 0; padding: 0; }


/*
  --------------
  ESTRUTURA
  --------------
*/


/* ------- TOPO ------- */
.topo { }


/* ------- CONTEÚDO ------- */
.conteudo {

  /* coluna1 */
  .coluna1 { }

  /* coluna2 */
  .coluna2 { }

}


/* ------- RODAPÉ ------- */
.rodape { }

desktop-min.less

/*
  --------------
  DESKTOP - Dispositivos com largura a partir de 769px
  --------------
*/

@import url("elementos.less"); // biblioteca de classes com estilos gerais
@import url("desktop-templates-min.css"); /* estilos específicos dos templates */


/*
  --------------
  ELEMENTOS e CLASSES
  --------------
*/


/* ------- CLASSES ------- */
.limites { width: 980px; margin: 0 auto; }

  /* chrome frame */
  .chrome_frame { position: relative; display: none; height: 116px; padding-top: 25px; background: url(../imagens/chrome-frame-bg.jpg) center 0 repeat-x; font: 12px Arial sans-serif !important; color: #545454 !important;
    .limites { position: relative; width: 845px; margin: 0 auto; padding: 0 20px 0 135px; background: url(../imagens/chrome-frame-logo.png) 20px 0 no-repeat; }
    h3 { margin-bottom: 1em; font-size: 1.33em !important; }
    p { margin: 0 240px 12px 0; }
    a { text-decoration: none; color: #0000ff; }
    .instalar { position: absolute; top: -5px; right: 20px; width: 190px; height: 70px; padding: 15px 10px; border: 1px solid #dadada; background: #fff; font-size: .9em !important;
      p { margin: 0; text-align: center; }
      a.botao_instalar { display: block; width: 118px; height: 30px; margin: 0 auto 15px; background: url(../imagens/chrome-frame-botao.png) no-repeat; line-height: 30px; font-weight: bold; font-size: 1.3em; text-align: center; text-decoration: none; color: #fff; }
    }
    a.fechar { position: absolute; top: -15px; right: -15px; width: 14px; height: 14px; background: url(../imagens/chrome-frame-fechar.png) no-repeat; text-indent: -9999em; overflow: hidden; }
  }


/*
  --------------
  ESTRUTURA
  --------------
*/


/* ------- TOPO ------- */
.topo { }


/* ------- CONTEÚDO ------- */
.conteudo {

  /* coluna1 */
  .coluna1 { }

  /* coluna2 */
  .coluna2 { }

}


/* ------- RODAPÉ ------- */
.rodape { }

tablet.css

/*
  --------------
  TABLET - Dispositivos com largura de 480px ate 768px
  --------------
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais
@import url("tablet-templates-min.css"); /* estilos específicos dos templates */


/*
  --------------
  ELEMENTOS e CLASSES
  --------------
*/


/* ------- ELEMENTOS ------- */



/* ------- CLASSES ------- */



/*
  --------------
  ESTRUTURA
  --------------
*/


/* ------- TOPO ------- */
.topo { }


/* ------- CONTEÚDO ------- */
.conteudo {

  /* coluna1 */
  .coluna1 { }

  /* coluna2 */
  .coluna2 { }

}


/* ------- RODAPÉ ------- */
.rodape { }

mobile-min.less

/*
  --------------
  MOBILE - Dispositivos com largura de 320px ate 479px
  --------------
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais
@import url("mobile-templates-min.css"); /* estilos específicos dos templates */


/*
  --------------
  ELEMENTOS e CLASSES
  --------------
*/


/* ------- ELEMENTOS ------- */

  /* formulário */

  form {
    ol {
      /* label */
      label,
      p,
      ol li:first-child label { display: block; float: none; width: auto; padding-right: 0; text-align: left; }

      li p.erro,
      ol li:first-child p.erro,
      li.confirmacao label { margin-left: 0; }
    }

    #instrucoes_formulario,
    button { margin-left: 0; }
  }


/* ------- CLASSES ------- */
.limites { padding: 10px; }


/*
  --------------
  ESTRUTURA
  --------------
*/


/* ------- TOPO ------- */
.topo { }


/* ------- CONTEÚDO ------- */
.conteudo {

  /* coluna1 */
  .coluna1 { }

  /* coluna2 */
  .coluna2 { }

}


/* ------- RODAPÉ ------- */
.rodape { }

“desktop-templates-min.less”, “tablet-templates-min.less”, “mobile-templates-min.less” e “templates-min.less”

/*
  --------------
  PÁGINAS ESPECÍFICAS
  --------------
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais


/* ------- PÁGINA INICIAL ------- */
#inicial { }

impressao-min.less

/*
  --------------
  VERSÃO PARA IMPRESSÃO
  --------------
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais


/*
  --------------
  ELEMENTOS, ESTRUTURA e CLASSES
  --------------
*/


/* ------- ELEMENTOS ------- */
* { background: transparent !important; text-shadow: none !important; color: black !important; }
body { font-size: 11pt; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
form { display: none; }
iframe, img { border: 0; }
img { max-width: 100% !important; }
table { border: 1px solid #000; border-collapse: collapse; }
a { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }


/* ------- ESTRUTURA ------- */
.topo, .coluna1, .rodape { display: none; }


/* ------- CLASSES ------- */
.paginacao, .popup { display: none; }

Faça download do Framework padrão e veja os arquivos, organização das pastas e ajuste conforme sua necessidade.

23 2009 janeiro

Documento base para XHTML

Autor: Carlitos em HTML

Última modificação: 31 maio 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Gostaria de padronizar seus documentos XHTML? Uma boa forma de começar seu código é com o nosso exemplo utilizado pela equipe, ao início de todos os projetos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title></title>
  <link href="css/estilo_geral.css?v=1" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/estilo_paginas.css?v=1" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/estilo_print.css?v=1" rel="stylesheet" type="text/css" media="print" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
  <script src="scripts/swfobject.js"></script>
  <script src="scripts/funcionalidades.js"></script>
  <!--[if lt IE 9]><script src="scripts/selectivizr-min.js"></script><![endif]-->
  <!--[if lt IE 8]><script src="scripts/ie6update.js"></script><![endif]-->
  <!--[if IE 6]><script src="scripts/DD_belatedPNG_0.0.8a-min.js"></script><![endif]-->
</head>
<body>

<!-- abre limites -->
<div class="limites">

<!-- abre topo -->
  <div id="topo">

  </div>
<!-- fecha topo -->

<!-- abre conteúdo -->
  <div id="conteudo">

  </div>
<!-- fecha conteúdo -->

<!-- abre rodapé -->
  <div id="rodape">

  </div>
<!-- fecha rodapé -->

</div>
<!-- fecha limites -->

</body>
</html>

Scripts usados