Dave Smith.info

HTML Character Entities References in CSS Content Property Values

Dave Smith — Thu, 03 Jun 2010 15:06:38 +0000

Say the following ruleset is wanted:
li.toupee:after {content: ” »”;}

This won’t always work but the following ruleset will:
li.toupee:after {content: ” \00BB”;}

So, how to get from » to \00BB:

Find the Character Entity Reference (W3C) wanted
Find a code starting U+ in the entity description, for example U+00BB for » (raquo)
Copy the number part of the code, 00BB
Paste the number into your CSS Content property value
Place a “\” before the number, \00BB
Done

A little more info can be found by reading the Strings section of Syntax and Basic Data Types (W3C).

ZX CSS Layout

Dave Smith — Tue, 25 May 2010 21:20:48 +0000

ZX is a bunch CSS classes to help authors and developers create flexible and consistent cross-browser layouts. And make applying Media Queries easier. That’s the plan anyway.

The ZX CSS Layout example page ain’t pretty but hopefully there’s enough information to understand what’s going on and to try it out.

There are quite a few of these layout helping CSS frameworky type things around, a couple I’ve listed, and they’re definitely worth trying out to see which shoe fits the bill oddie, or something like that.

Google Analytics Asynchronous Snippet Update Excitement

Dave Smith — Wed, 24 Mar 2010 23:50:39 +0000

Today was an exciting day for me. I discovered that my tweak to Google’s Asynchronous Snippet was published a couple of days ago.

The Asynchronous Tracking (code.google.com) page now shows:

And it can go in the head of your document, or I suppose anywhere. Hurray!

Thanks to Brian Kuhn (twitter.com) top guy who took in my tweak (google.com), tested it out and announced the new iteration of the snippet!

Time to start using it in earnest. Here’s hoping it stands the rigours of daily web life.

Google Analytics Asynchronous Snippet for the Head Element

Dave Smith — Fri, 19 Feb 2010 16:04:43 +0000

The below snippet worked with my test page where the current asynchronous snippet when placed in the head element would cause IE6 to stumble with “Operation Aborted”. The test page markup can be found at the bottom of the post.

The snippet:

Please, only use this snippet to test it. Use the one Google provides with instructions on their async page.

Feedback would be appreciated as the snippet has not been tested on a working site as of writing this post.

The problem I hoped to solve

Google Analytics guide people to insert the asynchronous snippet at the top of the body element:

“Insert the asynchronous snippet at the top of the section of your pages.” – Asynchronous Tracking Installation Instructions 2010 02 19

The reason for this was that although the asynchronous snippet could go in the head element, there was a potential problem for IE6 users. The problem was given in the help forum post Async snippet causes IE6 to close with “operation aborted” where a fix was offered:

“The fix is to either make sure all your tags are closed ( becomes ) or you can move your snippet to the top of the section instead of putting it at the bottom of the .” – Brian Kuhn

And to keep it simple they opted for inserting the code at the top of the body section.

With Brian Kuhn’s answer in mind my snippet is probably not needed, but it worked on my test page so I posted it here.

Test page markup

IE6 stumbled over this one

Testing

asdiuh asdiuh asdiuh asdihu ausdiuhas diuahsd iasudh aisduh asdiuhasd

IE6 seemed fine with this

Testing

asdiuh asdiuh asdiuh asdihu ausdiuhas diuahsd iasudh aisduh asdiuhasd

CSS :content and :section pseudo element selectors

Dave Smith — Fri, 13 Mar 2009 12:04:24 +0000

I believe there is a useful and yet missing CSS3 selector. I’ll explain with a rough example:


My section heading
Para
Para
Para
Para

Given the above, to style the section content so that it is indented by 20px, but leave the heading with no margin, could be done with:

.section > *:not(h1) {margin-left:20px;}

but what if the following was available:

h1:content {margin-left:20px;}

A pseudo element wraps the content, based on heading scope, and is then styled.

and

h1:section { }

A pseudo element wraps the heading and content, based on heading scope, and is then styled.

Apart from being easy to read, one advantage could be in backwards compatibility with old documents (without section elements) that they could be styled just as easily as new ones. Plus it just feels right to me.

jQuery.animate-sprite

Dave Smith — Sun, 08 Mar 2009 23:44:32 +0000

A bit of fun with a jQuery and background image sprite.

Current version 1.0.4 alpha.

jQuery.stacker-menu

Dave Smith — Sun, 08 Feb 2009 15:53:01 +0000

Out of interest in the varying menu systems at my disposal on the web, I have created some of my own. My lastest, the stacker menu, blends previous ideas with the inspirational jQuery API browser (jQuery) menu. The code is still pretty fragile but in development. Please try out the latest demo and let me know what you think.

Things I am trying to achieve with the menu:

A menu item can be a link, a link and menu or just a menu (alias)
Accessible, especially with a keyboard
Usable
Vertical space managed better than with a tree-like menu

jQuery plugin template

Dave Smith — Sat, 07 Feb 2009 22:45:38 +0000

Wanting a quick way to create a plugin in jQuery I found A Plugin Development Pattern (Learning jQuery), by Mike Alsup, via Improving upon the jQuery Plugin Template (Google Groups). Later, much later, I looked in the more obvious place; Plugins/Authoring (jQuery). I work best from hacking examples, so Mike Alsup’s pattern/template was the most useful to me.

The only difference between the following template and Mike Alsup’s is that I’ve stripped it down to just the essentials.

The template

(function($)
{
	$.fn.plugin = function(options)
	{
		// Set the options.
		options = $.extend({}, $.fn.plugin.defaults, options);

		// Go through the matched elements and return the jQuery object.
		return this.each(function()
		{
		});
	};
	// Public defaults.
	$.fn.plugin.defaults = {
		property: 'value'
	};
	// Private functions.
	function func()
	{
		return;
	};
	// Public functions.
	$.fn.plugin.func = function()
	{
		return;
	};
})(jQuery);

Updates

Removed “var” where not required, many thanks to Jim (Jim’s comment)

Progressive JPEGs for thumbnails?

Dave Smith — Tue, 13 Jan 2009 14:34:40 +0000

Just had a thought that maybe the browsers could sort this out. A browser could detect when a JPEG is shown smaller than full-size and choose to download only what is needed.

For example, if a JPEG is displayed 100% or larger then the full image is downloaded. If displayed at 20% then maybe only the first pass is downloaded. If then changed to 100% with Javascript or CSS or both, then a browser would download the rest of the image.

Progressive JPEGs for thumbnails?

Dave Smith — Thu, 08 Jan 2009 11:49:54 +0000

Not possible as far as I’m aware, but thumbnails do annoy me. Either they are processed smaller version of the full image – a form of duplication. Or the full version is used but displayed smaller – bandwidth, page loading times and browser image resizing beauty niggles.

Progressive JPEGs load progressively with each iteration enhancing the previous. The first iteration will be poor quality but probably good enough to pass as a thumbnail. Then if the full image is wanted the browser will just download what it doesn’t already have.

Anyone know if this is possible?