IE7 Does Have Some New CSS Functionality

As I discussed in this post, I've been very disappointed with IE7's lack of enhanced support for CSS. However, IE7 does now support some CSS selectors that it didn't previously, so here is a brief summary of IE7's increased CSS support.

Adjacent Sibling Selector

The syntax for this selector is: E1 + E2 where E represents the HTML element being selected. This selector matches elements when E1 and E2 are both children of the same parent and E2 immediately follows E1 in the source code. (Note, the whitespace that I placed either side of the plus sign is optional, the code E1+E2 is equally valid).

For example, using the HTML code,

<div><p>Lorem Ipsum</p><blockquote>Ipsum Lorem</blockquote><blockquote> Integer molestie ligula</blockquote></div>

the CSS code

p + blockquote {text-indent: 1em; font-weight: bold;}

would cause the text "Ipsum Lorem" inside the blockquote tag to be indented by 1 em and displayed using bold text. However, the text "Integer molestie ligula" in the second blockquote would be shown with default blockquote formatting.

This selector is particularly useful when you want the formatting of the first element in a group of successive identical elements to be slightly different, such as the first item in a list, or the first paragraph in a group of successive paragraphs.

Child Selector

The child seletor is a refinement of the standard descendant selector that uses the syntax E1 E2, where E2 comes anywhere below E1 in the document tree (i.e. it's a child, grandchild, great-grandchild, etc.). The child selector limits this to only those elements that are children of the parent element, thus, grandchildren, etc. are not selected.

The syntax for the child selector is: E1 > E2 where E represents the HTML element being selected. This selector matches elements when E2 is a child of E1 in the source code (i.e. the document tree). (Note, the whitespace that I placed either side of the greater-then sign is optional, the code E1>E2 is equally valid).

For example, using the HTML code,

<div><b>Lorem Ipsum</b> <p><b>Ipsum Lorem</b></p></div> <p><b>Integer molestie ligula</b></p>

the CSS code

div > b {color: red;}

would cause the text "Lorem Ipsum" inside the first B tag to be displayed in red. However, the text in the second and third B tags would be displayed with default B tag formatting. The second B tag (containing the text "Ipsum Lorem") is a grandchild of the DIV tag, so does not match the selector. The third B tag (containing the text "Integer molestie ligula") is a child of a P tag and isn't even a descendant of a DIV tag, so again, it does not match the selector.

First-Child Pseudo Class

This extension of the child selector is also now functional in IE7 and allows formatting to be applied to only the first child of a parent element.

The syntax for the first-child pseudo class is: E:first-child E represents the HTML element being selected. This pseudo class can be used in combination with other selectors, for example, E1 > E2:first-child will match elements of type E2 that are children of elements of type E1, but only the very first child.

For example, using the HTML code,

<div><p>Text 1</p> <p>Text 2</p> </div>

the CSS code

div > p:first-child {background-color: green;}

would cause the first paragraph in the code to be displayed with a green background, whereas the second paragraph would have the default P tag background color.

Similarly, using the HTML code

<div><p><b>Text 1</b></p> <p><b>Text 2</b></p> </div>

the CSS code,

p:first-child b {color: red;}

would cause the text inside the first paragraph's B tag to be displayed in red, because it's parent P tag is the first child of the DIV tag. However, the text inside second paragraph's B tag would have default formatting because it is the second child of the DIV tag.

Conclusion

This isn't exactly a giant step forward for Internet Explorer with regard to CSS compliance, and there may be other new functionality that I am not yet aware of, but, I guess, at least it is a step in the right direction, albeit a tiny one.

Technorati Tags: ie7, internet explorer 7, internet explorer, css

Disappointed with IE7

I'm disappointed with IE7. I had read so much blurb about IE7 was supposed to be sacrificing backwards compatibility in order to be more standards compliant. Compliant schmompliant!

I'm an avid fan of Cascading Style Sheets (CSS) but, like many web developers, was disappointed by the number of CSS properties that IE6 did not support. Never mind, I thought, IE7 will support them, then we'll be fine. How wrong I was. So far, I haven't found a single CSS property that I was hoping IE7 would support that is actually supported. Maybe it now actually now does correctly the stuff it always supported, but incorrectly, but it doesn't seem to have added anything new ... at least, nothing that I was hoping for.

Two examples, fixed positioning and the IE disappearing text bug.

Fixed Positioning

The idea of fixed positioning is that it enables a page element to be displayed in the same position on the screen (or, more correctly, "viewport"). This gives a simple method, avoiding Javascript, of creating those "sliding menus" etc. that always stay in the same position on your screen even when you scroll up and down ... such as those found on the British Royal Family's web site, for example.

In CSS, to achieve this functionality, all you have to do is assign the style "position: fixed" and then assign the left (or right) and top (or bottom) properties. This works great in Firefox and Opera but doesn't work at all in IE6 and still doesn't work in IE7!! Why? Isn't this supposed to be Microsoft's standards compliant browser?

Disappearing Text Bug

This is a pretty well-known bug in IE where by text in an element close to a floating div, just disappears ... though you can see if if you select the area of the screen where the text should be, using your cursor. The simplest way to fix this bug is to assign the style position: relative to the offending elements. This bug is a great annoyance, particularly when you primarily check your code in a non-IE browser. Surely IE7 would fix such a serious bug, so serious that it actually causes page content to disappear?! Well, yet again, just the other day as I was checking a new web page in IE7, I noticed text vanishing before my very eyes, so, good ole position: relative to the rescue.

Let's hope IE8 does a better job ... I wonder how long we'll have to wait.

Technorati Tags: ie7, internet explorer 7, internet explorer