Monthly Archives: September 2008

HTML5 and CSS3 Browser Support

Cool Sites, CSS
Jul28

I just stumbled on a cool site – html5readiness.com. The site displays a break down of browser support for HTML5 and CSS3 (Canvas, SVG, GeoLocation, Transforms, Border Radius, etc). The browsers included for 2010 are IE 7, IE 8, IE 9, FireFox 3.5, FireFox 3.7, Opera 10.50, Safari 4, and Chrome 4.

I wasn’t surprised to find that Safari and Chrome have the most HTML5 and CSS3 support (since both use the webkit engine). Firefox support for HTML5 and CSS3 is not far behind Safari and Chrome.

I was not surprised to find that Internet Explorer lags far behind (although IE 9 adds support for SVG, Video, SVG as Background, Media Queries).

I was very surprised to find that HTML5 and CSS3 support in Opera 10.50 rivals that of FireFox.

Anyway, if you ever need to know what is supported by each browser, take a look at html5readiness.com.

P.S. I wonder why Safari and Opera aren’t used as much as Firefox, Chrome and IE. Safari can be used with a Mac or PC, but appears to be used primarily by Mac users. Chrome has been around since 2008 and already has 5 times as many users as Safari (see browser stats).

Share

gpDojoGallery: A Dojo Photo Gallery Widget

Ajax, Dojo, dojo-widgets
Jul27

I added a new photo gallery to galleries.digitalvilliage.com. I created the Photo Gallery widget using Dojo Toolkit about a year ago for a project that I have been working on. I recently updated to give it more options than I needed for my project.

The gpDojoGallery widget can be set to display thumbnail images in the center, left, right, top, or bottom of the page. When the thumbnails are set to the center position, the dojox.image.Lightbox module can be used to display the large image.

The widget receives a JSON object that contains the image information (location, width, height, etc). I store the information using dojo.data.ItemFileReadStore, so it was easy to add a pics-per-page option just be limiting the number items to be read within the store.

?View Code JAVASCRIPT
if (this.picsPerPage) {
	request = imageStore.fetch({onBegin: startFetch, onError: fetchFailed, onComplete: initGallery, start: 0, count: this.picsPerPage});
}  else {
	request = imageStore.fetch({onBegin: startFetch, onError: fetchFailed, onComplete: initGallery});
}

The gpDojoGallery widget was fairly simple to create, but it has enough options to be a very versatile photo gallery. You can view demos on my digitalvilliage.com site. The widget (and demos) can be downloaded from GitHub.

Share

gpDojoPortfolio: A Dojo Portfolio Widget

Ajax, Dojo, dojo-widgets
Jul20

I’m working on a new project that uses Dojo Toolkit and DJango. I haven’t started on the DJango back-end yet because I first need to create a few Dojo widgets. The first widget that I created is gpDojoPortfolio. As the name suggests, this widget will display a portfolio. Each item in the portfolio slides into view using the dojo.fx module.

Continue reading →

Share

ui.imFeedBack – A JQuery UI Feedback Widget

Ajax, JQuery, UI Widgets
Jul05

When the web20.digitalvilliage site was nearly complete, I wanted to add a contact form. I like the feedback tabs that I have been seeing on websites recently (displayed on the right or left of the page), so I decided to build one. I was already using a JQuery UI theme on the site, so I decided to create a JQuery UI widget so that the color scheme of the feedback form would match the color scheme on the site.

This ui.imFeedBack widget is extremely versatile. The feedback tab can be placed on the right or left and can even be displayed as a dialog.

Continue reading →

Share