4 ms·

CSS Code Snippets To Make You A Better Coder

99 points by bogdans 16y ago

It is almost impossible to gather in an article all the CSS code snippets that could help you in the future but here are some of the ones that you would need more often than others. Don’t get scared by the length of some of these CSS hacks’s code cause they’re all easy to implement and where is the case, they’re well documented. Besides the ones that solve common and annoying problems there are also some that solve new issues brought by the new technologies.

xentronium 16y ago
Lots of the snippets mentioned (and even more that are not!) are already included in compass (http://compass-style.org http://compass-style.org).
forbes 16y ago
I read all 31 snippets and I am still a terrible coder. Perhaps a better title would be "31 random CSS hacks, copied from other blogs, in no particular logical order"
- wippler 16y ago
  Can anyone point to a good CSS resource with more detailed explanations?
  - pbhjpbhj 16y ago
    http://www.quirksmode.org/ http://www.quirksmode.org/ is great for cross-browser stuff.
TamDenholm 16y ago
Personally i believe that you should use the least amount of CSS hacks as humanly possible. The only one i use on a regular basis is clearfix. I usually dont have to use any others to get my layout working in everything except IE. I then use an IE specific style sheet (conditional comments) to break my layout for IE. In my view its better to do that than use hacks.
- forbes 16y ago
  I agree. Anytime I use a CSS hack it makes me feel dirty. An IE specific stylesheet is an unfortunate necessity, but there seems to be a cottage industry of people using browser-specific hacks for everything. It feels like it goes against the whole spirit the CSS standard. Maybe it is a case of just getting the job done, and being forced into nasty hacks by a half-dozen browsers implementers who are supporting different parts of the standards on their own schedule.
KuraFire 16y ago
Knowing how to use CSS hacks to target specific browsers does not make you a better coder. Knowing how not to need those hacks makes you a better coder. Also, sigh.
fredoliveira 16y ago
This is the kind of list that works not to the advancement of standards-based creation, but its detriment. Firstly, the tips are just thrown out there, which will certainly not help the CSS novice understand the reasoning behind them. Second, they're mostly outdated/unnecessary. And third, as already mentioned in this thread, there's a case to be made for less hacks. Regarding hacks specifically: if you feel like you need to use hacks, at least try to understand how they work and the problem they solve. i.e: don't just throw something out there to solve IE problems if you don't know what they mean. It's amazing how many people use box model hacks in their code but don't even know how the box model actually works. It is certainly one part of the spec that isn't really obvious for most people, but copying/pasting a few lines will certainly not make you a better coder.
- uscfan1781 16y ago
  I completely agree. When I first learned CSS it was largely through tips and tricks like these, but without any sort of mental model or big picture understanding of what was going on my progress was unimaginably slow. I had to actually read part of the spec and start looking at and modifying stylesheets used on real sites before I became at all comfortable.
  - mcantor 16y ago
    Was there a particular part of the spec you found illuminating / readable?
    - camtarn 16y ago
      When I was learning, I got really quite confused by the intersection of floats, overflow and positioning. Reading the spec and actually understanding all of the rules at the same time, rather than just what I could glean from random hacking and tutorials, was really valuable.
niyazpk 16y ago
After struggling a lot with the browser specific hacks to target IE/Webkit/Whatever, I have now switched to CSS browser selector [1] and never looked back. It simply saves a lot of time and effort. If you think about it, the User Agent String is the only accurate information that can be used to sniff the browser name and version, not some random CSS hack. BTW the article is mostly useless for any practical use. If you really want to target IE6/IE7, this article [2] is a nice start. Learn about what types of bugs IE support and try to remember the name of the bug so that you can google a fix for it when you actually encounter one. As others suggested here, try to understand at least the basics of box model and how it is different in IE, but don't try to get a PhD in any IE bug you encounter. Fix it as fast as you can using whatever easy way out you can see an move on. There are better things to do in life. [1] https://github.com/rafaelp/css_browser_selector/ https://github.com/rafaelp/css_browser_selector/ [2] http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet...
- Pewpewarrows 16y ago
  Using the User Agent String to do anything in CSS or JS is a giant no-no. IE conditional comments, CSS hacks, and feature detection / polyfills are the industry standards. The UA String can be non-existent, mishandled, or just plain-old fabricated.
- pbhjpbhj 16y ago
  >User Agent String is the only accurate information that can be used to sniff the browser name and version, not some random CSS hack. Those random CSS hacks should always work as they are relying on the specific functions of the UA which can not be altered (though they might clash with new browsers, * html anyone?), whilst as a sibling comment notes UA can be easily modified. Both methods are flawed equally IMO.
- kaylarose 16y ago
  I find I rarely need to target any browser other than IE with specific styles, so I usually end up doing something like this, which doesn't rely on JS.     <html lang="en" class="no-js"> Edit: And then remove the 'no-js' class with js
alttab 16y ago
The first tip was when the title said CSS makes you a coder.
emef 16y ago
> "You don’t want it to come after the header on small content pages like a kid comes after candy. It is simply wrong." Instantly stopped reading, what kind of freak writes about that.
abcd_f 16y ago
A word of caution regarding "ultimate font stacks" - most of these are an utopia. Not all fonts have the same height and x-height (read - the same letter size and general visual appearance) at the same pixel size. Most notably, Constantia just does NOT work as a drop-in Georgia replacement. Nor does Calibri work as a Verdana substitute. They needs either a different font-size or line-height. In other words - stay with a conservative font stack or do on the fly font detection and restyle the document respectively.

99 points by bogdans 16y ago

xentronium 16y ago

Lots of the snippets mentioned (and even more that are not!) are already included in compass (http://compass-style.org http://compass-style.org).

forbes 16y ago

I read all 31 snippets and I am still a terrible coder. Perhaps a better title would be "31 random CSS hacks, copied from other blogs, in no particular logical order"

wippler 16y ago
Can anyone point to a good CSS resource with more detailed explanations?
- pbhjpbhj 16y ago
  http://www.quirksmode.org/ http://www.quirksmode.org/ is great for cross-browser stuff.

TamDenholm 16y ago

Personally i believe that you should use the least amount of CSS hacks as humanly possible. The only one i use on a regular basis is clearfix. I usually dont have to use any others to get my layout working in everything except IE. I then use an IE specific style sheet (conditional comments) to break my layout for IE. In my view its better to do that than use hacks.

forbes 16y ago
I agree. Anytime I use a CSS hack it makes me feel dirty. An IE specific stylesheet is an unfortunate necessity, but there seems to be a cottage industry of people using browser-specific hacks for everything. It feels like it goes against the whole spirit the CSS standard. Maybe it is a case of just getting the job done, and being forced into nasty hacks by a half-dozen browsers implementers who are supporting different parts of the standards on their own schedule.

KuraFire 16y ago

Knowing how to use CSS hacks to target specific browsers does not make you a better coder. Knowing how not to need those hacks makes you a better coder. Also, sigh.

fredoliveira 16y ago

This is the kind of list that works not to the advancement of standards-based creation, but its detriment. Firstly, the tips are just thrown out there, which will certainly not help the CSS novice understand the reasoning behind them. Second, they're mostly outdated/unnecessary. And third, as already mentioned in this thread, there's a case to be made for less hacks. Regarding hacks specifically: if you feel like you need to use hacks, at least try to understand how they work and the problem they solve. i.e: don't just throw something out there to solve IE problems if you don't know what they mean. It's amazing how many people use box model hacks in their code but don't even know how the box model actually works. It is certainly one part of the spec that isn't really obvious for most people, but copying/pasting a few lines will certainly not make you a better coder.

uscfan1781 16y ago
I completely agree. When I first learned CSS it was largely through tips and tricks like these, but without any sort of mental model or big picture understanding of what was going on my progress was unimaginably slow. I had to actually read part of the spec and start looking at and modifying stylesheets used on real sites before I became at all comfortable.
- mcantor 16y ago
  Was there a particular part of the spec you found illuminating / readable?
  - camtarn 16y ago
    When I was learning, I got really quite confused by the intersection of floats, overflow and positioning. Reading the spec and actually understanding all of the rules at the same time, rather than just what I could glean from random hacking and tutorials, was really valuable.

niyazpk 16y ago

After struggling a lot with the browser specific hacks to target IE/Webkit/Whatever, I have now switched to CSS browser selector [1] and never looked back. It simply saves a lot of time and effort. If you think about it, the User Agent String is the only accurate information that can be used to sniff the browser name and version, not some random CSS hack. BTW the article is mostly useless for any practical use. If you really want to target IE6/IE7, this article [2] is a nice start. Learn about what types of bugs IE support and try to remember the name of the bug so that you can google a fix for it when you actually encounter one. As others suggested here, try to understand at least the basics of box model and how it is different in IE, but don't try to get a PhD in any IE bug you encounter. Fix it as fast as you can using whatever easy way out you can see an move on. There are better things to do in life. [1] https://github.com/rafaelp/css_browser_selector/ https://github.com/rafaelp/css_browser_selector/ [2] http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet...

Pewpewarrows 16y ago
Using the User Agent String to do anything in CSS or JS is a giant no-no. IE conditional comments, CSS hacks, and feature detection / polyfills are the industry standards. The UA String can be non-existent, mishandled, or just plain-old fabricated.
pbhjpbhj 16y ago
>User Agent String is the only accurate information that can be used to sniff the browser name and version, not some random CSS hack. Those random CSS hacks should always work as they are relying on the specific functions of the UA which can not be altered (though they might clash with new browsers, * html anyone?), whilst as a sibling comment notes UA can be easily modified. Both methods are flawed equally IMO.
kaylarose 16y ago
I find I rarely need to target any browser other than IE with specific styles, so I usually end up doing something like this, which doesn't rely on JS.     <html lang="en" class="no-js"> Edit: And then remove the 'no-js' class with js

alttab 16y ago

The first tip was when the title said CSS makes you a coder.

emef 16y ago

> "You don’t want it to come after the header on small content pages like a kid comes after candy. It is simply wrong." Instantly stopped reading, what kind of freak writes about that.

abcd_f 16y ago

A word of caution regarding "ultimate font stacks" - most of these are an utopia. Not all fonts have the same height and x-height (read - the same letter size and general visual appearance) at the same pixel size. Most notably, Constantia just does NOT work as a drop-in Georgia replacement. Nor does Calibri work as a Verdana substitute. They needs either a different font-size or line-height. In other words - stay with a conservative font stack or do on the fly font detection and restyle the document respectively.