bioneural.net » css

Web developer widgets

Bruce — Fri, 11 Apr 2008 21:42:29 +0000

Mac-based web developers may yet find a use for Dashboard. SeeSS is a CSS property reference detailing inheritance, CSS compliance, Safari support, possible and default values, examples, plus an informative description [screenshot]. PHP Function Reference provides offline access to the PHP manual, a cheat sheet, and an interactive date formatter [screenshot].

How to safely inject CSS3 using jQuery

Bruce — Thu, 14 Feb 2008 14:14:56 +0000

From bioneural.net:

So you fancy using some of that über-cool draft CSS3 that WebKit browsers can handle, such as text shadows, drop shadows, opacity and rounded corners? But at the same time you want to present only valid CSS to the W3C CSS Validator? It's a dilemma, but it is possible to have your cake and eat it too—albeit by hiding CSS in JavaScript and thus cheating the Validator. However, there is even a precedent for doing so.

During the course of researching my review of the various ways to make rounded corners, drop shadows, and gradients I learned more about CSS3 and the jQuery JavaScript library. They just needed introducing to one another.

Text shadows, drop shadows, and round corners in Safari 3

A historical precedent

The concept of tricking the Validator to pass CSS that is incorrectly implemented or proprietary and not part of the W3C spec is not new. Many web developers have found it necessary to employ various hacks in their CSS to accommodate differences in the way browsers interpret the rules. Others have used proprietary code to overcome limitations or quirks in the way some browsers handle certain content. For example, the following in your document head could be used to fix IE6's lack of handling for transparent PNGs and mis-handling of the box model, floats, overflow, italics, etc.:

It's a hack: there's no other term for it. In the above example we're using proprietary conditional comments and filters to fix proprietary cock-ups. Seems fair, doesn't it?

So, if we can hack our way to supporting inferior or out-dated browsers, why should we not also employ hacks to support leading-edge browsers like Safari 3 that are already capable of rendering much of that draft CSS3 goodness?

Using jQuery's CSS injector

There are probably multiple JavaScripts that let you load CSS via the DOM, but since I'm using jQuery anyway that's how I've chosen to do it. If you don't have jQuery installed go get it and load it in your document head e.g.:

Below this we create a $(document).ready() function so that the contents load via the DOM and hopefully before the page content is displayed. Inside this function our "content" consists of a series of CSS selectors (inside the first bracket) paired with the CSS properties we wish to inject (name and value, comma-separated) joined via .css. Example:

If you had a div with the class "container koru", for example, Safari 3 will blend the above box-shadow and border-radius styling (as inline CSS3) with any additional CSS2.1 styling for .container or .koru present in your stylesheet. You can see what's going on using that browser's Web Inspector:

Note: A -webkit- or -moz- prefix on CSS properties is used respectively by the Safari and Mozilla/Firefox browsers to indicate tentative support for as yet non-ratified web standards. Thus -webkit-border-radius: 10px; and -moz-border-radius: 10px; are both potentially differing implementations of "border-radius".

OK, so the "how" is easy. Now the "Should you?"

The positives

Effects are rendered without requiring images.

Effects are rendered without requiring add-on JavaScript effects libraries.

Effects are rendered without increasing page size or load time.

Effects are rendered that may be impossible with some JavaScript or image-based techniques (e.g. anti-aliasing, liquid layout support).

Effects can be targeted at specific web browser engines.

No changes to semantic mark-up are required.

Your stylesheets remain W3C-valid (if they were before!).

Browsers simply ignore CSS properties they don't understand, so degradation is graceful.

If JavaScript is disabled browsers will still load your stylesheets, so degradation is graceful.

It is compatible with template-based websites in not requiring page-specific effects scripts to be inserted into mark-up.

When the -webkit- or -moz- prefix gives way to the real deal of W3C-ratified CSS3 we can simply remove the script and move the content to our stylesheet without having to re-design effects elements or edit any mark-up.

If you don't start using CSS3 now you might have retired before it becomes W3C-ratified.

The negatives

Turning off your stylesheet does not disable styling loaded via the DOM.

Effects can be targeted at specific web browser engines (like browser-targeting, a double-edged sword that undermines the uniformity of the "web experience").

It could be construed as cheating. It is.

What are your views, if you have any, on the merits or otherwise of this technique?

Corners, gradients and shadows with jQuery

Bruce — Wed, 13 Feb 2008 15:36:40 +0000

From bioneural.net:

Previously we looked at moving to jQuery, and then at the best way to do corners and gradients using a variety of techniques (Part 1). In this follow-on article (Part 2) I want to share how jQuery can be extended for similar cornering, gradient, and drop shadow visual effects. Although my JavaScript ability is not much beyond "cut and paste" the idea here is to share how easy it is to create these effects for other folk possessed by similar (in)ability.

Situation recap

In Part 1 we explored various ways to make rounded corners, comprising one or more of JavaScript, CSS, Flash, and SVG. Ditto for drop shadows. Implementing a gradient was restricted to the use of background (or inline) images, or to SVG. There are a few more tricks we might try for gradients:

We could load a transparent PNG as a CSS background and vary the fill colour on the container to allow for a multitude of colour-graduated boxes without further image editing (see this ALA article);
Unfortunately the CSS 3 draft as of this writing doesn't include background gradients, but you might be able to fake it using border-color;
We could use JavaScript effects libraries.

It turns out we can use JavaScript to create our corners and drop shadows too. There's also a plugin for using curvyCorners with jQuery that more than halves the standalone curvyCorners code size.

Extending jQuery

While there are some basic effects (hide, toggle, slide, etc.) and manipulation options in the jQuery core API, jQuery UI is a bolt-on library of interactive controls that deal with mouse interaction (e.g. resizing, dragging) and other "user interface" extensions. As of this writing the jQuery documentation is incomplete and the developers in the process of transitioning visual effects formerly included in jQuery UI to a new sister library called jQuery Enchant. The controls (also referred to as core interaction plugins, UI widgets, or components) are themselves are almost invariably dependent on other jQuery extensions—needing at least the Dimensions plugin.

So jQuery needs to get its act together in respect of naming conventions, but perhaps this is more indicative of active development rather than lack of direction? I guess jQuery UI/ Enchant are to jQuery as script.aculo.us is to Prototype. In a nutshell we're saying that with some jQuery code that in turn requires a bit more extra code in order to work, in addition to the code that is "jQuery" itself—we can create visual elements like drop shadows! jQuery is thus readily extendible; to use these extra bits of code you just need to load the relevant add-on script in your document head, after having loaded jQuery itself. A picture may help:

Test cases

I've used the same basic test box from Part 1, so our core document structure looks like this:




jQuery test cases











	Lorem ipsum
	Lorem ipsum dolor...

With all the necessary libraries loaded we can start adding effects to our div by calling them within $(document).ready() (in place of ... above).

Download the test files here (.zip archive, 27KB).

Here is the live link.

Case 1: Round corners

If you wanted to use fancy images to produce round corners yet avoid extra mark-up, you could use this technique. Alternatively use no images at all via the jQuery corner plugin, available here. The plugin supports a variety of corner types and borders as you can see in the demos. The following call will add cornering with a radius of 20px to a div with the class .cornered:

$('div.cornered').corner("20px");

This will have the following effect on our test box:

Case 2: Gradients

The Element gradient plugin, available here, will fill an element (e.g. div) with a linear gradient of specified direction (horizontal or vertical only) and opacity. It requires the Dimensions plugin. The following call will add a vertical gradient from black to white with 40% opacity to a div with the class .gradient:

$('div.gradient').gradient({ topcolor: '#000000', bottomcolor: '#ffffff', horizontal: false, opacity: 40 });

This will have the following effect on our test box:

Note that you can't shorten the hex-code (it must be #ffffff not #fff for white, for example).

Tip: If you leave the gradient as black to white with some opacity you can create colour gradients much more easily but changing only the background colour of the container. This is a jQuery version of the ALA super-easy blendy backgrounds trick.

Case 3: Borders

Back to the jQuery corner plugin; it can also do borders using nested elements i.e. one rounded box inside another. So our mark-up could be edited thus:



	Lorem ipsum
	Lorem ipsum dolor...

But we don't want to edit our mark-up do we? We don't have to.

Tip: We can make use of .wrap() to inject the extra container into our mark-up on-the-fly with JavaScript.

The following calls will add a wrapper div with the class .xtra to our box, then proceed to round our inner box (.border) with a radius of 15px, before padding .xtra with 5px of "border" (whitened with CSS on .xtra) and rounding with a 20px radius:

$('div.border').wrap("");
$('div.border').corner("15px").parent().css('padding', '5px').corner("20px");

This will have the following effect on our test box:

Case 4: Drop shadows

In researching this article I came across three ways to create drop shadows using jQuery:

Shadow is an extension that uses tables with multiple rows subject to CSS styling including varying opacity to create a drop shadow illusion;
A method that uses images and "onion skin" CSS added via .wrap() to add a drop shadow;
UI/Shadow.

UI/Shadow, available to download here, is being folded into the yet-to-be-released jQuery Enchant library. It wraps your element in nested divs and uses opacity to create the shadow effect. It also requires the Dimensions plugin. The following call will add a drop shadow to a div with the class . dropshadow:

$('div.dropshadow').shadow({ color: "#444", offset: 5, opacity: 0.2 });

This will have the following effect on our test box:

Combining effects and liquid layouts

As you can see while the effects in cases 1–4 work well enough on their own, they sadly don't play together very well (see Case 5). Whether this is a limitation in one or more of the plugins, or in my scripting know-how I'm not sure.

It is possible to create a rounded box with a border that adjusts to change in text size or window width, but using an image to render the gradient (see Case 6). Because the Dimensions plugin employs absolute positioning, effects that use it (gradients, drop shadows) will "detach" from their elements if you try resizing your browser window or changing text size (see the effect on cases 2, 4, and 5).

The final score

To be fair I guess we should use the same scoring system to evaluate jQuery against the other methods we explored in Part 1.

Scoresheet:

Photo background: Supported.

Gradient background: Supported (as image or scripted).

Four rounded corners: Yes.

Border: Yes (without extra mark-up).

Drop shadow: Yes (without images).

Minimal mark-up: Extra containers in mark-up can be avoided with .wrap().

Static mark-up: Mark-up edited to insert box-specific script.

W3C validity: Yes.

Anti-aliasing: No.

Small footprint: 29KB for jQuery plus 19KB for add-on libraries (background images additional). Of course if you're already using jQuery you need only consider the additional size of any add-ons (e.g. shadows for 6KB).

Graceful degradation: Renders as per the master if JavaScript disabled but liquid layouts may cause problems if width is set on containers added with .wrap().

Liquidity: Yes, with the proviso that you avoid Dimensions-reliant effects.

Score: 9/12 (probably less, because of problems combining effects)

Not enough to de-throne CSS 3 which scored 11/12, or 12/12 if it were a standard. But CSS 3 isn't here yet and won't be widely supported by all major browsers for some time. jQuery is here, however, and JavaScript is widely supported.

Upon reflection there's something to be said for the elegant simplicity and refined geometry of straight lines and sharp corners. This is how the Dwarves would choose to build websites, leaving curves and soft edges to the Elves. So the ultimate question, really, is do you relate more to Gimli or Legolas? Your answer to that, Middle-earthlings, will decide the direction you should take ;-)

The best way to do corners and gradients

Bruce — Wed, 06 Feb 2008 14:36:17 +0000

From bioneural.net:

Rounded corners. Yes, they may be a "Web 2.0" fashion fad, but it has been clearly documented that they're a lot easier to make than square ones. As part of my overhaul of bioneural.net I've been optimizing much of the code "under the hood", meaning a lot of the changes aren't even visible. Re-evaluating how things are put together, and considering how they could be done more efficiently or otherwise improved is a valuable exercise—that it scratches a perfectionist itch is an added bonus. In this article I look at a variety of methods for creating boxes with rounded corners and gradients. Yep, it's a showdown!

The traditional approach

The well-established method of adding corners or gradients to an element is to use multiple background images. Depending to some extent on your content, this is typically impossible to achieve without the use of non-semantic extra mark-up. For example, this box uses to extra and empty divs:



	Willkommen! Welcome!
	Willkommen auf der Projekt Koru Seite, wo Simone & Bruce die praktischen Aspekte eines Jahres in Neuseeland mit Euch teilen wollen. Eine Einführung findet Ihr hier zusammen mit einer Erklärung warum wir das Koru als Symbol unserer Reise gewählt haben.
	Welcome to Project Koru, where Simone & Bruce share insight into the practicalities of organizing a year in New Zealand. You can find an introduction to the project here together with an explanation of why we chose the koru as the symbol for our journey.

Three gradient images (2 having one rounded corner each) could then be loaded into the background of each of the three "layout classes" via CSS:

.curvetop { height: 15px; background: #fff url('gradient-top.png') bottom left no-repeat; display: block; position: relative; margin-top: 10px; }
.curvemid { background: #fff url('gradient-bg.png') repeat-y; padding: 2px 20px !important; display: block; }
.curvebottom { height: 15px; background: #fff url('gradient-bottom.png') top left no-repeat; display: block; position: relative; margin-bottom: 10px; }

The result:

You could use this exact same technique for adding embellishments like borders, drop shadows and the like—but not without some Photoshop skills and a decent collection of bandwidth-hogging images if you needed multiple box styles.

The challenge

I devised a box that I thought would test the mettle of any technique. It consisted of just one div containing a header and a paragraph, the text in each of which should appear over a different background with one of these being a gradient (but not necessarily an image). The box should be formed with rounded corners (including on images), a white border, and a drop shadow. It should also have a number of functional characteristics:

Minimal mark-up i.e. avoiding nested and/or empty tags;
No changes to mark-up required (but extra CSS allowed, since this could be moved to an external stlesheet);
Valid XHTML and CSS (2.1);
Anti-aliasing on the corners (inner and outer border edges);
Small footprint (let's say under 20KB);
If using JavaScript it should degrade gracefully (i.e. still looks OK if JavaScript is disabled);
Liquid container (adjusting container width to both content size and browser window dimensions).

Why the requirement for minimal markup? Forward planning. Eventually CSS3 will arrive, and there'll be no need to scour your database in order to clean out all that redundant mark-up. Just amend your CSS and delete any unemployed images or JavaScript.

My template XHTML and CSS rendered the following:

Here is the live link.

Finding a solution to fulfil most if not all of my form and function requirements was going to be something of a mission. There's a useful roundup of techniques here, divided into those based on CSS and those based on JavaScript, with examples in both groups requiring anything from no images at all through to eight images. A particular difficulty was finding techniques not restricted by the dimensions of any required image; many of the earlier established methods were clearly devised before the availability of 23" widescreen displays (example.)

I made a shortlist (in no particular order) of techniques that looked promising and set to work. I'm not going to post all the code directly into this article or it will become over-long. The files I used for each technique, together with the master template and original full packages where applicable, are available for download should you wish checkout the code or conduct further experiments. I've tested only in Safari and Firefox.

Download the test files here (.zip archive, 428KB).

Nifty Corners Cube

First up is Nifty Corners Cube by Alessandro Fulciniti. This method uses JavaScript and CSS; no images other than those you wish to use as backgrounds are required. Here is the result:

Here is the live link.

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: Yes.

Border: While you can produce a convincing rounded border, using padding on the container, this would require extra mark-up in our example in order to retain the cornering on our background images.

Drop shadow: Not supported.

Minimal mark-up: An extra container is required to render a border with inside and outside rounding.

Static mark-up: Mark-up edited to add extra container plus insert box-specific script.

W3C validity: Yes.

Anti-aliasing: Anti-aliasing is not working on the background images or border, although it does work on solid colour boxes in the examples.

Small footprint: 10KB for CSS and JavaScript (background images additional).

Graceful degradation: Renders as per the master if JavaScript disabled.

Liquidity: Overriding fixed width for .cornered (and in the third case for .xtra) supports liquid layouts (case four).

Score: 8/12

curvyCorners

Cameron Cooke's curvyCorners is another image-free JavaScript solution:

Here is the live link.

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: There are rounded corners, but these are rendered adjacent to our background content rather than on top of it. This example illustrates rounding on a background image, but adding a border to the containing div merely fills the cornered area with "extra" offset background (see here).

Border: Obtained by applying background and border to container.

Drop shadow: Not a feature of this technique.

Minimal mark-up: Yes.

Static mark-up: Mark-up edited to insert box-specific script.

W3C validity: Yes.

Anti-aliasing: Yes, but only on the outside of the rounded border (not on images).

Small footprint: 24KB for JavaScript (background images additional).

Graceful degradation: Renders as per the master if JavaScript disabled.

Liquidity: Overriding fixed width for .cornered supports liquid layouts (case four).

Score: 7/12

SRCCB

The "simple rounded corner CSS boxes" technique was devised by Ryan Thrash, also accessible in the form of an online generator as Spiffy Box. It uses no JavaScript and a single image combined with moderately complex CSS (which would have to be recalculated for each box size):

Here is the live link.

Scoresheet:

Photo background: Supported (integrated into container background).

Gradient background: Supported (integrated into container background).

Four rounded corners: Yes (integrated into container background).

Border: Yes (integrated into container background).

Drop shadow: Yes (integrated into container background).

Minimal mark-up: Requires two additional divs for positioning purposes.

Static mark-up: Mark-up edited to insert two additional divs.

W3C validity: Yes.

Anti-aliasing: Yes (integrated into container background).

Small footprint: 6KB image overhead compared to master with original 2 background images.

Graceful degradation: Not applicable as no JavaScript.

Liquidity: Depends upon fixed-width images.

Score: 9/12

swfIR

The SWF Image Replacement (swfIR) technique is offered by Jon Aldinger, Mark Huot, and Dan Mall. It applies to inline (cf background) images and uses JavaScript and Flash to swap out the original and deck it out with bling. It does more than we require—image rotation and stretching for example, and at first glance it certainly looked like the wrong tool for the job. I wondered, however, if we could use CSS positioning to overlay our text on top of the replaced images. It turns out you can:

Here is the live link.

Scoresheet:

Photo background: Supported (as an inline image!).

Gradient background: Supported (as an inline image!).

Four rounded corners: Actually you get 6! (you could potentially blot out the bottom border on the heading using a third positioned inline image—a real hack!).

Border: Yes (specified in JavaScript).

Drop shadow: Yes (specified in JavaScript).

Minimal mark-up: Requires insertion of two inline images.

Static mark-up: Mark-up edited to insert inline images plus box-specific script.

W3C validity: Yes. It does validate, but should I say "No" because it depends on Flash?

Anti-aliasing: Yes.

Small footprint: 25KB (24KB JavaScript and SWF; 1KB image overhead compared to master with original 2 background images.)

Graceful degradation: Acceptable (just) with JavaScript disabled.

Liquidity: Positioning depends upon fixed-width images.

Score: 7/12

ShadedBorder

Steffen Ruzee brings you ShadedBorder, a full-featured solution that uses only JavaScript:

Here is the live link.

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: Yes.

Border: Yes (specified in JavaScript), but height on .sb-inner causes blue background to show through (why isn't this also an issue with the h4 background image?). Setting height to 0 removes the bar but also takes out the gradient! Admittedly, you could style the background to tone in better.

Drop shadow: Yes (specified in JavaScript).

Minimal mark-up: A headline with it's own style can be achieved with extra mark-up, and extra script in the head, and another script that must be inserted before the closing body tag. This makes it fatally flawed for use in a templated system like WordPress, IMHO.

Static mark-up: As above, mark-up edited at 3 points, including a necessary change from div class to ID.

W3C validity: Yes.

Anti-aliasing: Yes.

Small footprint: 9KB JavaScript.

Graceful degradation: Renders as per the master if JavaScript disabled.

Liquidity: Yes (comment out width on #cornered; not shown due to duplicate IDs).

Score: 9/12

SVG

Firefox 2 and Safari 3 can both display standalone Scalable Vector Graphics (SVG) images, an unloved W3C standard. They can't load SVG from CSS, however, making SVGs unusable as background images at this time. The option to use SVG in CSS hasn't gone beyond a proposal, with Wikipedia noting "the use of SVG on the web is in its infancy". It took me quite a few hours to get to grips with the examples in the 1.1 spec and create a valid and functional XHTML/SVG file for testing purposes. The basic idea is to create a bordered box with rounded corners, fill it with a gradient, and apply a Gaussian blur to a slightly offset box of the same dimensions—all with a few lines of XML. Here is our box using Opera 9.25 (Mac):

Here is the live link (SVG-aware browser required).

Scoresheet:

Photo background: Supported in CSS, but you loose the rounded corners.

Gradient background: Supported without CSS via linearGradient.

Four rounded corners: Yes via rx on rect.

Border: Yes via stroke on rect.

Drop shadow: Yes via filter with feGaussianBlur, feOffset, and feMerge.

Minimal mark-up: Requires insertion of inline SVG image(s).

Static mark-up: SVG must (currently) be added inline; also necessitates DOCTYPE change and .xhtml file extension.

W3C validity: Yes.

Anti-aliasing: Yes.

Small footprint: 0KB (background image additional; gradient image not required).

Graceful degradation: No (Internet Explorer 6 and 7 choke).

Liquidity: Positioning depends upon fixed-width SVG images; resizing text size or browser window is problematic.

Score: 7/12

Update 18.03.08: Safari 3.1 adds support for SVG images in img elements and CSS images.

CSS3

CSS3, if it ever arrives, promises not only rounded corners but drop shadows and multiple background images too (oddly the draft spec doesn't mention gradients). Apple's Safari (available for Mac and PC) already includes support for such effects—but of course it's not valid CSS. You can preview CSS3 rounded corners here and here in Firefox or Safari 3. Here is our box using Safari-specific not-quite-CSS3:

Here is the live link (WebKit browser required).

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: Yes.

Border: Yes.

Drop shadow: Yes.

Minimal mark-up: Yes.

Static mark-up: Yes.

W3C validity: No, but only because the standard isn't yet established.

Anti-aliasing: Yes, but note anti-aliasing artefact in the bottom corners.

Small footprint: 0KB (background images additional).

Graceful degradation: Yes (non-CSS3 aware browsers see a plain box).

Liquidity: Yes.

Score: 11/12

Summing up

Which technique you choose ultimately depends upon what you're after and what you prioritise. There is no one "best" solution that fits all requirements. In terms of form and function CSS3 has to be the clear winner if one must be chosen, with a perfect score blown only by the fact that it isn't a W3C standard (yet). Herein lies CSS3's only significant yet overwhelming drawback: what good is it if the majority users can't see the effects? At the same time I'm not personally sold on any of the alternative methods. The end results may look good; it's how they achieve them that I don't much care for. Although a method validates it typically involves cheating the validator (seemingly JavaScript's raison d'être). Just take a look at the live links with Safari's Web Inspector (example).

Before I put a lid on this little adventure, as Jobs would say, there's just one more thing... what about jQuery? The jQuery library (included with WordPress and the K2 theme) can be extended to render corners, shadows, and gradients. If this article was Part 1, then that exposition forms Part 2. ~~Coming soon~~.

IE6, italics, and overflow issues

Bruce — Fri, 01 Feb 2008 14:12:48 +0000

From bioneural.net:

Since I began revamping my site (mostly under-the-hood) at Xmas I've tracked down and eliminated a number of long-standing bugs. I'm now satisfied that my site renders acceptably using Firefox, Safari, IE6 and 7, and across both my primary and alternate styles. Thankfully the majority of bugs I've encountered have been well described and have had solutions documented. But it's matching your issue to the bug description that's the hard part. One particular IE6 bug took me a while to identify because it seemed so random: some pages were inexplicably wider than the fixed-width of 780px by 3px.

The problem

Because my header image is exactly the width of my page container, the effect of the expanded container was readily visible in IE6:

Playing detective

Starting with an afflicted page I deleted content first from the sidebar, and then from the main content area, adding it back one chunk at a time to see which element was responsible for causing the anomaly. By so doing I narrowed it down to one particular text-only paragraph. The mark-up was perfectly valid and contained no floats, padding, or borders that IE6 loves to choke on.

Firefox's Web Developer Extension has a topographic overlay which is extremely valuable for checking element widths (especially when combined with the new Dimensions "laser" in the indispensable xScope, now at v2.0). That looked fine, but the breakthrough came when I tried outlining divs in Internet Explorer 7 with the Developer Toolbar. I noticed that italics rendered outside the div outline:

Sure enough, now I knew what to look for I could see this in both Safari (left) and IE6 (right):

I temporarily removed the italics from my troublesome paragraph, and the problem went away.

The solution

It turned out that changing width to accomodate italics in a block of specified width was a known IE6 bug: just not one I'd encountered before. The fix was simple. Since I was already using conditional comments to feed bug fixes to IE6 I just needed to add one line to my IE6-specific stylesheet:

#primary { overflow: visible; }

As noted by PIE, it makes no sense at all since "visible" is the default value of overflow anyway. But you can't expect logical behaviour from IE6 can you?

bioneural.net site preference panel revisited

Bruce — Tue, 22 Jan 2008 20:06:51 +0000

From bioneural.net:

The first version of my site preference panel for WordPress needed lots of JavaScript for the toggle (Proto.aculo.us), more JavaScript to switch styles, and still more JavaScript to change text size. Version 2 still uses JavaScript for the toggle effect—but no additional load—since jQuery is already utilised by K2. The rest is accomplished using server-side PHP, and the revised 3-column panel layout makes use of more recent CSS know-how. I've tried to modularize the preferences panel as much as possible, but some simple template editing is still required (at 4 points). It is optimised for K2 (tested using RC3 and RC4) and although I haven't tested it with other themes (that's your job!) I don't see why it couldn't be used (*Some tweaking may be required. Batteries not included.)

Get the files

Let's get it done, then come back to the how and why if you're interested. Download the files to create your own preference panel as siteprefs.zip, available here. Expand the archive and upload the folder "siteprefs" into your K2 main directory:

/wp-content/themes/k2/siteprefs/

At this point you may also want to download and activate the Theme Switcher plugin if you plan on allowing your audience to change the WordPress theme they see on a per-user basis (storing their preference in a cookie). Support for the plugin is built into the preference panel (see features, below).

It's yours to play with and customise; all I ask is that you retain the little "i" icon with it's link back to these instructions. Feedback and suggestions for improvement are welcome. If you do modify it in a novel way (or use it in a theme other than K2), please leave a comment so I and others can check it out.

Right then, let's hack some templates!

Step 1: Look for cookies

Add the following code into PHP block at the top of K2's header.php (e.g. before the closing "?>"):

// Check cookie for stored site prefs
$layout = (isset($_COOKIE['layout']) && ($_COOKIE['layout'] == "alternate")) ? "alternate" : "style";

Here, "style" is the name of your main stylesheet (style.css in K2) and "alternate" is the name of a stylesheet we'll create at Step 5. If you're not using K2 pop this between PHP start and end tags at the top of your header template and set "style" to the name of your primary CSS file.

Step 2: Know your style

We need to replace the relative link to your stylesheet with one into which we can insert the value of the variable $layout. While we're here, we might as well link to the styling for the preference panel. In the head element of header.php replace this line (or your theme's equivalent):

with:

Your K2 custom stylesheet will still be loaded too, if you're using one.

Step 3: Flick the switch

Create a toggle to switch visibility of the preference panel on or off (it will be hidden on page load). The actual "switch" might be a text or an image link, inserted into an appropriate place (e.g your header or sidebar). If you prefer to add the toggle in the form of a tab in your K2 menu, look for ul class="menu" in header.php and replace this code:

	',''); ?>

with the following code:

	',''); ?>
	Prefs

If you'd rather use the supplied image (sitepref2.gif), place the following code after p class="description" (which is within div id="header") and before ul class="menu" in K2's header.php.

/siteprefs/img/sitepref2.gif" width="52" height="28" alt="siteprefs" />

The CSS to position the #siteprefs-toggle image within K2's header image area is included in the download (it will be ignored if you create a menu tab instead). If this position doesn't suit your theme of course you can overwrite this in siteprefs.css.

The toggle's "slide" effect depends on jQuery, which comes with K2 by default. If you're not using K2, you'll need to include the jQuery library in your head, find an alternative JavaScript (here is how v1 did it using Proto.aculo.us), or you may wish to dispense with the toggle altogether and ventilate your preferences permanently.

Step 4: Feel included

The file siteprefs.php includes the XHTML and PHP to build your preference panel. As well as providing the Theme Switcher control, it works with layout.php to toggle your main and alternate stylesheets (and store your choice in a cookie), and advises your audience on link behaviour. You can change the content of these three columns as you see fit just by editing siteprefs.php.

To get siteprefs.php into your theme we have to include it e.g. immediately below the closing tag of the div #header in header.php, so it appears to slide out from the K2 menu:

If you prefer you could put it at the top of your page, in the sidebar, or in the footer. Or anywhere. For sidebar placement, for example, you would likely edit siteprefs.php and siteprefs.css to respectively create and style a single vertical column.

At this point, if you refresh your site you should see the bioneural.net preference panel installed. If all went well and you're using a default K2 installation, you should be something like this:

Click thumbnail to enlarge image

Site preferences installed into default K2 theme (using image toggle)

Step 5: Go alternative

Finally we create an alternate stylesheet, named alternate.css (the name is specified in Step 1 and in layout.php).

What you put in here is up to you. You will likely want to import existing styling from your main stylesheet, and then write a handful of rules which, owing to the CSS "cascade", will overwrite some of those you just imported.

Here's a barebones example that increases font size and turns the default K2 fixed-width theme into a fluid/ liquid layout:

@import 'style.css';

body { font-size: 90%; } /* approx 30% larger than K2 default */
#page { width: 100% !important; border: 0; padding: 0; }
#primary { width: 100%; margin-left: -30px; padding-left: 30px; background-color: #fff;}
.content { background-color: #fff; } /* Match bg colour to #primary */
#sidebar-main.secondary { padding-left: 30px; border-right: 10px solid #f2f2f2; padding-bottom: 20px; } /* Border colour matches bg colour of .secondary */
.secondary { width: 100% !important; margin-left: -30px; background: #f2f2f2; }
#footer { background-color: #ccc; }

Upload alternate.css into the same directory as your main stylesheet (e.g. styles.css i.e. /wp-content/themes/k2/). This is important as the switch relies on your main and alternate stylesheets being in the same directory.

If you're having trouble overwriting rules for your alternate stylesheet, try !important e.g. width: 100% !important; but bear in mind IE6 will ignore it.

Build notes, features and credits

You don't have to read on—unless you're interested in how, why, and who helped make it work the way it does ;-)

The toggle effect

The toggle uses the jQuery JavaScript library and the code for this was covered in a previous article.

What if the user doesn't have JavaScript, or has it but disabled it? Version 1 hid the preference panel on page load using CSS, and showing it required JavaScript to change the styling to "display". Version 2 uses JavaScript to initially hide the panel, so if there is no JavaScript the panel will be revealed at the outset. Furthermore, because none of the controls in the panel utilize any JavaScript, no functionality is impaired. The only (minor) outcome is that the panel can't be hidden, but at least the "accessibility" preferences are, err, accessible.

A flexible 3-column framework

The XHTML mark-up and CSS for this is adapted from an example multi-column layout given in an ALA article by Alan Pearce. Alan cleverly builds on previous work that makes use of borders to simulate equal-height columns. Initially my mark-up used borders too, but after 2 days of trying to get it to work in IE6 and 7 with in-column padding I realised I didn't need them.

The fixed-width two-column K2 theme I use defaults to a width of 780px. To create our basic layout we create 3 divs (one for each column), and wrap these in a container div. The container sets up the 3 columns using floats and negative margins and then uses padding to effectively pull the outer columns back inside the container! We then create a header div and a footer div, and style the width of the outer columns (including padding) to 260px i.e. one third of our page width:

We can then apply a horizontally-repeating background image to the header and footer divs, match the background colours, and clear floats for the footer to position correctly. Here's what our panel now looks like topographically:

But the preference panel resizes, too. If your alternate stylesheet is "fluid" i.e. page content fits to the width of the browser window, the three columns will automatically space themselves out equally to fill the window:

Note that the left and right column width doesn't actually change, but the width of the middle column is no longer an implied 260px since we have set #siteprefs-center to occupy 100% width.

At this point everything is looking good—in Firefox, Safari, and IE7. You guessed it: Internet Exploder 6 is singing protest songs. We need to patch our CSS to make it work with IE6:

The IE escaping floats bug causes the contents of #siteprefs-header not to display. We just add width: 100%; to fix this.

The IE doubled float-margin bug causes #siteprefs-right to float outside of #siteprefs-wrapper! To fix this we add display: inline; to #siteprefs-right.

Switching whole themes

The Theme Switcher plugin for WordPress is by Ryan Boren. It sets a cookie so that the user's browser remembers their choice of theme for subsequent visits.

The bioneural.net preference panel uses conditional PHP to show the theme switcher dropdown menu or, if the TS plugin is not present or is present but not activated, they will see a "not enabled" message:

There are a few other things you might consider if you allow theme switching on your site; see Ben's list. To press the point, the preference panel includes a warning when the switcher is displayed that using it "may reduce functionality". At the very least you need to allow users to easily switch back to the previous theme—otherwise they'll have to wait a year until the cookie expires (not really; they could just delete the cookie!). In the sidebar of each theme you have installed, just paste the following:

If you don't like the list styling, this CSS (as used in siteprefs.css) will remove it:

#themeswitcher { list-style: none; padding-left: 0; }

Switching stylesheets

Previously I had used JavaScript to effect both a change in layout (fixed or fluid-width) and in text size (smaller, default, larger). Both of these are really accessibility issues—adapting to the size of your screen or the acuity of your vision. Add to this the observation that enlarging text size very soon causes problems within the confines of a fixed-width layout and it becomes clear why I decided to merge these features in version 2 i.e. biiger text, bigger container.

Stylesheet switching with memory is ideal, for example, if you want your iPhone/ tablet—or screen resolution-challenged work PC—to always use an alternative "accessible" layout. Cookies could likewise ensure that a different default style makes full use of your stunning 23" Apple Display.

Having decided against reusing the original ALA styleswitcher JavaScript, and considered using jQuery (as here—also JavaScript, but better), I looked at a few PHP options and settled on Roger Johansson's method.

Identifying off-site links

By default (Option 1) any link you tag with rel="external" will display the "off-site" icon (dimmed for visited links) using the included CSS. I prefer this option for identifying off-site links because it gives your audience the choice as to how links behave (the alternative is forcing them to open new windows using JavaScript or the depreciated target="_bank"). If you haven't religiously tagged your off-site links with rel="external" (or can't be bothered), you have two alternative options:

Open siteprefs.css and uncomment Option 2 (making sure the CSS for Options 1 and 3 is commented); this will apply the icon to all links other than to your own domain (credit). See the instructions in the file.
A WordPress plugin is available that will do it for you (Option 3). Once the Link Indication plugin is activated just uncomment the CSS for Option 3 in siteprefs.css (ensuring the CSS for Options 1 and 2 is commented-out).

Option 1 works in Firefox, IE7, and Safari (but not IE6). Option 2 works in Firefox and Safari (but not IE7 or IE6). Option 3 works in Firefox, IE7, IE6, and Safari (but does not differentiate between visited/ unvisited links).

Change log

Version	Notes
1.0	11.05.06. Initial 1.x release.
2.0	22.01.08. Initial 2.x release.
2.1	28.01.08. Corrected CSS for off-site links. Added alternative methods of identifying off-site links using pseudo-class (Option 2) or class (Option 3).

From Proto.aculo.us to jQuery

Bruce — Sun, 06 Jan 2008 18:31:03 +0000

From bioneural.net:

As I recently noted, both WordPress and K2 have migrated from using Prototype plus script.aculo.us to using the jQuery JavaScript library. Prototype is a JavaScript framework, including a library of functions used to build Ajax applications. It's best buddies with script.aculo.us, an add-on JavaScript effects library that extends the capabilities of the former. So where does jQuery fit in?

The winds of change

WordPress hasn't altogether dropped either Prototype or script.aculo.us. As of version 2.3.2 they're still bundled in wp-includes/js/, but the Codex notes that since version 2.2:

Switched to jQuery for core JS, which is lighter and faster.

I'm no programmer, but I do understand that loading a smaller function library is kinder on your bandwidth and browser, and that writing fewer lines of script to call those functions is kinder on web developers.

K2, on the other hand, stopped bundling Prototype and script.aculo.us as of revision 382. This popular WordPress theme now does all its Ajax magic—Live Search, Rolling Archives, and Live Comments—via jQuery.

Loosing weight

As of this writing Prototype (1.6.0.1) weighs in at 121 KB. The six core files that make up script.aculo.us 1.8.1 (sound.js and unittest.js are optional) also happen to total 121 KB, making a combined size of 242 KB. If I could therefore use jQuery 1.2.1 (at 45 KB) to achieve the same JavaScript-mediated effects, I'd be using around one fifth of the code libraries I was previously loading. But it's worse than that, because if I retained Proto.aculo.us for custom effects and loaded jQuery for K2, I'd be wasting bandwidth and CPU cycles like there was no tomorrow.

Prototype plus script.aculo.us

Here's how I was loading Proto.aculo.us in the head in my old WordPRess K2 r163 theme ("..." is a contracted path):

I built a toggle for my sidebar to display a list of category feeds, initially styled not to display on my home page, with the following:


Category feeds
.../styles/bioneural/feedicongrey.png" alt="Feed" />

A similar arrangement was used to hide and reveal my site preferences panel. Could I achieve the same using the lightweight jQuery?

Converting to jQuery

In my upgraded K2 RC3 theme I'm not loading any additional scripts in the head, because jQuery is already included. If you're not already using jQuery and just want to try it out, you can add it to your head temporarily and without uploading it to your own server like this:

Here's what I now have in sidebar.php using jQuery syntax (adapted from this example):

	
	Category feeds

It's as close to poetry as code gets, but initially I was using "$" in place of "jQuery" and the code had no effect at all. Thanks to Karl we determined that K2 was already using $, thus leading to the "Error: $ is not a function" I was getting:

That error usually occurs when a script tries to use the $ function before the core jQuery file has been loaded or when $ is being used for something else. Try replac[ing] each mention of $ with jQuery and see if that fixes the problem.

Issues

The only issue I've noticed is that you get a "flash" view of the hidden div when changing pages (on bioneural.net this affects the site preferences panel). While I generally discourage flashing, I don't believe in this case it's an arrestable offence.

Overcoming CSS Validator changes

Bruce — Sat, 05 May 2007 08:46:41 +0000

From bioneural.net:

A quick follow-up to this post in which I fell victim to the moving CSS validation goal-post. Do you include a link to the W3C Validator on your site to check your mark-up and CSS for standards compliance? If so you probably tested your code against the CSS profile that was in vogue at the time. But what happens when the W3C release a new profile? They upgrade the Validator—and your CSS may go from green tick to red cross! Here's a quick tip that avoids having to re-write any CSS, but at the same time keeps you from seeing red.

Originally when I created footer.php for my site I included the following CSS validation link:

CSS

My pages were valid CSS 2.0. Life was good. But something changed; the W3C began developing CSS 2.1. And I began to see red:

The W3C had started to use the draft CSS 2.1 profile as the default for its Validator. The property text-shadow isn't in the 2.1 draft, but it was there in 2.0. I happen to like this effect and wanted to retain it, so the trick is to specify that your website is complying with a specific CSS profile. This is easily accomplished by appending that profile to the URL of the link to the website you are checking, like this:

CSS

Now, that's better:

It's a small thing, but too many little annoyances can be overwhelming!

Details on CSS changes for IE7

Bruce — Mon, 23 Oct 2006 19:33:18 +0000

From bioneural.net:

IE7 is being pushed via Windows Update. The IE7 development team document bugs fixed (noted on positioniseverything.net & elsewhere), & extended compliance/ new features from the CSS specs. The IE Web Developer Toolbar may assist debugging your site for IE7.

Valid fix for PNG transparency on a single image

Bruce — Wed, 09 Aug 2006 21:59:28 +0000

From bioneural.net:

As you likely know, IE6 (and below) cannot handle PNG images that use alpha transparency. PNG produces graphically superior results compared to a transparent GIF image, which will often have a white fuzzy border. There are various "fixes" for this particular IE problem on the Web, but sometimes their application can have undesirable results, or the fix involves invalid XHTML or CSS. In my case I was prepared to accept grey backgrounds on the mini-icons used on bioneural.net, but there was one particular image where this really bugged me. Here's how I fixed it.

A general fix

At first I tried a JavaScript-based solution which was easy to install and automatically applied to all PNG images. Simply load the script in your header, enclosed in IE-specific conditional comments:

You can view and download pngfix.js here. Notice all those floats? I suspect they were responsible for my giving up on this method. For example, it messed up the feed icons in my sidebar (right, below), and for some reason that particular icon failed to complete loading in the IE progress bar (even though it was obviously being displayed). Weird. I don't like weird:

I did initially convert the affected images to .jpg (since this issue only affects floated images with a .png extension), but then decided "Why should I bend over backwards just for IE?". I reverted to the PNGs and continued to look for another solution. There's always another solution...

A specific fix

I subsequently discovered a solution that makes use of proprietary CSS and conditional comments for IE. I have few qualms about using proprietary tricks to fix proprietary mistakes!

Here's the relevant code that sits in my head element:

In my header div I've given the image I want to target an id of "pngfixband":

/styles/bioneural/whiteband-9rules-mt.png" alt="White band" width="115" height="115" title="bioneural.net recommends hosting with (mt) Media Temple" />

Notice how the padding (115px) in the styling corresponds to the height of the image specified in the markup? That's important.

In contrast to default behaviour (left, below), IE now does a respectable job of displaying this particular image as per my intentions (right, below)—but no other PNGs are adversely affected in the process:

No issues either for the XHTML or CSS Validator.