Category: browsers

Useful links: Internet kill switch, IE6 kill switch, SXSWi greetings

In Search of the Internet Kill Switch by Jon Orlin is important reading if you are interested in what the U.S. government is considering doing to potentially shut down the Internet whenever they want.

Microsoft is ending support for IE6. Here’s one announcement of that fact.

It’s not often that we encourage you to stop using one of our products, but for #IE6, we’ll make an exception: http://bit.ly/g0wt4mFri Mar 04 19:24:18 via webMicrosoft
Microsoft

I’ll be at SXSW Interactive again this year. If you’d like to say hello, I’d love to meet you. I’m easy to spot at tech events because I’m the one in the white haired fright wig. And I’ll be wearing a white shirt every day this year. White hair & white shirt surrounded by a sea of young people in tee shirts: you’ll see me.

More about aside elements – going for block

Yesterday I posted some info about testing the HTML5 aside element in several browsers, and pointed out that some browsers don’t render styles properly for it. Lars Gunter came into the comments with the tip that using display: block would solve the problem.

Today at Dev.Opera, Bruce Lawson and Chris Mills posted an article called New Structural Elements in HTML5. Look at this snippet:

First of all, if you put an unknown element into a web page, by default the browser will just treat it like a <span>, ie, an anonymous inline element. Most of the HTML5 elements we have looked at in this article are supposed to behave like block elements, therefore the easiest way to make them behave properly in older browsers is by setting them to display:block; in your CSS:

article, section, aside, hgroup, nav, header, footer,
figure, figcaption {
  display: block;
}

This solves all your problems for all browsers except one. Have a guess which one? … Yup, amazing isn’t it, that IE should prove to be trickier than the other browsers, and refuse to style elements it doesn’t recognise? The fix for IE is illogical, but fortunately pretty simple. For each HTML5 element you are using, you need to insert a line of JavaScript into the head of your document, like so:

<script>
    document.createElement('article');
    document.createElement('section');
    document.createElement('aside');
    document.createElement('hgroup');
    document.createElement('nav');
    document.createElement('header');
    document.createElement('footer');
    document.createElement('figure');
    document.createElement('figcaption');
</script>

This answers several questions for me. I’ve read a number of posts by Bruce Lawson at HTML5 Doctor, but haven’t seen this bit of advice anywhere before Lars mentioned it yesterday. And I’ve been doing a lot of reading about HTML5! So I’m here to say thank you to Lars, Bruce and Chris. You guys rock. Or block.

Some tests on the aside element

I built a page of HTML5 and tried a few CSS styling rules on it to see what browsers do with rendering a page of HTML5. The tests I want to talk about today involve an aside element. In this test, I used the aside in the footer of an article element to display information about the author of the article. (Note the use of an ARIA role in the aside element.)

Here’s the HTML I used.

<article>
Article content
<footer>
<aside class="aboutauthor" role="complementary">
<h3>About the Author</h3>
<p class="vcard"><a class="url fn" href="http://vdebolt.com">Virginia DeBolt</a> is the author of blah and blah. She blogs at blah and is a big blah.</p>
</aside>
</footer>
</article>

I used some CSS to make it stand out. Here’s the CSS I used.

.aboutauthor {
width: 30em;
border: 1px solid blue;
background: #CCC;
padding: 2px;
margin-right: auto;
margin-left: auto;
}

The results in four different browsers are shown in the image. I don’t have IE, so I can’t show you what happens there.

results of tests on the aside element in four browsers
RESULTS OF TESTS ON THE ASIDE ELEMENT IN FOUR BROWSERS

As you can see, Safari and Chrome recognized and styled the aside element. Neither the border or nor the background color was rendered in Firefox or Opera. The centering was not rendered in Firefox or Opera either, something you can’t tell from my composite image.

If this same content were added to the HTML as a div, every browser would display it as styled.

My testing leads me to believe that browsers are not yet ready to render the aside element properly.

ADDENDUM: Be sure to read the comments – Lars shared how to make it work in Firefox and Opera.

SEE ALSO: More on the aside element – Going for Block

Useful Links: 20 things, HTML5, lessons learned, 7 sins

20 Things I Learned about Browsers and the Web is an interactive web app built in HTML5. It looks like a children’s book. And it’s slick. Great for a class reading assignment.

Using HTML5’s New Semantic Tags Today. Terrific article by Emily Lewis at Script Junkie.

Blogging to Support Policy Goals: MomsRising Shares Lessons Learned. How one organization ran a social media campaign with a specific goal in mind. What worked and what could be done better.

Using the 7 Deadly Sins in Higher Ed Web Marketing at .eduGuru is a take-off on an article at Smashing Magazine, but this one is aimed at high ed.

Useful links: CSS3 Generator, CSS3 Transforms for IE<9, CSS Resets, CSS Gradients

It’s all CSS, all the time today. Go style something.

CSS3 Generator. Don’t know if I’ve already linked to this tool, but it is a great way to play with some of the new CSS3 properties. You see a preview of what you’re doing, and get the code for it. As you make additional selections, they are added to the preview.

CSS3 Generator preview image

This preview from CSS3 Generator shows the effect of a transform rule, a text-shadow rule, and a border-radius rule. If you don’t want the CSS3 rules to continue to apply to the preview area, simply refresh the page and start over.

CSS3 Transform to Matrix Filter Converter. This tool does the math for you to translate your simple CSS3 transforms syntax into a Matrix filter value for IE 6 through 8. A great tool!

The Ins and Outs of CSS Reset by Dave Ward at Script Junkie is an all-inclusive look at this topic.

Ultimate CSS Gradient Genrator from ColorZilla was created by Alex Sirota.

ColorZilla Gradient Generator

Document outlines in HTML5

There was some discussion about HTML5 document outline in the comments to my recent post HTML5: the new hgroup element. I thought the topic deserved a post of its own.

We’re all familiar with the DOM, that treelike structure that outlines the contents of an HTML document. Here’s a snippet of a DOM tree as displayed in Firebug.

firebug example of DOM

In HTML5, you can still navigate the DOM tree and can still outline a page of HTML based on the content of the page. The change in HTML5 relates to headings.

In previous versions of HTML, the heading elements (h1–h6) were assumed to reveal the structure of the document. They could be outlined and navigated with assistive devices. The way headings will reveal structure has changed in HTML5. In HTML5, there is something called ‘sectioning content.’

Elements that fall into the category of sectioning content include article, aside, nav, section. Each element of sectioning content potentially has a header, and that header forms part of the document outline. Let’s look at some examples.

<h1>My Adventures with Dreamweaver</h1>
<h2>Or, how I learned to love Code View in 3 easy lessons</h2>
<h2>Lesson One</h2>
<p>blah, blah, blah</p>
<h2>Lesson Two</h2>
<p>blah, blah, blah</p>
<h2>Lesson Two</h2>
<p>blah, blah, blah</p>

In HTML4, the <h2>Or, how I learned to love Code View in 3 easy lessons</h2> would appear in the document outline as if it were a section heading. But, in fact, it is a tagline or subtitle for the h1 it follows.

In HTML5, if this were marked up as a section or an article with a header element containing a hgroup element, the <h1>My Adventures with Dreamweaver</h1> would be recognized as the head of that section of content and the outline would reflect that. Here’s how it might look formatted that way.

<section>
<header>
<hgroup><h1>My Adventures with Dreamweaver</h1>
<h2>Or, how I learned to love Code View in 3 easy lessons</h2>
</hgroup>
</header>
<h2>Lesson One</h2>
<p>blah, blah, blah</p>
<h2>Lesson Two</h2>
<p>blah, blah, blah</p>
<h2>Lesson Two</h2>
<p>blah, blah, blah</p>
</section>

The h2 elements for Lesson One and so on would show up in the outline as subheadings in that section of content. But the second heading in the hgroup would not form part of the document outline.

There’s an online HTML5 Outliner that will let you look at your HTML5 pages and see exactly how they are outlined. It’s a good tool to help you understand how someone tabbing through the headings of your HTML5 document would see the document structure and navigate.