CSS Code Snippets To Make You A Better Coder | Hacker News Reader

CSS Code Snippets To Make You A Better Coder

designyourway.net

99 pointsbogdans20 comments

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.

Open articleView on HN

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.

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.

Was there a particular part of the spec you found illuminating / readable?

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.

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"

Can anyone point to a good CSS resource with more detailed explanations?

http://www.quirksmode.org/ is great for cross-browser stuff.

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.

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.

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

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

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/

[2] http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet...

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.

>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.

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.

   <!--[if lt IE 7]><html lang="en" class="no-js ie ie6"><![endif]-->
   <!--[if IE 7]><html lang="en" class="no-js ie ie7"><![endif]-->
   <!--[if IE 8]><html lang="en" class="no-js ie ie8"><![endif]-->
   <!--[if IE 9]><html lang="en" class="no-js ie ie9"><![endif]-->
   <!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]-->

Edit: And then remove the 'no-js' class with js

Credit where credit is due:

http://paulirish.com/2008/conditional-stylesheets-vs-css-hac...

Actually I didn't know about that article, but is nice to see the origin of this technique. Mostly took inspiration from HTML5 Boilerplate (also Paul Irish), and previous articles I read. But yes, Paul Irish is awesome, and deserves lots of credit.

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.

> "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.

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.

Reply on news.ycombinator.com