Thunder-Boy

10 dicas rapidinhas de CSS:

1. Vertical align div
   http://stylizedweb.com/2008/02/01/vertical-align-div/

2. Min-Height

   selector {
   min-height:500px;
   height:auto; !important
   height:500px;
   }

3. PNG transparency
   
   http://stylizedweb.com/2007/12/30/png-transparency-issues/

4. Autoclear

   .container:after {
   content: “.”;
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
   }.container {display: inline-table;}
   /* Hides from IE-mac \*/
   * html .container {height: 1%;}
   .container {display: block;}
   /* End hide from IE-mac */

5. Reset CSS

   body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,
   h5,h6,pre,form,fieldset,input,p,blockquote,th,td {
   margin:0; padding:0;
   }table {border-collapse:collapse;border-spacing:0;}
   fieldset,img {border:0;}
   address,caption,cite,code,dfn,em,strong,th,var {
   font-style:normal;font-weight:normal;
   }

   ol,ul {list-style:none;}
   caption,th {text-align:left;}
   h1,h2,h3,h4,h5,h6 {font-size:100%;}
   q:before,q:after {content:”;}

6. Scrolling Render IE

   html {
   background : url(null) fixed no-repeat;
   }

7. Opacity

   #transdiv {
   filter:alpha(opacity=75);
   -moz-opacity:.75;
   opacity:.75;
   }

8. PRE Tag

   pre {
   white-space: pre-wrap; /* css-3 */
   white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
   white-space: -pre-wrap; /* Opera 4-6 */
   white-space: -o-pre-wrap; /* Opera 7 */
   word-wrap: break-word; /* Internet Explorer 5.5+ */
   }

9. Li Background Repeat IE

   <!–[if lt IE 7]>
   <style>
   #leftnav li { zoom: 1;} /* haslayout=true */
   </style>
   <![endif]–>

10. Good to know

    @charset “UTF-8″;
    /* ———————————————————————-
    WinIE7
    ———————————————————————- */
    *:first-child+html selector{property:value;}
    /* ———————————————————————-
    WinIE6 & Mac IE
    ———————————————————————- */
    * html selector{property:value;}
    /* ———————————————————————-
    WinIE6
    ———————————————————————- */
    /*\*/
    * html selector{property:value;}
    /**/
    /* ———————————————————————-
    MacIE
    ———————————————————————- */
    /*\*//*/
    selector{property:value;}
    /**/

Veja também...

1. Best Practice: Select lentas, rápidas e super-rápidas.
2. Howto: Efeitos interessantes em CSS
3. Navegue sem deixar rastros…
4. Algumas revistinhas…
5. Dicas, Livros, Apostilas… de Dayse Duarte

Related posts brought to you by Yet Another Related Posts Plugin.