Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

CSS: Important/Common CSS Hacks

  • 30-04-2014 09:32AM
    #1
    SimonTemplar
    Registered Users, Registered Users 2 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

  • #2
    [Deleted User]
    Posts: 3 ✭ [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!


  • #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;


  • #4
    ThrowinShapes
    Registered Users, Registered Users 2 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