Fonts in your Face

Sure, there’s trouble ahead with the announcement that Safari will be joining Opera in supporting @font-face, the chance at last for wider typeface choice! Place a font file on your server, and link to it in order to embed the typeface. We’ve been able to do it in PDFs and Flash movies since time began, but so far only one attempt has been made to make them work in HTML.

First problem, yes this will mean some people will specify unreadable/unsuitable type for body copy, but what’s new? It simply means that there will be a wider variety of unreadable fonts to choose from.

Secondly, and this is the real sticking point, font licensing. As John Gruber points out:

The conundrum is that most of the fonts worth using can’t legally be shared as free downloads, and most of the fonts that are legally shareable aren’t worth using.

Even if you purchase a font legally, the file is available to all to take. Now then, I have an idea to get around this – just like Google Maps, you purchase a ‘key’, a unique code, that works with that domain name only, with the font file (possibly) being served by the foundry. The actual filename of the font is hidden, and anyone trying to use that on a different URL, simply won’t get any dice. Whatever the solution – the font foundry that leaps onto this has the chance to lead.

Personally, I’m just happy that we’re reaching a point where we’re having this conversation! I want to be able to specify a face, and enable everyone to see it, without resorting to the image replacement and SiFR workarounds.

Tags: css, fonts

Google Reader Theme

I’ve been using Flickr as a bit of testbed for a new site theme I’ve been working on for Google Reader. C’mon after the Bloglines thing, I bet you saw it coming didn’t you?!

Same drill again then. There may well be oddness and inconsistencies, and Google may well make radical changes to the Reader’s markup tomorrow, mucking the whole show up. But for what it’s worth, here it is! Its not trying to be original or ‘better’ than the default theme, it’s just trying to make it look like a Mac OS X app – that’s all I want!

Tags: browsers, css, google, googlereader, themes

Vertical Centering with a Shiv Div

Matthew Tretter has solved the perennial problem with the current vertical centering technique – loss of content vertically when the window is too small, without even scrollbars to see that lost content. His simple solution is the addition of a floated ‘shiv div’ that sits at the top, pushing the main content area down, but then collapses when the content arrives at the top of the screen.

This shiv div could also serve other purposes, such as container for skip links, although the addition of a simple little div doesn’t cause me any sleepless nights.

Tags: css

More Microformats Highlighting

As well as some tweaks and improvements to my first attempt, I’ve added highlighting of XFN attributes to the list. I’m too lazy to do the XFN thing, but others seem to like it. Maybe one day.

It works by revealing the relationships when hovering over the name, like this (again, taken from adactio)

Tags: css, microformats

Highlight Microformats with CSS

Those that use Firefox with the Tails extension, read no further. This is not for you. You have it given to you on a plate, you don’t know how lucky you are. This is for those of us using Camino, Safari or Omniweb.

After I mocked up an image of how Microformats detection might work in Safari, I started looking at the tools there were available. While there wasn’t anything that handled detection, Tantek did release his bookmarklets to allow hCard and hCalendar information to be exported from a page. Nothing in the region of Tails where you could view a list and choose which contacts/events you wanted, but it worked. This just left some way of handling detection, until I came across Chris Casciano’s script for NetNewsWire to Extract Microformats. It was a simple solution too – use css to style .vcard and .vevent classes differently.

Tags: css, microformats

Moving navigation solved

One of the headaches I’ve had with the position: fixed navigation on the journal pages is a bug that has reared its head in WebKit based browsers (Safari, Omniweb, NetNewswire etc).

OK, a little background. To avoid the IE flicker problem, my navigation’s rollover states are set as the background of a list item in a numbered list, and the ‘normal’ state is set as the background of the link. On hover the link background is set to none – revealing the rollover state below. With me so far?

Tags: bugs, css, safari, solutions, webkit

Skinning sites in Safari with PithHelmet

It would easy to to think that Firefox is the only browser with cool extensions, and overlook the excellent ones available for Safari, such as Saft, Stand and PithHelmet. Here’s how to alter individual sites css using new features in PithHelmet.

Tags: browsers, css, plugins, rss, safari

Providing CSS for just Internet Explorer

(*Disclaimer* – although this didn’t turn out to be the valid replacement for the underscore hack that I hoped it was, I thought I’d leave the post here as proof of what happens when you don’t check your facts thoroughly enough. Or more specifically, when you’re so tired, that you confuse a vaild HTML result to be valid CSS – hey ho!)

Today, I had one of those little CSS accidents, which led me to discover that an easy way to provide css for only IE (PC and Mac 5, 5.5 and 6) is to simply to add a comma after the the selector, but before the opening brace:

Tags: css, internetexplorer, webstandards, windows

Forcing scrollbars (now even better)

The massive trend of centering content horizontally brings with it a small problem. When moving from pages with short to long content, a nasty shift happens. The only way to avoid this is to force scrollbars to appear all the time. Here are a few solutions…

Tags: code, css, howto, webstandards

Tweaking Firefox with CSS

I’ve only recently discovered the power of Mozilla’s ‘user content’ files that reside in the profile directory. I’d created a user.js file to add preferences for things like pipelining, but I’d never looked into the others – ‘userChrome.css’ (for tweaking the interface), and ‘userContent.css’ (for tweaking the web page display).

Here are the tweaks and customisation that I’ve done to my copy of Firefox to give you an idea. First of all, make life easy for yourself and install Chris Neale’s ChromEdit extension. This allows you to edit the user files from within Firefox. Once you’ve restarted, ‘Edit User Files’ will appear under the Tools menu.

Tags: code, css, firefox, themes

CSS & XHTML Designer needed in Canterbury

The University of Kent, is currently looking for a Design and Publishing officer, and interestingly, it’s a post which requires a strong knowledge of CSS and (X)HTML.

It’s based in Canterbury, in the South-East of England, and I’m led to believe that the pay range is £19,460 to £29,128. If you’re interested in applying, further details are available here.

Tags: css, jobs

IE Whitespace Bug

Its been a sort of Holy Grail for me (well maybe a Holy Teacup) to find a solution the IE Whitespace bug. If you’re not familiar with this, then you probably haven’t applied display:block to links within an unordered list. Adding this CSS property creates a solid ‘button’ out of what would’ve been a humble inline link, one that can be sized and prettied up as you like. The trouble is, IE windows adds another line height between all these links – unless you remove every bit of whitespace from the HTML.

Tags: bugs, code, css, internetexplorer, webstandards

Are web sites identical?

François Briatte has wondered this, which led him to conduct a survey of 10 CSS designers web sites and their similarities. The results are really interesting reading. Eric Meyer made the suggestion that we explain our reasons for our choices, and there a few points where I feel I’m a bit lacking.

Here are the ones I wanted to briefly comment on:

Are links underlined?

No – I still uhm and ahh about this one. There are good basic usability reasons for underlining links, but I haven’t yet brought myself to do it. I don’t like seeing links underlined, it breaks up the text too much for me. I know precious visual sensibilities should take second place, and I might reconsider this one.

Tags: css, design, surveys, webstandards

3D CSS Box Model

Please Note : This has now been updated and moved to its own section here.

Here’s a thing. I’ve seen umpteen diagrams showing CSS beginners how padding, border and margin work together, but not the order in which elements such as background colour and image are stacked. To try and fill this hole, I’ve drawn a diagram. I’m not sure if this is of any use at all, but here it is anyway – the 3D CSS Box Model.

Tags: boxmodel, css, webstandards

Edit CSS in Firefox

Quick tip if you haven’t come across this before. There is an excellent web development extension available for Firefox called Edit CSS. Quite simply, it allows you to view all style sheets for the current page in the sidebar, make edits and see the result as you type. The amount of time this saves is amazing.

A problem with many firefox extensions is that they break in current and mac builds, and this is the case here. The useful option to save the css once edited doesn’t work. Even with this bug, its a worthwhile download.

Tags: css, firefox, plugins

Highlighting current page

Just recently I’ve realised how useful adding an id to the body tag of page can be. I’d always wondered why others had done it, and now I know. It gives that extra bit of flexibility to layout a page and set variations in page style depending on its id. So, I’ve just added another wee article on how to highlight the current page with CSS in your navigation.

Tags: css, design, webstandards

Highlighting current page with CSS

With handy online resources such as List-o-Matic, its now easier than ever to use unordered lists to create navigation. As an extra help to users, why not highlight the current page in the navigation? A recent article on A List Apart called Keeping Navigation current, showed how to do this with PHP. Here’s an easy solution using CSS.

Tags: css, design, webstandards

Beware the CSS Hackers!

If you haven’t already, go and read Peter Paul Koch’s article ‘Keep it Simple’ for Digital Web Magazine. I was left speechless, not sure whether this was a spoof or that he really thinks these things.

Basically, his assertion is that ‘CSS Hackers’ are actively spending time creating hacks just to feel superior and to dazzle, deceive and seduce ‘innocent newbies’. Tee hee! Or am I being naivé? Is there really an underlying conspiracy that I’m blissfully unaware of in my ‘happy and poppy’ world?

Tags: css, rants, webstandards

accessible drop downs

For a recent website redesign, a client wanted to use a DHTML drop down menu. Originally I’d bunged in one of the many free javascript based menus that are ten a penny on the web. As the project developed, I wanted to replace this with a more accessible menu.

My criteria were:

• I wanted to use unordered lists to list all the links, not bury them deep within a javascript file. This would also make it easy to mantain and be database driven in the future
• I’d prefer to not have javascript event handlers in the markup, but this wasn’t essential
• It had to show all links ‘flat’ if the user had javascript disabled
• Good cross browser/platform compatibility, no ‘IE Win only’ disclaimers.
• I’m using it within a centered layer, and want to avoid the need for absolute positioning if possible
• I wanted to control the look completely with CSS
• And the moon on a stick please

Gazingus.org’s menu’s would’ve fitted the bill perfectly, but the site doesn’t seem to have been around for a while (does anyone what happened to this? I hope its not gone for good). Time was running out, and I was doing a late night/early morning to find something quick to make the deadline the next day.

Tags: css, design, menus, webstandards

zen garden #2

I’ve finally finished off my second submission to the CSS Zen Garden, and its been accepted! I’ve been wanting to have another go, and do something more comtemporary, but I really felt the pressure after recent entries. Release One, sub:lime and si6 have all been beautiful examples of slick modern design.

Tags: css, webstandards, zengarden

gettin' all strict

I’ve just changed the site from being XHTML Transitional to Strict, and I was surprised how little work was involved. What follows is a list of everything that didn’t validate, and had to be changed:

• remove target=”_blank” from <a> tags. Opening new windows breaks the back button anyway, which is an accessibility problem. You can always use a simple javascript to open new windows, which is what I’ve done for the desktops section
• remove border=“0” from <img> tags (use css instead – img {border:0} )
• add <fieldset> tags around form elements. (You can actually use p, h1 etc, to validate, but fieldset makes more sense.
• remove language=“javascript” from javascript tags
• change any remaining name=” “ attributes to id=” “

The last 2 were leftovers from the original Movable Type templates. In a matter of an hour the site was converted. The search and replace function within Movable Type meant I didn’t have to go through every entry individually.

Tags: css, hicksdesign, updates, webstandards, xhtml

skip navigation links

A recent article at The Web Standards Project alerted designers that ‘Skip Navigation’ links, traditionally hidden with the CSS property display:none, are invisible to screenreaders. This hadn’t occurred to me, even though I knew it was a problem with Fahner Image Replacement, which also uses display:none.

Tags: accessibility, css, webstandards, xhtml

skip links update

The suggestion in my last post was kindly tested by Bob Easton, who wrote the original article on CSS Discuss. It only worked in 2 of the top 3 screenreaders. It works in Jaws 4.51 and IBM Home Page Reader 3.02, but failed in the number 2 – Window-Eyes 4.5(beta). However, Bob suggests the following, which he has tested and does work in all 3:

.hide {
	position: absolute;
	left: -1000px;
	width: 990px;
	font-size:1px; line-height:1;
	}

As you can see, it places the content off the screen to the left. He also added width, font-size and line-height to “allow placing very large blocks of assistive text over there in hidden space”. Great – at least we know of a tested way of working with all 3. Thanks Bob!

Tags: accessibility, css, webstandards, xhtml

skip navigation solutions

I’ve just been reading on The Web Standards Project about the fact that ‘Skip Navigation’ links hidden with the CSS property display:none are invisible to screenreaders. This hadn’t occurred to me, even though I knew it was a problem with Fahner Image Replacement, which uses the same property.

Tags: accessibility, css, webstandards, xhtml

vertical & horizontal centering 2

I’ve been busy improving the way this site looks in smaller screen resolutions and windows. The technique I was using achieves vertical and horizontal centering by using absolute positioning and negative margins. If the window was too small for the content, it cut it off without giving you the option of scrolling to see it all.

So instead of using absolute positioning to center horizontally, I’ve now used the auto margin method. This is the best way, as it stops trying to centre the content when the window is too small. Originally when I’d tested this, it was still cutting of the the left side in Mozilla/Camino/Firebird, so I’d left it out as an option. I eventually discovered that all it needs is a ‘min-width’ value adding to the containing