browser

Speaking of Firefox 4, I’ve gotten a few comments on my post about Firefox 4 app tabs, and while trying to respond, I discovered another new ‘feature’ in Firefox 4, support for HTML 5 input types. Inadvertently I was using the same input for my URL field as my email. I had created some custom formcontrols for Habari’s FormUI templates for HTML5 support, which had the right input types, so at first I didn’t see why I was getting the error. However with help in Habari’s IRC channel from Mike Lietz, he pointed out in my theme.php file I was calling the email formcontrol for URL as well as Email. Fixing that, I was able to submit my comment.

Firefox4 HTML 5 input type email error A quick Google search turned up that , indeed, Gecko 2 (Firefox 4) supports HTML5 input types. I had also checked in Chrome 10.x and it too gave the same error, which means it also supports the input types. IE 9 nor Safari 5 have support for the input types (Mac, ironically the Windows version seems to support it). Finally, Opera 10 has supported this for a while, as well as iOS Safari.

So what does it all mean? Why use it if it’s not really supported in all major browsers? Well, first, using type="email" or type="url" won’t break anything. Browsers that don’t support it treat it like a text input. But those that do, well, as you can see in the screenshot, you get instant validation without any heavy lifting by your site. As support grows, you won’t have to update any code. iOS Safari support includes providing a different default keyboard layout (the ampersand and .com keys are on the home screen). I can’t speak to Android’s browser, though I’d suspect it has similar behavior. Really there’s no reason not to start using them.

Additional Resources:

I’ve blogged about my browser issues before, but I just have to share how cool I think FireFox 2 is. Now with built in spell checker (just right click a word, and suggestions are at the top of the menu, perfect for blogging and email), it’s quick, totally extensible , and just makes working on line so much more productive. A few extensions are a must for me, so I had to wait a few weeks for them to be released before I could start testing it, but the wait was well worth it.
First was the GrApple theme. I loathe the candy-ish default theme, and was quite pleased when theme makers started adding Mac Os-esque brushed metal themes. I haven’t taken to the newer Apple look, ie, iTunes 7, so the more subtle brushed metal look of GrApple suites me fine, especially the small buttons in the nav bar.
Then are the extensions.
Some plugins were FF 2.0 ready, such as the indispensable Web Developer. I’m a big fan of using tabs, and one extension was borking my tabs. Uninstalling the Tabbed Browser Preferences solved the issues. A better tab manager, Tab Mix Plus, fixes issues with windows opening up instead of tabs (note, I downloaded a RC from the developer site, the new release should up on mozilla in the next day or so).
Another great developer tool is MeasureIt, which allows you drag across the screen a box that measures in pixels. When working out kinks in spacing, this is invaluable. Also helpful is ViewSourceWith, which lets you choose an application (like a text editor) to open a page source with. Makes finding which line number an error is a snap. Finally, Colorzilla allows you to grab hex colors from a site, nice to have if you are trying to recreate an existing site, or simply like a color scheme of a site.
A few other extensions that I recently discovered are CSSViewer, which once turned on, allows you scroll around a page, and it shows the CSS for that element, and OPML Support, which allows you to import/export your FF bookmarks in an OPML format, which for WordPress users, is nice, as you can import those files into your Blogroll/Links Manager, not to mention RSS reader.
In addition to those, Google’s Browser sync and toolbar, CoComment’s extension and AdBlock Plus, make general browsing a snap.
There are literally thousands of extensions out there, with new ones being added all the time. If you’ve discovered any other can’t-live-without extensions, I’d love to hear about them.

Tag: browser

Firefox 4 HTML5 Forms – Input Types

FireFox 2 A Web Developers Friend