25 May

10 dicas rápidas (hacks) de CSS

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

One thought on “10 dicas rápidas (hacks) de CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>