Angular and IE8 -- HTML5 elements not styled inside ng-view - html

So I am trying to get angular working on IE8. I have followed all the steps on http://docs.angularjs.org/guide/ie and it seems to be working -- I see the content of ng-view rendered on IE8 when I switch between views.
The problem is that I don't actually see any content in the inspector:
.. it's just an empty ng-view tag. I can see all of the content on the page, but no styling is applied to anything inside ng-view.
I am not sure whether this is an angular or HTML5 issue. I have added the html5shiv and HTML5 elements outside of ng-view are styled nicely.
EDIT
I have determined that the problem is HTML5 elements. <section> and <article> are not styled inside ng-view, while simple divs receive all the specified styling. Outside of ng-view, <nav> and <header> are styled just fine.

I was able to fix this by conditionally including jQuery in IE8 based on answer given here https://stackoverflow.com/a/18317832/2026098

The problem here is that, even if you add a namespace and/or precreate your elements according to the IE guide there are certain parts of the angular core that don't pass through the normal jQuery element creation - I have had the issue persist even when using full jQuery instead of Angular's jQLite but I've heard that fixes things for most people. Using an HTML5 shim doesn't solve the issue on its own either.
But even so, I would prefer to not have to substitute jQuery if possible, in which case you'll need to also do the following to get a fully working solution:
Add reset styles for the block-level HTML5 elements so they display: block; correctly
Target the HTML5 elements with a colon prefix as well in your CSS. You need to escape these, it will look like this: header, \3A header { /*...*/ }. Note that there is a space between the escape sequence and the rest of the selector.
If you are using jQuery, you will need to use a 1.10.x version or conditional tags to switch to it in IE8.

Related

Is there a reason why ('iframe').append doesn't work (jQuery)?

A quickie: In my code
$("iframe").append(" <b>Appended iframe by element</b>."); is not being appended.
I also found that $("img").append(" <b>Appended p by element</b>."); also doesn't work.
A fiddle is here: https://jsfiddle.net/stephan_luis/9hqo72ua/8/
jQ select by ID is also tried, both work for a <p></p> tag.
My question is why doesn't this work? The docs don't mention anything https://api.jquery.com/append/ Is there a list of html element that jquery methods don't 'do'?
This doesn't really have anything to do with jQuery. It is about the HTML you are trying to generate.
append() adds child elements to an element.
The children of an iframe element in HTML 4.x were alternative content that is only displayed if the browser doesn't support iframes. Today, iframe elements aren't allowed children.
Image elements (like iframes) are replaced elements, but they aren't allowed children at all (and never have). <img><b>Appended p by element</b></img> is just invalid HTML.
The HTML specification tells you what content each element is allowed to have in the entry for that element.
e.g. for iframe it says:
Content model:
Nothing.

Use <div> as backup tag for HTML5 semantic elements

I plan on using some of the new HTML5 semantic elements, but it looks like some of them aren't well supported even on newer browsers (main isn't supported in IE11 as far as I can tell) is there a way to have them be treated as a <div> if they aren't supported, as the HTML5 semantic tags I plan on using are currently basically the same as divs AFAIK (header, footer, main are the ones I currently plan on using, also canvas but there isn't a good alternative tag to do what canvas does).
Currently if I use one of the unsupported tags in IE it seems to be treated as an unstyled tag but the issue is I can't set the width or height of it in css. What can I do for it to be treated as a and apply all styles that I put in css to that element using the name of the tag as the selector as though it were a <div>.
main
{
width: 100px;
}
does not work in IE11, if it was IE7 or something I wouldn't be too worried but quite a lot of people still use more updated versions of IE and I don't want the website to display improperly to them.
You need the HTML5 shim for supporting older browsers but using just the HTML5 shim does not fix IE11 see: http://jsfiddle.net/jbowyers/n3qZp/. So you also need a CSS reset that includes the 'main' element such as normalize. Or you can just add the CSS reset directly to your project as mentioned by others
main { display: block;}
The html5shiv will allow you to style the main element in IE 11 (and less). There's an explanation of what it does (actually a breakdown of its entire history) here.
Money quote:
Btw, if you want CSS rules to apply to unknown elements in IE, you
just have to do document.createElement(elementName). This somehow lets
the CSS engine know that elements with that name exist
NB. You should probably be using the shiv as a matter of course if you're using HTML5 and plan to support anything less than IE 9.
I think I have found a solution.
In my css file if I do:
main /*or any other unsupported tag that you want treated as a div*/
{
display:block;
other-property:other-value;
other-property:other-value;
...
}
It seems to act identical to a <div> tag. I haven't thoroughly tested or researched this solution (tested several attributes including color, width and text-decoration on IE11 and google chrome with tag named <asdasd> and it worked exactly like a <div>) so if anyone knows any problems with it please let me know.
I’m not sure what the question really is, but the title “Use <div> as backup tag for HTML5 semantic elements” is a good answer to the question “How can I use the HTML5 main, header etc. tags to that my page also works on browsers that do not support them?”
For example, instead of having just <main>...</main> in HTML and main { ... } in CSS, you would have
<div class=main>
<main>...</main>
</div>
in HTML and
.main { ... }
in CSS.
This may look redundant, and you get almost the same browser coverage by using polyfill like html5shiv and explicitly declaring main { display: block } if the polyfill doesn’t do that. But in this approach, you do all the styling in an old robust way and use the new elements only for their semantics. (In reality, the “semantics” means nothing, but maybe some day some programs will recognize main, article etc. and deal with them in some special way.)

Why to use "class=" when I can use my own tag?

I just wonder why should I use "class=" identificator instead of my own "tag"()?
Class example
<span class="red"> Hello there! (using class)</span>
.red {color: red;}
Tag example
<div id="reddiv">
<red>Hello, there (using own tag)</red>
</div>
#reddiv red {color: red;}
Its much more easier for me to use my own tags, since its faster to write.
Can you please tell me if doing it in first/second way has any negative/possitive sides?
While this may work in most browsers, your HTML then loses context. When an application like a search engine (or screen readers or anything else that looks at the source) parses your document, what is it to make of a tag named 'red' or 'purple' or 'job'? It won't have context, so you'll lose out. HTML uses a set of predefined tags that have meaning, you can venture out of it but you'll lose the advantage of everyone instantly understanding (all or part) of your document.
If this document is part of a data transfer framework and not on the public web, you should look at XML.
There are many advantages of using class.
First of all, with class, we use css styles which gives a lot more configuration options than simple HTML tags.
We give all the styles and formatting at one olace and just call the class everywhere we want to apply those, which in big projects like ERP, makes a big difference in code size.
The css style is more compatible with latest versions of browsers and a lot of old HTML formatting and style tags are deprecated in latest versions of HTML.
HTML tags behave differently under different browsers and different document modes. Where css will give same result everywhere.
The css classes can be applied to all the relevant tags on page at once just by defining it somewhere at the top of page.
You should also not forget that predefined tags have a lot of default properties and your custom tags none. So you would need to define everthing over again for all elements apart from span.
Also, you can have more than one class on an element, so <span class="red bold">Red</span> is possible.
You can remove, change and swap between classes to change dynamical the element style or behavior, what you can't do with tags.
Tag is element that needs class to set it behavior and style.
Custom elements are created using document.registerElement():
var reds = document.registerElement('red');
document.body.appendChild(new reds());

HTML Valid method to implement this following

Running the Ubuntu cloud page http://www.ubuntu.com/business/cloud/overview through http://validator.w3.org/ gives several errors, the majority of which are centred around not having <divs> and <h>s etc. within an <a> tag.
The implementation I'm interested in is the four boxes with arrows, which change colour as you hover over them (as they are <a> links). What is the valid method to implement this?
Valid ways to implement this:
separate links inside each block. Put the :hover effect on the parent div, not the link. Downside: more markup
use only inline elements inside a single link, using CSS to change them into display: block elements if necessary. Downside: potentially less semantic
use an HTML5 doctype, as [X]HTML5 allows this construction. Downside: the less easy-to-validate current moving-target nature of HTML5.
Each one of those can be a (with a :hover effect to change the background color/image), and the , which sits inside, just covers the entire div with a height and a width in your CSS.

<style> tag inside any elements will still work?

I see something like this:
<div>
<style type="text/css">
...
</style>
</div>
It's very strange,but still work.
Is this against the standard?
It's worth pointing out that although it's invalid HTML, it's also extremely common, and any browser that didn't support it would fail to render properly a significant portion of the web.
Mash-ups in particular, need use of this feature, and HTML 5 defines <style scoped> to deal with this use case. <style scoped> can appear in the body, though styles so defined do not apply to the whole document, only to the section in which <style scoped> appears.
WARNING: HTML 5 is a draft, and there is no guarantee that <style scoped> or any other HTML 5 feature that is not already implemented will ever be implemented.
Yes, it violates the HTML specification.
<!ELEMENT DIV - - (%flow;)* -- generic language/style container -->
(from the div section of the specification)
Follow the hyperlinks in the live version if you want to see exactly how %flow; expands (it doesn't include style).
Browsers just tend to do huge amounts of error recovery because so many authors do stupid things.
Don't depend on error recovery — there are lots of browsers out there, and they don't all behave the same way when the HTML doesn't conform to spec.
The STYLE element is only allowed as child of the HEAD element. See this explanation for further details.
In HTML5, a <style> tag is allowed to appear under anything in <body> or <head>.
Mostly you are not allowed to put blocking elements into inline elements but meta elements like style, script, meta may appear wherever you want.
I found an example where the tag inside a div is not read correctly by IE8 (it works fine in Firefox and Chrome)
I can't reproduce it with a simple example because I don't know where the problem is. But if I move the outside the div everything works again.
Why I'm using a tag inside a div? because I'm loading external data with AJAX inside that div, and I don't know other way to add the styles in that situation.