Html5 helper files? - javascript

We are writing site logic which its design was made by another company. (they sent us the html files)
However when we looked at their source code html we saw:
1) modernizr.js
2) creation of html5 element scripts :
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<![endif]-->
3) Html5 shiv JS :
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
4) reference to css3-mediaqueries.js for media queries
5) Respond.js v1.1.0 min/max-width media query
I don't know much about html5 integration , but I think there are a redundant components here.
For example I heard that modernizr already includes the solution which html5 shiv provides.
As an assumption which I want to use modernizr.js , What components should I keep ? ( I tagged each section with numbers so it will be easier to you to reference).
(p.s. this question didnt help much cause I have much more sections)


Together all of these have the purpose to do two things:
Enable HTML5-elements to be rendered in legacy browsers (1, 2 and 3)
Enable CSS media-queries in older browser (4 and 5)
The way they are used today, in your example, you will have a lot of overlapping functionallity, which is unnecessary. My take on this is as follows.
HTML support
If you will be using Modernizer for other purposes than just enabeling HTML5-elements in older browser, then I suggest that you use only Modernizer and remove 2 and 3 as Modernizer include the HTML5 shiv.
If you won't be using Modernizer, it might be unnecessary to load the entire library. Then you might be better off using HTML5 shiv only, with the conditional IE-comment.
Using no. 2 seems totally redundant, if you use either 1 or 3.
Media-query support
When it comes to 4 and 5, they both work to enable responsive web sites in older browser, by adding support for media queries in browser that lack native support.
I only have personal experience of Respond.js, which is very light-weight. The limit is that it will only add support for the min/max-width media queries. If that is enough for your design, then no. 5 will be sufficient.
If you need more extensive media queries support, I believe you need to look in to no. 4 instead, but then I guess you can get rid no. 5, as it will be redundant.


As per the claims on modernizr web page, you dont need any other check to test for HTML5 elements amd CSS3 media queries.
That means you can waive off all the other libraries, still need to go back and check.

Related

Meteor JS with CSS variables and IE support

My problem is, that I have a meteor application, and the clearest and simplest way to change style is to use CSS variables.
BUT: IE doesn't support them at all, so I had to write a helper function, what changes the style on every template creation, and user interaction.
That helper function is slow, and ugly, so I want to specify the helper function only for IE, and use CSS variables in others browsers.
-How can I specify before the build if the browser is IE use IEspec.css,
Other case use nonIEspec.css?

I don't know meteor build process, but you can add this in your index.html:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->
Regarding variables IE doesn't support them, just Edge 15+.
In Edge 15, nested calculations with css variables are not computed
and are ignored see bug In Edge 15 animations with css variables may
cause the webpage to crash see bug In Edge 15 is not possible to use
css variables in pseudo elements see bug
You have pure css variables or is something like SASS/LESS? Maybe there is a compiler which make them css 1, 2 or 3.
Check compatibility here

How to use HTML5shiv correctly... how work on IE 9, Firefox, Safari?

Question
How does html5shiv work on IE9 when the conditional comment used [if lt IE 9] is for IE8 and below AND do Safari 4.x and Firefox 3.x read IE
conditional comments? If not how could html5shiv POSSIBLY work on these browsers using the conditional comments as suggested in their Github Instructions?
There was a question here asking if it can be used in every browser without conditional comments and what the side effects would be, but that was not my question. That question was asked 4 years ago. HTML5 is now standard and Microsoft no longer provides support for legacy browsers so loading it in every browser would be insane at this point and I wouldn't consider that. My question has to do with the documentation on Github, what html5shiv provides out of the box using that documentation, and how to use it today to support the browsers it claims to support.
Quoting the readme on Github in regards to the html5shiv script:
"It also applies basic styling for HTML5 elements for IE6-9, Safari 4.x and FF 3.x."
Useage:
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
In the past year IE 8 and 9 combined have dropped from about 4% to about 2% in global useage according to Stat Counter. Since Microsoft dropped support for legacy browsers on January 12th it seems like html5shiv might now or soon be a thing of the past. It will be interesting to see how much these legacy IE browsers drop in year to come.
However, depending on what you are developing you may still want to support these browsers. When you include Safari 4.x and Firefox 3 in the above stats, the total browser share that html5shiv supports is 2.3%. For most people that is nothing, but if you own an ecommerce site, 2.3% could be HUGE.
In regards to my actual question, I'm thinking I either overlooked something in the documentation or don't understand IE conditional comments well enough.
Logically I would think this would be the best way to do it. Conditional comments in IE work through versions 5 to 9 so we shouldn't have the script load in IE5 for no reason.
<!--[if !(IE 5)]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
However, in the past 5 years I've never actually seen anyone doing it this way so I'm obviously missing something. Plus I still don't see how this would work for FF 3 and Safari 4 unless there's a bug or something that causes them not to read the comments. I opened this topic on html5shiv github regarding this issue as well, but haven't been able to get an answer.
HTML5shiv is easily being used on millions of websites with most developers and site owners assuming it supports IE9 Safari 4 and FF 3 out of the box.
Also, as far as I'm aware in regards to IE9, this is all that html5shiv does to support it.
article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
mark{background:#FF0;color:#000}
If that's true, it may be another reason for many to stop using it considering when you take that out the equation and include it in your css (or a css reset), you're down to 1.39% of browsers that html5shiv would actually have an impact on.

Side note: You should only take browser stats like that as a very loose guide. The stats on such sites are far from gospel, and will change from country to country, from market to market, from demographic to demographic. You should look at your own site's analytics and see how many of YOUR users are falling into the Safari 4, FireFox 3, Internet Explorer 6-8 category (my guess is that it will be a LOT less than 2.3%).
(Also remember that FireFox automatically updates itself and is currently on version 43(!), and that Safari is automatically updated with OSX, and is on version 9. The chances of people still using older versions are extremely slight. I checked a very popular site of mine's analytics: Out of 20,000 sessions in the past month, only 1 used FF3, 1 used IE7, 1 used IE8, and none used Safari 4 or IE6.)
However, if you're keen to target those outliers, here's the answers to your questions:
How does html5shiv work on IE9 when the conditional comment used [if lt IE 9] is for IE8 and below
HTML5shiv does not work with IE9 because it doesn't need to. Internet Explorer 9 already correctly supports nearly all HTML5 elements:
do Safari 4.x and Firefox 3.x read IE conditional comments?
Safari and FireFox does NOT support IE Conditional Comments, but they CAN be targeted like so:
FF3:
/* FireFox 3 */
html>/**/body .selector, x:-moz-any-link, x:default { color: lime; }
Safari:
/* Safari only override */
::i-block-chrome,.myClass { color: lime; }
But this isn't what HTML5shiv does and you are right: The conditional statement presented on HTML5shiv's homepage would not be picked up by FF3 or Safari 4 in its current state. I'm guessing this is because they consider those browsers to be so rare that it's not worth it for the average user. Additionally any CSS reset/normalize will probably include the necessary CSS for those browsers anyway.
So to go through how handle HTML5 elements in all the browsers mentioned:
IE6-8: Use HTML5shiv.js as described in their Github documentation.
IE9-11: Use Normalize.css or add main { display: block } to your HTML. (Thanks to LGSon.)
Safari 4: Use Normalize.css or the following CSS:
article, aside, details, figcaption, figure, main,
footer, header, hgroup, menu, nav, section {
display: block;
}
FireFox 3: Same as above.
(FireFox 4+ and Safari 5+ have much stronger HTML5 support and don't require the above CSS.)

The shiv script is only utilized in IE (in this case less than version 9 [...lt IE9...]), not used in other browsers, ignored by them. It's commented out after all
<!-- ... -->
IE supports these and reads them. The shiv script augments functionality to make those old browsers work "better".
UPDATE:
It looks like that "lt IE9" is also run in Safari 4.x and FF 3.x. from what I can find (all cloned from the GitHub project description).
Another UPDATE:
I was confident this only works in IE, not old Safari or FireFox. I'll keep digging. Someone else correct me if I'm wrong.

I wrote a very detailed page dedicated to Internet Explorer Conditional Comments years ago. This is for lte = less than [or] equals IE9; I've documented numerous examples ready to copy and paste on the page I wrote.
<head>
<!--[if lte IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
</head>
I'd recommend your visitors to upgrade from Vista which is the only Windows version that can run IE9 or lower with security support. As of January 2016 only the latest version of Internet Explorer per version of Windows is supported. See the Internet Explorer Versions Wiki page for which versions of IE run on which versions of Windows.
As of January 2010 only IE10+ should be given any meaningful attention. Proper policy is to full-page block IE9 or lower; if Microsoft isn't supporting it then you shouldn't be either unless you are being paid a minimum of twice what you would a year in a corporate job. Stand your ground devs, we're the ones who ultimately know what it will take to get the job done.

No, the sample on their github page how to load the shiv, will not work on any other than IE browsers from 8 and below, as it uses the "downlevel-hidden" conditional comment technique.
To make it work on both IE9 and below, and non IE browsers like Safari and Firefox, "downlevel-revealed" conditional comment technique needs to be used, which looks like this.
<!--[if lte IE 9]><!-->
<link href="ie98765_and_non_ie.css" rel="stylesheet">
<!--<![endif]-->
Side note worth to be noted is:
IE10 and above don't support conditional comments any more, and will behave as non IE browsers in this use case.
on browsers that does already support HTML5 elements, will the shiv do nothing.

To answer my own question...
The github docs for html5shiv are misleading... that's pretty much it. After doing some further digging I came across this old HTML5SHIV Github issue that answers this question.
There isn't any "browser quirk or hack" that causes conditional comments to be read in Firefox 3 or Safari 4 (here's a very extensive list of awesome browser hacks).
[if lt IE 9] works in in IE 5-8 just how it should... don't be fooled by the readme.
So to be clear if you're using the snippet below, expecting it to magically work for IE9, Safari 3, or Firefox 4, you're well out of luck.
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
So how should html5shiv be used?
As I mentioned in the question and others have mentioned in their answers, Microsoft dropped support for legacy browsers on Jan 12, 2016. Keeping that in mind and that these stats mentioned in my question are probably skewed as it is, my guess is that legacy useage will continue to drop at a solid pace over the next year or so. On top of that, the majority of the current usage is probably coming from older businesses that have been slow to update. For most people these aren't users that they'd be getting traffic from (especially since those computers would most likely be work only computers).
Personally I'm not going to use html5shiv anymore but that's neither here nor there. Since there are many of you who WILL probably still use HTML5 here's my suggestion based on some personal experience, research, and other answers on this page on how HTML5shiv will support different browsers...
If you want support for IE6-9, Safari 4, AND Firefox 3 using html5shiv without any additional changes, DON'T include the conditional comments:
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
If you want support for Internet Explorer use this. Since html5shiv DOESN'T work on IE 5, there's no point loading it in that miserable browser:
<!--[if !(IE 5)]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
If you only need support for Internet Explorer 8 or 9 use this:
<!--[if (IE 8)|(IE 9)]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
Option 4: While the above methods might be what you need, after some thought this is what I believe to be the most efficient way to use the script.
<style type="text/css">
article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
mark{background:#FF0;color:#000}
</style>
<!--[if (gt IE 5)&(lt IE 9)]>
<script type="text/javascript">window.html5={shivCSS:!1};</script>
<script type="text/javascript" src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
Option 4 1/2 : "Probably" the best way to use HTML5Shiv going forward:
Even better than the above we can drop the type attributes since we are specifying this is HTML5 and we can minify it. We can also use a popular cdn like jsdeliver or maxcdn to try and speed things up since hopefully they will already have the file cached on their computer. Do not, I repeat do not use Google for hosting html5shiv. This is a common mistake people make and it only caches for a few minutes. Google code is not meant to be a CDN.
We also disable the shiv css and include it ourselves. If you are using a css reset (here's a list of the most popular in 2016) you can drop the style part below all together.
Last we include it just before the closing head tag as recommended.
<!DOCTYPE html>
<html>
<head>
<!-- Meta, stylesheets, etc... -->
<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>
<!--[if (gt IE 5)&(lt IE 9)]> <script>window.html5={shivCSS:!1};</script> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
</head>
This method will ensure you get the results you want from HTML5shiv supporting the browsers you expect it to.
Since legacy browsers aren't supported anymore in IE and Firefox and Safari have auto-updates), most likely you can get away not using shiv anymore and using a solution like #LGSon's or just a CSS styles/reset.

How to select jQuery version based on browser version without using HTML <!--[if]-->

I know how to detect different browser types and select different jQuery versions using HTML if / endif statements like this:
<!--[if lt IE 7]> <script src="jQuery-1.11.x.min.js"></script> <![endif]-->
Now I want to support IE version < 8 using compatible version of jQuery. I also want to use jQuery 2.x.x for more modern browsers. Is there a way to use certain JavaScript library and implement this (for example requirejs or modernizr) with a single global configuration file, instead of adding HTML detection in every single page?

As suggested by #CodeDreamer68 , browser detection is a bad practice. But, this might help you.
http://api.jquery.com/jquery.browser/

Understanding Modernizr benefits over html5shiv

I know there's a lot of good questions on the site about these two script libraries.
I wanted to ask something that I can't seem to find in any of them though.
What does Modernizr provide that html5shiv doesn't out of the box, that is, just including the script.
I know html5shiv "just" fixes HTML5 elements for IE < 9, does it's support stop there?
Does Modernizr fix CSS3 issues on IE navigators? Does ie9.js do that? (and I mean this particular question out of the box, without additional js code to handle corner-cases)
What are the advantages of Modernizr over html5shiv when you take into account using the library besides just including the script?

They do different things.
Modernizr detects the availability of features in a page allowing you to provide your own polyfills for older browsers should you require that functionality. You can add support for <canvas> using a canvas tag polyfill so that canvas functionality, including it's JavaScript interface, in browsers that don't support the <canvas> tag.
Html5shiv adds the new html5 tags that aren't available (<section>, <header>, etc) to older browsers. It also creates the default styles (display: block for <section> for example).
That's it. It provides no other functionality.

Modernizr 1.5+ actually includes HTML5Shiv, so if you use it, shiv is redundant. Source: http://modernizr.com/docs/#html5inie
"As of Modernizr 1.5, this script is identical to what is used in the popular html5shim/html5shiv library."

JQuery - Detect support for CSS 'display: table-row-group'

So, Internet Explorer <= 8 does not accept the standard table-row and table-row-group values for the CSS display property (amongst others). I'm reticent to use JQuery's browser detection features as these have been deprecated. How can I detect table-row-group support in JQuery without parsing the browser/user-agent string? That is, how do I detect the presence of the feature rather than the presence of a specific browser?

I don't believe that with Javascript you can directly detect support for a CSS property. I have two recommendations if that's true:
Insert into a hidden div two elements, one with table-row and one without. See if there's a height or width difference. If so, calculate the height or width, having figured out the difference between a browser that supports it and one that doesn't.
Even though jQuery's browser detection is deprecated, you can host the following script locally:
http://www.tvidesign.co.uk/blog/CSS-Browser-detection-using-jQuery-instead-of-hacks.aspx
I use it and I love it! It adds two classes (e.g., ".browserIE7 and .browserIE") to the body tag, so that you can use Javascript (if $('body').hasClass('browserIE7')...) or CSS (.browserIE7.div {...)
Good luck!
Edit
Maybe it is possible with Javascript...3rd option: http://perfectionkills.com/feature-testing-css-properties/ although I haven't read the article or used his suggestion.

If CSS property detection doesn't work out I'd recommend using IE conditionals like this:
<!--[if lte IE 7]>
<script type="text/javascript">
var ie7 = true;
</script>
<![endif]-->
<!--[if lte IE 6]>
<script type="text/javascript">
var ie6 = true;
</script>
<![endif]-->
Or something along those lines...that's if you want to allow your scripts to determine which browser your using and don't want to parse the user agent string.
If you just want to direct CSS to specific browsers then obviously just put a link to an IE stylesheet in the conditionals. I would never recommend sending different CSS based on JS browser detection as not all users will have JS enabled.

You might find Modernizr useful. It tests for a great variety of CSS properties, and according to these tests, adds classes to the <html> tag. Also, it adds classes relative to the user agent and that stuff.
You canr ead more about Modernizr on its site: http://www.modernizr.com/

Categories

Resources