About State Scopes
A State Scope is a design pattern that lets a web developer switch into a specific “state”, in which certain CSS rules are applied to the page. The pattern can be used for a variety of things, but most people will use it for image replacement.
The two titles at the top of this page use State Scopes for image replacement. So go ahead—disable images, disable JavaScript, and load this page on an old web browser. These images are 24-bit PNG files with an alpha channel, and there is no semi-visible text leaking through. When you're ready to implement it on your own web site, you can learn more about image replacement with State Scopes from this SitePoint article.
One feature that comes with State Scopes is the ability to toggle them on and off quite easily. You can click the toggle link at the top of this page (which executes essentially a single line of JavaScript) to toggle image replacement on and off, and see how gracefully your page can degrade.
The Benefits of Image Replacement with State Scopes
Combining State Scopes with a clever way to check if images are enabled in the visitor's browser produces a near-perfect image replacement method—one that provides a number of advantages over the other techniques that are currently in use. For example, it...
- degrades gracefully when JavaScript and images are disabled in the visitor's browser;
- works with images that have alpha channels (transparent or semi-transparent regions);
- is extremely simple to implement;
- uses simple technology—works even in outdated & deceased browsers;
- is standards compliant, screen reader compliant, and search engine friendly;
- requires no changes to the body of the markup;
- consumes essentially zero processing power;
- will work even if the DOM is manipulated after the page is loaded;
- causes little or no flicker when the page is loading;
- text and image replacements can be left-aligned or centered within the containing element;
- doesn't require a 1x1 pixel .gif file to exist on the web server;
- works on the screen as well as in print (see print preview of this page);
- uses CSS background images, so it works well with image sprites.
You've got the power.
Because you have the flexibility to have entirely different CSS applied to the page when images are enabled and disabled, you can achieve some fairly creative effects with your text stand-ins. Click the toggle link at the top and take a look at what was done (fairly easily) with the logo title on this page.
Other things you can try with State Scopes:
-
Simulating universally-compatible CSS3 Media Queries is possible with a State Scope.
Just detect whatever browser settings you need in JavaScript and call
document.enableStateScope, like in the following (simplistic) example:if (screen.width < 640) document.enableStateScope("small-screen", true); -
Having certain CSS only visible when JavaScript is enabled is more convenient with
a State Scope. You don't even need to detect anything—just call
document.enableStateScopeand pass something like“script-on”. That's much cleaner than including a separate style sheet, and wrapping it's<link />tag in a<noscript>block.
Paste this code into your page:
You can get started with State Scopes and image replacement by pasting the code below into the
<head> section of your page. It has been minified down to 672 bytes of script.