Mozilla Html



HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5.

Designed to be usable by all Open Web developers, this reference page links to numerous resources about HTML5 technologies, classified into several groups based on their function.

  • Semantics: allowing you to describe more precisely what your content is.
  • Connectivity: allowing you to communicate with the server in new and innovative ways.
  • Offline and storage: allowing webpages to store data on the client-side locally and operate offline more efficiently.
  • Multimedia: making video and audio first-class citizens in the Open Web.
  • 2D/3D graphics and effects: allowing a much more diverse range of presentation options.
  • Performance and integration: providing greater speed optimization and better usage of computer hardware.
  • Device access: allowing for the usage of various input and output devices.
  • Styling: letting authors write more sophisticated themes.

Semantics

Sections and outlines in HTML5
A look at the new outlining and sectioning elements in HTML5: <section>, <article>, <nav>, <header>, <footer> and <aside>.
Using HTML5 audio and video
The <audio> and <video> elements embed and allow the manipulation of new multimedia content.
Forms improvements
A look at the constraint validation API, several new attributes, new values for the <input> attribute type and the new <output> element.
New semantic elements
Beside sections, media and forms elements, there are numerous new elements, like <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>, or <meter> and <main>, increasing the number of valid HTML5 elements.
Improvement in <iframe>
Using the sandbox and srcdoc attributes, authors can now be precise about the level of security and the wished rendering of an <iframe> element.
MathML
Allows directly embedding mathematical formulas.
Introduction to HTML5
This article introduces how to indicate to the browser that you are using HTML5 in your web design or web application.
HTML5 Reference Guide
Quick-reference HTML5 sheet containing markup generators, code examples and web developer tools. The guide is downloadable for ease of use and access. This page was created with help from the W3C as a quick guide for those who have some basic familiarity and experience using HTML5.
Downloadable HTML5 Guide
A quick guide to HTML5, including the common HTML tags as well as the new HTML5 tags. Downloadable in PDF and PNG formats.
HTML5 Cheat Sheet
A handy HTML 5 cheat sheet for beginners who want to master HTML 5, its elements, event attributes and compatibility.
Editable HTML5 Cheat Sheet
A beginner-friendly and editable cheat sheet with HTML5 examples that is aimed at anyone wanting to learn and use HTML5.
HTML5-compliant parser
The parser, which turns the bytes of an HTML document into a DOM, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid HTML. This leads to far greater predictability and interoperability between HTML5-compliant browsers.

Click the Library button on your toolbar. (If you don't see it there, click the menu button then click Library.) Click Bookmarks and then click the Show All Bookmarks Manage Bookmarks bar at the bottom. From the toolbar on the Library window, click Import and Backup and choose Import Bookmarks from HTML.; Within the Import Bookmarks File window that opens, navigate to the bookmarks HTML. MozillaParser is a Java Html parser based on mozilla's html parser. It acts as a bridge from java classes to Mozilla's classes and outputs a java Document object from a raw (and dirty) HTML input.

Connectivity

Web Sockets
Allows creating a permanent connection between the page and the server and to exchange non-HTML data through that means.
Server-sent events
Allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request.
WebRTC
This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.

Offline & storage

Offline resources: The application cache
Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.
Online and offline events
Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.
WHATWG client-side session and persistent storage (aka DOM storage)
Client-side session and persistent storage allows web applications to store structured data on the client side.
IndexedDB
IndexedDB is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.
Using files from web applications
Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <input> of typefile HTML element's new multiple attribute. There also is FileReader.

Multimedia

Using HTML5 audio and video
The <audio> and <video> elements embed and allow the manipulation of new multimedia content.
WebRTC
This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.
Track and WebVTT
The <track> element allows subtitles and chapters. WebVTT is a text track format.

Firefox Cannot Play Html5

2D/3D graphics AND effects

Canvas tutorial
Learn about the new <canvas> element and how to draw graphs and other objects in Firefox.
HTML5 Text API for <canvas> elements
The HTML5 text API is now supported by <canvas> elements.
WebGL
WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 <canvas> elements.
SVG
An XML-based format of vectorial images that can directly be embedded in the HTML.

Performance and Integration

Web Workers
Allows delegation of JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.
XMLHttpRequest level 2
Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind Ajax.
JIT-compiling JavaScript engines
The new generation of JavaScript engines is much more powerful, leading to greater performance.
History API
Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.
The contentEditable Attribute: Transform your website to a wiki!
HTML5 has standardized the contentEditable attribute. Learn more about this feature.
Drag and drop
The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.
Focus management in HTML
The new HTML5 activeElement and hasFocus attributes are supported.
Web-based protocol handlers
You can now register web applications as protocol handlers using the navigator.registerProtocolHandler() method.
requestAnimationFrame
Allows control of animations rendering to obtain optimal performance.
Fullscreen API
Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.
Pointer Lock API
Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.
Online and offline events
In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.

Device access

Using the Camera API
Allows using, manipulating, and storing an image from the computer's camera.
Touch events
Handlers to react to events created by a user pressing touch screens.
Using geolocation
Let browsers locate the position of the user using geolocation.
Detecting device orientation
Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).
Pointer Lock API
Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.

Styling

Mozilla Html

CSS has been extended to be able to style elements in a much more complex way. This is often referred as CSS3, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.

New background styling features
It is now possible to put shadows on elements using box-shadow, multiple backgrounds, and CSS filters. You can learn more about these by reading Advanced box effects.
More fancy borders
Not only it is now possible to use images to style borders, using border-image and its associated longhand properties, but rounded borders are supported via the border-radius property.
Animating your style
Using CSS Transitions to animate between different states or using CSS Animations to animate parts of the page without a triggering event, you can now control mobile elements on your page.
Typography improvement
Authors have better control to reach better typography. They can control text-overflow and hyphenation, but also can add a shadow to it or control more precisely its decorations. Custom typefaces can be downloaded and applied thanks to the new @font-face at-rule.
New presentational layouts
In order to improve the flexibility of designs, two new layouts have been added: the CSS multi-column layouts and CSS flexible box layout.

You are currently viewing a snapshot of www.mozilla.org taken on April 21, 2008. Most of this content ishighly out of date (some pages haven't been updated since the project began in 1998) and exists for historical purposes only. Ifthere are any pages on this archive site that you think should be added back to www.mozilla.org, please file a bug.

  • Coding
  • Testing
  • Tools

The purpose of this document is to offer some hints about some ofthe less well documented features in Mozilla which can be customizedto suit the user's preference.

Nearly all of these techniques are cross-platform. Don't be confusedby the url where this document lives in the mozilla.org document tree.

Here are some of the topics covered in this document:

Other ways of customizing Mozilla includeConfigurable Security Policies.

Some related documents are:

  • Where is my Mozilla profile located? (I want to edit the files in it!)

User CSS (changing fonts, colors and other style)

Much of Mozilla's fonts and colors are controlled via CSS (CascadingStyle Sheets).

These are set in .css files in Mozilla's chrome directories, but the user can override them with two plain text files, called userContent.css and userChrome.css. Neither userChrome.css nor userContent.cssexist by default. If you want them, you create them in the chrome subdirectory underneath the user's profile directory. userChrome.css controls CSS for the UI chrome of the Mozilla application; userContent.csscontrols CSS for content inside windows.

userChrome.css

Here are some samples of things you can change via userChrome.css:

userContent.css

Here are some samples of things you can change via userContent.css:

Making fonts more readable on Linux

Various Linux distributions have problems with fonts; in particular,Arial, used in many web pages, may map to a font that looks blockyand is smaller than the requested size.

A full discussion is inbug 46415,but an easy solution for Redhat users is this:

If you find that pages which use 'Arial' fonts are difficult to read -- for example, if this Arial textlooks smaller or harder to read than the rest of the text in this paragraph -- try the following:

and then log out of X and log back in again.

You can always undo this, if necessary, with the command:

Html

Mozilla DPI-related Font Size Issues on Unixexplains how you may be able to improve fonts by adjusting your DPI.

It's also worth readingthis excellentdiscussion on fuzzy Linux fonts.

Key Bindings

Mozilla Html

Some background theory on Mozilla key bindings

Modifier keys: The accel key

Mozilla, as a cross-platform application, has to deal with differentmodifier keys on different platforms. Windows uses the control key formost of its bindings (for example, ctrl-q quits the application);Mac uses command (cmd-q does what ctrl-q would do in Windows);Unix traditionally used the alt key because Unix apps have otherbindings on control which conflict with Mozilla's window bindings,but some Linux users with a Windows background want to use control(control is the default, on the theory that people who prefer touse alt are mostly experienced users).So in Mozilla, the modifier key used for window bindings is calledthe accel key, and it's changeable.

The accel key is modified by a pair of preferences(see the preferences section for information onhow to set hidden preferences).The key values are VK_CONTROL, VK_ALT, and VK_META, fromnsIDOMKeyEvent.idl,but unfortunately the symbols don't work (yet) in prefs files,so you have to use the numbers, which are 17 for control, 18 for alt,224 for meta (or command on Mac).

ui.key.accelKey
Integer: Sets the primary accelerator modifier key.
ui.key.menuAccessKey
Integer: Sets the menu access key.
ui.key.menuAccessKeyFocuses
Boolean: if set, pressing the menu access key will shift focus to themenu system and highlight the first menu (usually File).This causes problems on some Unix Window managers, and isoff by default on Unix.
ui.key.generalAccessKey
Integer: sets the access key for use within web pages(see bug 128452 for some discussion).

For a more concrete example, Unix users can do this to switch accelto the alt key and turn off alt menu access (like Netscape 4.x):

How Key Bindings Work in Mozilla

Key bindings in mozilla are handled through two mechanisms:XUL, andXBL.XUL bindings sometimes override XBL bindings. This is a known bug(bug 77976).

To create custom key bindings to XUL based commands,unzip the mozilla/chrome/comm.jar file, add or modifyappropriate bindings, and zip up a new comm.jar file.(Watch bug102993 for progress on making it easier to rebind XUL accelerators.)The rest of this section describes custom XBL bindings.

The default XBL bindings for Mozilla are in chrome files with nameslike '*Bindings.xml'. In particular, bindings fortext field and text areas, the browser window, and the editorwindow live in htmlBindings.xml.In addition, there are platform-specific bindings, which live in the fileplatformHTMLBindings.xml.These contain things likethe emacs-inspired text editing keys on Unix,the different scroll handling on Windows,or the different binding for redo on the Mac.

Other files containing key bindings for other windows includetreeBindings.xml, tabBindings.xml,and radioBindings.xml.I don't know where the bindings for the mail window are.I hope someone who knows sees this and updates this document.

In a normal Mozilla installation, the htmlBindings.xml andplatformHTMLBindings.xml files are in the installation directoryunder res/builtin. You can look at them there, or modify thosefiles in place to add new bindings of your own.

A typical set of key bindings looks like this (edited for brevity):

This shows two types of key handlers. Both operate on the keypressevent. (It's possible to have key handlers on keydown orkeyup, but it's not generally recommended unless you knowwhat you're doing.)

The first handler ties the command copy to accel-c.For keys representing printable ascii characters, use key=and the normal character.Accel is the primary modifier key on the current platform.By default, it's tied to control on Windows and Unix,command on Mac, but it's configurable (see above,Changing the accel key).Other allowable modifiers include control, alt, shift, andeventually will include meta (meta is not yet implemented on all platforms).Modifiers are comma-separated, e.g. modifiers='alt,shift'.

The second handler usesa keycode symbol, used for unprintable/nonascii keys.The list of key symbols is innsIDOMKeyEvent.idl(remove the DOM_VK_ prefix from the keycode name).You will notice that there are currently keycodes corresponding tomany of the printable ascii characters; using them(e.g. keycode='VK_A') is strongly discouraged,and these symbols may go away in the future.The only reason to use these symbols is in order to define a bindingon an event other than keypress (only keypress returns ascii key values),and there aren't any currently known reasons to do that.

Setting up custom key bindings: examples

Key bindings are set two different ways, depending on whether you aresetting up bindings for an XBL widget (like text fields or textareas)or for a whole window (like the browser window or the composer window).

Custom key bindings in a mozilla window

userHTMLBindings.xml seems to be broken -- seebug 201011.The following section describes how it is supposed to work:
For editor and browser windows,create a file called userHTMLBindings.xml and link itinto res/builtin wherever mozilla is installed on your machine.(Eventually we want this to livein the user's chrome directory, but that doesn't work yet;watch bug12911 for progress on this.We recommend, for now, that you keep the real user bindings file in yourchrome directory and make a symbolic link(=shortcut on Windows, alias on Mac)from there to res/builtin.)Untilbug 201011is fixed, a workaround is to add or change individual key bindingsby editing the file res/builtin/platformHTMLBindings.xmlin your Mozilla installation directory.

Here's a sample userHTMLBindings.xml:

Custom key bindings in widgets

For widgets such as text fields and text areas,create a file called myHTMLBindings.xml file and put it inthe directory res/builtin.

myHTMLBindings.xml might look something like this:

However, for widgets there's an extra step: myHTMLBindings isn'trecognized automatically, so you also have to add a line to youruser.css file (located in the chrome subdirectory of yourprofile directory; note that this means that custom bindings haveto be set separately for each profile):

Legal commands for use in custom key bindings

What commands are legal in key bindings? You can use anything that'sregistered with a command handler in the window. Here are some ofthe commands available.

nsDomWindowController commands(generally legal when there is a selection):

  • cmd_copy
  • cmd_cut
  • cmd_paste
  • cmd_selectAll
  • cmd_selectNone
  • cmd_copyLink
  • cmd_copyImageLocation
  • cmd_copyImageContents
  • cmd_scrollTop
  • cmd_scrollBottom
  • cmd_scrollPageUp
  • cmd_scrollPageDown
  • cmd_scrollLineUp
  • cmd_scrollLineDown
  • cmd_scrollLeft
  • cmd_scrollRight
  • cmd_selectCharPrevious
  • cmd_selectCharNext
  • cmd_wordPrevious
  • cmd_wordNext
  • cmd_selectWordPrevious
  • cmd_selectWordNext
  • cmd_beginLine
  • cmd_endLine
  • cmd_selectBeginLine
  • cmd_selectEndLine
  • cmd_selectLinePrevious
  • cmd_selectLineNext
  • cmd_selectPagePrevious
  • cmd_selectPageNext
  • cmd_selectMoveTop
  • cmd_selectMoveBottom

Editor commands(legal when the focus is anywhere where you can type text):

  • cmd_paste
  • cmd_pasteQuote
  • cmd_delete
  • cmd_deleteCharBackward
  • cmd_deleteCharForward
  • cmd_deleteWordBackward
  • cmd_deleteWordForward
  • cmd_deleteToBeginningOfLine
  • cmd_deleteToEndOfLine
  • cmd_delete
  • cmd_deleteCharBackward
  • cmd_deleteCharForward
  • cmd_deleteWordBackward
  • cmd_deleteWordForward
  • cmd_deleteToBeginningOfLine
  • cmd_deleteToEndOfLine
  • cmd_scrollTop
  • cmd_scrollBottom
  • cmd_moveTop
  • cmd_moveBottom
  • cmd_selectTop
  • cmd_selectBottom
  • cmd_lineNext
  • cmd_linePrevious
  • cmd_selectLineNext
  • cmd_selectLinePrevious
  • cmd_charPrevious
  • cmd_charNext
  • cmd_selectCharPrevious
  • cmd_selectCharNext
  • cmd_beginLine
  • cmd_endLine
  • cmd_selectBeginLine
  • cmd_selectEndLine
  • cmd_wordPrevious
  • cmd_wordNext
  • cmd_selectWordPrevious
  • cmd_selectWordNext
  • cmd_scrollPageUp
  • cmd_scrollPageDown
  • cmd_scrollLineUp
  • cmd_scrollLineDown
  • cmd_movePageUp
  • cmd_movePageDown
  • cmd_selectPageUp
  • cmd_selectPageDown

Composer commands.(legal when the focus is in an html editor, such as Composer).Not listed here because they haven't been tested from XBL bindings,though in theory they should work.

Mozilla Html Tags

Browser commands aren't defined in any centralized location.They are scattered over many files, including these(look for strings that start with 'cmd_' or 'Browser:'):linkToolbarOverlay.xul, navigator.js, navigatorOverlay.xul, personalToolbar.js, viewSourceOverlay.xul, contentAreaContextOverlay.xul, utilityOverlay.js, viewZoomOverlay.xul, platformCommunicatorOverlay.xul, bookmark.properties, bookmarks-temp.js, bookmarks.xml, bookmarksOverlay.xul,andbookmarksTree.js.

Mail/news commands are scattered over these files(again, look for strings beginning with 'cmd_'):abCommon.js,addressbook.xul,commandglue.js,mail3PaneWindowCommands.js, mailABOverlay.xul, mailContextMenus.js, mailEditorOverlay.xul, mailNavigatorOverlay.xul, mailOverlay.xul, mailWindowOverlay.js, mailWindowOverlay.xul, messageWindow.js, messenger.xul, platformMailnewsOverlay.xul, SearchDialog.js, MsgComposeCommands.js, messengercompose.xul,andmsgCompSMIMEOverlay.js.

If someone has time to go through the browser and mailnews commandsand make an orderly list, it would be greatly appreciated and happilyincluded in the next revision of this document.

Other Useful Preferences

First, a note: these prefs generally have no UI in the Preferences/Options dialog, and must be set differently.

Mozilla Html

UPDATE: In Mozilla 1.4 or later, it is possible to edit the preferences normally stored in user.js by using the UI displayed by entering about:config in the Location Bar; this feature didn't exist when most of this document was written. This is convenient for small edits, and takes effect immediately (no need to restart Mozilla).A menu option ([Tools]-[Advanced Preferences]) brings up a similar editor in thunderbird as well.

Normal prefs are keptin prefs.js in the user's profile directory (which is overwrittenby Mozilla every time a pref is changed), but here's a tip: prefs orother JavaScript that you don't want overwritten (e.g. comments)can be put in a file called user.js in the same directory,which is under the user's control and is read but never written by Mozilla.

One caution with using user.js: prefs set to non-default values inuser.js are also written to prefs.js, so removing or commenting outpref settings in user.js doesn't necessarily cause Mozilla to stopusing your previous pref setting. If you change user.js and aren'tgetting the results you expect, be sure to check prefs.js to make sureit isn't setting a conflicting value.

Here are some prefs that folks have found useful, and which are set in user.js / about:config.See the related documents section to find more.

I'm sure there are other useful hidden prefs.Please add them to the list so that others can benefit from them too!

UI Widget Look and Feel

A lot of Mozilla's look and feel which isn't controlled by CSSis controlled by a so-called 'Lookand Feel' object. This typically attempts to mimic the OS behavioron the current platform, with the user's settings for color, etc.,but it doesn't always succeed; or there may be cases where a userwants to configure Mozilla differently from the rest of the OS.For that reason, Look and Feel settings can be overridden usingpreferences.

Here is the current list of look and feel prefs as of the last timethis section was modified.For the most up-to-date version, the source filensXPLookAndFeel.cppis always the most current.Note: not all of these prefs actually do anything,and some work on some platforms and not others. Experiment.

Integer look-and-feel prefs

  • ui.windowTitleHeight
  • ui.windowBorderWidth
  • ui.windowBorderHeight
  • ui.widget3DBorder
  • ui.textFieldBorder
  • ui.textFieldHeight
  • ui.buttonHorizontalInsidePaddingNavQuirks
  • ui.buttonHorizontalInsidePaddingOffsetNavQuirks
  • ui.checkboxSize
  • ui.radioboxSize
  • ui.textHorizontalInsideMinimumPadding
  • ui.textVerticalInsidePadding
  • ui.textShouldUseVerticalInsidePadding
  • ui.textShouldUseHorizontalInsideMinimumPadding
  • ui.listShouldUseHorizontalInsideMinimumPadding
  • ui.listHorizontalInsideMinimumPadding
  • ui.listShouldUseVerticalInsidePadding
  • ui.listVerticalInsidePadding
  • ui.caretBlinkTime
  • ui.caretWidthTwips
  • ui.submenuDelay
  • ui.menusCanOverlapOSBar

Floating point look-and-feel prefs

  • ui.textFieldVerticalInsidePadding
  • ui.textFieldHorizontalInsidePadding
  • ui.textAreaVerticalInsidePadding
  • ui.textAreaHorizontalInsidePadding
  • ui.listVerticalInsidePadding
  • ui.listHorizontalInsidePadding
  • ui.buttonVerticalInsidePadding
  • ui.buttonHorizontalInsidePadding

Color look-and-feel prefs

(It's not clear whether these actually work.)

  • ui.windowBackground
  • ui.windowForeground
  • ui.widgetBackground
  • ui.widgetForeground
  • ui.widgetSelectBackground
  • ui.widgetSelectForeground
  • ui.widget3DHighlight
  • ui.widget3DShadow
  • ui.textBackground
  • ui.textForeground
  • ui.textSelectBackground
  • ui.textSelectForeground
  • ui.activeborder
  • ui.activecaption
  • ui.appworkspace
  • ui.background
  • ui.captiontext
  • ui.graytext
  • ui.highlight
  • ui.highlighttext
  • ui.inactiveborder
  • ui.inactivecaption
  • ui.inactivecaptiontext
  • ui.infobackground
  • ui.infotext
  • ui.menu
  • ui.menutext
  • ui.scrollbar
  • ui.threedface
  • ui.buttonface
  • ui.buttonhighlight
  • ui.threedhighlight
  • ui.buttontext
  • ui.buttonshadow
  • ui.threeddarkshadow
  • ui.threedshadow
  • ui.threedlightshadow
  • ui.window
  • ui.windowframe
  • ui.windowtext
  • ui.-moz-field




Comments are closed.