Blog Web Standards

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

CSS

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 */

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.