We have to add a basic HTML editor to our product. As we only support IE at present (most customers are still on IE 6), I have been told to use the Internet Explorer built-in XHTML editing capabilities – e.g. <div contentEditable="true"> as explained at "Editing a Web Page" .
Apart from not working in other browsers. (The management does not consider it being a problem. Our customers will put up with our software only working with IE. We have never lost any money by our software only working in IE; most customers will only let their staff use IE6 at present anyway)
What other problem are we likely to get with contentEditable?
Update
The HTML editor I wrote with “contentEditable” proved to very hard to get reliable, with many problems. If I had to do this again, I would push very hard to one of the many open source solutions (e.g. TinyMCE) or buy in a supported HTML editor.
No doubt that a very skilled jscript programmer can get “contentEditable” to work well given enough time. It just that all the examples on the web looks so simple, until you test common operations like doing a cut/paste from word and trying to edit the resulting HTML. (just the sort of things a customer will do)
(Just search for “contentEditable” on stackoverflow to get some ideal of the problems other people have had)
The contentEditable property works in Safari, Firefox 3, and Opera 9.
Since manipulation will undoubtably be through selections, your biggest problem will be getting the selection/ranges working across browsers (see here).
There are also numerous little bugs across browsers which may or may not bite you. These include incompatible case-sensitivity, incompatible methods of turning it off again (removeAttribute vs. setting to false).
Despite these flaws, I find it works rather well.
How about using some open-source solution that works in all major browsers?
TinyMCE
There are other projects as well, but that's what I'd use.
HTML 5 include the contenteditable attribute, so it looks like it will be in IE for a long time to come.
Just got a email from someone on the IE team
While it's basically impossible to
comment on the future with a high
degree of confidence, it's fair to say
that I'm not aware of any plans to
remove contentEditable, and if it were
removed, it would break a LOT of
sites.
A quick google search produced a blog post on some (albeit minor) issues of contentEditable.
contentEditable works under Firefox 3.
I don't know of any problems with contentEditable.
I would just be sure to check what content you get back as inserting XSS attacks are quite easy in IE if there is no validation of the HTML content added.
Related
I see that many people have problems with cross-browser compatibility issues.
My question is why do browsers render the html, css or js differently?
Is it due to the DOM? The box model?
Why are there cross-browser compatibility issues when there are standards from W3C etc?
Are there any differences in the way the major Internet browsers display HTML content? Why is it that Internet Explorer, Firefox (Mozilla), Opera may display the same content differently?
What should I keep in mind when building a cross-browser compatible web site?
There are a lot fof reasons or incompatibility:
Specs are often written in response to the development of propriety features by specific vendors,
Specs can sometimes be poorly written, have ambiguity or were not written in anticipation of specific end-use cases.,
Browser vendors occasionally ignore the specification for their own reasons.
Additional factors:
A lot of this stuff is hard to implement, let along implement correctly,
It also has to be implemented to handle poorly formed HTML, backwards compatibility etc. Browser vendors sometimes sacrifice 'correctness' for 'interoperability',
History, politics & personalities.
I'm sure someone will answer this much better, but here's a start:
Yes, there are standards that are supposed to be adhered with respect to CSS rendering. The problem is, some browser editors (cough Microsoft cough) don't consider it a priority to implement the specifications correctly (or even fully, for that matter). Even, when the layout engine is being worked on to attempt to ensure compatibility, it can get quite nasty figuring out how things should be rendered correctly when mixing various CSS properties and units (see for example, the ACID test http://en.wikipedia.org/wiki/Acid3)
To have a cross-browser website, you'll basically have to check all of your website's pages render correctly in the browsers your visitors use (or that you support). Various tools such as Selenium (seleniumhq.org) can help with this.
You basically have to decide what you're going to do
design for the lowest common denominator (if it's IE6, there isn't much you'll be able to do)
design using validating CSS and using hacks (e.g. clearfix) to correct erroneous behavior in certain browsers
decide not to support certain browsers (IE6 being a prime candidate)
sniff browser and adapt display accordingly (NOT the preferred way to do it)
With respect to differences in manipulating the DOM, libraries such as jQuery help a lot as they hide the implementation differences from you.
For reference, it's a good idea to test your website in at least the following:
WebKit-based browser (Chrome, Safari)
Gecko-based browser (Firefox)
IE
Opera
It is an aftermath of the Great Browser War. Now Netscape Communications lies in ruins, but quirks opponents made to outperform each other is still remains in browsers' codebase, and people are still in development team. Consider watching Crockford's lecture, he gives some highlight on subject. (you will want to save the file instead of streaming it)
Everything that Hamish said, plus another major problem that he alluded to is how browsers handle incorrect HTML. For example, back in the days of IE4/NS4, the element was very problematic. If you didn't close a tag, IE4 would close it for you. Netscape 4 would silently disregard the table completely.
This is still true today where one browser will fix incorrect markup differently than another. Yes, the markup should be corrected, but browsers will try their best to render something.
The standard specifies how HTML/CSS markup should be rendered into displayed as visual elements. It does not specify how the rendering should work specifically. Many different people and companies have created different ways of rendering markup visually. Since HTML rendering is an extremely complex task, of course they didn't all converge on the exact same solution. All rendering engines are aiming for the same goal, but often the spec is vague enough to allow for small differences (be it just pixel level), and bugs are inevitable as well.
Add to that that back in the days browser vendors cared less about standards and more about gaining market share quickly and that certain companies have been very slow in turning around to embrace standards (you know who you are).
In the end, specs, which are quite complex, and browsers, which are even more complex, are written by many different people; you can't expect absolute perfection to arise from this process. And perfection is not the goal of HTML either; it's meant to be a simple, vendor and platform independent markup language to present information on a variety of devices, something it does remarkably well. If you need pixel perfect results, you need to go with a technology that was meant to provide this, like Adobe Flash (which is neither platform nor vendor independent nor simple).
Try to look at it from the glass-half-full perspective: Thousands of different people have written millions of lines of code doing vastly different things on many different platforms with many different goals and focuses, and yet in the end all render HTML markup almost identical with often only tiny, virtually irrelevant differences. There are of course weak spots in every engine and if you happen to hit them all at once, your site will break in every browser in different ways. But this is possible to avoid with a bit of experience.
Years ago I used to design with JavaScript disabled browsers in mind. How important is it nowadays?
Is it really something you need to worry about? I've never come across a user in real life who has JavaScript disabled. Anyone got any figures?
Having had my own company for a year and working at another for a couple of years, none of my direct clients has ever had JavaScript disabled, in one single instance I've had one of my clients customers have JavaScript disabled, so my current guess (purely anecdotal evidence) is about 1/50.000.
My biggest worry when working with JavaScript is and has always been cross browser compliance, what works in FF doesn't always work in Chrome, what works in FF and Chrome doesn't always work in IE 8, and what works in all of the above... doesn't always work in IE 7.....
And then there is IE 6.
Edit, yay data:
By July 31, 2009 firefox had 1 billion downloads
Noscript has as of September 14, 2010 73 million downloads
That tells us that about 7% of the times FF users has downloaded the browser, they have also installed the noscript plugin.
Edit addendum
Making this community wiki, add your math people.
Edit:
In October 2010, Yahoo! published actual stats.
In short, the answer varies by country, but for a US site, you can expect 2% of your users to have javascript disabled.
My tips would be:
Designing a site with a fallback to no JS is usually entirely possible and not all that difficult. You should consider doing it, regardless of what the statistics about JS-disabled browsers say.
However, don't let this stop you from being creative. If you must rely on JS and there's no workaround, don't hesitate. If someone wants full browsing experience and works with JS off, it's his/her fault.
Encoding emails using JS unescape() is always a good idea. In a JS-disabled browser, just display nothing.
You're right: straight up disabling of Javascript is pretty uncommon these days because it is used by so many sites.
However most browsers have more fine-tuned control; ie to turn it on/off per site, which may still be used by paranoid.. uh, security-conscious users.
Even more likely, there's a Firefox extension called NoScript which is actually very popular. This extension gives the user even more control over when to allow Javascript. I don't know whether there's similar plug-ins for other browsers, but I expect so.
Finally, many disabled users will be running screen-readers or other accessibility browsers which may still not run Javascript properly/at all. If you want to support these users, then you'll need to be aware of the unique environments they work in.
So yes, it is still a good idea to support non-JS users, even if they are in the minority. That said, I don't think you need to make everything work for them, as long as your basic site functionality works (ie add to basket, checkout, etc), there's no need to get too stressed about them not getting the bells and whistles.
The NoScript plugin for Firefox has been downloaded 73,063,406 times.
Your site should be usable without JS (so don't replace links with JS voodoo unless you absolutely have to).
Also people that need special output devices (like Braille Readers) will prefer sites that that work without JS.
I agree that disabling javascript is uncommon and i also agree that it's important to build websites while taking javascript-disabled browsers in mind.
BUT javascript is strongly invloved in modern & large websites now (google, youtube, facebook). without javascript you can't build AJAX supported websites and you can't also use the power of jQuery or any js library.
and if you are worry about cross browser compliance, you might wanna consider using jQuery because it abstracts away the famous cross-browser issue.
personally, i'll be always using javascript in any website i build :).
I'm a bit late to the party, but about a month after this question was asked, Yahoo! published actual stats.
In short, it depends on where your visitors are from, but in the US, you can plan on about 2% of your visitors having javascript disabled.
Here's a couple of general guidelines. People who use different browsers with accessibility in mind, or run in a terminal with no graphics toolkit (text based) are most likely to not run JavaScript. If you want to cater to these people, all you need to do is use JavaScript if you want, but only use it to enhance, not provide the content.
By this, I mean, for example, you can enhance a table by adding sort controls with JavaScript, but don't use JavaScript to parse a data file and create the table. Use a server-side program to handle a database or data file instead.
However, there becomes a grey area, and this all has to do with what kind of user base you are targeting. If you are writing a Chrome experiment then by all means, write it all in JavaScript; it's about the JavaScript.
If, however, your website aims to provide information, it's best to avoid using JavaScript to provide content wherever possible; only enhance it.
I've been lucky to develop websites for the past 3 years for companies that don't need to support IE 6 in any way.
I've just accepted a development job with a company that works exclusively with IE 6 customers in the financial field. These people may be hemmed in by corporate IT departments or haven't upgraded, or whatever the reason is, we have to support IE 6 (and JUST IE 6).
I have no background in supporting this browser and I used to happily skip over SO questions that dealt with IE lte selectors and all of that. But now that it's going to pay the bills, I want to know as mch as I can about the CSS selectors that work/don't work, how JS may be quirky, and anything else that may help me catch up in the new job.
Is there a good respository of the "quirks" that make up the lovable IE 6 experience, or is it spread piecemeal across the 'tubes?
Is there a good respository of the "quirks" that make up the lovable IE 6 experience
quirksmode.org is an excellent resource for browser compatibility questions. It has great, nicely designed compatibility tables that give you almost everything you need to know. Be sure to take a look.
At hasLayout is an excellent overview of all known IE CSS bugs, most of them complete with solutions. This site is imo better overviewable, a real bug repository. All is summarized in short instead of spread over 100s pages like Quirksmode, which in turn is however excellent as a general reference.
My clients use IE6. The repositories listed above may mention these, but nevertheless I write them here.
If you use https, avoid mixed content messages by avoiding javascript:void(0) and similar constructs.
If you use https, avoid mixed content messages by ensuring all iframes have a valid src attribute.
Find a copy of Microsoft Script Debugger and learn to love it. It stinks, but it seems to be the only game in town.
Ask your company to let you develop using FF and FireBug (I did), develop using these, and test very often in IE6.
I use the following URL to dump the DOM:
javascript:'<xmp>%20+%20window.document.body.outerHTML%20+%20</xmp>'
Quirksmode is an invaluable source of information for this sort of thing.
In particular, take a look at the compatibility tables.
"QuirksMode.org is the prime source for browser compatibility information on the Internet." Specifically, to your question visit the CSS2 page there, and look at the IE6 column on the table.
This is a nice article about the 9 most common IE bugs and how to fix them.
Good suggestions... a couple of things that might help:
"Microsoft Visual Web Developer 2008 Express Edition" is much better than the old "Microsoft Script Debugger": http://www.microsoft.com/express/Web/
There's also Firebug Lite: http://getfirebug.com/firebuglite
A compatibility library for browsers that lack full support for JavaScript 1.6: http://en.wikipedia.org/wiki/MediaWiki:Gadget-JSL.js
MSDN will help too: http://msdn.microsoft.com/en-us/default.aspx
I'm developing a web application that uses lots of Javascript and CSS, both of my own creation and through third-party libraries. These include jQuery and Google Maps & Visualization JS APIs.
I've been testing everything in Firefox 3. Things are peachy until it turns out the main target of this webapp is (cue sad trombone) IE7. I'm looking for caveats, advice, libraries, or other references to help make this transition as easy as possible (not that it's actually going to be easy).
I've already tried IE7.js though it hasn't yet shown itself to be the silver bullet I was hoping for. I'm sure that it works as advertised, I think it's just not as all-encompassing as I'd like (example: colors like #4684EE and #DC3912, which are correctly rendered in FF3, are rendered as black in IE7, with or without IE7.js). Are there other libraries out there to help bring IE7 (more) in line with FF3?
A corollary question: what debugger would you recommend for IE7? I'm currently using Firebug Lite, but it runs painfully slowly. Is there anything out there with similar features that I might have missed?
As far as libraries go, jQuery is compatible across all major browsers, so at least you've got that going for you. Without knowing exactly which plugins/modules/libraries you're using, I can't recommend alternatives that are cross-browser compatible.
You could take a look at the Internet Explorer Developer Toolbar. It isn't nearly as good as Firebug, but it's better than nothing.
Get the IETab add-on for Firefox so that you can fire up IE right inside the same tab you test Firefox in. Get the FULL version of Firebug. It will be perfect for you to deal with HTML, CSS, and scripting. HTMLValidator for validating your HTML and CSS. The Web Developer toolbar is a MUST if you don't have it. I can't even go into a fraction of the benefits it has, from images to source viewing to validating scripts it has a lot.
I use a separate stylesheet for IE7. It doesn't have many changes from the original stylesheet, but enough to make viewing in IE7 close to FF. I try not to do ANYTHING for IE6. In fact I encourage the "downfall" of IE6. It's almost ten years old, and full of bugs, and unsupported now!
Unfortunately, Microsoft doesn't really want to be on the same page as the W3C and developers that want web standards so that you don't have deal with what you're going through right now. Regardless of what they SAY, they're still "competing" against the other browsers for control, and it's hurting the developers.
Writing cross browser code is a big topic - you can't really generalize it into "don't float left and padding-left" statements and be done.
Separate stylesheets for ie are messy and not needed IMO.
Generally speaking, firefox fixes broken code in a good bit of cases, so there is a chance that at least some of your stuff looks bad in IE because of open tags that firefox is fixing for you.
Re-slicing a site that's already done might be your easiest way. You should be able to completely redo the CSS from scratch in a few hours tops.
But all this is advice that may not apply - it would be easier to see the code you're talking about.
I have developed a html file. It is working fine in IE6 and IE7. When I run the same html file in IE8, the design is not the same and the Javascript is not working properly. It is showing browser's "Compatibility view"?
How do I fix this?
It is difficult to really help you as you are not giving us enough information. Your question is very broad in the sense that getting your website to display the same in all browsers is a lot of work and the reasons why a particular layout is not working in a particular browser are just about infinite.
A few important things to get you started on your journey, though:
Use a DOCTYPE or you'll throw browsers into quirks mode.
Reset your CSS so you can apply the styles you want to elements.
Use a Javascript library - the popular one around these parts is jQuery, and it is the one I personally recommend. However, it doesn't really matter which one you go with as long as you use one. A lot of smart guys have put a lot of hours into taking care of all the incompatibilities between browsers. Trying to do a lot of dynamic stuff on your website with pure Javascript is bordering on masochistic.
Once I started doing these things, making my site work the same across browsers got a whole lot easier.
Give this a read, it details the things that cause IE8 to switch to compatibility mode, and how to fix them.
http://blogs.msdn.com/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx
You must give us some example codes (or even working website) and do something like:
Website validation (html markup, css and javascript)
Test it on another modern browser (opera, firefox, chrome, safari, etc)
Do you adhere to web standard when building web?
Do you rely on CSS hacks?
Did you know that Trident rendering engine on IE6 & IE7 didn't even pass ACID 2 test? which mean have a lot troubles with CSS implementation...
Then we might be can help you