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

BBC Reports Most Web Sites Don't Meet Accessibility Requirements

In a news story last month, the BBC reported that most web sites are "failing to provide the most basic accessibility standards for people with disabilities" with 97% failing to meet minimal accessibility requirements.

This report highlights the ever-increasing tension between building commercially successful sites and sites using the latest sexy technology and accessibility requirements. Given the surgent rise in "Web 2.0" sites, this tension and disparity can only increase.

The report quoted various figures highlighting the percentage of sites that failed in particular areas:

93% failed to provide adequate text descriptions for graphics

As discussed in a previous post, I think there is conflict here between what accessibility requirements demand and what is really and genuinely useful for users with accessibility needs . . . coupled with basic misunderstandings and confusion over how graphics should really be described, whether through the use of Alt attributes or other means.

73% relied on JavaScript for important functionality

Now, there really is no excuse here. Yes, by all means, use Javascript to provide a better user experience for those that can use it, but if your site cannot function without Javascript, you need to find a better solution.

78% used colours with poor contrast, causing issues for those with colour blindness

My main issue with this is, how many people are aware of what the various forms of color blindness demand in terms of color contrasts, etc. and whether it's even possible to allow for all of those needs while presenting a site that is visually pleasing for users with no such issues.

Having said that, there are several resources on the Web that give you the ability to simulate various forms of color blindness, such as the Accessibility Color Wheel and the Etre Colour Blindness Check.

In addition, one simple design principle will also help in this respect. Never use color alone to indicate something specific on your web pages. For example, if you have required fields on a form, don't just highlight them using a red background or red text, but use some other visual indicator that they are required, such as an asterisk or other mark.

98% did not follow industry web standards for the programming code

In my opinion, there was a time when it was virtually impossible to follow industry standards while having a web site that worked correctly in all major browsers. However, today it is certainly possible to adhere to W3C standards. Furthermore, the W3C code validator and CSS validator mean that you have no excuses!

97% did not allow people to alter or resize pages

I'm not sure exactly what this is referring to, but I assume the main issue here is preventing users from resizing the text. The key here is to ensure that you use relative rather than absolute font sizes and preventing users from changing font sizes is a big "No No" so make sure you're not doing it!

89% offered poor page navigation

Again, this point is a bit vague and I can't help wondering who determines what is "poor" and what criteria they used. Many web sites rely on Javascript functionality for page navigation, which, as discussed above, is definitely a problem.

When it comes to page navigation, the main things to remember are consistency and simplicity. It's also a very useful idea to have a good site map and to ensure that each page on your site is navigable to in just a few clicks.

87% used pop-ups causing problems for those using screen magnification software

Pop-ups are the bane of accessibility and usability advocates and should never be used without an extremely good reason. I think this issue is going to appear in a new form with Web 2.0 sites using AJAX functionality.

In conclusion, I think this stats are maybe a bit harsh and overstating the issues and there is always going to be some tension between accessibility advocates and those who want sites that appeal to bleeding edge users but there are still some basic principles that can, at least, minimize accessibility concerns that should be adhered to. Another issue to bear in mind is that, there may also be legal requirements that you need to meet and failure to do so could, in theory anyway, result in legal action against you.

Technorati Tags: accessibility