I have read a lot about adding HTML5.js for IE7/8 support. Even though the documentation says that adding html5.js just causes IE7/8 to not ignore HTML5 tags and apply the styles.
I am really confused as to what it does, like does it have any impact on CSS3 styles working on IE OR it just causes CSS to be applied to HTML5 elements.
Could i please get to to see an easy example with/without HTML5.js on IE.
html5.js works by creating polyfills via JavaScript that specifically enforce certain rules of html5 elements in browsers that do not support them. but even after the js turns them "on", you are still going to have to target them via css to enforce styles. check out this fiddle in any browser that doesn't support html5, then uncomment out the script element and view it again. you'll see what i'm talking about http://jsfiddle.net/TR8z5/
If I recall correctly, without html5.js, older web browsers will just ignore tags it doesn't recognize, essentially showing nothing. With html5.js, older browsers will recognize html5 tags and will therefore be able to render and apply CSS.
Nope, I guess not.
CSS3 will not work on older browsers, no matter what you do.
Related
I'm building a responsive design with HTML5.
At first I used Modernizr and the CSS reset of HTML5 Boilerplate, but of course the html5 elements' classes and ids were not recognized by IE<9.
What I need most therefore is full support for html5 elements, and preferably a good display fallback for images with "max-width", without using CSS hacks.
Which of these options should I follow?
Include html5shiv and ie9.js with conditional comments
Include only ie9.js for all browsers
Forget about ie9.js
Thanks a lot!
html5shiv and ie9.js does completely different things. html5shiv resolves a bug in older versions of Internet Explorer where arbitrary elements (such as those introduced by HTML5, which the browsers predate) are not stylable by CSS. ie9.js attempts to fix certain rendering bugs in older versions of IE and add support for newer CSS3 features. The question of which one to include comes down to what you mean by:
full support for html5 elements
Do you need to use these elements and support older versions of IE? Then you'll need html5shiv. Do you need to use CSS3 properties and selectors? Then you'll want ie9.js. Including ie9.js solely to add support for max-width however is not a good idea.
And one more thing:
Include only ie9.js for all browsers
should never be an option - doing this will only adversely affect your page's performance on other browsers.
Modernizr includes the shiv code to add the new tags to IE<9. Make sure you add the link to it in the head section, before other javascript links/code.
Just start from the index.html and other files file provided in HTML5BoilerPlate and add your code in.
I just made a clean website using HTML4 and CSS. Which worked perfectly fine in Chrome and Firefox. I also checked my site using the W3C CSS validator and fixed all the errors and warnings that were displayed. However, when I checked on IE7. The site was totally misaligned and out of place.
Is there a HTML and CSS validator which also checks for ie7 compatibility?
No, because what you're asking for is not a "validator" but an "invalidator". IE7 has a number of bugs, and lacks implementation of a number of features. There's no way for an "invalidator" to know your intent with anything, and thus, can't tell what you are trying to do.
With your site being a clean html4 and css site, maybe I'm offbase and you've already done this, but just double check that you've included a doctype declaration tag at the beginning of each page. As mentioned above, IE renders in quirks mode without a DOCTYPE specified, and personally i've solved many problems by specifying a doctype in my sites.
The route leads along knowing important CSS concepts and browser characteristics. I think there is no such validation service or tool that points out the hacks necessary. :( But there are some magic bullets against bugs in IE7 (e.g. setting the flag hasLayout=true or position:relative). There is a good collection of bug descriptions and reduction here: http://www.brunildo.org/test/index.html.
I recommend you start using a CSS reset file. This will reset all default css. These default css settings are different for most browsers. If you do not override them manually, you give the browser the control on your layout. And that's not what we want, aren't we?
I suggest you to upgrade you html to some newer version (html5 if possible or) at least xhtml 1.1, I think the problem is that IE7 is working in "quirks mode".
More information about Quirks mode here
Making websites that appear correctly in IE is a big problem. Is there any java script library to fix all CSS and other issues associated with Internet Explorer (7, 8, 9) and make it work like Google Chrome, Firefox?
use a doctype to make the page render in standards mode instead of quirksmode
Check out what properties in CSS you can use and what browser supports them
If you plan to use HTML5/CSS3 tech, then you should check the property and what browser is currently implementing these new tech
You can reset the CSS using a CSS reset to start off from scratch in your styles
If you need a stable ground to build on for your page, consider using a "base" style framework like Blueprint CSS's typography and forms CSS.
Use a toolkit like jQuery, Mootools, Dojo etc. This will speed up your JS development. But NEVER let JS do styling and style fixes. That's the work of CSS.
Ofcourse, never assume your design works at all. You must test on all available browsers, on the current version, 2 versions back, and on betas.
One important thing to remember is that different browsers respond differently to errors. So make sure your HTML and your CSS pass the W3C validator error free. That will go a long way in ensuring your site will look the same on different browsers.
Also, don't use quirks mode. Different browsers have different quirks!
If you are referring to some of the CSS3 styles, then I would suggest you look into CSS3 PIE.
Short answer is no but you can check which properties are not supported in IE with caniuse.com
http://selectivizr.com/ or http://css3pie.com/ will help you but they both won't work if js is disabled.
Read this if you're using html5 http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/
And what Joseph said.
You could always check the results with http://browsershots.org/ but it's just a screenshot so it won't give you an idea for example of how things behave when you click/hover on them etc.
The short and simple answer is yes, you can target the older versions of IE using a combination of Modernizr and HTML5 Boilerplate. Modernizr is now included in the HTML5Boilerplate package.
For more details of an HTML5Boilerplate approach to this:
HTML5 Boilerplate, IE7 & 8
In my website, it looks great on any browser but Internet Explorer. I know that older versions Internet Explorer doesn't support CSS3, so I was wondering if there were equivalents in HTML to these methods: max-width:, border-radius:, box-shadow:, and transition:.
Any help would be appreciated.
For border-radius and box-shadow there is http://css3pie.com/ but that requires Javascript in IE. For a HTML only solution you have to use images, i guess.
You are asking for a way to get some of the newer features of CSS rendered in a browser that doesn't support CSS (or let's hope you are ignoring browsers that old and instead working with a browser version that do some CSS, but not enough for your tastes). Those browsers are outdated and you are not going to get it work just by avoiding css.
If you go far enough back, you may actually end up at a point in time when there were things that were possible in html weren't in css. However, it has been quite a while now that CSS is your best shot at getting things like that to work. If it doesn't work, it usually means that the browser doesn't support it at all, not that it doesn't support it through CSS.
Of course, you can work some magic and try to fake things with javascript, but it just isn't the same.
I recommend using modernizr. It detects if a browser supports different css3 (and html5) features and, if it doesn't, you can conditionally load javascript as a fallback solution.
Internet Explorer 9 supports max-width, border-radius and box-shadow, but not transition.
Personally I don't think CSS should have transition (or animation) as styles should affect how content is displayed, not how it behaves (I am also against the behaviour IE extension for this reason).
Overall, these styles you are asking for are aesthetical, and shouldn't really be a major issue if they aren't supported by the browser your user is on.
I've been developing on the web for a while now and most of my cross browser compatibility consists of using IE css hacks, which is not standard by any means so I'm just curious how do you handle cross browser rendering issues when developing web applications? I've never worked for a larger company, so how you do think (of if you have some experience working for a large company) they handle these cross browser differences? I would love some professional feedback on this subject or perhaps some tips.
We start our projects by using a reset stylesheet (Eric Meyer's is good), which fixes most cross-browser display issues we've ran in to.
My personal strategy is to make everything look right in Firefox first, which usually also takes care of Webkit-based browsers, then go back in and fix IE issues using separate stylesheets linked inside of conditional comments.
For some CSS3 that IE<=8 doesn't support, we use CSS3 PIE.
Finally, if you haven't already, check out Modernizr and html5boilerplate (html5boilerplate implements Modernizr). html5boilerplate is a good starting point to help alleviate cross-browser issues.
My personal strategy is to start with a reset stylesheet (I use Eric Meyer's as well), to reset default styles by browsers.
To solve issues with particular versions of IE, I use conditional comments instead of CSS hacks, so that my styles for CSS are more likely to work in IE, if IE fixes CSS hacks.
Using a CSS framework such as Blueprint can provide basic styles that you can override with your own styles, and provides a basis for your styles so you don't have to duplicate some basic styles. It also provides good compatibility with IE's CSS quirks by using conditional comments as well.
It's usually best to test in a variety of standards-compliant browsers, and then apply CSS fixes to IE. Usually, to give pseudo-CSS3 styles to IE, you need to investigate IE's filter, a non-standard way of applying styles. Microsoft's MSDN documentation is fairly comprehensive on this note. Be wary—anti-aliasing may disappear when you use filter styles on an element.
If you need support with IE for new HTML5 tags, such as <section> and <header>, use an html5shim.