I want to start using some HTML5 tags, but worried how it will render on browsers that do not support HTML5. It seems like html5shiv is a solution I can use for IE browsers < 9.
However, what if the browser doesn't support HTML5 and is not IE? What then? Why is html5shiv an IE thing?
First, to be clear, html5shiv just makes it so that you can style certain HTML5 tags (section, article, etc.) correctly. It does not give the browser "HTML5 support" in any more general sense of the term.
With that in mind, note that IE <9 are the only browsers that don't allow styling of these HTML5 tags correctly, so that's why html5shiv only applies to them.
Other browsers (even very old ones like Netscape Communicator 4) will still parse the unrecognized tags correctly and allow CSS to apply to them as you would expect.
As zzzzBov notes in his answer, they might not have the correct default styles (which in most (all?) cases are either display: block or nothing), so you'd need to add those even for non-oldIE browsers. But doing so works fine in non-oldIE browsers, whereas in oldIE, adding these default styles---or any styles whatsoever---only works if you use html5shiv.
The initial value for the display property of an element is inline (ref). The built-in user-agent stylesheet changes the properties to sensible values for known elements; for example, headings and paragraphs are changed to block.
HTML5 introduces new elements such as header, footer, article and section (the HTML5 sectioning elements). Since older browsers do not know about them, they treat these elements as inline. You must therefore add CSS rules for these elements manually:
header, footer, article, section { display: block; }
But as mentioned in the Story of the HTML5 Shiv:
...Internet Explorer 6-8 pose a problem as they do not recognize
unknown elements; the new elements cannot hold children and are
unaffected by CSS
The workaround for IE 6-8 is also mentioned in that article:
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
Now, regarding your question: The html5shiv uses some JavaScript tricks to make the unknown elements styleable in IE 6-8. As for other browsers that do not support HTML5, the html5shiv, if necessary, adds the default styles required to render the HTML5 elements properly so that you don't have to define the CSS rules yourself (as mentioned above).
Note that html5shiv does not make the browser support HTML5. For example, it cannot make IE7 play videos embedded via HTML5 <video> tag.
Other browsers support non-standard elements simply by setting their css display property:
header,
footer,
article,
section,
...etc... {
display: block;
}
For old versions of Firefox and webkit based browsers (pre HTML5) this was all that was necessary.
htmlshiv is an 'IE' thing, because some versions of IE [still] lack many HTML5 features. What works in chrome or other webkit browsers may not work in IE, so htmlshiv TRIES to give a javascript adaptation of the missing features. Its a polyfill, to be exact as well.
Related
I am using Modernizr v3 on my website to test for flexbox support.
Modernizr adds a "flexbox" body class for browsers that support it, and "no-flexbox" for browsers that do not. As browsers that don't support flexbox are only a minority of my audience, I have used the "no-flexbox" class to provide fall back CSS. For example:
.ad { /* Default CSS */
display: flex;
}
.no-flexbox .ad { /* Fallback CSS*/
display:table;
}
Everything works fine, except for IE10, as Modernizr adds a "no-flexbox" class to it, even though IE10 does support Flexbox, it is just using the older syntax. Therefore, on IE10 my layout is broken as it reads both the flex box and non-flexbox styles.
In this thread, it says that moderniser has a flexboxtweener style to IE10. Therefore, I thought I could rewrite my fall backs to use .no-flexboxtweaner instead of .no-flexbox.
The problem is that browsers that support the new flexbox syntax get given a no-flexboxtweaner class as well, so they read the fallback code.
How can I set it up so that only the browsers that do not support any form flexbox (regardless if it is new or old) get the "no" class.
I know I could do ".no-flexbox .ad, .no-flexboxtweaner .ad", but then that's bloating the CSS (plus running two Modernizr tests). I'd rather just have a single test/class.
I know I could do ".no-flexbox .ad, .no-flexboxtweaner .ad", but then that's bloating the CSS (plus running two Modernizr tests). I'd rather just have a single test/class.
Thats kindof silly, mate. It is a handful of bytes - almost all of which will be erased by gzipping your file. If you reallllly wanted to avoid it, you could create an additional Modernizr check that gives you any flexbox
Modernizr.addTest('anyflexbox', (Modernizr.flexbox || Modernizr.flexboxtweener))
that will create a new property called anyflexbox and you can style your css accordingly.
Detects support for the flex-wrap CSS property, part of Flexbox, which isn’t present in all Flexbox implementations (notably Firefox).
This featured in both the 'tweener' syntax (implemented by IE10) and the 'modern' syntax (implemented by others). This detect will return true for either of these implementations, as long as the flex-wrap property is supported. So to ensure the modern syntax is supported, use together with Modernizr.flexbox:
if (Modernizr.flexbox && Modernizr.flexwrap) {
// Modern Flexbox with `flex-wrap` supported
}
else {
// Either old Flexbox syntax, or `flex-wrap` not supported
}
Ref: https://modernizr.com/docs
I am new to the responsive design world.
I am using http://www.responsivegridsystem.com/ in my design. It tells to add following markups
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements and feature detects -->
<script src="vendors/responsive/js/modernizr-2.5.3-min.js"></script>
Since media queries are not working in IE8, as per this question IE7, IE8 support for css3 media query I am using the following markup too
<!--[if lt IE 9]>
<script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Do all these are needed? Whats the difference between html5shim, modernizr and the css3mediaqueiries?
Do i need to use modernizr? Because I am not doing anything with that in my js file like jQuery.
They serve three very separate purposes, all can be very important, but not all (if any) are always needed.
html5shiv aka html5shim
html5shiv is a script that allows you to properly use html5 elements in older browsers, Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x, at the time of this answer.
So, what does that actually mean? Its pretty simple. There are a number of new elements in html5 (like <section>, <aside>, <header>, and <footer> to name a couple), as well as the ability to create your own custom elements. That means that we can write more semantic (and clearer) code. All great things, but unfortunately, older browsers don't apply your css to elements that were not one of the ones that they shipped with support (<div>, <p>, <span>, the normies). Luckily #sjoerd-visscher dropped some knowledge and saved the day. He discovered that if you use document.createElement to create any new element, it sort of registers it as one of the supported elements, and the css works!
This meant that you could actually use html5 elements in production. It was a huge deal at the time, and luckily becoming less and less important as those older browsers are dying off.
It has since expanded to add some basic styles for browsers, in addition to registering the elements.
If you don't have to support Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), or Firefox 3.x., then you DO NOT need to use html5shiv.
css3-mediaqueries-js
css3-mediaqueries-js adds support for a css feature called media queries in browsers that don't support them. If you aren't sure what that means, check out sites like The Boston Globe, Mitsubishi Australia, or techcrunch, and then resize your browser.
Media Queries allow you to apply css conditionally, based on some attribute or combination of attributes of the browser (width, height, etc). They are incredibly powerful, and power a lot of modern web design.
Now, the question is whether or not you actually need something like css3-mediaqueries-js. It was once in vogue to do so, but it is becoming more and more common for people (myself included) to recommend mobile first design. This means that the base styles should be a mobile site, with media queries adding to the base design, instead of hiding/removing some things. As a result, browsers that don't support media queries (the ones that css3-mediaqueries-js is intended for) get served the "mobile" design, rather than polyfilling and then applying the media query during every resize. Older browsers generally mean older, slower, and smaller computers. Not only do they lack support for media queries, their javascript engine is hundreds (sometimes thousands) of times slower than modern engines that power current Chrome, Firefox, and IE. All that extra work on something that isn't nearly as powerful to being with can easily result in a degraded experience for the users of those older browsers.
Whether or not you should use it is ultimately up to you, but make sure to ask yourself what is best for the user, not necessarily the designer :]
Modernizr
Modernizr is a feature-detection library, that allows you to check for new web features in a simple way. By default, ((you can build a custom version here)[http://modernizr.com/download/], changing anything you want) it adds classes the <html> element on the page, making it super easy to modify designs based on its results.
.css-gradients .background {
background: linear-gradient(to bottom, black 0%, white 100%);
}
.no-css-gradients .background {
background: url(gradient.jpg);
}
(of course that is a super trivial example, and you can accomplish the same thing using a basic fallback without modernizr, but it is just meant to serve as an easy to follow example)
It doesn't actively add or remove anything itself, but in combination with something like yepnope, you can test for a feature, and conditionally add a polyfill for that feature.
Something like this
yepnope({
test : Modernizr.mediaqueries,
nope : ['css3-mediaqueries.js']
});
would check to see if mediaqueries is support in the browser, and if it isn't, it would load css-mediaqueries-js to polyfill support for it.
HTML5shiv is for emulating html5 element in ie8.
css3-mediaqueries-js and respond js do similar task(supporting media queries)
Modernizr is actually a browser feature tester which include bunch of css classes in ie and later applying manual style for ie.
Best Usage is to use-
selectivizr with html5shiv
Our website looks great in all browsers except IE 6-8. We're not even using many CSS3 features. These are just plain old IE rendering bugs (like margins and padding). Before trying to apply a bunch of IE specific fixes, I was wondering if anyone knows of a javascript library that I could apply to fix a bunch of these typical bugs?
Update: Like I mentioned, we're not necessarily using any "modern" CSS3 features nor HTML5, so these are just typical IE 8 bugs where IE renders things differently than all the other browsers.
Go for excellent normalize.css reset that takes care of most of it (also used by HTML5 Boilerplate)
Normalize.css is a customisable CSS file that makes browsers render
all elements more consistently and in line with modern standards. We
researched the differences between default browser styles in order to
precisely target only the styles that need normalizing.
As for getting support of CSS3 for browsers that don't support it, check out CSS3Pie
You don't need JavaScript; just use a CSS reset file: http://yuilibrary.com/yui/docs/cssreset/
That will work across most browsers to not only fix IE issues, but also make your site render more uniformly over different browsers.
You might wanna take a look at this one: https://code.google.com/p/ie7-js/
or this: https://code.google.com/p/html5shiv/
The > character can be used with CSS to select an element that has a certain parent.
The benefit I see here is that I can apply styles only to a certain level of a list for example. Like menus - first level is orizontal and has different rules than 2nd level+. so i don't need to worry about resetting properties for lvl 2+
Anyway, can I depend on >? Is it supported by all browsers and without buggy behaviors?
The child selector > is fully supported by IE7 and later, and not at all in IE6 and earlier. Of course, all versions of all other major browsers in use today support it fully as well.
All CSS2.1 selectors are well-supported by IE8 and later so you can use them today, unless you're writing legacy code that needs to cater to IE6, in which case avoid them where possible.
The SitePoint Reference does mention an obscure parsing bug related to comments that affects IE7, but it only breaks the selector if a comment is there. You don't usually put comments in the middle of selectors unless you're doing so as a hack, so you don't need to worry about this bug.
Related: Are CSS child selectors a W3C standard? (Of course they are!)
It's part of the CSS2 standard: http://www.w3.org/TR/CSS2/selector.html#child-selectors so modern browsers should support it.
According to this quirksmode.org, only IE6 and earlier do not amongst major browsers. I only see IE6 used in very situational cases (like dedicated machines that don't receive software patches).
I'm trying to use the page-break-inside CSS directive, the class of which is to be attached to a div tag or a table tag (I think this may only work on block elements, in which case it would have to be the table).
I've tried all the tutorials that supposedly describe exactly how to do this, but nothing works. Is this an issue of browser support or has anyone actually gotten this working, the exact bit of CSS looks like this:
#media print {
.noPageBreak {
page-break-inside : avoid;
}
}
Safari 1.3 and later (don't know about 4) do not support page-break-inside (try it, or see here: http://reference.sitepoint.com/css/page-break-inside). Neither do Firefox 3 or IE7 (don't know about 8).
In a practical sense, support for this attribute is SO spotty, it doesn't make sense to use it at all at this point. You'd be lucky if even 10% of your visitors have browsers that can support this.
The solution I used was to add
page-break-after:always
to certain divs, or add a "page-breaker" div in where you want breaks. This is quite ham-handed, I know, because it doesn't do quite what you want, and causes content to not reach the bottom of the printed page, but unfortunately there isn't a better solution (prove me wrong!).
Another approach is to create a stylesheet that removes all extraneous elements (display:none) and causes the main content to flow in one main column. Basically, turn it into a single column, text-only document.
Finally, avoid floats and columns when styling for printers, it can make IE (and FF) act wacky.
Safari 1.3+, Opera 9.2+, Konquerer, and IE8 all support it, at least to some degree.
Firefox apparently still does not.
Firefox does not support this as of 2010-11-30, and thus won't in Firefox 4.
IE8 does support page-break-inside: avoid - but when I tried this on IE9, it's not very successful at avoiding page-breaks (this may be a regression, or perhaps IE8 is also only capable of avoiding page breaks in very simple cases).
AFAIK it doesn't work in any webkit browser; certainly not in chrome.
It actually works in Opera, even on real sites.
Safari 1.3 and later support page-break-inside.
So does Konqueror.
I'm trying to use the page-break-inside CSS directive, the class of which is to be attached to a div tag or a table tag (I think this may only work on block elements, in which case it would have to be the table).
Firstly, there's no need to guess. Just look at the specification, and you'll see that it does indeed only apply to block-level elements.
Secondly, <div> elements are usually block-level elements, so there's no problem applying page-break-inside to a <div> element.
Finally, you don't need to wrap it in #media. You only need #media if you want to apply media-independent rules to only one medium, for instance, if you want to use display: block only for one medium. In this case, you don't need to hide those rules from other media, because they'll only apply to paged media anyway.
From preliminary searches, it's hard to find up-to-date statistics on browser support for this, but it seems that Firefox 4beta6 supports it and Chrome 7 does not. Chrome also breaks pages halfway through a line of text, so that part of the text appears on one page and part appears on the next. Uncharacteristic lack of attention to detail, but I guess neither Google nor Apple care about printing things.
Firefox 4 also adds some nice headers and footers to your prints with url, page title, site title, number of pages, and time. Nice.
As a bit more information further to Eamon Nerbonne's answer on the IE rendering (IE8+), you need to make sure the browser is in standards mode. This article on MSDN shows what is necessary - including a meta tag in your html to force the issue:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Feels kludgy, but there you have it... seems to work more consistently.