Marc Andreessen posted a nice cheat sheets collection. These are short programing / scripting manuals, allowing quick reference to commonly used code. The list consists of php, html, css, javascript and google cheat sheets. These can be of great help at times. Do check it out.
Here’s a quick list of the ones I liked. All fit on one A4 page and are in PDF form. So you can print them out and stick em on your wall or your desk :)
Now we all know that making browser-specific css rules is a bad practice. But sometimes it can save a lot of nerves and code. It’s why we all love those CSS Filters tables. They give us some basic information on what works and what doesn’t in which browser. But we still have to determine just which rules to combine for a specific browser.
So I created a little demo case where I apply a certain css rule only to one browser at a time. Or to the viewer… it tells you what browser you are using - css only. It’s valid CSS 3 (with 2 warnings) and the code is documented so you can see what I did.
CSS browser detection - see for yourself
Please notify me of anything not showing correctly or if you think I should add a certain browser to the table.
So the default font-size in all browsers I know is 16px. It allows us to use relative sizes and still keep font size the same in all browsers. But default size for monospaced fonts varies a bit. Firefox and safari have this set to 13, and IE and opera keep this at 16. So the monospaced font looks smaller than normal font in safari and firefox. So again, I wanted to find a simple and validating solution to keep the size constant. So I did this:
pre, code { /* default rule */
font-size:1em; font-family:monospace; }
:root pre, :root code { /* only for mozilla & safari */
font-size:1.23em; }
html:not(:nth-child(1)) pre, html:not(:nth-child(1)) code {
/* Revert to 1em in konqeuror */
font-size:1em; }
If I’m not mistaken, monospaced font is by default used only in pre and code, so I just used these two. Then, if we enlarge 13px font by 1.23 we get a 16px font (13 * 1.23 = 15.99; good enough for me, since I don’t think more than 2 decimals work well in css). By using the :root selector hack we only apply this multiplication in firefox, safari and konqeuror. :root is a css3 selector, which applies to “root of the document”. But we don’t want this in Konqeuror, since it uses a 16px monospaced font, so by using another css3 trick we can revert it back to 1em. So there we have it, a standardized monospaced font size.
This rules will not normally validate in css validator. By default the validator checks for css 2.1 rules. But if we set the profile to CSS3 in “more options” of the validator, we’ll see the “valid css” confirmation. How silly of the validator to discourage me from using css3… :)
update: Code fixed to work in Konqeuror as well.
There are numerous hacks on how to isolate some css rules from various browsers. But most of those ie6 hacks fail on ie7. Microsoft did obviously make some fixes here.
Many developers warn us not to use css hacks, instead we should use conditional comments. For me, these are really not the best option, for:
So I’ve been struggling to find a css hack, that would validate. There are quite a few out there, but most of them don’t work very well. So I’ve stumbled upon this website.
And this is the hack I liked:
*:first-child+html {}
This will only target html tag in IE7 (confirmed not to work in FF2, safari 2, opera 7 & 8 & 9, IE6). What it does is it targets every html tag, which is preceeded by some other tag, that is the first child of any third tag. We all know (or atleast we should) html is the topmost tag of our page and it has no preceeding element. Luckily, explorer doesn’t know that. And by adding some fancy selectors, we confuse IE6 and lower, so they won’t apply any rules.
Needless to say, we can address any element, not just the html element by knowing some css. For example:
*:first-child+html div { background:red; }
will make all divs in IE7 have a red background.
Word of cation though - if you want to apply rules to IE7 and IE6, you can not just put hacks for both in the same line. For example:
*:first-child+html, * html { /* rules... */ }
won’t work in IE6, while
*:first-child+html { /* rules... */ }
* html { /* same rules again... */ }
will.
So we all know internet explorer has a few rendering ssues. A big issue for many developers is the inability to show alpha opacity in png images. Of course, this has been fixed in IE7, but not everyone has switched yet.
So here’s a little css hack that allows IE6 and IE5.5 to show PNG’s alpha transparency. See the source for the details. We declare the background twice. Once for IE (with filter property, which is IE only) and once for all other browser, where hacks are not necessary. IE6 does not recognize the > css selector, so it doesn’t get confused by the background property. Sadly, the css won’t validate due to the filter property.
update: If anyone is interested in reading some more on this topic, A List Apart has an article dealing with the problem. It gives a more detailed overview on png and its problems and shows how to use javascript to determine which browser is used and fix the png images accordingly. The article is a bit old, so keep Internet Explorer 7 in mind when applying these hacks.
