Wednesday, May 26, 2010

FAQ for web developers


FAQ for web developers

Introduction

  1. What's inside Google Chrome?
  2. Where can I find information about other browsers?

User agent

  1. What is Google Chrome's user agent string?

Language encoding

  1. Google Chrome isn't displaying characters correctly
  2. Declaring encoding using JavaScript (document.write) doesn't work
  3. Google Chrome is displaying '%B1%C1%C3%E5' instead of two Chinese characters

Scripts and web applications

  1. My ActiveX control is not loading
  2. My JavaScript isn't executing properly

Rendering and browser behaviour

  1. My site renders differently in Google Chrome than in Internet Explorer
  2. How can I test my website in Google Chrome?
  3. Font specifications in an external style sheet do not take effect
  4. My website's popups aren't appearing in Google Chrome
  5. My SSL-protected website is showing an exclamation mark in Google Chrome, instead of a lock
  6. The HTML5 database API isn't supported in Google Chrome
  7. How can I customize the appearance and function of Google Chrome shortcuts that point to my page?
  8. How can my web page open a new tab in a separate process?

Search

  1. Entering an intranet website address brings up a search results page, rather than the intranet site
  2. How can I include my site's search in Google Chrome's search options?

Introduction

1. What's inside Google Chrome?

Google Chrome contains many features that can be harnessed by webmasters to deliver a better end-user experience. Google Chrome comes with Gears built in, which allows webmasters to take advantage of APIs such as offline storage. In addition, Google Chrome allows your web application to look and feel like a "desktop" application, as users can launch Google Chrome in a mode with a minimalist UI, featuring nothing but a title bar.
Google Chrome also uses a brand new JavaScript engine (V8), which is much faster than existing JavaScript interpreters. This means you can create more complex and more intensive AJAX applications with fewer speed and processing constraints. Finally, Google Chrome is built on top of WebKit, so Google Chrome users will benefit from the CSS3 features being added to WebKit as those features are released.

2. Where can I find information about other browsers?

There are a number of other browsers to choose from. Find out about some of the more widely used browsers at the websites listed below:

User agent

3. What is Google Chrome's user agent string?

Google Chrome's user agent string is:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.X.Y.Z Safari/525.13.
Google Chrome uses the WebKit rendering engine, which is shared by other browsers such as Apple's Safari. Web pages should look the same in Google Chrome as they will in these other WebKit-based browsers. You can look for webkit in user agent strings to target these browsers, rather than a specific browser name (such as Google Chrome or Safari).

Language encoding

4. Google Chrome isn't displaying characters correctly

To help browsers render your content correctly, you should always provide content and character encoding information at the top of your document's source. If you're using frames or iframes, specify the encoding at the top of the source of those frames, as well. Some browsers (including Google Chrome) won't recognize encoding declarations that appear deep in a document (such as after CSS or script in your document's head section).
Example of good encoding placement:

    .......
Also make sure that your web server is not sending conflicting HTTP headers. Headers sent by the web server will override any charset declarations in your page.

5. Declaring encoding using JavaScript (document.write) doesn't work

Google Chrome doesn't read encoding information that's declared with document.write(). If you're using this method to declare encoding in iframes, for example, you may see garbled characters when the iframe is rendered. Instead of:
frame1.js
document.write("");
    ... other JavaScript code ...
...we recommend the following:
frame1.html

    ...

6. Google Chrome is displaying '%B1%C1%C3%E5' instead of two Chinese characters

Google Chrome percent-encodes query parameters within a URL. Make sure that your server-side scripts are properly decoding percent-encoded characters before processing the data.

Scripts and web applications

7. My ActiveX control is not loading

You should specify an NPAPI verson of the plugin.
ActiveX is only supported by Internet Explorer (and browsers built on top of Internet Explorer) on Windows. Google Chrome, Mozilla Firefox, Apple Safari, and others do not support ActiveX. Instead, these browsers make use of the Netscape Plugin Application Programming Interface (NPAPI).

8. My JavaScript isn't executing properly

There are a couple of ways to view JavaScript errors and work to debug them in Google Chrome:
  • JavaScript Console: click the Page menu icon and select Developer > JavaScript Console. From here, you'll be able to view errors in the JavaScript execution, and enter additional JavaScript commands to execute.
  • JavaScript Debugger: available as Page menu icon > Developer > Debug JavaScript, the debugger provides a command prompt from which you can set breakpoints, backtrace, and more. Type help at the debugger command line to get started.

Rendering and browser behaviour

9. My site renders differently in Google Chrome than in Internet Explorer

Google Chrome uses a different rendering engine than Internet Explorer, so may display web pages differently. Apple Safari uses the same rendering engine as Google Chrome (WebKit) and should display pages the same way.

10. How can I test my website in Google Chrome?

There are several tools to help you test your website in Google Chrome:
  • Web Inspector
    Right-click on any component on a web page to launch the web inspector. You'll be able to see the elements and resources associated with the component on which you clicked, including a hierarchy view of the DOM and a JavaScript console.
  • Task Manager
    Select the Page menu icon, then Developer > Task Manager (or press Shift+Esc). The task manager shows all running Google Chrome processes, and the resources that they're using (memory, CPU, and network).
  • JavaScript Debugger
    Select the Page menu icon, then Developer > Debug JavaScript. This launches a JavaScript debugger that can be used to attach to existing processes.

11. Font specifications in an external style sheet do not take effect

Make sure that your external stylesheets are being served with the correct charset and content-type. They should be served as text/css ortext/css;charset=X.
It's better not to specify charset for a style sheet in the HTTP header; instead, add the declaration to the very beginning (no preceding characters, including spaces and line breaks) of your CSS stylesheet as follows:
@charset "xxx"
Neglecting to specify encoding information could prevent your stylesheet from being properly parsed.
To learn more about this topic, please visit the World Wide Web Consortium's documentation athttp://www.w3.org/TR/CSS21/syndata.html#charset.

12. My website's popups aren't appearing in Google Chrome

Google Chrome's default behavior is to minimize and then display only the title bar of pop-ups in the lower-right section of the browser window. Users can view a pop-up's content by dragging its title bar into a more visible position. This allows pop-ups to load, so as not to break the functionality of sites which depend on them. It also prevents undesired pop-ups from covering the page and distracting users.

13. My SSL-protected website is showing an exclamation mark in Google Chrome, instead of a lock

This indicates a problem with the use of SSL on the page. Clicking on the exclamation mark in Google Chrome will provide more details about the issue. Often, issues are the result of mixed content on your page - for example, your top level webpage is served over HTTPS and is protected via SSL, but you have also included elements on the page (such as images, script, or CSS) via HTTP. All content must be served over HTTPS in order for the lock to display.

14. The HTML5 database API isn't supported in Google Chrome

The Google Chrome team plans to support the HTML5 database API, as well as the other APIs that WebKit supports, including offline and workers, in a future release.

15. How can I customize the appearance and function of Google Chrome shortcuts that point to my page?

Google Chrome users can create shortcuts for any web page by selecting Create application shortcuts from the Page menu icon. By default, new shortcuts take the title and favicon of the page to which the shortcut is pointing.
You can specify the title, description, and URL of Google Chrome shortcuts that point to your page by inserting specific meta tags in your document's section.
To customize:TagExample
The shortcut titleapplication-name
The description (used when more space is available, such as in the preferences panel)description
The URL to open when the shortcut is clickedapplication-url
The shortcut icon
For example:
    
    
    
These tags closely match those of the Gears Desktop API. Please refer to the Gears Desktop API documentation for more details.

16. How can my web page open a new tab in a separate process?

Google Chrome has a multi-process architecture, meaning tabs can run in separate processes from each other, and from the main browser process. New tabs spawned from a web page, however, are usually opened in the same process, so that the original page can access the new tab using JavaScript.
However, Google Chrome will look for hints to open new tabs in a separate process, if you are navigating the new tab to a different web site.
The easiest approach is to use a link to a different web site that targets a new window without passing on referrer information. Google Chrome recognizes this as a hint to keep the new page isolated from the original page, and it will load the new page in a separate process. For example:
Open in new tab and new process
If you want the new tab to open in a new process while still passing on referrer information, you can use the following steps in JavaScript:
  • Open the new tab with about:blank as its target.
  • Set the newly opened tab's opener variable to null, so that it can't access the original page.
  • Redirect from about:blank to a different web site than the original page.
For example:
var w = window.open();
    w.opener = null;
    w.document.location = "http://differentsite.com/index.html";
These hints only work for URLs that are on a different domain or protocol than the page spawning the pop-up. For example, if the page spawning the popup is on http://www.example.com/:
  • a different domain would be http://www.example.org or http://www.example2.com
  • a different protocol would be https://www.example.com

Search

17. Entering an intranet website address brings up a search results page, rather than the intranet site

When a user enters a single word into the address bar, Google Chrome performs a search for the term and returns results using the user's default search engine. At the same time, Google Chrome issues a HEAD request for http://term, to see if it's a valid website. If Google Chrome receives an HTTP/2xx response (such as HTTP/200 OK), the user will be asked if they want to visit the site instead. Clicking through to the site from the prompt will set the website as the default target for that term for future requests.
Google Chrome will also display the prompt if it receives:
  • an HTTP/401 or HTTP/407 response
  • an HTTP/3xx redirect that terminates in a page with any of the above responses
You should make sure that your web server properly responds to HEAD requests, and not just GET requests for a page.
For example, if a site exists at http://project.intranet.example.com, and a user within that corporate network enters project into the address bar:
  • Google Chrome will return search results for the term project
  • At the same time, Google Chrome will check if http://project is a valid website. If so,
  • A prompt will appear, asking if the user would like to visit http://project
  • Once the user clicks through to http://project, Google Chrome sets http://project as the target for all future instances of project in the address bar
Users can override the default (search) behavior by entering project/ or http://project, or by selecting the address bar entry that reads project/instead of Search for project.

18. How can I include my site's search in Google Chrome's search options?

By providing an OpenSearch description document (OSDD), you enable Google Chrome to include your site in the list of search engines in the browser. For more information about OpenSearch, please visit http://www.opensearch.org.

No comments:

Post a Comment