the css tag
Visualizing Inline Links
Joen of Noscope has just suggested, what I’ve been trying to tell people for nearly a year. With the advent of pages commonly referred to as “Web 2.0” sites, the styling of inline or AJAX links became an issue. Usually links have to be indicated to the user, since clicking them slowly loads a whole different page and the user is unable to interact with the current page. The common indicator we use for links is the hand cursor.
AJAX or JavaScript links, however, immediately change a part of the page you’re looking at, without reloading the whole page and without disturbing the user experience. The user can still interact with the page. For example on Pageflakes - the personalized start page I’m using - you can find both types of links: normal ones that take you to another page and AJAX links that allow you to edit settings or reload embedded RSS feeds. The cursor for both types of links is the same, a hand. For the Web-savvy, this might not pose much of a problem, we intuitively know most of the time what type of link we deal with but for other users, this can be increasingly difficult to discern.
The solution Joen proposes, and what I have previously used in these cases, is simply not changing the cursor at all. In reality, it’s not a link, it’s more of a pushbutton that looks different, so why not use the same cursor we use for buttons?
The implementation is rather easy as it only requires a simple cursor: default; rule. To allow for fallback (if the user has no JavaScript, the AJAX link becomes a normal link), I just embedd the stylesheet with JavaScript so I get a hand cursor for people without JavaScript, where the link actually reloads the page and a default cursor (pointer) for people where the link only affects the current page.
Adding a stylesheet via Javascript is rather easy too:
<script type="text/javascript"> <!--//--><![CDATA[//><!-- if( document.getElementById && document.createElementNS && document.getElementsByTagName ) { var javacss = document.createElementNS( "http://www.w3.org/1999/xhtml", "link" ); if( javacss ) { javacss.setAttribute( "rel", "stylesheet" ); javacss.setAttribute( "type", "text/css" ); javacss.setAttribute( "href", "/_css/java.css" ); javacss.setAttribute( "media", "all" ); document.getElementsByTagName( "head" )[0].appendChild( javacss ); } } else {
document.write( '<link rel="stylesheet" href="/_css/java.css" type="text/css" media="all" />' );
}
//--><!]]>
</script>
So, what do you think?
Panic’s 10th Anniversary: Coda
The stars finally seem to be in a good constellation for web designers this month. Adobe shipped Creative Suite 3, CSS Edit was upgraded to 2.5 and we are seeing the first Alphas of Firefox 3. Iwas even more excited, when Steven F. commented on Panic’s 10 Year Anniversary:
“It is by a more or less random coincidence that on the day after our company’s tenth birthday, we will be conducting by far our biggest, most ambitious new software launch of all time. I hope you’ll come by to check it out, especially if you make web sites.”
What Panic released a few days later reminded me once again why a Mac is the best platform for developing websites: Coda is just the application I’ve been waiting for all my life. I’m not merely enthused, I’m seriously stunned.
Coda is a single, tiny application which handles all your webdesign needs. Editing (X)HTML and CSS, previewing, FTP (of course), Terminal access and a great reference book, all in one. The Panic team introduces Coda with the words:
“So, we code web sites by hand. And one day, it hit us: our web workflow was wonky. We’d have our text editor open, with Transmit open to save files to the server. We’d be previewing in Safari, running queries in Terminal, using a CSS editor, and reading references on the web. ‘This could be easier,’ we realized. ‘And much cooler.’”
You can read more by Panic co-founders Steven Frank and Cabel Sasser. And John Gruber also has a nice review of Coda on his web site.
CSS Edit
Web 2.0 in style? Now it’s Web 2.5 in style! Macrabbit has released version 2.5 of their great CSS editor. And best of all, it’s a free upgrade for owners of the previous version.
Google Reader Theme by Jon Hicks
If you use Google Reader to read your news feeds, you can spice it up now with Jon Hicks’ pretty theme.
Pity I use the excellent News Fire for my syndication needs, the new theme really makes me want to switch.
Tingelets - Bookmarklets for Designers
Tingelets is a new, free and practical service for designers and developers. Basically it’s a set of bookmarklets that you can place in your browsers bookmark bar for immediate use. When you click on them, they highlight various elements in the current page. You can highlight tags, elements by id, elements by class and even tag sets (for example <ul> and <li> as a combination). Since they work in almost every web browser, they give you the possibility to compare web layouts on the fly.
The Tingelets are the newest project from Maurice Kühlborn and they are extremely well done. When you click on a tingelet, the corresponding element or elements are highlighted with transparent PNGs which display the name of the highlighted element.
It’s a perfect and quick solution for troubleshooting and diagnostics without having to resort to external tools like Xyle Scope.
Apply CSS to IE7 only
CSS hacks for browsers typically either exploit a flawed implementation or the complete lack of an implementation of a certain feature in the rendering engine. Most webdesigners know about the relatively poor level of web standards support in Internet Explorer and have tried for years to find workarounds for the most grievous bugs. However, exploiting software bugs to create a hack is quite dangerous because software gets updated and old flaws are fixed.
When Microsoft introduced conditional comments with Internet Explorer 5, a lot of problems were fixed. One could use constructs such as
<!--[if IE]>
<style type="text/css" media="screen">
#myID {
background-color: red;
}
</style>
<![endif]-->
to tailor CSS styles to Internet Explorer only. No other browser would parse anything in those conditional comments.
Conditional comments have a lot of drawbacks, though. Most problematically, they require changes to the actual HTML source since there is no equivalent to conditional comments in CSS. They also don’t work well with XSL as Dave Shea has pointed out. This is why most web developers turned to the less reliable technique – the exploitation of browser bugs – to target specific browsers in their stylesheets.
Adobe CSS Advisor
While the CS3 Beta was the hype of the last week and was announced with much fanfare, Adobe quietly released another product in public beta: The Adobe CSS Advisor.
The CSS Advisor is a new service that lets you easily find solutions to CSS problems and allows you to file through various lists of browser compatibility issues. It got mentioned briefly during the presentation of Dreamweaver 9/CS3 but apparently it has been released earlier and I just stumbled across the page by accident.
From the website:
- Find solutions to CSS and browser compatibility issues
- Share solutions and workarounds you’ve discovered with the community
- Comment on and improve existing solutions
At the moment it’s still quite empty but it’s a social site which allows you to post your own issues (requires you to sign up for a free Adobe ID) in a “Problem - Solution” style. And there’s even a RSS Feed for your syndication goodness.
Apparently, the Advisor will be linked with Dreamweaver 9, probably much like the sidebar help in existing Dreamweaver versions.
