CSS

Routing the Request: A No-Javascript CSS Style Switcher

View the last three entries in Taming the Wild Wild Web for the necessary markup and code that is required to get our no-Javascript CSS style switcher up and running.

After you have that information down, we still need to construct the request router which will swap the alternate stylesheet for the current style sheet via our on-page trigger. In our example, this trigger is the link located in the page’s footer. Notice that it points to a PHP file.

Inside of this file is our request router and it contains the following:

<?php
session_start();

switch ($_SESSION['style']) {
case ‘default’:
$_SESSION['style']=’alt’;
break;
case ‘alt’:
$_SESSION['style']=’default’;
break;
}

session_write_close();
header(’location: http://www.flexiblephilosophy.com\’.Arra…['page']);

?>

By reading the session variables set via the Web page itself, we can determine which page makes the request for the new stylesheet and which version of the page style is to be served.

Once our output is determined, we simple close out our PHP session for writing (we don’t want any data getting lost), and redirect our user back to the page which made the request.

That concludes our tutorial on a no-Javascript CSS style switcher.

You can view the live example at flexiblephilosophy.com.

The complete code can be viewed from the following links:

• The markup
• The default stylesheet
• The alternative stylesheet
• The PHP include
• The PHP router

Server Side Switch: A No-Javascript CSS Style Switcher

Navigate through our previous posts in Taming the Wild Wild Web to view both the overview of this project and the HTML/CSS of our dynamic server side CSS style switcher.

Now that we have the markup and declaratives written, we want our page to be able to switch its stylesheet when the “View alternative page style” link is clicked.

In our example, we’ll achieve such an effect by employing the use of some PHP. Our script will let us know a few things about the page itself; namely, where the request is coming from, what style the page currently has, and what page style the user desires.

We’ll save this information in PHP Sessions rather than cookies; so let’s add the session initialization to the very top of our page.

<?php session_start();  ?>

Next, let’s add some session variables to determine what page our request is coming from and the style currently set by the browser.

$_SESSION['page'] = $_SERVER['REQUEST_URI'];
if (!isset($_SESSION['style'])) {
$_SESSION['style']=’default’;
}

switch ($_SESSION['style']) {
case ‘default’:
$href = ‘css/default.css’;
$title = ‘Default’;
$altHref = ‘css/alt.css’;
$altTitle = ‘Alternate’;
break;
case ‘alt’:
$href = ‘css/alt.css’;
$title = ‘Alternate’;
$altHref = ‘css/default.css’;
$altTitle = ‘Default’;
break;
}

Because this is an awful lot of code to add to the beginning of each of your pages, we’ll throw it into a simple PHP file (style-swap.include.php) and call for it at the top of each page, after our session initialization.

<?php
session_start();
include ’style-swap.include.php’;
?>

The variables that we are setting in our switch will be inserted into our link elements that set the current and alternate style sheets for the Web document.

Therefore, let’s modify our markup to receive these dynamic variables:

<link rel=”stylesheet” type=”text/css” href=”<?=$href;?>” title=”<?=$title;?>” />
<link rel=”alternate stylesheet” type=”text/css” href=”<?=$altHref;?>”  title=”<?=$altTitle;?>” />
Now, we’re almost ready to test our page. We still need to construct our trigger when the link to view the new page style is clicked.

We’ll cover that in the next entry at Taming the Wild Wild Web.

The Markup and Declaratives: A No-Javascript CSS Style Switcher

In the previous installment of Taming the Wild Wild Web, we discussed a new method for switching the CSS of a page without using Javascript.

Now is the time when we’ll begin constructing an example to showcase such server side functionality.

To begin, we’ll build a simple HTML page that has both a default and an alternate stylesheet.

First, let’s get to the markup:
You can view the entire HTML markup here.

The most important part of our document is the declaration for the two style sheets.

<link rel=“stylesheet” type=“text/css” href=“default.css” title=“Default” />

<link rel=“alternate stylesheet” type=“text/css” href=“alt.css” title=“Alternate” />

The corresponding styles for our document can be found here and here, respectively.

It is worth noting that in this example we redeclare our properties and values for every selector, but in a production level implementation you may want to only use a core style sheet and have the selectors’ properties and values that change only be present on your CSS files that will get the swap.

Notice that we have a link in our footer that references our PHP file which will route our style change request.

In the next installment of Taming the Wild Wild Web, we’ll go over the procedural aspects of this PHP router and the server side includes necessary to give our page its dynamic style switching capability.

A CSS Style Switcher Without Javascript

There has been a recent trend as of late for Web sites to provide visitors with alternate page view styles to enliven the browsing experience.

While this is a positive for Web standards and accessibility (as it gives those users with vision impairments an option to view high contrast page styles), it also makes for a pretty cool way to spice up a page with a previous-had or down-right different user interface.

Most solutions to this CSS Style Switcher require that users click a link which triggers a Javascript behavior-level function to switch the current stylesheet and set a cookie to the user’s computer to save their page-style preference for the remainder of the browsing session.

While I don’t feel that this is a bad solution - I actually have employed this in the past - I do feel that there are quite a few different ways one can achieve this same effect.

In the following entries on Taming the Wild Wild Web, we’ll be constructing a Server Side CSS Style Switcher using a small amount of PHP, HTML and CSS only.

Our Style Switcher will be a cursory introduction to a simple method that gives users the ability to switch page view styles via an on-screen link while keeping the toolbar functionality of choosing the Web page’s stylesheet. The style switcher will also save their preference in a PHP Session, thereby requiring no cookies being set on the user’s machine.

What is required for this project:

• One HTML file
• One PHP include (to keep our markup a little cleaner)
• One PHP file to route our page style request
• Two CSS files (to provide our choice of page views)

In the next installation of Taming the Wild Wild Web, we’ll construct our two different page styles so that we can get ready for some dynamic server side switching.

CSS Hacks for Google Chrome

Since Google Chrome is a Webkit based browser, we can target it’s screen rendering the same way we handle Safari.

While 90% of the time you will not need to hack around to fix a site for Chrome/Safari (if you are indeed developing with standards in mind) there are always exceptions.

The one problem I seem to have is when floating multiple elements in a singe div. There seems to be a 1px margin jog between Firefox and Opera/Safari/Chrome.

In order to target Webkit based browsers, we can use the CSS3 selector for the pseudo-class first-of-type.

Since we will only be employing one body element, we set first-of-type onto the document’s body and then combine it with whichever element we wish to target.

For example:

body:first-of-type #navigation { margin-top:-1px; }

Jeffrey Olchovy is a Web developer, designer and marketing strategist.

Optimizing Your Web Site for Google Chrome

Google’s brand new open source browser debuted the other day, achieving 1% of the Internet perusing market share in no time at all.

This 1% seemed to detract from Firefox’s user base, and it is yet to be determined if more and more people will make the switch from the Internet dominating IE.

In such cases of platform switching, developers need to be aware if their sites are ready for these new up-and-comers.

As far as Google Chrome is concerned, it seems as though it bases its screen rendering on pages that adhere to Web standards (the basis for Google’s own Webmaster Guidelines), so those sites that are intrinsically constructed with standards compliance in mind will fare much better than those sites which trigger less forgiving browsers’ quirks modes.

If people make the jump to Google Chrome, be ready to see many a people not bothering with sites that no longer are maintained and constructed with proprietary syntax and markup. Consider Google Chrome as a marker for a future Internet-wide sweep of garbage collection.

The other notable feature of Chrome that seems ast0unding is its ability to recall pages for keywords that appear within their Web content.

The better your site is optimized for a given keyword, the better the chance that Chrome’s omnibar will recall its URL for a past visitor when the said keyword is used as a search term.

In the next installation of Taming the Wild Wild Web, we’ll discuss tweaking your CSS to deal with a few layout/design inconsistencies you may experience when constructing your pages.

Jeffrey Olchovy is a Web developer, designer and marketing strategist.

jQuery PNG Fix for IE6 - Single Instance Images

For quite some time there have been a few Javascript fixes freely available for download which can correct the lack of alpha transparency handling for png images in archaic versions of Internet Explorer (archaic, in my opinion being anything less than IE 7) - but even to this day, not one of these scripts completely solves this issue with seamless integration and out-of-the-box working functionality.

The best installations require the external linkage and path updating of lengthy Javascript file(s) and 1×1 pixel transparency blocks. While not entirely inconvenient, at times all this seems like overkill just to correct one or two images that require the correct use of alpha transparency on your Web site.

With this being so, I found it generally more convenient to just make the required fix myself for these simple images using a little jQuery and some guidance from Microsoft’s Internet Explorer knowledge base.

Since I usually only need, say, a container div with a drop shadow or a small graphic with known dimensions to require such alpha transparency (both being CSS background images), I constructed this little personal fix that will correctly handle full png functionality for one CSS background image in IE 6.

The (X)HTML:

<!–[if lt IE 7]>
<script src=”path/to/javascript/pngfix.js” type=”text/javascript”></script>
<![endif]–>

The Javascript (pngfix.js):

$(document).ready(function(){

$(’.pngfix’).each( function() {
$(this).attr(’writing-mode’, ‘tb-rl’);
$(this).css(’background-image’, ‘none’);
$(this).css( ‘filter’, ‘progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”path/to/image.png”,sizingMethod=”scale”)’ );
});

});

Just add the class pngfix to the image that requires alpha transparency and update the path in the Javascript file. When you add the class png fix, our jQuery selector applies a ‘top-bottom-right-left’ attribute to it in order to be sure it has layout, removes its already defined background image, and applies the new fully functional PNG image to its filter property using Microsoft’s proprietary Alpha Image Loader.

I have thus far used this with little to no problems - but like I said this was simple personal fix that best works for background images that are attached to selectors that have layout or have known dimensions.

Customize it to meets your needs or use it as a base for a new out-of-the-box jQuery fix for the comprehensive use of alpha transparency in IE 6.

Jeffrey Olchovy is a Web developer, designer and marketing strategist.

Optimize Your Web Page Load Times

A great tool that should be in the arsenal of any Web developer is YSlow.

Developed by Yahoo!, YSlow is a Firebug add-on that analyzes every Web page you load in your browser, performing metrics and generating reports based upon many rules and heuristics set by high performing Web sites.

When you launch YSlow from your Firebug panel you have the opportunity to browse through your pages’ report cards, their protocol transfer summaries, and a listing of every constituent that makes up a given page.

In my opinion, every Web site can benefit from YSlow, especially large, high-traffic receiving Web sites.

If you have a small Web presence, YSlow can best be used for making sure that your page is efficiently optimized for every one of your visitors, as each visitor will make up a larger percentage of your total incoming traffic.

I personally like to use YSlow to consolidate and optimize my CSS background images. Once I find out how many CSS background images are truly necessary for my design to still be rendered viable by popular browsers, I head over to Dynamic Drive’s image optimizer to rework my graphics to the smallest possible file sizes without sacrificing their aesthetic quality.

Get Tighter Design and Behavior Control With Advanced CSS Selectors

The advent of the CSS 2 and CSS 3 specifications brought designers a wealth of new methods for selecting various DOM elements and properties when crafting their Web pages. These advanced selectors allow for tighter control of your Web page’s design, whilst adding a high degree of precision to your element targetting.

However, not all modern browsers support this new level of selector specificity, making it oft times a bad choice for designing sites that need to be wholly accessible and usable (just about every Web site in an ideal world!).

Gladly though, developers and designers can both rejoice and get more acquainted with these advanced selectors since most of today’s popular Javascript frameworks take advantage of their pin-point DOM accuracy when defining their wrapped sets.

Utilizing these said frameworks will both sharpen your behavior-level skillset and your ability to traverse the DOM in a way that is gaining exponential popularity.

Some of the advanced selectors worth mentioning are as follows:

• Adjacent Sibling: ‘>’
  Style an element by defining which  selector directly preceeds it.
• Child: ‘+’
  Style a group of elements in relation to solely their group parent.
• Attribute: [attribute="value"]
  Target on page elements via filtering of their attribute values

An Example in the Wild

Over the past week and a half we’ve covered a lot of development material here at Taming the Wild Wild Web.

Now’s the time to admit that my inspiration for these entries came entirely from a project that I was working on during that time period. While it had a very close deadline, it was ultimately a practice in efficient development. Continued »