CSS: Important/Common CSS Hacks

SimonTemplar

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)

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!

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;

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