Insert JS in CSS - javascript

I'm looking for a way insert JS into web page using CSS file, in Opera. In Internet Explorer [I tested it on 5.5,6,7,8] it's possible using behaviour property.
behavior: url(file.htc);
From my experience it's very useful. Now I need it for Opera.

There is no such equivalent feature in Opera.
You'll have to find another way to solve your problem.

The behaviour property is a proprietary to internet explorer. So it's unlikely you will find an equivalent.
However interestingly, looking through an old W3 working draft, it is proposed as a standard - but I haven't seen anything about other browsers actually supporting it nor an equivalent.
On a side note:
The behaviour property is very useful for "patching" internet explorer to enhance old browsers with newer features e.g. adding css3 rounded corner support etc. But at this time, because it is non-standard I would not recommend using it for anything other than adding support to outdated browsers.

Related

What is the browser support for element.removeAttribute?

The summary/details HTML5 element has terrible browser support. Therefore I built a non-jQuery fallback to make it work in non-supported browsers (IE and Edge). This fallback uses element.removeAttribute, but I am in doubt about the browser support of this command. I cannot find a definitive answer online. I have tried caniuse.com and MDN web docs, but they have no clear answers.
I know it works in my (updated) version of Firefox. Anyone has more info?
This method does not work consistently across browsers. It is BROKEN on MS Edge at least, and its brokenness is not mentioned by MDN, W3schools or caniuse at time of writing.
Basically, the method will fail when removing boolean attributes such as selected or hidden. The following will fail on Edge:
someDiv.removeAttribute("hidden");
Workaround is to set the attribute to "false" immediately before removing it.
someDiv.setAttribute("hidden", "false"); // "thanks" for the nonsense, MS
someDiv.removeAttribute("hidden");
This is not how boolean attributes are supposed to work, but that's how Edge requires it. Given that Edge is about to be dropped by Microsoft in favour of a Chromium-based alternative, we can expect this bug to remain unfixed, and the workaround to clutter our code for years.

How to use scrollTop prop in Safari

Looking in this site I see in the browser compatibility section, it looks like this
What does that mean? What do I have to do to use that property in safari?
If I go element.scrollTop, that works just like that?
Webkit is the browser engine used by Safari and Chrome, the mentioned item in MDN it's only to clarify that all versions in Safari that use webkit (since like forever) support the property perfectly.
Nothing to worry about, just use it wisely as you would with any other modern browser

window.sidebar.addPanel is not working on firefox no more

Actually I am trying to add bookmark by javascrip.previously this window.sidebar.addPanel was working with old browser versions. But with the recent browser versions it is not working any more.
And
BooMark this
is working in firefox but not in chrome.So I need a complete crossbrowser solution for adding bookmark.
To answer the problem of adding bookmarks cross-browser, this answer should help you. The various browsers use different methods for this, and you need to try them all.

JS library to simulate Internet Explorer?

There are some JS library to simulate the IE in Webkit? For instance: IE8 doesn't support border-radius currently (maybe on IE10). So I run a JS library that check if I'm using the border-radius then remove it to make similar to IE vision.
It's a crazy idea, I know, but work on IE is too slow, and if I can simulate it on Webkit, will be great! I need do it to an own project too.
Note: I know that exists a Chrome extension to make a IE tab, but the proposal is different: I need run on Webkit, but eliminating features not supported on IE.
Edit1: I'm working on a Webkit based IDE to developer HTML templates. Basically I need a button that emulate the IE view version without need a IE installed too (Mac, Linux for instance). Will be interesting have a Mozilla emulator too, for instance. Basically I will generate a CSS file to each browser too. For instance: -webkit properties not will be included to MSIE CSS. filter not will be included in Webkit CSS (but can be emulated).
So, I'll make a copy of current HTML page before apply a JS method that will edit or delete the unsupported content, make it similar to IE. If IE8 not support border-radius, it'll be removed and I'll see basically an IE version of page. If Mozilla not support -webkit-box-sizing it will be renamed to -moz-box-sizing if disponible.
I know of no script, and frankly I don't expect to see one any time soon as the task of re-creating the topography of IE's support for CSS in various versions of the browser would be a massive undertaking. It would further complicate things if the undocumented hacks like _height were supported too.
Frankly, the best way to test your site in IE8 is to use IE8+. In versions IE8 and up Microsoft introduced Browser Emulation, permitting you to fallback and emulate any number of IE versions all from a single browser - I use this daily, and it's a fantastic feature.
Within IE, open up the Developer Tools by pressing F12 and from there you can change the Browser Mode to IE8. No refresh will be necessary as the browser will handle that on its own. Using this method you can quickly test versions 7 through 10 (assuming you're testing from IE10) with the click of a button.
Disabling CSS3
If all you would like to do is disable CSS3 features, you can use the Strip Tease bookmarklet. It's not a fully-developed solution, so keep in mind that it won't handle things like advanced selectors, etc.

Firefox vs. Firefox Mobile (Fennec): Are there javascript detectable differences?

I've tried to find javascript elements that are supported by the mobile but not by the desktop version of Firefox or vice versa. I'm not interested in the user agent's differences. A difference between CSS support maybe helpful, too. Do you know a reliable way to detect differences?
-moz-touch-enabled CSS media query is only on mobile. there are a few more other mobile specific api's as well. https://developer.mozilla.org/en/Mobile/Firefox_Mobile_for_developers

Categories