Category Archives: CSS

A Simple Solution to iOS Scrolling

One of the most common metaphors for iOS applications, and especially iPad applications, is an independently scrolled window pane. In the iPad’s mail application, for example, you can easily scroll the message list and the current message itself independent of one another. This is such a common thing on the iPad that transferring it over to iOS web applications seems like a trivial matter.

Except it’s not. The iPad doesn’t support this feature, likely the most common UI metaphor on the device, in an easy way for Mobile Safari applications. There are some solutions (including Pastry Kit and Sencha Touch), but they all solve the problem a very similar and kludgey way: overwrite the default scrolling behavior with one that uses CSS transformations and JavaScript to move the elements down the window pane. Even Google’s iPad GMail interface, one of the best implementations of this in Mobile Safari, is using this strategy. Implementing this requires a large amount of effort in most cases even with the support of a JavaScript framework behind the scenes.

A simple solution, however, would be to simply change the iPad’s overflow support. In most modern browsers, setting a static height / width for a div element and adding the overflow: scroll; property in CSS will result in an independently scrollable portion of the page should content exceed the height / width boundaries. The iPad does support scrolling in these circumstances, but it requires using two fingers and is often slow and unresponsive. Most Android browsers (including, as of the time of this writing, the Galaxy Tab) don’t support this type of scrolling at all.

Changing the device’s behavior to automatically add the native style tweening, momentum, and scrollbars to these elements would allow UI developers to very easily add intuitive independently scrolling sections to their iPad web applications. Even better, this solution graceful degrades as desktop browsers would automatically add scrollbars to the content making it easy to understand that additional data is available.

UPDATE: Looks like this feature is making its way into iOS 5! http://functionsource.com/post/scrollability-can-hopefully-become-a-shim

Grails Less CSS Plugin

Recently, the LessCSS project was ported from Ruby to Node (JavaScript). This makes my implementation of the plugin obsolete. Please checkout David Marquis’ Blog for a much nicer Rhino implementation. I’m keeping this post here for historical purposes.

If you use CSS and think it might be one of the most needlessly complex parts of web development (as I do), Less CSS might be worth taking a look at. It’s been described as “CSS 4 from the futurez!” and, after using it on a few small projects, I really like it.

While some really cool projects exist to help integrate Less into your specific platform (check out .less for .NET projects, less.app for a great OS X front end app, and Less for Java as just a handful of examples), there didn’t exist anything yet for Grails.

Enter the Grails Less CSS plugin! As of right now, the plugin is in a very alpha state and works as follows:

  • Install the plugin (see below).
  • Place your .less files in the webapp/css directory (where your .css files would go)
  • Reference style sheets in your HTML as if the less files had a .css extension (e.g. a main.less file would be in your header as main.css).
  • Whenever a .less file changes, the associated .css file will be refreshed as well.

The Good

  • The plugin uses the Asual (see above) Java library which, in turn, uses JRuby to run the original Ruby project. The good thing about this approach is that this plugin can easily keep pace with the Ruby project and incorporate the latest features and bug fixes.
  • There is no longer any need to checkin .css files to your source repository as these can be considered “scratch” files that are easily regenerated from the .less source (similar to .groovy and .class files: the .groovy file is the one that really matters).

The Bad

  • Currently, the plugin pulls the entire JRuby library into the project. This adds some resource overhead and, although it’s fast once it gets running, it adds an approximate 3 second load time to the project.
  • There is no differentiation (yet) between development and production environments. As such, the plugin continues to run as part of the application in, say, a WAR deployed on Tomcat even though there is (probably) no reason for it to. I’m working on fixing this in a future update.
  • Less files that fail to properly compile generate really nasty stack traces and crash Grails. The messages are accurate and help diagnose the error, but it would be better to handle the exceptions in a better way (this is coming soon as well).

Installing

The plugin hasn’t yet been approved as a bonafide Grails plugin by the plugin community. Until then, visit the Github repository and download the grails-lesscss-0.1.zip (or whatever the latest version is) file. After it is downloaded, type

grails install-plugin [plugin filename.zip]

This is a work in progress, so feel free to give me some feedback and check out the source on Github!