• About
• AIR Applications
  • ImageSizer
  • Screentweetr
• Blog
• Contact

Psyked *

it’s easy once you know how.

Targeting multiple browsers with CSS… and some Javascript trickery.

Posted by James - 28/11/09 at 09:11:19 am

There’s a clever little javascript library that allows you to write CSS specifically for Chrome, the iPhone, IE 8, etc. all in a single file.  What it does is manipulate the HTML document client-side to add additional classes to the page, based on your browser type.  The end result is that your page gets additional selectors like .ie or .gecko added – and you can setup a single CSS file to target all of these browsers in one shot – no server side magic or conditional comments in the HTML.

You can find more information here ( http://snipplr.com/view/9340/css-browser-selector/ ) or download it from here (http://github.com/rafaelp/css_browser_selector ).

Everything you know about CSS is wrong.

Posted by James - 31/10/08 at 09:10:04 pm

http://www.digital-web.com/articles/everything_you_know_about_CSS_is…

CSS Selection Styles?

Posted by James - 24/02/08 at 01:02:40 pm

Did you know you could customize the selection colours of html pages with CSS?  I didn’t – until now.  Turns out, there’s a CSS3 pseudo-element called ::selection.  Naturally, this isn’t yet a technique supported by browsers like Internet Explorer, but it is supported in [albeit with different syntax] by Firefox and Safari.  Interesting, eh?  Check an article on CSS Selection Styles from Quirksmode, and have a look at some of the creative effects you can get with it here.

Automatic Link Icons v2.0

Posted by James - 08/01/08 at 09:01:05 pm

Wow. My previous post, Auto-matic Link Icons is by far the most popular on Psyked. It’s even been translated into Russian! Things are constantly evolving, and I thought it only suitable that I should expand upon the original with a few new ideas, techniques and general improvements. So, without further ado:

Improving the Icon Display;

In the original post, I put forward the following code for adding link icons; Continue reading Automatic Link Icons v2.0…

Displaying Link locations with CSS

Posted by James - 27/11/07 at 09:11:15 am

Why would you want too?

How often is it the case that you’re not quite sure where a link is going to take you? Ok, so it’s not a major issue for mainstream browsers – after all, that’s what the “Status bar” is for. But beyond your normal browser operation – say on an unusual machine or if you’re looking at a print-off – just how can you tell where a link should be going? If the link text is good, you might be able to track down the target page, but that’s nothing compared to the usefullness of a full URL.

Luckily with a smidgen of CSS and an up-to-date browser, you can solve at least a few of these problems in a nice, clever way. A List Apart covered this in the misty old era of 2002, back when I was still making HTML pages with notepad and cobbling together images with Trial versions of Paint Shop Pro. In the article, CSS Design: Going to Print, they Eric Meyer covers – amongst other things – the issue of displaying ‘Printed links’, making links that are as useful in print as they are functional onscreen. Continue reading Displaying Link locations with CSS…

Pseudo-AJAX loading with CSS

Posted by James - 28/10/07 at 03:10:55 pm

Widgets, scripts and all that fashionable stuff is great – you sign up to the service and you can start pasting their code into your pages. Voila! you have a new stat counter – or popularity counter, whatever. They’re great, but the practice of loading external javascript files outside the header of your documents isn’t one that’s too friendly on the page-display times. In a sense, it’s just like whacking a great big image onto your pages.

Luckily, there is an equally fashionable method for improving the effect that these scripts have on the page. Using a simple animated graphic such as those from ajaxload.info and some CSS Wizardary, we can idenitify areas of the page that take a while to load, style them appropriately, and sit back in smug satisfaction.
Continue reading Pseudo-AJAX loading with CSS…

Auto-matic Link Icons

Posted by James - 10/07/07 at 06:07:17 pm

CSS 2.1 has many new wonderful capabilities, and I’m going to show you one of my latest tricks I’ve picked up – automatic link icons.

First, a look at the end result :-

This is a normal link.

This is an external link.

This is a link to a MS Word document.

This is a .zip file.

(don’t bother clicking the links though – they’re empty)

Continue reading Auto-matic Link Icons…