<- Older :: Newer ->

Archive for June, 2007

08 Jun 2007

Coding software

Tags:

We’re always looking for the software to best suit our needs at whatever we do. So here’s the software I use for coding (html, css, javascript), maybe someone might find it useful. These are all mac OS X applications, all of them free.

  • NuFile - Use templates instead of blank new files. No need to do all those <html><head><title>... tags over and over again.
  • TextWrangler - THE text editor. It doesn’t offer some advanced features such as code completion, but it just works so well and fast, which isn’t the case with some modern IDEs.
  • Jumpcut - It stores your clipboard history and allows easy access to it via a user-set keystroke.
  • Cyberduck - great little FTP/SFTP program.
  • Firefox with Firebug - The best javascript/html/css debugger & inspector.

If you don’t agree on some of my list, or would like to recommend any other application, please do so. I always love to hear of new software.

No Comments

05 Jun 2007

CSS browser detection

Tags: , ,

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.

3 Comments

03 Jun 2007

Web usability (in Slovene)

Tags:

Last year, at the university, I did a paper on web usability. Along with it I started a wiki called uporabnost.info, but it wasn’t a big hit. It seemed people liked the articles, but not many contributed. So I dropped the wiki, but put my report online, so the content is still there. The domain won’t be up long I guess, so I’m reposting the pdf here, in case anyone would be interested

Izdelava uporabnih spletnih strani

Sorry to those of you who don’t speak Slovene, just ignore this I guess. To those of you who do, I hope you like it.

No Comments

02 Jun 2007

normalize monospaced text font size

Tags:

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.

No Comments

02 Jun 2007

IE7 css hack

Tags: , ,

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:

  1. Version comparisons fail with multiple explorers installed (or at least they do for me)
  2. I don’t like the idea of having extra html just because IE is a “special” browser. extra css.. ok. It’s the css that doesn’t work correctly in explorer, not html.

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.

No Comments

<- Older Entries :: Newer Entries ->