I have decided to start using the html5 main element, of which I haven't used in the past because of lack of support in some browsers.
I knew you could just "fix" the lack of support by doing something like this:
main {
display: block;
}
However I came across one answer that states you should do the below to add it to the DOM as well:
document.createElement('main');
My question is - shouldn't we first check if the browser supports the main element before we do this? I'm not sure the best way to do that would be though? ....or is this not really needed and is safe to use on all page loads regardless of support?
The linked answer isn't really accurate.
document.createElement('main');
is only needed for IE9 and earlier, by helping those versions parse the <main> and </main> tags correctly to form a working main element. As the linked answer says though, calling this on its own is harmless, so you can just do it without worrying about it being called inappropriately. You should however include its containing script synchronously in JavaScript before the first (and normally only) <main> tag in the markup if you are supporting IE versions of 9 or earlier.
IE10 and IE11 parse the tags correctly, but treat the main element created as an inline element. To make it styled like other browsers, use
main {
display: block;
}
The other aspect to consider is the accessibility landmark role. IE will not expose the main landmark role by default, so you may wish to do <main role="main"> to make it do so, although it should be noted that the HTML5 spec discourages this.
Related
I am attempting to ask a more specific question than "how does browsers work??", please bear with me :)
If I understand correctly, html elements may have some default properties that determine their behavior. For example, <div> has display: block property set by default, while span has display: inline
These defaults exist because they are defined in the browser's default stylesheet.
Ok cool, I get that (hopefully). But what about <br /> or <img>? The behavior of those is determined by more than their properties right? Is it just up to the browser's implementation to make them behave how the W3 html5 specification says they should?
Also, is there an official word for this kind element behavior or does it just fall under 'browser implementation'?
So, you're really asking two questions here:
What is the default presentation and behavior of HTML elements?
Who/what determines how this works in a browser?
Let's start with question 2
The HTML specification is written and reviewed by a group within the W3C called the HTML Working Group. When they've agreed on a specification they publish it as a Recommendation. You can read the HTML 5 spec here, but I don't recommend reading the whole thing - it's very long and boring full of technical jargon.
However, the W3C's recommendation defines only the syntax and intended purposes of the features of HTML - it does not define how browsers should render HTML. Browser vendors, like Microsoft (IE), Mozilla (FireFox), Apple (Safari), and Google (Chrome), get to determine how their browsers render and implement the features of HTML.
Fortunately, most of the common HTML elements behave almost exactly the same from browser to browser. It's in the vendor's best interests to stay consistent among each other, because if one of them decided to do something drastically differently from all the others, the people who build websites would have to spend more time supporting that specific browser and it would fall out of favor (as was the case with IE 6 up until IE 11).
What determines the behavior of HTML elements?
The browser's rendering engine. Some browsers share the same rendering engines (like Safari and Chrome) (not true anymore - see comments), but not all. This article offers some insights (and leads to more insights) about how browsers are built, and here's an article listing several browser engines.
For the most part, you can affect how your HTML document looks by changing its CSS properties, but the behavior of most HTML elements is unchangeable without scripting using JavaScript.
The default CSS styles applied by your browser is defined by a stylesheet called its User Agent Stylesheet. These are usually pretty basic styles that browser vendors design in order to make HTML documents a little more readable without drastically affecting the presentation of the document.
However, there are so many basic styles applied by different browsers, that it's very common for web developers/designers to what's called a CSS reset. Normalize.css is a great example of this, and it's one of the most popular ones.
I believe it is up to the browser implementation. The way it will appear on the screen is up to the browser implementation.
Although, all browsers agree on how it should appear on screen.
These standards are defined by the World Wide Web Consortium - (wikipedia).
I guess this information you are seeking can be found in these sites!
It seems redundant to use an ARIA landmark if the most semantic and accessible way to define the main section of your content is the standard <main> element. Is adding role="main" to the element really necessary?
Not all modern browsers have already mapped the aria-role main to the <main> element (so far only Firefox 21+ and Chrome 26+ have mapped it). When all browser will support this feature, then the attribute role="main" could be dropped, but in the meanwhile it's better to still use it.
Sources:
http://html5doctor.com/the-main-element/#comment-35495 (and Steve Faulkner's answer)
http://html5doctor.com/the-main-element/#comment-36407 (last citation and answer)
It depends on your reason that why you are indent to use 'role'.
The two primary reasons to use roles in your native semantic element is:
Reason 1. Overriding the role where no host language element is appropriate or, for various reasons, a less semantically appropriate element was used.
Example:
Delete
In the above example, a link was used, even though the resulting functionality is more button-like than a navigation link.
Screen readers will hear this as a button (as opposed to a link), and you can use a CSS attribute selector to avoid class-itis and div-itis.
*[role="button"] {
/* style these a buttons w/o relying on a .button class */
}
Reson 2. Backing up a native element's role, to support browsers that implemented the ARIA role but haven't yet implemented the native element's role.
For example, the "main" role has been supported in browsers for many years, but it's a relatively recent addition to HTML5, so many browsers don't yet support the semantic for .
<main role="main">…</main>
This is technically redundant, but helps some users and doesn't harm any. In a few years, this technique will likely become unnecessary.
You can check the below link for more info...
Accessible Rich Internet Applications (WAI-ARIA) 1.0
HTML5 allows for links to be wrapped around block elements (one or several), but how exactly will it render in older browsers? Let's say to go as far back as IE6.
I haven't found full details yet (but there are some examples).
The markup would be as follows:
<a href="http://example.com">
<section>
<h3>Heading</h3>
<p>Text</p>
</section>
</a>
Also, would the most semantic way to make it compatible in older browsers be to wrap the links inside each block element separately? I've seen suggestions to replace the block elements with span, but that'd make it inline and alter the meaning of headings.
I've noticed that even modern browsers (e.g. Safari on iOS 6) do weird things. For example, try clicking on the image in this JSFiddle from your mobile brwoser — even though it shares the link with the caption below, the caption doesn't get highlighted for me. Furthermore, when clicking the caption, the image nor caption get highlighted.
As far as I know, the behavior is generally the same as modern browsers. Everything in the sample markup given will turn into a single hyperlink. This is regardless of whether or not you include the HTML5 shiv for older IEs to recognize the new semantic elements.
This is probably because there's nothing in HTML that says a specific starting tag should automatically close an unclosed <a> tag — the end tag is required to denote the end of a hyperlink.
And yes, that's how I'd do it to preserve semantics if I want to conform to an older HTML doctype. It's not required for HTML5 conformance though, since it works based on the assumption that even older browsers already behave this way (backward compatibility and everything).
Relaxing the content model for a in HTML5 is based on observations on actual browser behavior: the original syntactic requirements were not really enforced. This can be expected to go as far as you can get. (I tested this on IE 6 and Firefox 3.)
So there is no need for compatibility. But it would surely not be “semantic” to split a link element. Two links are semantically different from one link, for any reasonable semantics for “semantic”. It would also be a usability problem, especially when using the keyboard to move between links.
The visual rendering is a different issue. It is not clear at all, from the HTML5 drafts or from practical considerations, how a link should be rendered, in its different states, when it may contain just about anything. This may have been a key reason behind the old syntactic requirement. Browsers do not render such links consistently. This applies at least to underlining. There can be functional differences, too; e.g., on some browsers, the area on the right of the heading text is not clickable, i.e. only the text is “active”, whereas other browsers make the entire area of the element (which is by default the entire available width for a heading) “active”.
So the basic issue, if you wish to use such a link, is to consider how you intend to have it rendered and how to do that in CSS in a manner that works reasonably cross-browser.
This works in chromium (and I assume every other major browser)
-html-
<invalid></invalid>
-css-
invalid {
color: red;
}
<invalid> represents an invalid element (not part of the html standard)
here is an example: http://jsfiddle.net/myhonor/4H7Hj/
But when I try this in IE, it doesn't work.
why is this and is there a way fix this (is it a DTD thing?)
That's just the way Internet Explorer works, up to and including version 8. To fix it, just call document.createElement with the name of the invalid element:
document.createElement('invalid');
Here's your updated jsFiddle. It's the same idea as all those HTML5 shivs you see. And, as everyone else has already suggested, writing valid HTML is usually the best solution :)
IE before version 9 doesn't automatically create DOM elements corresponding to any tags it doesn't recognize in the markup. This is the main reason why HTML5 elements don't work in older IEs, which require the HTML5 shiv to be included in order to work.
In this case, you're not even writing HTML5; you're writing your own markup language which is completely unrelated to HTML. The easiest way to fix this is to actually write HTML... or if you insist on making up your own tags, you have to create them manually as minitech demonstrates, but expect to wire them up entirely on your own.1
1 Elements that aren't recognized by a browser as part of HTML are typically created as HTMLUnknownElement objects in the DOM (this includes IE9 and newer), which It is said is done for forward compatibility (c.f. HTML5). These objects have the basic properties of HTMLElement, but besides that there isn't much else to go on...
Most browsers support tags such as
<fb:like ... > </fb:like>
(which is a Facebook XFBML tag). Is the namespace:tagname actually part of the standard of naming tags?
Also, how about CSS support? Seldom do I directly style it like
fb:like { font-size: 11px }
but for people who are experienced with it, does it work with most modern browsers? (IE 6 too?) Is there any case where it doesn't work or even crash a browser? Probably some of the mobile browsers are not so well equipped to handle this.
Browser handling for tags of the form namespace:tagname is very different in IE to other browsers and is definitely not standardized. However, it seems that in your particular case styling of the element is quite straightforward. Use:
fb\:like { font-size: 11px }
Tested and working in IE6, IE7, Firefox 3.6 and Chrome 10.
Is the namespace:tagname actually part of the standard of naming tags?
Yes. The namespace:type syntax is defined in the XML 1.0 grammar, and as such is adopted by languages like XHTML and XFBML.
Also, how about CSS support?
The namespace operator for CSS3 selectors is |, defined in this spec.
So as a quick example, one might style it like this:
#namespace fb url(http://www.facebook.com/2008/fbml);
fb|like { font-size: 11px; }
: symbolizes pseudo-class (and pseudo-element in CSS2), which clearly fb:like isn't.
Note that this will not work in IE < 9, which doesn't recognize XML-serialized pages and consequently don't implement namespaces in CSS. If you want better browser support you can treat : as part of the element name and use fb\:like as the selector, as Alohci says.
Most pages don't support fb:like tags... They require either an iframe which loads a supporting page from Facebook that does include the required meta tags, namespace, etc. to understand it...
...or they ask the developer to include these meta tags as well as the necessary xfbml links to make their pages parse this namespace.
Namespaces are good and make sense parsing ML. All HTML is really ML with a namespace. Facebook wants you to include their namespace. However, they understand you might not be so willing to, so ask you to instead include javascript to work around these "namespace" issues and just parse the respective tags. Kudos to Facebook for working around this.
Now you're interested in styling these tags. Most browsers consider unknown namespaces as a "display: inline". You can apply "style attributes" to it, but they wont be recognized. You'll either have to follow Facebook's rules for styling these fb:like tags (i.e. what their javascript is willing to parse as an acceptable attribute - you can find that here). Best thing to do? Either wrap this fb:like with a "div" and style that div for positioning purposes, or work with Facebook's defined attributes for their javascript-parsing ML.
Will browsers support the Facebook namespace in the future? Well, considering how long it took for HTML5 to FINALLY be recognized, probably not. Either Facebook will create their own browser (and who knows, even Google created Chrome in 6 iterations / 2 years, and it rivals if not BEATS IE6 / 7 in terms of penetration rates if not all sorts of other reasons).
Or Facebook may be considered a perfectly worthy namespace in future browsers... Doubtful but hey, consider FB / TW are icons used EVERYWHERE (including Starcraft 2!). So ya know... there's hope.
In the meantime, work within their system.
While this is an old post, I think it is worth noting that the <namespace:tagname> pattern is something Facebook uses in their XHP extension. XHP is Facebooks own PHP extension, which make PHP able to interpret XML nodes as PHP objects, essentially transforming XML nodes to simple HTML nodes.
Our own <fb:like> tags are probably still handled by javascript, but I'm guessing XHP is being used somewhere on their end of the API.
Tags like exist only within XFBML framework (i.e. you need to include Facebook JavaScript libraries to make them work)
There is no CSS support the way you are asking.
fb:like { font-size: 11px }
The CSS code above won't work. But you can assign CSS class to this tag the standard way.