CSS, JavaScript and XHTML Explained

Estelle Weyl’s Blog of quirks, random thoughts and funky finds discovered in day-to-day coding

 

Web Development for the iPhone: HTML, CSS & JS Support December 5, 2009

Filed under: Accessibility, Best Practices, Browsers, CSS (including hacks), Character Entities, DTD, HTML, IE7, InvoiceApp, JavaScript, Web Development, contactApp, firebug, iPhone — Estelle Weyl @ 9:27 pm

Safari and Safari for the iPhone support all HTML elements, including deprecated elements and even some proprietary elements that were never part of any W3C specifications. In addtion, Safari is supporting some HTML5 elements, even though the HTML5 specifications have not been finalized. I’ve also added the attributes that each element supports. I didn’t include id, class, style, dir & title, since all elements basically support those, but I did include element specific attributes as well as some webkit only attributes.

iPhone Support for CSS3 Selectors

All CSS Selectors are supported by Safari on the iPhone. See CSS browser support for a chartcomparison of all the selectors. Selectos include:

  • *
  • E
  • .class
  • #id
  • E F
  • E > F
  • E + F
  • E[attribute]
  • E[attribute=value]
  • E[attribute~=value]
  • E[attribute|=value]
  • :first-child
  • :link
  • :visited
  • :lang()
  • :before
  • ::before
  • :after
  • ::after
  • :first-letter
  • ::first-letter
  • :first-line
  • ::first-line
  • E[attribute^=value]
  • E[attribute$=value]
  • E[attribute*=value]
  • E ~ F
  • :root
  • :last-child
  • :only-child
  • :nth-child()
  • :nth-last-child()
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :nth-of-type()
  • :nth-last-of-type()
  • :empty
  • :not()
  • :target
  • :enabled
  • :disabled
  • :checked
  • see them all

iPhone Support for CSS3 properties

Almost all CSS2.1 properties and values are supported by Safari on the iPhone, except for some keyword values for content. Position: absolute is supported, but due to the viewport, does not appear to be supported. See the list of all CSS2.1 properties and values by browser for more details. In addition, the iPhone Safari browser supports some CSS3 type properties and values including:

Some CSS3 including the following, which will be discussed in future blog posts.

  • hsl(), rgba(), hsla() color support
  • native rounded corners (-webkit-border-radius)
  • IE box model (-webkit-box-sizing)
  • Shadows on text (text-shadow was in CSS2.0)
  • Shadows on elements (-webkit-box-shadow)
  • multiple background images
  • opacity /gradient transparency
  • @font-face web fonts
  • CSS Animation
  • Media Queries
  • namespaces

iPhone & Safari Support for HTML elements, including HTML5

includes HTML attributes for the iPhone and Safari

Below is a grid of all of the elements, including deprecated elements (at the way bottom), and HTML5 elements interspersed with HTML4 elements in alphabetical order.

<ELEMENT> Element Name Safari
Version		 iPhone Support Attributes (and Notes in italic)
Elements occuring outside the body element
<!DOCTYPE> Document Type Declaration 1.0 1.0  
<html> html 1.0 1.0 manifest (Saf. 4, iphone 2.2)
<head> document head 1.0 1.0 profile
<base /> url base for links 1.0 1.0 href, target
<link /> link 1.0 1.0 charset, href, media, rel, rev, target
<meta /> meta 1.0 1.0 content, name, http-equiv, scheme
<style> style 1.0 1.0 media, type
<script> script 1.0 1.0 charset, defer, language, src, type
<title> document title 1.0 1.0  
Elements Occuring in the <body> in HTML 4.01 and HTML5
<body> document body 1.0 1.0 bgproperties (value: fixed)
<a> Anchor 1.0 1.0 different event handlers for iPhone than Safari
accesskey, charset, href (required), hreflang, rel, rev, shape (rect/cirlce/poly), target (deprecated, but useful), type

<abbr>

 Abbreviation 1.0 1.0 title shows on hover in Safari
<acronym> acronym 1.0 1.0 title shows on hover in Safari
<address> address 1.0 1.0 italic
<area> image map area 1.0 1.0 accesskey, alt (required), coords, href (required), hreflang, shape (rect/cirlce/poly), target
<article>       HTML5
<aside>       HTML5
<audio> audio 3.1 3.0 HTML5: Similar to object, can nest sources and content to cascade until supported found.
Audio support includes AAC, M4A, MP3, Wave, AIFF , Apple Lossless, Quicktime, but not OGG;

autoplay, controls, end, loopend, loopstart, playcount, src, start
<bdo> bi-directional override 1.0 1.0  
<blockquote> long quote 1.0 1.0 cite

<br>

 break return or forced line break 1.0 1.0  
<button> push button 1.0 1.0 accesskey, disabled, type, value
<canvas> canvas drawing region 1.3 1.0 HTML5: Stroke and fill colors, rgba/hsla colors, paths, rectangles, shadows, gradients, patterns, translations, rotation and scale
<caption> caption 1.0 1.0  
<cite> citation 1.0 1.0  
<code> code 1.0 1.0  
<col /> column 1.0 1.0 char, charoff, span
<colgroup> column group 1.0 1.0 char, charoff, span
<dd> definition description 1.0 1.0  
<del> delete 1.0 1.0 datetime

<dfn>

 definition 1.0 1.0  
<div> generic block element 1.0 1.0 aria-checked, aria-level, aria-pressed, aria-valuemax, aria-valuemin, aria-valuenow, role (Safari 4.0)
<dl> definition list 1.0 1.0  
<dt> definition term 1.0 1.0  
<em> emphasized text 1.0 1.0  
<fieldset> field set 1.0 1.0  
<figure>       HTML5
<footer>       HTML5
<form> form 1.0 1.0 accept, accept-charset, action, enctype. method, target
<frame /> frame 1.0 1.0 frameborder, longdesc, marginheight, marginwidth, noresize, scrolling (yes/no/auto), src
<frameset> frameset 1.0 1.0 cols, rows
<h1-6> headers 1.0 1.0  
<header>       HTML5
<hgroup>       HTML5
<hr /> horizontal rule 1.0 1.0  
<iframe> internal frame 1.0 1.0 frameborder, longdesc, marginheight, marginwidth, scrolling (yes/no/auto), src
<img /> image 1.0 1.0 alt (required), composite, ismap, longdesc, src, usemap
<input /> input 1.0 1.0 accept, accesskey, alt, autocapitalize (iphone 1.1, values: on/off), autocomplete, autocorrect (iphone 1.1, values: on/off), autosave (safari), checked, disabled, incremental (safari), ismap, max, maxlength, min, placeholder, results, src, type, usemap, value
<ins> Insert 1.0 1.0 datetime
<kbd> keyboard 1.0 1.0  
<keygen> key generation 1.0 1.0 challenge, keytype
<label> label 1.0 1.0 accesskey, for
<legend> caption for fieldset 1.0 1.0 accesskey
<li> list item 1.0 1.0 type, value
<map> image map 1.0 1.0  
<mark>       HTML5
<meter>       HTML5
<object> object 1.0 1.0 archive, classid, codetype, data, declare, loop, type, usemap

<ol>

 ordered list 1.0 1.0 type
<optgroup> option group 1.0 1.0 disabled, label
<option> option 1.0 1.0 disabled, label, selected, value
<p> paragraph 1.0 1.0  
<param> parameter 1.0 1.0 type, value, valuetype
<pre> preformatted text 1.0 1.0  
<progress>       HTML5
<q> inline quotation 1.0 1.0 cite
<samp> sample computer code 1.0 1.0  
<select> option selector 1.0 1.0 disabled, multiple
<source>   3.1   HTML5
media
<span> span (generic non-semantic container) 1.0 1.0 aria-checked, aria-level, aria-pressed, aria-valuemax, aria-valuemin, aria-valuenow, role (Safari 4)
<strong> strong emphasized text 1.0 1.0  
<sub> subscript 1.0 1.0  
<sup> superscript 1.0 1.0  
<table> data table 1.0 1.0 frame (values: above, below, hsides, vsides, rhs, lhs, box, border), rules (values: none, groups, rows, cols, and all), summary
<tbody> table body 1.0 1.0 char, charoff
<td> table data cell 1.0 1.0 abbr, axis, char, charoff, colspan, headers, rowspan, scope
<textarea> text area 1.0 1.0 accesskey, cols, disabled, readonly, rows, wrap
<time>       HTML5
<tfoot> table footer 1.0 1.0 char, charoff
<th> table header cell 1.0 1.0 abbr, axis, char, charoff, colspan, headers, rowspan, scope
<thead> table head 1.0 1.0 char, charoff
<tr> table row 1.0 1.0 char, charoff
<ul> unordered list 1.0 1.0  
<var> variable 1.0 1.0  
<video> video 3.1 3.0 HTML5
autoplay, controls, end, loopend, loopstart, playcount, poster, src, start
Elements you should not be using, that are still valid
<tt> teletype 1.0 1.0  
<i> italic
<b> bold
<big> big font
<small> small font
<noframes> no frames 1.0 1.0  
<noscript> no script 1.0 1.0  
Elements that are deprecated or were never in a W3C spec, but you may still see on older websites
<applet> applet 1.0    
<center> center 1.0 1.0  
<dir> direction 1.0 1.0  
<embed> embed 1.0 1.0 use object instead
hidden, loop, pluginpage, pluginspage, pluginurl
<font> font 1.0 1.0  
<layer> layer 1.0 1.0  
<listing> listing 3.0 1.0 use <pre> instead. from HTML 3.2
<marquee> ,arquee 1.0 1.0 behavior, direction, loop, scrollamount, scrolldelay, truespeed
<menu> menu 1.0 1.0  
<nobr> no break 1.0 1.0  
<noembed> no embed 1.0 1.0  
<nolayer> no layer 1.0 1.0  
<plaintext> plaintext 1.0 1.0  
<strike> strikethrough 1.0 1.0 use <del>
<u> underline      
<wbr> with breaks 1.0 1.0  
<xmp> sequence of literal characters 1.o 1.0  


Safari and iPhone Event Handlers:

Event Safari iPhone Explanation
onabort 1.0 1.0 When an image element is aborted during load. (for <img /> elements)
onbeforecopy 1.3   before the element is copied.
onbeforecut 1.3   before the element is cut.
onbeforepaste 1.3   before the element has something pasted into it.
onbeforeunload 1.3   before the element is unloaded from the page.
onblur 1.0 1.0 when the element loses focus.
onchange 1.0 1.0 when the element changes its value.
onclick 1.0 1.0 when the element is clicked.
oncontextmenu 1.1   when the element is right-clicked or when the mouse button is held down long enough to generate a contextual menu.
oncopy 1.3   when the element is copied.
oncut 1.3   when the element is cut.
ondblclick 1.0   when the element is double-clicked.
ondrag 1.3   when the element is dragged.
ondragend 1.3   when the element is done being dragged.
ondragenter 1.3   when a drag has entered the element.
ondragleave 1.3   when a drag has left the element.
ondragover 1.3   when a drag is over the element.
ondragstart 1.3   when the element has started to be dragged.
ondrop 1.3   when the element is dropped.
onerror 1.0 1.0 when the element has an error in loading.
onfocus 1.0 1.0 when the element gets focus.
ongesturechange   2.0

When fingers are moved during a gesture.

(proprietary)
ongestureend   2.0

When the gesture ends (when there are 1 or 0 fingers touching the surface).

(proprietary)
ongesturestart   2.0

When two or more fingers touch the surface.

(proprietary)
oninput 1.3 1.0 when text is entered into the element.
onkeydown 1.0 1.0 when a key is pressed over the element.
onkeypress 1.0 1.0 when a key is pressed and released over the element.
onkeyup 1.0 1.0 when a key is released over the element.
onload 1.0 1.0 when the element finishes loading.
onmousedown 1.0 1.0 when the mouse button is pressed over the element.
onmousemove 1.0 1.0 when a key is moved within the element.
onmouseout 1.0 1.0 when the mouse leaves the element.
onmouseover 1.0 1.0 when the mouse is over the element.
onmouseup 1.0 1.0 when the mouse button is released over the element.
onmousewheel 1.0 1.0 when the mouse wheel button is rotated.
onorientationchange   1.1

When the orientation of the device changes.
onpaste 1.3   when the element is pasted.
onreset 1.0 1.0 when the form element is reset.
onresize 1.0 1.0 when the element is resized.
onscroll 1.2 1.0 when the element is scrolled (a text box would use this, for example).
onsearch 1.3  

when a search is performed.

(proprietary)
onselect 1.0 1.0 when text within the element is selected.
onselectstart 1.3   when the element begins to be selected. You can use this to prevent selections.
onsubmit 1.0 1.0 when the form element is submitted.
ontouchcancel   2.0

When the system cancels tracking for the touch.

(proprietary)
ontouchend   2.0

When a given event lifts from the surface.

(proprietary)
ontouchmove   2.0

When a finger for a given event moves on the surface.

(proprietary)
ontouchstart   2.0

When a finger for a given event touches the surface.

(proprietary)
onunload   2.1 when the element is unloaded from the page.

 

Other iPhone posts in my blog

 
 

Moving from Web 1.0 to Web 2.0 November 21, 2009

Filed under: AJAX, Best Practices, Browsers, Web Development, firebug — Estelle Weyl @ 9:22 pm

Moving from Web 1.0 to Web 2.0: Skills you need to know to stay relevant.

Moving from Web 1.0 to Web 2.0View more from estellevw.

Here is the audio.

 
 

More CSS, XHTML and JavaScript at Community MX September 9, 2009

Filed under: CSS (including hacks), JavaScript, Web Development, firebug — Estelle Weyl @ 12:55 pm

I have been somewhat prolific as a technical writer for Community MX over the past 12 months. If you are interested in any of the articles, they are listed below. I will add new articles to this list as they get published (and as I get around to it). While Community MX is a subscription based website, you can get a one week free trial, and several of the articles (as noted below) are accessible without a subscription, and without logging in.


Most articles are part of a series. These four random ones are standalone:

There is a lot of interest in my IE8 post. It was a basic post, and I couldn’t get my butt in gear to write more. By writing for community MX, I kind of forced myself to research IE8. This seried has just begun… there will be a bunch more.

Based on my blog post on all XHTML elements, their attributes and their semantic meaning that I was wrote for this blog, I wrote an 18 part series going into each element in greater detail. The Object and input element (free) ones are the most intersting. The table of XHTML elements (also free) is the most useful:


While simple, the Three Column layout series teaches the reader how to make a three column layout, with the columns being able to be rearranged into any order without touching the HTML source code. If you don’t know how to make a CSS 3-column layouts, this series is definitely worth the read.

My firebug tutorial has already had over 100,000 views. Obviously there is interest. My Community MX Firebug series is only half way done, but as you can imaging, it’s going deeper into this most excellent tool. Similar to the IE8 series, I am still in the middle of this series. There should be several more.

The EMail Setup series is especially useful for anyone using CPanel or anyone trying to manage several email to and from accounts:

The CSS for Absolute Beginners series is very basic, and likely to simplistic for readers of this blog: as noted, it’s fore beginners. However, if you do want the basics, I am including the list of articles for those of you who are interested:

Don’t worry. Obviously I am still writing here too. Just wanted to share these in case anyone is interested.

 
 

Browser Testing: 3 tools you can’t live without December 1, 2008

Filed under: Browsers, IE7, Web Development, firebug — Estelle Weyl @ 9:16 am

Firefox 2 and Firefox 3 don’t render the same. Also, Firebug 1.0 is less buggy than Firebug 1.2. So, at this point, it really is necessary to run multiple versions of Firefox in your development environment, similar to how most of us have been running IE6 and IE7 on the same machine for years.  What? You haven’t been running IE6 and IE7 on the same machine? Didn’t know it was possible? Here are three tools or links that you need to check out if you do any cross browser testing (which I hope you do).

Here are some links to help you out:

  • Multiple Firefox: I have both FF2 and FF3 installed on my laptop. I develop in FF2 with Firebug 1.0, and have FF3 with FB1.2 for testing. Instructions for running multiple Firefox apps on the same box can be found here: http://jeroencoumans.nl/journal/multiple-firefox-versions.
  • IE6 on Mac/ IE6 on Linux: I have a mac, so for quick IE6 checks I have IE6 installed in my Mac OSX. This isn’t a perfect rendition of IE6, but it’s good enough for quick tests, not final QA. To install IE6 on your mac, go to http://www.kronenberg.org/ies4osx/
    . I also sometimes work on Ubuntu 9.04 (a linux box), and have IE6 for Linux installed.
  • Multiple IEs: To install IE7 and IE6 on your PC, or in your Parallels or VMWare Windows environment on your mac, you must install IE7 as your main IE application, and then you can go to http://tredosoft.com/Multiple_IE to install earlier versions - IE6, and even earlier.It does not support IE7, which is why IE7 (or IE8) needs to be a regular installation. Multiple IEs does NOT work on Vista.

Unfortunately there are a few quirks with running MultipleIE and IE6 on Mac- but I would say MultipleIE matches the crappiness of IE6 at about 99.9%.

These are links that I am always forwarding to people, so I figured I would finally blog them. Cheers!

-Estelle Weyl

 
 

Website Optimization: YSlow Tutorial July 26, 2007

Filed under: Best Practices, Web Development, firebug — Estelle Weyl @ 6:09 pm

Introduction to YSlow: optimizing your actual and perceived download speed

Two days ago Yahoo! officially released their Firebug extionsion "YSlow". YSlow is a tool that coherently presents factors effecting actual and perceived download speed. Many of the features available thru YSlow are avaible thru the Firebug NET tab, and digging thru other Firebug panes. What makes YSlow such an effective tool is that it displays those features in a understandable and actionable way.

Installing Yahoo! YSlow

YSlow is a page analysis tool that helps you optimize your web pages for better perceived and actualy download speed. YSlow is an extension to Firebug which is a FireFox plug-in (Yes, it’s an extension to an extension). You must download and install Firebug: If you need instructions, I wrote a introduction to Firebug tutorial last month.

To install YSlow, download YSlow from the Mozilla website. Click on the "Install Now" button, then on "Install". You will need to restart Firefox for both the YSlow and the Firebug add-ons to work, so you might as well download and install both before restarting FireFox.

Turning YSlow on

While the YSlow icon will always be present in the right of the status bar, it is not actively running and analying all your page visits all of the time. To get YSlow to always be active, righ click on the word YSlow in the status and choose "Autorun" from the popup menu.

AutoRun: Having YSlow on all the time

You likely don’t want YSlow running all the time. The benefit of having YSlow on autorun is that you:

  1. Total download weight and time (to the right of the YSlow icon in the status bar),
  2. Faster access to YSlow features.

The downside is that having YSlow on all the time

  1. Faster perceived download time
  2. Uses RAM

My recommendation is to only have it on autorun if you are actively working on optimizing; and then turn it off the rest of the time.

Turning YSlow on Selectively

Unless you have selected autorun, you have to activate YSlow by opening up Firebug and clicking on the YSlow Tab, which brings you to a page instructing you how to activate YSlow by selecting which type of analysis you’re interested in. Select Performance, Stats or Component. Selecting from the Tools or Help menu will not analyze your page. For example, if you select JSLine from the Tools menu, you get results for the most recently analyzed page. The Tools drop down menu may actually be greyed out to start.

YSlow Screen Shot.

Using YSlow

YSlow Performance

YSlow gives you a grades for each of 13 areas of download speed plus an over grade with total score. You get graded on the number of HTTP requests made, using expires headers, gzipping files, having CSS at the top, javascript at the bottom, not using CSS expressions, minimizing the number of domains hit for page componenents, minifying javascripts, avoiding redirects, removing duplicate javascript functions, turning off eTags and having static files served from Content Distribution Networks (CDN). I will go over most of these in my blog post on improving perceived and actual download speed. Not included in the list is reducing the number of HTTP requests even further for a home page only by using inpage CSS and JavaScript.

More information: If you don’t get an A on any of the parameters, simply click on the arrow to the right of the parameter, and more information will appear. You can also click on the "expand all" link in the upper right which will expand the sections not earning an A with an explanation of what the failings were. No matter your grade, if you click on the name of the parameter, you will be redirected to the Yahoo Developer Network for details on what the parameter means and how it effects your perceived and/or actual download speed.

Changing Grades: If you don’t like the grading system, you can configure YSlow to weight things differently by altering the javascript file. Search for yslow.js on your computer. Mine was located at c:\documents and settings\estelle\Application Data\Mozilla\Firefox\Profiles\extensions\yslow@yahoo-inc.com\default\preferences\.

YSlow Stats Tab

The Stats tab lets gives provides you with 3 bits of information:

  • Page downloads when Cache is empty
    This includes the number of HTTP requests and file weight of all the HTML, JavaScript, CSS files and images, includeing images called from the CSS, downloaded to render the page. A few things to note about this value: if your page is set as the home page for someone, IE pretends the cache is empty and downloads everything, irrespective of expires headers. If you click on the "(est)" next to a cache parameter, YSlow provides you with an estimate as to how your speed can improve.
  • Page downloads when Cache is full
    This includes only the number of HTTP requests and file weight for the files that do not have a future expires date and are not cached. The total includes thell the HTML, JavaScript, CSS files and images not cached.
  • Cookies

YSlow Components Tab

The Components tab describes in more detail each of the files that make up the sum total in "Page downloads when Cache is empty" described above. For each HTML (or PHP, or whatever the main file is), CSS, JavaScript, CSS image, regular image, etc., YSlow grabs the header information and provides the following in human readable form:

  • File Type
  • File URL
  • Expires header date, if any, or today’s date if not explicitly set
  • Gzip status
  • Server response time
  • Un-g-zipped file size
  • E-Tag

If you want more information, clicking on the magnifying glass next to the URL displays the headers (this is also available thru Firebug’s NET tab). If you click on the actual URL, it will open up that URL — be it an HTML file, a CSS file, an Image — in a new browser window.

YSlow Tools Tab

The Tools tab provides "links" to 4 reports: JSLint, JS, CSS, Printable Version

  • JSLint:
    I am not 100% sure, but I think JSLint explains errors that would need to be rectified before passing your JavaScript file thru Crockford’s JSLint minification tool. For JSLint to work, you have to include components in your Javascript that would otherwise be optional in the loosely typed language, such as ending your lines with a semi-colon. The JSLint response warns you of these necessary edits..
  • JS:
    Prints to the browser all the JavaScript that is included in the currently analyzed page
  • CSS:
    Prints to the browser all the CSS that is included in the currently analyzed page. This is similar to the Firefox Developer Toolbar. I prefer the toolbar version since it has the functionality of allowing you to close out individual CSS sources.
  • Printable Version:
    While this may seem like just a printable version of the performance tab, this page is actually very useful. It delineates all the things you can do to score a 100% on the Performance section of YSlow. It basically explains the performance tab in detail — what you would see if you clicked on the "expand all" link in the performance tab.

Missing Features

Dynamic Downloads not captured:
YSlow isn’t perfect. It does not display properties of elements brought into the page dynamically such as multimedia, javascript rendered images, componenents rendered from XMLHTTPRequests, or any DOM changes. You can use Firebug’s NET tab to garner that data. It seems that YSlow takes a look at the page being analyzed, and does an XMLHTTPRequest to get download time information. Firebug, on the other hand, collects and stores the information for each request. For true web page weight, Firebug is more precise. For actual download time, Firebug is also more precise. For perceived download time, however, YSlow gives you a good estimate.

 
 

Firebug Tutorial: Introduction to Firebug June 28, 2007

Filed under: Accessibility, Browsers, Character Entities, JavaScript, Web Development, firebug — Estelle Weyl @ 9:58 am

A Firebug Tutorial

This is an overview of the plugin, not a detailed explanation of all of it’s amazing features. This should be enough to get you started.


Installing Firebug

Firebug works with Firefox. There is a product called Firebug lite which you can include in a file via a javascript call in your file, for use in non-Firefox browsers, but I am not covering Firebug lite in this tutorial/overview.

To install Firebug visit the Firebug download page. Click on the huge orange button half-way down the page on the right hand side. You can also download it from Mozilla’s FireFox Add-ons site. Install it. Restart FireFox, and you’re good to go.

If you’ve already installed it, get the latest version! To update your extension, in Firefox select Tools > Add-ons. Then click on the button in the left hand bottom corner that reads “Find Updates”.

Opening and Closing Firebug

Keyboard and Mouse Shortcuts for Firebug can be found at the Firebug Website. The three sets I use most often include:

  • Open Firebug: F12 or clicking on the green check mark at the right of the right of the browser status bar.
  • Close Firebug: 12 or clicking on the green check mark at the right of the right of the browser status bar or clicking on the red x in the upper right hand corner of the firebug window.
  • Undock Firebug into its own window: click on the red up arrow in the top right corner of the firebug window or Ctrl+F12 / ⌘+F12.

Firebug settings

  • Set Firebug to always undock in a separate window: open the firebug console. right click on the firebug in the upper left, select “options”, then select “Always Open in New Window”
  • Increase/Decrease font size: open the firebug console. right click on the firebug in the upper left, select “Text Size”. The font changes are really slight, but it does work.
  • Set Firebug to only work for specified sites: Start by disabling Firebug by right clicking on the green check mark and selecting “disable Firebug”. Then right click on the greyed out icon and add the domains you want to enable Firebug on.

Firebug Window Overview

  • Console Tab: Contains command line javascript, shows javascript error message log, can enter JavaSript commands after the >>> at the bottom
  • HTML Tab: Shows HTML as an indented hierachy of DOM nodes, which you can open and close to see or hide child nodes.
  • CSS Tab: CSS inspector, view all loaded style sheets, modify styles on the fly. See list of styles sheets and select one to view from this pane by clicking on the drop down list on the top of Firebug window, to the right of “Edit”.
  • Script Tab: Shows the javascript files and the calling document. See list of included JavaScript files and select one to view from this pane by clicking on the drop down list on the top of Firebug window, to the right of “Inspect”. Set breakpoints and conditions underwhich break points appear.
  • DOM Tab: Shows all the page objects and properties of the window. As variables are properties of the window object, Firebug displays all JavaScript variables and their values.
  • Net Tab: Shows all the downloads, how long each resource took to download, the HTTP request headers and server response sent for each resource. The XHR tab is useful for AJAX debugging.

Edit your document on-the-fly.

You can change text nodes by selecting the text node with the “inspect” function and then clicking on the text node in the HTML panel.

Firebug is both an inspector and an editor. All objects in the HTML, CSS and JavaScript files can be edited with a single or double click. As you type, the changes are immediately applied in the browser window providing instant feedback. The DOM inspector allows for full in-place editing of your document structure, not just text nodes. Simply click on the “edit” tab next to the “inspect tab”, and the left panel becomes a black and white text editor. In the CSS panel, Firebug autocompletes as you type. In the DOM inspector, Firebug autocompletes property names when you hit the Tab key.

Inspecting and troubleshooting CSS using Firebug

DOM inspector’s CSS tab reveals all applicable CSS rules for elements, including properties inherited from ancestor elements, lets you toggle on/off and edit individual style declarations and add new CSS rules.

Firebug hides rules that Firefox ignores: For example, Firebug will hide hacks targeting other browsers and CSS3 selectors that it doesn’t support. So, it will both hide intentional CSS filters, such as _height:25px; (the underscore is an IE6 hack) and p:first-of-type {color: #ff0000;} (a CSS3 :first-of-type pseudo-class selector currently supported only by Safari 3). This means, however, that if the reason your page isn’t looking the way you anticipated is because of a typo, you will need to use the developer toolbar to show all CSS and find your error.

Firebug shows all selectors impacting the selected element: When you inspect an element or node, Firebug displays the entire cascade of all the CSS attributes impacting that element, including attributes that were overwritten in the cascade. The right panel displays the selectors and attributes impacting the element in order of the cascade.

Firebug allows you to turn off styles impacting an element within the CSS: When you turn off an attribute, if that attribute value was overriding a different value in the cascade, the formerly crossed out value will become active so you can test what the page would look like if the attribute value were removed. To “turn off” an attribute, click to the left of the attribute in the right hand panel. A red “do not” icon do not will appear, and the attribute will be grayed out or disappear, and the strike-through of the new attribute value effecting the element from the cascade will be removed. You can toggle the attribute value back on by clicking on the do not. However, if the attribute has “disappeared” since it’s been overwritten, you have to re-inspect the element to see the missing attribute and toggle it back on.

Firebug allows you to edit attributes and attribute values: To change an attribute or the value of an attribute, click on the term or value, and edit it. Pretty simple! The effect of the change will be immediately visible in the browser window.


One of the best components of this feature is figuring out exact positioning, padding and margins. Firebug provides wonderful support for changing numeric values. Simply click on the numeric value you want to change and change it with the numbers on your keyboard, or click on the up or down arrow to increment or decrement the value by one.

Firebug allows you to add new attribute / value pairs to existing selectors: To add an attribute to a selector, double click on the selector. An input box with intelli-sense will appear. Hitting tab will bring you to a value text input box.

Firebug allows you to easily inspect ancestor elements: To the right of the keyterm “inspect”, Firebug displays all the ancestors of the currently selected element. To inspect an ancestor, simply click on it in the list. The left and right panels will both change to display the properties of the newly selected element.

The Box Model: Evaluating Height, Width, Padding, Border and Margin

When you inspect an element, the left panel displays the HTML, and the right panel shows the CSS. Next to the CSS label at the top of the right panel is a tab labeled “Layout”. This Layout tab illustrates the CSS box model as it applies to the selected element. To view the height or width of any other element on the page, simply select “inspect” while this window is open and hover your mouse over the inline or block level element you wish to inspect.

Evaluating download speed

The Net tab graphs the request times for all http requests that make up a page. Network monitoring must be turned on for the Net Tab to work, but it’s on by default (the options drop down on the right hand side of the firebug panel allows you to toggle this feature off and on). This is a handy way to test (and prove) that putting your javascript files at the bottom of your files, especially for javascript heavy pages, improves perceived download time. Total download time will be the same, but since browsers stop loading pages when they hit scripts until the scripts have been downloaded, the page will appear to download faster, which is a better user experience (see list item 5).

By left clicking on the plus sign to the left of the file name, Firebug displays the HTTP headers of each file that was downloaded.

In the 1.0..5 version of Firebug you can see how long it takes for HTML files only to be downloaded, CSS files only, images only, etc., or all files. YSlow, Yahoo!s performance tool, should be available as a plug in for Firefox by the end of the summer. In the meantime, Firebug’s Net tab is the next best thing.

JavaScript

The DOM inspector provides information about all the properties of all the objects in your document. The coolest feature of Firebug is that while making dynamic updates to your page will not alter the content visible in the “view source” feature of the browser, it will update the content in the Firebug panels. So, dynamically created content is visible not only in the browser (as it should be), but the generated code is inspectible (is that a word?) in Firebug.

The JavaScript profiler reports on the execution times of your JavaScript functions, so you can pin down performance JavaScript components that are slowing down your pages or javascript applications. To view the profiler, the submenu should be on “console”, and click on “Profile” in the top menu (the order of the tabs is “Inspect |Clear | Profile”). Firebug lists all the functions that were called and the time spent for each function call. You can target what function you want Firebug to profile by adding console.profile([title]) to the start of the section your want profiled, and console.profileEnd() at the end.

The command line at the bottom of the console tab, which starts with “>>>” accepts commands in JavaScript. The results or your javascript command, if there are any, are then displayed in the console. There is a Firebug Command Line API that is worth taking a look at.

AJAX

As mentioned above, Firebug captures dynamic content and other DOM changes made to your webpage. If you take as an example the sample file created in my tutorial Beginning AJAX using the YUI Library, if you check the view source after calling the function (click on the link) via the browser’s functionality, you’ll only get the link that calls the AJAX function. If you view the source via Firebug, Firebug reflects changes made to the DOM, and includes the “Hello World” content. This is one of the core strengths of Firebug: without Firebug, AJAX requests and responses are invisible. With it, you can view the sent and received text as well as the headers that went along with it. You can also monitor how long it took for each request/response with the Net tab.

You can see XHR response by clicking on the Net tab, and then the XHR tab in the sub navigation that opens up when you are in the Net view. While the All Net tab is like yslow, the XHR focuses on the AJAX only. If you click on the plus sign to the left of the response file, you can see both the headers and the content of the response.

Details of the Net tab’s XHR sub-tab

When a request is made to the server via a XMLHttpRequest object, Firebug logs the POST or GET request, the response headers and the raw text of the response. To view this data, click on the Net Tab’s XHR sub-tab. This will show a list of the calls and the time it took for the response. To the left of the request click on the + or simply click on the request (it is a link). Three tabs will appear in the case of a GET request, four for a POST:

  • Params: Displays the name/value pairs of the request URL
  • Headers: Displays requestion and response headers
  • Response: Shows the actual data received from the server as it was received.
  • Post. Displays the data sent to the server from a POST request (tab only shows for POST requests, not GET requests).

These four tabs are useful in development and debugging. Check the POST and Params tabs to ensure your request are being correctly posted. Check the Response to determine the format of the response and ensure that your JavaScripts are written to handle that formatting. If you don’t control the feed that you are fetching, you can copy and paste the response into a text editor, format it so it’s human legible, and work that way.

Debugging AJAX and other JavaScripts

To debug AJAX, it’s similar to how you debug JavaScript above, except for the console.log is even more helpful, since you are reloading components of the page and not the whole page (reloading the whole page resets the HTML, JS and CSS to what is defined in the static files). Firebug provides the console object that has several methods usable for logging. Properties of console object include console.debug, console.info, console.warning, and console.error. When one of these methods produces an output, Firebug links to the line causing the output so you can quickly find the responsible code.

One of the other ways to debug is to set breakpoints (yay! no more alerts!). The “Script” tab allows you to pause execution on any line. Clicking on the line number in the script tab sets a breakpoint. You can make that breakpoint conditional by setting a statement that if true will trigger the breakpoint. Simply right click to the left of the line number to set an expression (where you had left clicked to set the breakpoint) or right click on the line and select “Edit breakpoint condition”: “this breakpoint will stop only if this expression is true” is the message you should see. You can contine, step over, step into or step out of a line. The right panel has a “watch” tab where you can inspect the value of local variables (click on objects to view their properties). Hovering over an object in the script activates a tooltip that displays the object’s properties.

Problems with Firebug

Webpages never finish loading: likely because there is a javascript error in the page, and Firebug has put a breakpoint at the error and halted the script.

Firebug crashes my Firefox some of the heavier Web 2.0 sites that I visit, like Netflix and Yahoo! Mail. Firebug keeps track of all the errors. This can use up a lot of memory and crash the browser. Also, likely irrelevant, but SoThink SWF makes Firebug crash FF.

Solutions:

Disable Firebug for a particular domain: Unless you develop for a site that crashes your browser, you can simply turn off Firebug for a domain/subdomain.. To turn off Firebug, right click on the green check mark (or red x if there are errors) in the status bar and select “disable firebug for thisserversname.com”.

Disable Network Monitoring: Sometimes disabling Firebug for a particular domain is not an option . For example, I code a small part of a much larger internet application which throws errors and therefore never finishes loading, but disabling Firebug is not an option since I am working on that page.. To resolve this issue, click on the Net tab. When on that tab, to the far right you will see “options”. Select “Disable Network Monitoring”. Since I have selected that, I no longer crash my Firefox, and can work on the website I need to work on. (I did update my Firebug, and that might have helped the issue too. Not sure.)

Update Your Version of Firebug: Firebug is continuously being updated and bugs are being fixed. To update to the latest version of Firebug, in your FF browser window select Tools > Add-Ons > Find Updates, and FF will check for and install upon request, the most recent release of Firebug and all of your other FF extensions.

Notes:

  • Firebug 1.05 and earlier do not work with Firefox 3.0, currently in beta
  • Joe Hewitt developed Firebug and offers it for free. Consider giving him some love in the form of money.
  • For more in depth view, view Joe Hewitt: Welcome to Firebug which I included below. The above tutorial is more of what you definitely need to know. The video covers the more advanced features. Take a look at it if my overview doesn’t provide enough info, especially in the area of JS debugging and XHR debugging.