Last week I’ve came across with a new ‘method for image replacement (e.g. on hyperlinks), wich I’ve tested successfully in my latest project, and thus I now recommend its usage…

So far the most common method, was to use the -9999px left-margin, but this had a few drawbacks, since it had to “draw” a huge 9999px box offscreen.
This new “recipe” is cleaner and dramatically improves performance when compared to the old -9999px method.

So this is the code to use:

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

This method was discovered, apparently, by Scott Kellum, design director at Treesaver, and published in www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ where you can read some more about it.

This article authored by Craig Buckler was originally published by Sitepoint.com

This is a sneaky trick. It was devised by Jacob Seidelin at Nihilogic.dk and has been used by some participants in the 10K An Event Apart competition, though there is some contention as to whether it’s in keeping with the spirit of the event.

That said, it’s interesting to see how it’s done, so let’s have a look. Here are the steps:

1. Minimize your application

The first step is to squeeze your final CSS and JavaScript to the smallest possible size using any decent compression tool.

2. Encode your CSS and JavaScript as a graphic

This is the tricky part. You need to convert your ASCII-encoded CSS and JavaScript files into a single binary image. The PNG format is best because it’s lossless (your code is preserved), uses zlib compression, and is supported by all browsers. Web developer Cal Henderson has published his research and PHP/Perl code that converts code to an image using various formats such as 1-bit, 8-bit, 24-bit, and so on. You can view the jQuery library as a 1-bit square here. The PNG can be reduced in size further using tools such as Smush.it and PNGOUT.

3. Extract the code from the image

We now need to load the image and convert it back to executable code. This can be achieved by loading the image into a canvas element using the drawImage() method. Individual pixels are then read using getImageData(), and converted to a string that can be passed to eval() or embedded into the DOM. Results vary, but file size savings of 75% can be achieved. In a few cases, the image format can beat files compressed with Gzip. So you could enter the 10K competition with 40Kb of code!
Does this have a real-world use?
So, apart from cheating at contests, does this technique have any real-world application? It’s an interesting hack, but Gzipping source files on the server will normally result in better compression and it’s far easier to implement.

However, I could see the technique being used for steganography, or to encrypt sensitive code from novice hackers. Very cool, but would you use it?

by Craig Buckler in www.sitepoint.com/blogs/2010/09/07/compress-css-javascript-png-canvas/

1 Comment »

Every-time I created a word press theme, I felt the need to allow my theme users to use on their contents, the CSS styles that I had created to the theme itself.

They were especially created in order to maintain a visual identity between the layout and the contents, and should be directly applied at the author’s will! – How-come the styles, created specially for that theme (my CSS Classes), weren’t available to be applied trough the default WYSIWYG text editor?

My objective was allowing users to be able to apply the custom styles, in the default panel, using the panels own logic, without any particular knowledge of HTML or CSS and without having to stick to the editor’s default predetermined styles.

In this brief tutorial I’ll explain a very simple way to do this, just by adding a couple of lines of code to your theme’s functions.php, and by creating a very simple CSS file to host your custom styles.

In my previous article about this subject (www.wdmac.com/word-press-custom-css-styles-in-the-wysiwyg-editor) we’ve edited a couple of WP core files, and the result was satisfactory. However those edits where lost on every WP upgrade, and that was not satisfactory at all. This is a clean, straightforward technique, that is “permanent” and non-upgrade-dependent.

This article was updated: November 3th, 2011

38 Comments »

The Cascading logic

As you know CSS rules are applied trough a “cascade” logic, meaning that, if you have two (or more) different rules for the same element, the last one will prevail. (all others will remain).

This happens in a very precise way. – Let’s say you define a CSS rule that states that all paragraphs shall be Bold and Blue:

p {
      color:#00f;
      font-weight:bold;
}

And latter on you state that all paragraphs should be Red, and Italic (emphasized):

p {
      color:#f00;
      font-style:italic;
}

The result will be a Red paragraph in Bold Italic!

Why? – Well you added new rules that in the cascading logic, overruled the previous ones, however you didn’t contradict some of the previous rules, like the bold property.
So at the end, they all added-up to create a BIG common rule for all paragraphs.

2 Comments »

Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors.

It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they’re encountered.

You can test pages individually, or spider an entire site, and you’ll end up with a profile of which selectors are not used anywhere.

You can read all about, and download it here: www.sitepoint.com/dustmeselectors/