Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

CSS: Important/Common CSS Hacks

Options
  • 30-04-2014 9:32am
    #1
    SimonTemplar
    Registered Users Posts: 2,815 ✭✭✭


    In my quest to become a better front-end developer, I'm trying to put together a reference guide of the CSS fixes/hacks/bugs every front-end developer should know. Ideally:

    - name of the hack
    - css (and HTML if applicable) code of the hack
    - description of the bug/issue it fixes
    - description of why the hack works

    I already know the clearfix one. What others would you recommend you add to this list.

    (does such a reference already exist somewhere)


Comments

  • Options
    #2
    [Deleted User]
    Posts: 0 ✭ [Deleted User]


    Hi,

    It might be better to look up best practises rather than hacks.

    Some good references are:
    developer.mozilla.org/en-US/docs/Web/Guide/CSS
    taitems.github.io/Front-End-Development-Guidelines/#cssSection

    For fixing IE css issues, the following technique is useful: isobar-idev.github.io/code-standards/#_internet_explorer_bugs


    Best of luck!


  • Options
    #3
    Fenster
    Closed Accounts Posts: 4,763 ✭✭✭Fenster


    UA sniffing is iffy these days because every browser wants to be Gecko, and $(window).width() on page load doesn't necessarily tell me the actual screen size, so:
    @media only screen and (max-device-width: 480px) {
    .smartphone-test{ display: none; }
}

    var isSmartphone = ($('.smartphone-test').css('display') === 'none') ? true : false;


  • Options
    #4
    ThrowinShapes
    Registered Users Posts: 63 ✭✭ThrowinShapes


    Technically floats are a hack for layout.

    One I've found useful is making -moz-appearance: none; actually work. I've only tested this on <select> elements:

    select {
    -moz-appearance: none;
    /* These two rules trigger the correct behaviour */
    text-overflow: ' ';
    text-indent: 0.01px;
    }


Advertisement