document.documentElement is a DOM1 property and so was specified more than 13 years ago. In my experiments, it's reliable in IE6 onward and in vaguely recent versions (I haven't gone back far) of Firefox, Chrome, Safari, Mobile Safari, Opera, and Konqueror when I use the HTML5 doctype. So that covers a fair range of layout engines: Trident, Gecko, WebKit, Presto, and KHTML.
(It even works if I omit the actual html tag in my markup [which I'm allowed to do in HTML5 — and apparently even IE6 adds it in for me despite it never having heard of HTML5 — but almost certainly never will in practice].)
Is there any significant browser — Blackberry? Android? — in which I cannot assume document.documentElement will be present and will refer to the root html element in an HTML document?
Depends on your requirements. Older versions of Blackberry's Browser, before version 6 of the OS, may not have had support for it. But the browser was so bad that any JavaScript enabled site hardly worked anyway.
According to Wikipedia, all major rending engines support it. It seems like that table is using the IE version rather than the actual version of Trident. Trident (IE), Gecko (Firefox), Webkit (Safari, Chrome), and Presto (Opera) all support it. The Tasman rendering engine is largely obsolete and unused. I wouldn't worry about it.
In my personal experience, I've had no problems from myself or customers using that property on a reasonably modern browser.
All mobile browsers, Safari/iOS, Android, even Internet Explorer on Windows Phone 7 support it. Recent BlackBerries do as well.
Related
I am creating an PhoneGap application for iPhone.
When I am designing and testing HTML file in PC-Browser it looks different.
And In Phone gap it looks different.
Actually CSS not functioning as accepted. Is this known issue? OR Am I missing something?
I can provide code snippet or screen-shots if needed. Please help
Without seeing code this is almost impossible to actually answer. BUT I will say this - with mobile you are using Webkit, meaning that anything in your CSS that referes to -moz- will not work. Also, you're dealing with a version of webkit, not the newest, and not the oldest - well that is unless your on android 2.2.2
You should be safe to use any -webkit- syntax in your CSS, but just know that certain properties may not be supported in android as they have fragmented their phones quite and bit and have shipped a somewhat old version of webkit with specific OS's.
iPhone you should be all good to go, now if you continue to have issues that are more specific I would recommend you post your code so we can see what is going on - you could just have some weird markup somewhere.
Has anyone successfully used WebKit in Delphi?
WebKit is an open source web browser engine. WebKit is also the name of the Mac OS X system framework version of the engine that's used by Safari, Dashboard, Mail, and many other OS X applications.
I want to create an iPhone/iPad Mobile Simulator same as in electricplum. (I have tried the FREE version - seems like it also uses Adobe AIR).
With Safari browser we have the most accurate preview results for iPhone mobile sites. so I would like to embed the WebKit (that is used by Safari) in my application, so my customers can have a reliable preview of their mobile web sites.
I have searched the web, but could not find a working code. (The best I could find was this, but it's not working).
The 3 main problems with Delphi Chromium Embedded suggested in the answers are that:
It does not support D5
I can overcome the fact that there is no support for D5 (creating the component with D7 in a separate process or DLL) But, It is very unstable! I have tested it with D7: Random access violations.
It does not render HTML pages with div layout/HTML5 same as Safari does (or electricplum - "Electric Mobile Simulator").
Have a look at DelphiChromiumEmbedded. It's not Safari, but it is Webkit based at least...
The reliability of that is not going to be very good. In a corporate environment you might want to just put a mac on the network with the iPad/iPhone simulator from xcode, and script it to open your site and take screenshots.
Or even write a iOS program to open a webkit view with your site, and just put an iPad on the network.
Taking a screenshot
Open a webpage
Running in the background
Sending mail directly through smtp
And take a look at this question and answer
You might want to consider how much work a delphi webkit is going to be compared to just buying a mac. The upgrade cycle is going to be painful whatever route you take, but quality is going to be much better with the mac/iPad.
Most smartphones use modern browser engines that have implementing HTML 5 (or at least partially). Should I start using HTML 5 for my web application ? Where can I find a list of browser engines used by most popular devices (iPhone,Android,etc.) ? My application doesn't have to work on older desktop browsers.
Depending on how commercial/critical your web page is, the answer differs.
If it is CRITICAL that it works on ALL smart-phones, use HTML4, with a view to upgrading it to HTML5.
If it is preferable that it works on most smart-phones HTML5 will be fine. Even where it is not supported, the page will render - it just won't look like you intend. I'm using HTML5 with a couple of additions that help older browsers to render it correctly.
I did a browser test of HTML 5 (with the helpers for older browsers) with the following results:
http://www.stevefenton.co.uk/Content/Blog/Date/200907/Blog/HTML-5-Browser-Test/
According to this post (iPhone developers abandoning app model for HTML5?), it seems that starting to use HTML 5 is feasible.
Unless you only cares iphone, 5 is not well supported for "most" smartphones.
If you really want good compatibility on smartphones, you'd better keep with 4.
The Wikipedia mobile browsers page has a decent table at the moment.
On the “most popular devices” issue, if you’ve got any information about phones used by your app’s intended audience, that’ll be more valuable than general popularity.
Having said that, I think in general the iPhone’s sales figures are significantly ahead of everyone else, and the iPhone has great HTML5 support. I’d go ahead with HTML5, as I think the other smartphones will either catch up with their HTML5 support, or disappear.
Android’s pretty much the only other smartphone with significant sales, right? I think Google’s keen on HTML5.
For whatever reason, I can't get XSLTProcessor() to work all the time.
Here is my JS:
... xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xmlRequest.responseXML);
// Pass variables
xsltProcessor.setParameter(null, "sectionNumber", section);
xsltProcessor.setParameter(null, "entryNumber", elementNo);
// Transform XML using XSL
var resultDocument = xsltProcessor.transformToFragment(phonebookDump,document);
// Append to document
document.getElementById('three').appendChild(resultDocument);
Works fine in:
Firefox on OSX,
iPhone Simulator on OSX,
Safari on OSX
Doesn't work at all in:
Mobile Safari on iPhone,
Safari on Windows
Am I missing something? Is there a workaround to XSLTProcessor()? Would server-side XSLT processing be quicker for mobile development anyways?
Your JS code seems right. Safari (and safari mobile as well) acutally has the xslt support. It's just a merciless implementation. The problem is that sometimes it may look like it is not working just because it is not verbose at all when it fails.
Remember that webkit xsl engine is based on libxsl, so you can use any software based on this library to test your style sheet against your document. I personally use xslproc that fails just like safari, but gives much more output.
If you can't get out of the problem, just post the xslt and the XML files.
I'm pretty sure Mobile Safari doesn't support XSLT, as the underlying OS X implementation does not include the relevant libraries that are present in desktop versions of OS X.
Server-side processing would definitely be quicker for a mobile app anyway: any processing you can reasonably shift away from the phone to the server is a win.
We have a rather simple site (minimal JS) with plain html and CSS. It is a simple mobile interface for our main application.
We are running into trouble because we have more than one column and several browsers seem to force single columns.
Through some searching I ran into 2 meta tags.
<meta name="MobileOptimized" content="220" />
<meta name="viewport" content="width=320" />
With these we have a good 'scaled' view for IE Mobile and the iPhone. We have not run into any problems with palm's Blazer. But Blackberry is another matter.
Does the Blackberry have a simple way to control the view of the browser as well? By simple I mean without making a special page for that device.
I wouldn't bother making a "medium" version for the iPhone etc, iPhone users can just look at your real web page easily enough. Have your full version and a single column version, and you'll reach the largest audience with minimal work.
To answer your question though, there's no good way to make the Blackberry do anything other than 1 column views. You can get it to look fairly professional, as CSS and simple javascript still apply, but you'll have to lose a lot of your horizontal real estate.
My recommendation would be to create two or three versions of the site:
Full blown site for modern desktop browsers (if it's a very heavy application)
Site with minimal JS and CSS for good mobile browsers and Desktop browsers (IPhone and SkyFire come to mind)
Site with no JS, single column and mostly just plain text.
The reason is that coding for 3-4 desktop browsers is hard enough. Don't kill yourself over another hundred devices to code for and create a simple page that just puts out information.
Remember the basic design principle of web development: Users don't care. They want information, or functionality. It will look a whole lot better for you if you had a simple, clear layout for bad mobile browsers (IE or Blackberry) then try to hack up something that eventually becomes a maintainability nightmare and potentially make you look bad if somebody uses yet another mobile browser and you have not written the phone-specific site for yet.
BlackBerry (from OS 4.6 and higher) supports both the meta-viewport tag as well as the meta-HandheldFriendly tag. See the "Content Design Guidelines" document at http://na.blackberry.com/eng/support/docs/subcategories/?userType=21&category=BlackBerry+Browser for details.