"text-decoration: blink" & IE - javascript

Why text-decoration: blink wont work in IE ?
What is the work around ?
Is there a non JS work around?
Do Microsoft have a plan to support this style?

IE doesn't support it. See Wikipedia: http://en.wikipedia.org/wiki/Blink_element
Also, don't. There's a reason it isn't implemented, and finding a workaround will do nothing but annoy your users.

Not sure whether Microsoft is planning to put that in but for the moment you are out of luck as far as IE (obviously) is concerned. No support for it.

Related

How to check if browser supports pseudo-elements in javascript?

I'm developing a website that should run in ancient browsers (IE 7/8/9, Safari 5.1.7). Our target customer is the old people.
I'm no expert in javascript and I searched for solution. My title question is very straight-forward.
I used input radio and others that has custom design using before and after.
If it's checked. I just toggle in after and before display property in css.
The problem is when the user is using ancient browser, the input radio will never appear. My idea is toggle display in input radio if the browser doesn't support pseudo-elements.
For CSS feature detection there really is no need to reinvent the wheel, tools like Modernizr do this perfectly and have a very small footprint, since you can select only the feature detects that you need.
Seeing as you want to support IE <8, I would strongly advise you to use it, since you're probably going to run into a lot of situations where CSS/JS features are unavailable.
Detect if they have a sufficient browser: http://caniuse.com/#feat=css-gencontent
Basically, IE8 (maybe 9 depending on what you need) and older don't work, everything else does.
You may find the library Modernizr useful in this instance. It allows you to test for browser features.
Optionally if you want to shim it so you know that the browser will support it you can use Selectivizr

Are there any tips on getting HTML5 canvas to work in IE9?

I have been developing a game in the HTML5/Javascript new canvas feature, and all is going great, until I started to test it on Internet Explorer 9. So I will vaguely ask, are there any tips on getting the game to work fully in IE9?
Here's what I know:
1) I must include
<!DOCTYPE html5>
else IE9 cannot possibly figure out that I indeed intend to use HTML5, and not an older version.
2) IE9 must be explicity told to run in IE9 mode, and not in IE8 mode, since clearly everyone who upgrades to IE9 intends to run it in IE8 mode by default.
3) .ttf files make IE9 unhappy. This is a problem, because the font files that DO work with IE9 (namely, .eof) seem to be disregarded by Firefox and other real browsers. Any tips of getting this fixed?
4) Finally, my biggest problem, after getting all else to work: only SOME of the graphics get drawn to the screen. In short, the game's "engine" is split into several systems. Some, such as the particles (basically, just a collection of moving spheres) are draw, while others, such as all of the sprites, are not drawn, but the health bar is drawn. They all use the same exact draw methods, so I really can't wrap my head around why some work and some don't. There's a lot of stuff to draw, but again, real browsers handle it just fine.
I know this is vague, but I'm just hoping somebody has some experience with this and can link me to a proper tutorial or else give me a hint as to how I can go about fixing this. It seems to be a project all its own just to get IE9 to run the code that works perfectly on Firefox, Safari, Chrome and Opera. Thanks, all help is very much appreciated.
<!DOCTYPE html> only tells the browser to use standards mode. HTML5 was built to fail gracefully incase the browser supports it. An example is the datepicker input which gracefully fails on all browsers (except Opera which supports it) as a text type input.
The DOCTYPE is retained in HTML5 as a "mostly useless, but required" header only to trigger "standards mode" in common browsers.
The doctype does not tell the browser what version of HTML. That's the DTD's job. The DTD just tells the browser what's valid markup in your markup. It's only used in validation to determine what HTML you use (HTML or XHTML; loose, transitional or strict). In HTML5's case, there is no DTD because there's no use for it.
You can force IE to render in it's latest mode or in chrome frame with a meta command, but it's usually unnecessary. Declaring strict mode using the doctype as well as using proper markup is enough to do the job.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Paul Irish's bulletproof #fontface syntax should put your fonts in an "all-in-one" syntax so that the same code can be loaded on all browsers.
I don't know about you but IE9+ has basic support and text support for canvas which is at par with the browsers of it's age. IE even has it's own testdrive page for versions 9 and up to show off their HTML5 support. There must be something wrong with your code.
#Joseph has almost answered your questions. For canvas support in IE, you can try ExplorerCanvas.
HTML5 is already supported my IE9. Here is an example of it. Be sure check the developers guide while doing this.

Firefox doesn't support onfocusout

I am using onfocusout as an html attribute and some javascript code inside it. Nevertheless, the code works fine in Chrome and browsers powered by webkit engines but it doesn't work in Firefox, I haven't tested other browsers yet.
Is there any alternative for 'onfocusout' attribute which is supported at least by firefox and chrome?
Can you use onblur?
Not sure what elements you are targeting but blur may work for you.
If that doesn't work for you then you may want to include a framework like jQuery which will help you with such cross browser issues.
http://api.jquery.com/focusout/
I know this question is from 2011, just want to let everyone know that FireFox support for this attribute is now available since March 6th, 2017: https://caniuse.com/#search=focusout

IE8 Crash on getStyle background-position

I've found a strange bug in Internet Explorer 8. Maybe someone can help me move around it.
When I try to grab the background position of an element, using background-position-x all versions of Internet Explorer work as excepted except for IE8 that crashes.
When I run el.getStyle('background-position') all browsers give me the correct values except from IE (6, 7 and 8) that return undefined.
I therefore use el.getStyle('background-position-x') for all IE versions.
IE8, however, crashes on the above code.
Anyone had similar problems?
Thanks for the help everyone. This really is a bug and works only on the following scenario.
css must be loaded on an external stylesheet
element has no inline styling
The way to fix it, even tough dirty, is to add inline styling to the element. Makes IE8 happy and all other browsers work.
I did not test but, according to this ticket, FF2 also suffers from the same behavior.
Side notes:
#marcgg - I was going to downvote your answer as it really is not helpful (and bound to start a flame war) but, all truth said, jQuery does not manifest this problem. Even though, as you probably already knew, it is NOT an option! ;)
#Fabien - IE does support background-position-x and lacks support for background-position the W3C approved construction.
Why not use jquery's css function that works fine crossbrowser ?
Try using:
el.getStyle('backgroundPositionX')
and
el.getStyle('backgroundPositionX')
yes, older thread, but figured I'd post another solution that I bumped into # mootools lighthouse....
if (Browser.Engine.trident){
var xy = el.getStyle('background-position-x')+" "+el.getStyle('background-position-y');
} else {
var xy = el.getStyle("backgroundPosition");
}
works well for me so far.

need help with IE 6

so i've been working on a website now for like a couple months and i test it on chrome mainly. but before i release anything big i always check it on firefox 3.something and IE7. Now i've received some complaints that that it doesn't look very good in IE6 and when i do check it... well ya it doesn't look like its supposed to. Is there any quick fix that i can add to my HTML to make it look the same in IE6 as it does every where else?
At the risk of downvotes: have you tried adding IE6 to your test matrix? If you have a significant number of users complaining that it looks bad on IE6, you clearly have a significant number of users using IE6 to use it, so it seems like it would be worth your while to just add it to the set of browsers you check before release. Just sayin'.
A really good start is http://code.google.com/p/ie7-js/ Just place it in conditional comment tags in the head of your document and it will make ie6 'standards-compliant'. After that make sure you have seperate css documents for each version of IE, and make sure all of your code is valid with w3's validator. Also declaring a doctype can fix many issues, but it MUST be on the very first line that the browser sees.
Edit: also, for png transparency, I've found that this http://www.twinhelix.com/test/ (IE PNGFIX 2.0 Alpha) works best.
There is no quick trick to getting everything to work. Pretty much have to examine each element that looks different.
That said, you might try looking at a CSS reset file.
Yahoo has one.
And if you search google I'm sure you can find others.
Read this: Internet Exporer box model bug. Also try using YUI reset or Eric Meyer's resetReloaded to set a baseline for all your styles.
And stop developing in Chrome! Try Firefox with Firebug.
How badly does your website 'break' in IE6? If it's minor, then I wouldn't worry about it.
How critical is it that it works in IE6? It's share of the market is slowly but surely declining (Looking at my own logs from a Government website also shows that IE6 is definitely going away). Can you display a message on your website letting users know if they use IE6 and advising that they upgrade?
There are many reasons to upgrade, and educating your users as to why they should upgrade might also be worthwhile?
Uhm... if there is a simple solution I really want to know it. :)
But you can anyway use this good Microsoft tool to cross-test your pages.
It can be usefull for compare the final render of a website.
CSS resets will probably do nothing if it looks fine in IE7. Things like double margins when floating and overflow:auto bugs are things that need to be manually added for each occurance. I'd suggest adding the following line to your head tag:
<!--[if lt IE 7]><style type="text/css">#import "/stylesheets/ie6.css";</style><![endif]-->
and then writing an ie6.css file to fix all the bugs (yes, one at a time)
Probably not what you wanted to hear, but it is why everyone hates IE6 so much
you can check version of client browser and include css fixing for that browser. but most simple solution is to show an alert or notification to client that his browser is outdated and provide links to download latest browser
here are some way to show that notification
http://garmahis.com/tools/ie6-update-warning/
i like this solution
http://www.browser-update.org/

Categories

Resources