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 amThere’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 pmhttp://www.digital-web.com/articles/everything_you_know_about_CSS_is…
CSS Selection Styles?
Posted by James - 24/02/08 at 01:02:40 pmDid 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 pmWow. 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 amWhy 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 pmWidgets, 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 pmCSS 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 :-
(don’t bother clicking the links though – they’re empty)
Continue reading Auto-matic Link Icons…



