Okay, I Ruled out a lot of fancy CSS3 properties for my website, but I would like to include animations.
The way I have made my animations was by using Adobe Edge PR 4. Unfortunately, I just figured out that the HTML5 animations are not compatible with IE8 (Oh, here I go ranting about IE8 Backwards-Compatibility again... )
How can I Put in a message in place of it, which will only appear in Internet Explorer 8 or lower?
It works in all browsers I have tried, apart from IE8 or Earlier. I do not wish to move to flash, as I would like better mobile device compatibility.
You could use a conditional comment...
<!--[if lte IE 8]>
<p>The animations are not supported in your browser.</p>
<![endif]-->
Related
I have very little knowledge of coding. I am trying to do research on behalf of our front-end developers. We want to redesign our portal application using CSS 3 and HTML 5. Our main aim is to have an adaptive layout to match the different browser widths our users have access to. There is also excessive usage of iframes in the portal which is why we want the app to adapt to the full browser width. Our users primarily use chrome, firefox but a handful are still using ie 8 with no scope of upgrade. I need advise on the best ways to go about creating visual design using HTML 5 and CSS3 that would render on IE 8 without breaking. Is it possible to create the application using HTML 5 and CSS 3 that would automatically switch to a simpler but efficient layout when the user opens the application in IE 8. Please help.
modernizr.com
jquery.com
see caniuse.com for a listing of unsupported features in your IE and chromium versions.
You should use the HTML5 shiv. It enables the use of HTML5 sectioning elements in legacy IE and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x. Include this file: https://github.com/aFarkas/html5shiv/blob/master/dist/html5shiv.js
with this line in your header:
<!--[if lt IE 9]><script src="your-path-here/html5shiv.js"></script><![endif]-->
You can also add a conditional tag to give your HTML a class when the browser is IE8 to add IE8 specific styles when you can't get CSS3 to work.
<!--[if lt IE 7]><html class="ie ie6 lte9 lte8 lte7"><![endif]-->
<!--[if IE 7]><html class="ie ie7 lte9 lte8 lte7"><![endif]-->
<!--[if IE 8]><html class="ie ie8 lte9 lte8"><![endif]-->
<!--[if IE 9]><html class="ie ie9 lte9"><![endif]-->
<!--[if gt IE 9]><html><![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->
By using these conditional tags, you can then overwrite a rule that doesn't work in IE8 and make it work for that browser only. For example, .ie8 .button-style
Something else you can do to support CSS3 elements like drop shadows, gradients, transitions, etc is to use CSS3 Pie. PIE makes it possible to use CSS3 in older versions of IE by including a small JS file.
display: inline-block is your best friend. This property will specify that if two things fit inside of their container side by side, do that, otherwise stack them vertically. If you're having a positioning/display problem, try applying inline-block. Unfortunately, it doesn't work in some older IE versions without this hack:
display: inline-block;
zoom: 1;
*display: inline;
IE8 does support some CSS3 properties. You should check on caniuse.com. Also, for the best cross browser support use CSS3 vendor prefixes.
Good luck!
Can i have a list of html/css tags which works only for Internet explorer.And these tags/attributes should not work in other browsers especially for chrome and safari.
Thanks,
Shyam
As you didn't mention the version of IE, I am Going with the IE10
this link describes IE 10 Specific Styles
I think the only HTML (non-standard) tag supported by IE and not other browsers is <bgsound> for background sound. Some sites will also mention <marquee> too, but although it is non-standard, it has worked on Chrome and Firefox for a while.
About CSS, I don't know if there are any specific rules/attributes that only work on IE (but I know there are many standard rules/attributes that do NOT work on older versions of IE :P)
As web developers, we are all used to have code such as the following:
<!--[if lt IE 9]><script src="/js/jquery/jquery-1.10.2.min.js"></script><![endif]-->
<!--[if gt IE 8]><!--><script src="/js/jquery/jquery-2.0.3.min.js"></script><!--<![endif]-->
Where you have conditional statements based on if the client is an older IE browser.
Well, this time I'm working with stacked svg and surprisingly, the browser needing a fix is webkit based browsers. I could make a blanket load for all browsers, but I wonder if I could have a similar conditional loading condition for webkit. I hope I don't have to use js for this.
I have made my site in html5 and added the following to the head section:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="modernizr-1.7.min.js" type="text/javascript"></script>
for some reason when I view my site in IE 6, 7 and early versions of mozilla and safari it only displays the html and the style sheet is not being accessed (there are no styles applied). I don't know what to do, someone please help!
IE6 barely supports HTML4, never mind HTML 5 :P Seriously though. IE6 is 10 years old, it's never going to properly support HTML5. You may find a JavaScript based workaround but it'll be flakey. See http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29
I wonder if the problem is your slightly complicated media attribute.
Quoting here,
Since legacy browsers (e.g., Netscape
4.x) only support screen, you can hide all CSS from them by adding a
non-supported media type such as:
screen, projection or simply all
Maybe IE6, 7 and the others don't have full support either and so just fail to load the CSS.
Is there a way — for example with something like <!--[if IE 8]> — to get a stylesheet only for IE8 and IE in «Compatibly View»?
I ran into a (SharePoint-Layout-)Problem, which only occurs if IE8 is in «IE8 Compat View»-Browser-Mode, but works just fine if IE8 is «IE8»- or «IE7»-Browser-Mode. If I get the stylesheet only with <!--[if IE 8]>, the css will be ignored if IE8 is in compatibly view because it 'behaves like IE7' — the css will only be loaded if IE8 is in «IE8»-Browser-Mode. But I need it also if he is in the «IE8 Compat View»-Browser-Mode.
See the SO post "Detect IE8 Compatibility Mode", in which user Mark Kamoski mentions the Microsoft article Defining Document Compatibility.
If you browse to the section Determining Document Compatibility Mode, you can use a test on document.documentMode (and document.compatMode for older browsers) to determine the mode. I don't know of how to roll this into a purely CSS implementation, but you can dynamically generate some CSS using some code to achieve this.