In my previous post on Quick and Easy CSS @font-face Code, I provide a choice set of CSS rules for embedding custom fonts into your web pages. It’s a solid, cross-browser technique that works great, but as Marty Thornley pointed out, it would be useful to have a more thorough explanation of how the code actually works. So, rather than going back and adding a bunch of additional information to the original post, I’m following up with a visual walkthrough of the @font-face code.

In step-by-step visual format, this article will show you what the code is doing and how to use it with your own custom fonts.

Step 1: Declaring the @font-face rules

The first thing we want to do is copy & paste the quick and easy @font-face code into our stylesheet:

@font-face { /* declare fonts */
	font-family: "MuseoLight";
	src: url("fonts/Museo300-Regular.eot");
	src: local("Museo 300"), local("Museo-300"),
		url("fonts/Museo300-Regular.woff") format("woff"),
		url("fonts/Museo300-Regular.otf") format("opentype"),
		url("fonts/Museo300-Regular.svg#Museo-300") format("svg");
		}

Yes, it’s a hideous-looking chunk of CSS, but that’s not going to stop us from using it to embed our own custom fonts. Let’s break it down and see how the different parts fit together..

Continue Reading

I’ve been using custom fonts in my designs for quite a few sites now, and have refined what seems to be an ideal chunk of CSS code for implementing the @font-face rules. Some of the sites that include these rules include Perishable Press and Digging into WordPress, which look more stylish and refined with the custom fonts in effect. I’ve tested this code on quite a few browsers, including the following:

• Safari 3.1+
• Opera 10+
• Firefox 3.5+
• Chrome 4.0+
• Internet Explorer 6+

This technique delivers your custom fonts quite consistently to all of these browsers, and degrades gracefully for those that don’t support it. Of course, there are always weird exceptions contingent in particular scenarios, but overall it’s a solid chunk of code put together from much research, experimentation, and testing. I share it here hoping it will help others implement custom @font-face fonts quickly and easily. Let’s step to it..

Continue Reading

I mean, basically anything except for Internet Explorer, which is a debate in and of itself. Here I’m referring to old versions of good browsers, like Firefox 2, Safari 2, Opera 8, and so on. It seems that older versions of these browsers are not as common as older versions of IE, so should we bother supporting them when designing our websites?

Most agree that we shouldn’t support old versions of crappy browsers like IE, but what about older versions of good browsers like Firefox, Opera, and Safari?

Backwards Compatibility

One of the cool things about adhering to Web Standards during web development is that, theoretically at least, your designs should look similar on all standards-compliant browsers. This is one of the reasons why we exclude IE from the conversation — it doesn’t speak the language, and requires a whole realm of special support in and of itself. But even for modern browsers like Firefox and Safari, a standards-based design does not always translate to presentational fidelity in older versions. So how far back should we go? Obviously there’s no reason to go out of our way to support, say, Firefox 1, but what about more recent versions such as 2 or even 3.0?

Rendering Differences

For many modern browsers, the older the version, the more inconsistencies you’ll find. Older versions of Opera are notorious for borking an otherwise perfect design, and the further back you go, the more borked your design is going to get. And for anyone who does support older Opera, you know how frustrating it can be to target and filter specific versions with CSS. The same is generally true for other modern browsers: supporting older versions can get messy, costing endless amounts of time and energy. There’s no reason to have your designs look identical across browsers, but they should at least be usable. Right?

Continue Reading

For my Serious redesign, I push the envelope in terms of CSS’ advanced selector functionality. Stuff like:

• p:first-child
• p:first-child:first-letter
• p:first-child:after
• p:first-child:first-line

Plus lots of other stylistic tricks that require CSS3 support in order to display as intended. Fortunately, most of the browsers to which I am catering with this new design have no problems with most of the advanced stuff. Of course, Internet Explorer chokes on just about everything, but fortunately IE’s proprietary conditional comments make it easy to fix things up with some “special” styles:

Continue Reading

In a perfect world, I don’t use CSS hacks, and certainly don’t recommend them. In the unpredictable, chaos of the real world, however, there are many situations where applying styles to particular browsers is indeed the optimal solution. Most of the time, I am targeting or filtering Internet Explorer (because it is so incredibly awesome), but occasionally I need to tweak something in a modern browser like Firefox, Safari, or Opera. In this article, we’ll look at CSS hacks targeting different versions of Firefox.

Some of these CSS hacks don’t validate, others are proprietary, and some are completely valid (depending on CSS specification). I have tested these hacks to the best of my ability, but don’t let that stop you from checking things out on your own (in fact, I absolutely recommend doing so). These Firefox hacks are organized according to version number and presented with ease of copying and pasting in mind. That said, here are some notes that apply to all of the hacks in this article:

• For each hack, change only #selector, .selector, and of course the declaration blocks.
• Hacks that do not validate as CSS are designated with [!] in the associated comment.
• If you discover any inconsistencies, incompatibilities, or inoperabilities, please leave a comment.
• This post is a work in progress. Please share any Firefox hacks that are not on the list.

Also keep in mind that, in general, there are two types of CSS hacks: those that target and those that filter. By targeting, we are referring to the application of CSS styles to a particular, targeted browser (or set of browsers) at the exclusion of all others. Conversely, by filtering, we are referring to the application of CSS styles to every browser except a particular browser (or set of browsers). In essence, this hack dichotomy represents two sides of the same coin. How you classify these various hacks all depends on perspective.

Continue Reading

One of the original purposes of Perishable Press involved serving as a “virtual dumpster” for all of my miscellaneous code snippets. Over time, I continued elaborating to greater degrees on the various code recipes that I was posting, until eventually those brief snippet posts evolved into complete, richly detailed articles (at least from my point of view). Now that I enjoy the luxury of writing for an incredible audience, I try to avoid posting anything that doesn’t include an accompanying explanation. “If it’s worth posting, it’s worth explaining,” I always say. When you have people reading your stuff, there is little room for superfluous nonsense, unexplained code snippets, and long-winded introductions. ;)

Even so, every now and then you need to break the rules, shake up the routine, rock the boat, drop some acid, that kind of thing. Lately, I have been doing some deep archiving and have amassed a considerable collection of completely miscellaneous and unrelated chunks of code. There are too many random snippets to spend time sewing together similar functionality, and I really hate deleting perfectly good code. I also hate keeping misfit code chunks lying around in my otherwise pristine digital archive (joking). Fortunately, this dilemma is easily resolved by loosening up and simply dumping the information right here on the site. After all, that’s what it was originally designed for — in fact, the further you dig back into the archives, the more apparently pointless code snippets you will find. So without further ado, I now present a completely random, unexplained, miscellaneous collection of potentially useful code snippets!

Continue Reading

A great way to enhance the visual appearance of various block-level elements is to use a “rounded-corner” effect. For example, throughout the current design for this site, I am using rounded corners on several different types of elements, including image borders, content panels, and even pre-formatted code blocks. Some of these rounded-corner effects are accomplished via multiple <div>s and a few background images, while others are created strictly with CSS.

Of these two different methods, extra images and markup are used whenever I need the rounded corners to appear in all browsers, or in other words, whenever the effect is an essential aspect of the design. And then, on the other hand, when using rounding corners for visual enhancement, I prefer the strict-CSS method because it is much easier to implement. Rounding the corners on image borders or <pre> elements, for example, is an excellent way to progressively enhance the visual presentation of a design (generally speaking).

Continue Reading

One of my goals for the new Perishable Press redesign was to achieve cross-browser, pixel-perfect precision [ ¹ ]. Of course, due to many variables (platform, operating system, browser, extensions, fonts, etc.), it is virtually impossible to achieve complete 100% perfection, but I am certainly interested in examining the design on as many different configurations as possible. Thus, last week after launching the new design, I made an open call for screenshots. Graciously, many of you responded with some great screenshots. Thanks to you, I was able to see Perishable Press “in the wild” on many operating systems and browsers to which I simply don’t have access. Sure, I could have just went to browsershots.com or some similar service, but as Rick Beckman correctly pointed out, it is much more fun to get everyone involved in the process. So without further ado, here is the Perishable Press Quintessential Screenshot Gallery:

Continue Reading

Picture it. You have just prepared some recent snapshots of your buddies from a gathering over the weekend. Special care was taken to choose the images, and resize the images appropriately. As you sign in to your favorite social networking site to upload these images, you realize your credentials are invalid. You type in permutations of your user-name and password, check the “Caps” Key, but find that you are still not allowed access to your account. Your account could be have been hacked, removed, or just made unavailable. The site that you swore would hold and keep your memories, thoughts, feelings, and treasured moments are inaccessible or worse, gone forever. How could this happen? Just as we get attached to material things in life, we become attached to our email, blogs, podcasts, bookmarks, and images. In other words, this is our new digital existence. Some would call it our digital baggage.

Continue Reading

As my browser of choice, Firefox provides all the functionality I need for web design, application development, everyday surfing, and much more. With a handful of choice extensions installed, Firefox is a lean, mean “get-it-done” machine. Plus, I am always looking for new ways to boost productivity and increase efficiency. Of course, an excellent way to do this involves learning and using as many mouse and keyboard shortcuts as possible. Over the past few years, I have collected oodles of shortcut snippets for Firefox. Thus, in an effort to purge my constantly growing stash of notes, I decided to round up all of the Firefox shortcuts I could find, clean them up a bit, and post the collection online for everyone to enjoy. Drum roll please: now presenting 85 Firefox Shortcuts for Mac and PC! Enjoy..

Continue Reading

I recently twittered my intention to switch from the Firefox browser to the sleek, new Opera 9.5. I have always used Opera as a secondary browser, especially handy for speedy jumps into cyberspace, browser testing, and taking up space on my hard drive. I have always wanted to switch completely to Opera, but for many reasons, Firefox just keeps pulling me back into its comfortable grasp..

After a quick Opera-9.5 download, I decided to install Opera in its own directory instead of upgrading my current 9-point-whatever version. Unlike some browsers, multiple installations of Opera require nothing more than separate directories (as specified during the setup process). Within moments Opera 9.5 was loaded up and running tuf. The new darker default interface is sleek and sexy, inspiring me all the more to continue my quest to switch from Firefox.

As I began configuring the new Opera with imported bookmarks, speed-dial, home-page settings, and tab groups, I found myself digging up passwords that I haven’t had to remember in years. I know that Opera is equipped with its own “Remember Password” functionality, but you still have to enter each password at least once in order for it to work. Not a big deal, and certainly nothing against Opera, but it would have been great to have been able to import all of my saved Firefox passwords (if that’s even possible). In any case, after loading up and logging in to my core collection of tabbed sites, I spent a majority of the day using Opera instead of Firefox for all of my design, admin, and surfing needs.

Continue Reading

Oooops! Didn’t really mean to add that particular word to the Firefox custom dictionary. Better remove it now before it causes problems later on..

As one who takes full advantage of the custom dictionary in Firefox, I occasionally find myself adding nonexistent or misspelled words to the dictionary by accident. Not wanting to deal with a false negative down the road, I always take the time to stop what I’m doing, locate the custom dictionary, and remove the erroneous term. Finally getting sick of trying to remember the esoteric location in which Firefox stores the personal dictionary, I decided to make a few notes and post the information here for easy access when it happens again (and it will happen again;).

Continue Reading

As Firefox continues to grow in popularity, it is inevitable that more and more users will install plugins such as Adblock and Adblock Plus. As we know, such extensions work by filtering site contents through a list of predefined wildcard directives and other rules. Users may also customize the block-list by right-clicking on unwanted images or even subscribing to an automated filterset updater. Apparently, a significant number of Firefox users employ these extensions to help control the relentless flood of unwanted advertising around the Internet. This concept works great when advertisements are blocked, but what happens when users are unwittingly denied access to legitimate content?

The Two Adblock Extensions

As many are not aware, there are currently two suspiciously similar Adblock extensions for Firefox. As mentioned in the opening paragraph, Firefox users may install either “Adblock” or “Adblock Plus”, both of which are freely available via the Firefox Add-on pages. For many months now, I have been using Adblock Plus. If I remember correctly, I had replaced Adblock with Adblock Plus several months ago while resolving a conflict with some other extension (I should be keeping a log for such changes!). Since installing Adblock Plus, I have been noticing missing content from a significant number of visited sites. While not having the time (until today) to explore the situation in greater depth, I decided to snap a few screenshots along the way, capturing the Firefox view of any sites that seemed to present with missing content. Here are few of the more popular ones:

Continue Reading

Fifty Favorite Favicons If you have a website, you need a favicon. For those who may not know, favicons are the small, square icons that frequently are associated with websites. Favicons appear in many places, including browser toolbars, bookmarks, tabs, and address bars. Favicons provide immediate visual identification of their represented sites, enabling super-easy navigation for Web users. While surfing bookmarks with fifty tabs open, finding and clicking on icons is far more efficient than reading through piles of link text. Yet, beyond making it easier for people to identify and locate their favorite websites, favicons also play a critical role in site branding and product recognition. Popular browsers such as Firefox, Opera, and Internet Explorer are virtually re-branded when favicon-enabled sites are displayed. For example, observe how willingly modern browsers conform to the image of web designer/developer Jonathan Snook:

Continue Reading

CLB+ As many WordPress users now realize, there have been many fundamental changes in the new version of WordPress. The latest version of WordPress — 2.3 — features a considerably revamped database structure, including a complete reorganization and redistribution of the wp_categories table. Unfortunately, such database alterations have rendered inoperable many popular plugins, proving quite unfortunate not only for millions of WordPress users, but also for those of us who donate time, effort, and resources toward the development of freely available WordPress plugins. Thus, with the advent of WordPress 2.3, developers whose plugins have ceased to function must now decide whether or not to continue their support. In my humble opinion, philanthropic plugin developers have several choices:

Continue Reading

In the Beginning..

Over a year ago, I posted an article recommending over fifty “essential Firefox extensions.” Excited to have discovered the miraculous joys of extending Firefox with such amazing functionality, I loaded my primary copy of Firefox with just about every potentially useful extension that I could find. Several weeks were spent playing with new features, customizing preferences, and configuring options to gel together in an orchestrated chorus of blissful browser harmony. After experiencing the functional firepower of my newly equipped technological terror, I was completely convinced that I had assembled the ultimate collection of Firefox extensions. And, as the power went straight to my head, I was determined to enlighten the masses by publishing a complete, unedited list of 51 “essential” Firefox extensions.

Continue Reading

..Or something. Frankly, I just needed an excuse to post these steaming little beauties online. Please note that I don’t lay claim ¹ to most of these browser bookmarklet/favelet tricks, but I do find them extremely useful. They are posted here for the sake of convenience and for reference purposes, so use at your own risk (i.e., I am not responsible if they crash your browser). Although I use most of these bad boys with Firefox, I wouldn’t be terribly surprised if they also functioned properly in other modern browsers. Nonetheless, along with each bookmarklet/favelet thing, I try to provide as much relevant information as possible, because sometimes you just feel like you’re from another planet. Happy head-scratching!

What are these things?

“Bookmarklets,” “Favelets,” “Browser Enhancement Things” — whatever you want to call them — help increase productivity and simplify tasks executed from within your browser window. Basically, these things are stored as bookmarks and perform some task — such as resize the browser window — when they are clicked. Hmm, perhaps I should check Wikipedia for the “Official” definition .. — nah.

How do I install them?

Installation of these lil’ miracles could not be easier. In most modern browsers, simply drag and drop the bookmarklet link onto your shortcut toolbar (Firefox, Safari, et al) or right-click and “Add to Favorites” (Internet Explorer). Pretty easy. There is a more complicated method as well. Create an empty bookmark or Favorite and copy & paste the bookmarklet source code into the URL field. Either way, these things are pretty common and you shouldn’t have too much trouble. So, without further ado..

Continued..

Consider this post an evolving receptacle for Firefox-specific CSS tricks.

Change the color of highlighted text

*::-moz-selection {
   background: #FF3C00; /* the background color of the highlight */
   color: #FFF; /* the color of the text within the highlight */
}

Change the opacity of an element

div#division { /* choose either attribute */
   -moz-opacity: 0.99; /* possible values: 0-1 */
   -moz-opacity: 99%; /* possible values: 0%-99% */
}

Control item selection of an element

div#division { /* choose one of the following values */
   -moz-user-select: none; /* no content within the element may be selected */
   -moz-user-select: all; /* contents may be selected only as a whole */
   -moz-user-select: text; /* [default value] only text may be selected */
   -moz-user-select: toggle; /* all contents of the element are selected */
   -moz-user-select: inhereit; /* inherits user-select value from parent element */
   -moz-user-select: element; /* elements may be selected one at a time */
   -moz-user-select: elements; /* multiple elements may be selected at the same time */
}

Round the corners of elements

div#division { /* choose one of the following values */
   -moz-border-radius: inherit; /* inherits border-radius value from parent element */
   -moz-border-radius: 7px; /* length/unit values indicate corner/border radius */
   -moz-border-radius: 70%; /* percentage values indicate relative corner radius */
}

Note that the -moz-border-radius property may be expressed as to target specific corner(s):

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

Further, the following rule consolidates these four properties into one:

-moz-border-radius: 7px 3px 7px 3px;

Add an outline to an element

div#division, h1 { /* choose one of the following values */
   -moz-outline-width: inherit; /* inherits moz-outline value from parent element */
   -moz-outline-width: medium; /* possible values: thin, medium, thick */
   -moz-outline-width: 7px; /* specifies outline width via an explicit length/unit */
}

Reverse item order in elements

div#division { /* choose one of the following values */
   -moz-box-direction: normal; /* items displayed top to bottom and left to right */
   -moz-box-direction: reverse; /* items displayed bottom to top and right to left */
}

Add a multi-colored, multi-layered border to an element

This nifty CSS property adds a border to an element that is any number of pixels in width. Each pixel-width of the border may display with a unique, user-specified color.

div#divisions { /* spcifies a border along with a uniform color for non-Moz browsers */
   border: 3px solid #333; /* if only two moz-border colors are defined, the third will be this color */
}
div#divisions { /* choose on of the following values */
   -moz-border-colors: inherit; /* inherits border-colors value from parent element */
   -moz-border-colors: none; /* [default value] no color-striping is applied */
   -moz-border-colors: red white blue; /* indicates color values from outside to inside */
   -moz-border-colors: #333 #777 #999; /* indicates color values from outside to inside */
   -moz-border-colors: ThreeDDarkShadow ThreeDShadow transparent; /* named values also apply */
}

Further, -moz-border-color property may be segregated as follows:

div#divisions { /* use any/all of the following attributes */
   -moz-border-top-colors: #333 #777 #999 #FFF;
   -moz-border-right-colors: #333 #777 #999 #FFF;
   -moz-border-bottom-colors: #000 #999 #CCC #DDD;
   -moz-border-left-colors: #000 #999 #CCC #DDD;
}

Firefox extensions enable users to customize Firefox with additional features. Generally, Firefox extensions are free, open-source, and easily downloaded as .xpi files. This article explains how to hack Firefox extensions of the .xpi variety. There are many reasons why someone would want to hack a Firefox extension — examples include: editing code, debugging errors, and learning extensions. This hack method requires a web browser, zip utility, and text editor.

Step 1: Secure an extension

By default, the Firefox browser will cache and attempt to install any "extension.xpi" file it encounters. Once Firefox installs the plugin, it becomes much more complicated to hack. Therefore, it is best to save an offline copy of the extension. This is easily accomplished with a browser such as IE that does not automatically install the extension, but rather provides an option to save a copy. With IE, simply right-click the extension.xpi link and "Save Target As..". Regardless of the method, the point here is to secure a local copy of the extension.xpi file. Remember to make a backup copy.

Step 2: Initial extraction

Once you have a willing extension.xpi file, open it with a zip utility and extract the files into some directory, say, "/xpicontents/". Within the /xpicontents/ directory there should be at least a "chrome" folder, an "install.rdf" file, and a "licence.txt" file. Certain extensions may include additional and/or different files or folders. If anything looks too unfamiliar, extrapolate the method or find a different extension to use as you follow along.

Step 3: Editing the .rdf file

At this point, you have everything needed to edit the install.rdf file. Simply open the file in a text editor, make/save changes, zip the contents of /xpicontents/ into a new file, and change the file extension from .zip to .xpi. On the other hand, editing virtually any other aspect of the extension — JavaScript, CSS, (X)HTML — requires further digging.

Step 4: Hacking the .jar file

Located within the chrome folder, the "something.jar" file contains a variety of files, including JavaScript, CSS, (X)HTML, etc. Most extension editing will ultimately find its way to one of the files contained within the extension’s .jar file. So, to begin, rename the something.jar file to "something.jar.zip". Then, using a zip utility, open the something.jar.zip file and extract its contents into a unique directory, say, "/jarcontents/". Within the /jarcontents/ directory there should be at least two folders, "content" and "skin". Now, dive into the contents folder (or the skin folder, if needed) and edit, hack, and tweak the files to your heart’s content.

Step 5: Repacking the extension

After the necessary edits have been made, it is time to put humpty back together again. The first step is to replace the original contents of the something.jar.zip file with the freshly edited contents. To do this, select both content and skin folders (or whichever contains the edited material), right-click and add the selected folders to the something.jar.zip file located within the /jarcontents/ directory. Then, rename something.jar.zip back to something.jar.

At this point, you are ready to (re)package the chrome folder, install.rdf file, and license.txt file into a new .zip file, which we will call "hacked-extension.zip". To do this, simply select all three items and zip them into a new file named hacked-extension.zip. Finally, rename hacked-extension.zip to match exactly the name of the original extension, extension.xpi.

Step 6: Installation and testing

Once the necessary edits have been made, it is time to install the extension. Open Firefox, drag-and-drop the extension, and click OK to install. Restart Firefox, activate the extension, and check its functionality. Lather, rinse, repeat. It may be a good idea to test the hacked extension under a variety of different user conditions. Or not. Whatever. At this point, it’s entirely up to you. You may also want to save a copy of the original extension together with your hacked extension along with a few notes, just in case.

Well that’s it for now — thank you for your gracious attention. God bless.

References

• Hacking Firefox Extensions Book
• GUID Generator Web Service

Firefox users, lend me your ears! As you know, Firefox is like the most excellent, versatile, reliable, and secure browser available today. Extensions are just one of the features that make Firefox so versatile and efficient. Extensions enable Fx users to customize their browsing experience by adding tools that help with security, searching, and multimedia. Here is a list of our favorite — nay, essential — Firefox extensions:

• Adblock Filterset.G Updater 0.3.0.4
• Adblock Plus 0.7.1.2
• All-In-One Sidebar 0.6.4
• Bookmark Backup 0.4
• Broadband Speed Test and Diagnostics 1.0.1
• ChatZilla 0.9.75
• Clear Cache Button 0.3
• Colorful Tabs 1.4
• ColorZilla 0.8.3.1
• Copy All Urls 0.6.2
• Copy as HTML Link 1.0
• CustomizeGoogle 0.50
• del.icio.us 1.1
• Document Map 0.5
• Download Statusbar 0.9.4.1
• Extended Statusbar 1.2.4
• Fasterfox 1.0.3
• Firefox Extension Backup Extension (FEBE) 3.0
• FireFTP 0.94.3
• FlashGot 0.5.96.060823
• Furl Tools 0.6
• Google Pagerank Status 0.9.6
• Html Validator 0.7.9.3
• IE Tab 1.0.9.5
• IE View 1.3.0
• Image Zoom 0.2.6
• InfoLister 0.9e
• LinkChecker 0.4.5
• ListZilla 0.8
• MeasureIt 0.3.5
• Menu Editor 1.2.2
• Noia 2.0 (eXtreme) 3.12
• Ook? Video Ook! 0.5.1
• Orbit Grey Custom 0.7.0
• Resize Search Box 0.0.7
• Restart Firefox 0.3
• Screen grab! 0.8
• SearchWith 0.2
• SEOpen 0.7
• ShowIP 0.8.02
• Small Screen Renderer 1.2
• SpiderZilla 1.5.3
• Tab Mix Plus 0.3.0.5
• Tab Sidebar 1.0.3
• Torrent-Search Toolbar 1.0.1.21
• UnPlug 1.4.1
• User Agent Switcher 0.6.8
• VideoDownloader 1.1
• Web Developer 1.0.2
• Wizz RSS News Reader 2.1.5
• X-Ray 0.8