The Zen in 7: Enhanced Styles In Internet Explorer 7

The Zen in 7: Enhanced Styles In Internet Explorer 7

As of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Internet Explorer, see IE Developer Center.

Thadd Weil, Arron Eicholz, Markus Mielke
Microsoft Corporation

September 26, 2006

Introduction

Windows Internet Explorer 7 addresses many issues that have faced web developers designing interactive web pages that work with other browsers and platforms.

This document highlights changes to fixed positioning, the :hover pseudo-class, and the enhanced support for the portable network graphic (PNG) image format. By looking into each feature, we can show you how they can make your sites leaner and more interactive with less effort.

Prerequisite: This document assumes that you are familiar with HTML and CSS.

Contents

Overview
THE ZENTEK DEMO: Here is What We Came Up With
FIXED POSITIONING: An Alternative to Frames
HOVER: The Rollover-less Rollover
PNG: The Right Kind of Image
SUMMARY: New Possibilities

Overview

When development of Internet Explorer 7 began, one of the key efforts was to address the comments and concerns of web developers. Among the most persistent requests was for better compatibility with the W3C Cascading Style Sheet (CSS) working draft. As a result, Internet Explorer 7 has improved support for CSS 2.1. To demonstrate these improvements, we turned to the model set by the CSS Zen Garden.World Wide Web link.

The CSS Zen Garden project was initiated to inspire graphic/web designer to work primarily with CSS. The goal was to show designers, developers, and artists that the majority of functionality they had historically achieved through scripting and proprietary browser filters, could be accomplished using styles alone.

The Internet Explorer platform has supported CSS functionality for several versions and IE7 builds on that support. By default, IE renders HTML and CSS in "quirks mode" to ensure that existing content continues to render as it does in previous versions of IE. To render content according to the CSS recommendation, web developers need to define their pages using a strict !DOCTYPE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(The strict !DOCTYPE already exists in the HTML from the CSS Zen Garden).

Note: To accurately present the CSS recommendation, all examples in this article are rendered in "strict" mode. Pages that do not include a defined !DOCTYPE may display different results than the examples in the following documentation. For more information, please see !DOCTYPE.

THE ZENTEK DEMO: Here is What We Came Up With

To illustrate what can now be accomplished using styles in Internet Explorer 7, use the following button to open the ZenTek demo site.

This feature requires Microsoft® Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.


The ZenTek demo uses an unaltered version of the HTML source used by all Zen Garden samples. The page is dynamic and does not use JavaScript or browser extensions. The demo site is polished, fluid, and based entirely in CSS. There are one or two tricks used, but they are easily achieved with Internet Explorer 7 through simple conventions and a bit of sleight-of-hand.

To view the HTML source underlying the ZenTek demo, please visit the CSS Zen Garden website. The ZenTek style sheet is also available.

Now, let's review the three features that make the ZenTek demo work.

FIXED POSITIONING: An Alternative to Frames

Page layout is a notable attribute of the ZenTek demo. The layout is marked by a twist to an often used and decidedly old web convention. The page has a specific structure, a navigation bezel (or curtain), embedded scrollable text which sits behind the curtain, and stationary links that sit above the curtain.

This layout uses fixed positioning to create the visual effect. Fixed positioning is a subcategory of absolute positioning. Like absolute positioning, the contents of a fixed positioned element exist outside of the flow of the body content. The difference lies in where the content is attached.

Absolutely positioned elements are assigned a location on the body of the content page, whereas fixed position elements are associated with the browser window (or viewport). Both elements compete for the same z-index ordering, but when it comes to location, the fixed positioned elements will always remain someplace in the viewable area of the browsers window (providing the viewport is large enough).

In the ZenTek demo, the bezel and navigation elements have a fixed position. As long as the browser window is open, their location will not change. The content element (#supportingText) has an absolute position, placing it under the space laid out by the fixed elements. It has no defined z-index, but because the #pageheader has a z-index of "1" (and a fixed position) it renders on top of the #supportingText block. Keeping the #supportingText contents flowing and scrolling behind the primary site elements.

For more information about element positioning, please see About Element Positioning.

Why use fixed positioning? Why not use frames?

You may wonder why frames were not used for the "curtain" effect on the sample page. Outside of the general purview of the CSS Zen Garden (which prohibits transformation of the basic HTML, and did not include frames), that is a question worth addressing.

The short answer is that is it easier to structure pages using styles. Frames can be useful when you want to display more than one kind of rendering behavior. Each frame can act as an independent browser window, presenting the contents of each frame as though they were on separate pages. If we had used frames in our example, we would have needed at least two pages of HTML. One would display the frame structure and the second will fill that structure with content. The style sheet design removes the need for multiple source file; all content can be found on a single page of HTML. You can then use CSS to transform and present the content as you see fit.

In general, it is difficult to design fluid user interfaces using frames. Careless implementations can frustrate users by interfering with navigation, printing, and links to external sites. Fixed positioning avoids these issues by presenting a single focusable object, the document. Navigation is clear, printing is simple, and external links open cleanly.

Fixed positioning simplifies layout by allow your pages function more intuitively. Employed tactfully, fixed positioning can draw attention to key content, keep navigation consistent, and help guide users through a site.


Positioning Overview


The above image shows how the ZenTek demo uses positioning to create the user interface. Resize your browser window to see how positioned elements behave under different conditions.

Note:The "f" characters in the image indicate fixed position elements.
#pageHeader h1
{background: url('images/ZenTek.png'); 
    height: 93px; 
    left: 279px; 
    position: fixed; 
    top: 116px; 
    width: 337px; 
    z-index: 1;}
#preamble
{left: 195px; 
    position: absolute; 
    text-align: justify; 
    top: 220px; 
    width: 412px;}

HOVER: The Rollover-less Rollover

The rollover is a mainstay of web interactivity. More than a mere flourish, the suggestion of interaction through the off, over, and on state has become an expected feature on most websites.

In the ZenTek demo, rollovers are implemented with the :hover pseudo-class. The :hover pseudo-class is not entirely new to Internet Explorer. In the past :hover could be applied, but only to the link element. In Internet Explorer 7, this pseudo-class has been completely unrestrained. It can now be applied to any element on a page.

In the example, it has been applied to the #extraDiv elements two through six (#extraDiv1 is used in the header bar). These #extraDiv elements handle the over states for navigation, giving the buttons an additional tactile quality. The example does more than mark the over state since it is also applying a large layover preview of each linked page with an additional :hover span class (as seen in the following example).


PNG Default State
#extraDiv2
{background: url('images/thumb_1.png'); 
    display: block; 
    height: 108px; 
    left: 724px; 
    position: fixed; 
    top: 150px; 
    width: 144px;}
PNG Hover State
#extraDiv2:hover
{background: url('images/thumb_1_hover.png');}
Use the following link to see the :hover span in action.
#extraDiv2:hover span
{background: url('images/screen_1.png'); 
    display: block;}

Using :hover means your HTML does not need to contain redundant script information to manage over states. It means that you can control multiple actions and dynamic elements (such as animation controls) in one location, with behaviors that can apply to more than mere links. The :hover pseudo-class is one of the many ways Internet Explorer 7 can help to streamline your site-design, and enhance your creative possibilities.

PNG: The Right Kind of Image

Internet Explorer 7 now supports full 256 level alpha-blending on Portable Network Graphics (PNG). Support for the alpha channel in PNG images allows images to overlay other images and to display with different levels of opacity. The ZenTek demo shows one way transparent images can enhance your content.

For more information about the PNG format, please visit the following sites:

SUMMARY: New Possibilities

Out of the many enhancements made to IE, we have looked at three updates that in and of themselves have the power to lift your sites to new levels. We looked at fixed positioning and the introduction of viewport-level block placement to streamline element positioning without the use of frames. We saw the newly unrestrained :hover pseudo-class and glimpsed of its application via styles. We also, got a look at the versatility of the PNG; an image format that will cast websites into a new level of visual luster.

Windows Internet Explorer 7 represents a major improvement in support for CSS both by fixing issues and adding support for additional CSS functionality. As a result, you have more opportunities to create rich site designs with minimal effort.



Show:
© 2016 Microsoft