• 200713 Dec

    Generated content via the content property has been available since CSS2. However this was only available using the :before or :after pseudo-classes. In CSS3 this support has been expanded to be useable on any element, without needing to use these pseudo-classes. Unfortunately this only works in Opera 9 (and above) at the time of writing.

    I use this capability in my iTunes interface demo that I’m currently building to show off how powerful current and future web standards are for building application interfaces. This currently isn’t finished yet, and is very buggy (no min-width, missing features, no scrolling on the source list, content jumps, and no actual music support to name but a few). but you can take a sneak peak here. Due to MyOpera hot linking restrictions, you’ll need to press enter (or return) in the URL field to reload the page. This currently only works in Opera Kestrel due to missing standards support in other browsers, so download the latest weekly before trying it out.

    The content property is used here so that the buttons and the playing column on the song list can contain their text labels. This is important for accessibility and if the page is styled differently and the design requires text instead of icons. The text is then set to empty using content: ""; for the relevant element. I’m sure there is a more cross-browser way of doing this, but the site is a demo so advanced properties and technologies were chosen to showcase them. To complete the buttons, and other parts of the interface, a SVG background was used. I plan to add border-radius to make the view buttons, and the head and footer of the interface have rounded corners. The screen needs to use SVG as the border uses a gradient to add the perception of depth. I suppose a border image can be used, but I like this approach. Other CSS3 properties used include overflow-y (The Genre, Artist and Album lists, and eventually the song list table), text-shadow (many of the headings), and CSS3 selectors (the song list and the button buttons). Other advanced technology used include SVG and HTML5 (getElementsByClassName).

  • 200704 Dec

    This is a sponsored post for my employer, Onetomarket, I don’t usually do sponsored posts here, but since this could ease my work life a bit :) , I’ll make an exception.

    OnetomarketWe’re looking for a full time developer here at Onetomarket to help us in automating a lot of our work.

    If you:

    • Are a good PHP / MySQL developer.
    • Can develop an application based on different API’s on your own.
    • Have ideas on how to improve stuff and can explain them to us.
    • Would like to work with a team of young and enthusiastic internet professionals.

    Then maybe you should join us in our office in Arnhem, the Netherlands or in Barcelona, Spain. Mail me at joost ” at ” joostdevalk dot nl, and I’ll set you up for a meeting!

  • 200716 Nov

    With the latest weekly of Opera, Opera will support the HSL colour unit. With HSL added, there are only three units missing, HSLA, RGBA and flavor. I don’t really understand flavor, or why it would be useful and no browser currently supports it. I’d suspect now that Opera Kestrel supports RGB and HSL, that the two colour models with added alpha channel support will both be added at the same time. I can’t confirm when these will be added yet however. You can test out support for this here.

    I’m working on a support chart for the colour module, that just needs testing to be finalised in IE, as I currently don’t have access to IE7. This should be added to the Module Status page shortly.

  • 200712 Nov

    1. Hi John, thanks for agreeing to this interview! Could you introduce yourself a bit to our readers?

      Sure! I’ve been a software developer, running my own company Westciv, with my business partner Maxine Sherrin since 1993. We’ve been selling software online since 1995, which of course lead us to web design and development (my interest in hypertext goes back to the 1980s, and our first application was in fact a hypertext knowledge management system.

  • 200731 Oct

    The Webkit team have certainly been busy recently; since we mentioned the introduction of web fonts, they’ve also implemented transformations and animations.

    Transformations, via the -webkit-transform property, allow you to scale, rotate and skew block elements; reader Ain Tohvri has put together an impressive test suite. At the moment this property doesn’t affect layout, so behaves more like a relatively positioned element.

    Animation, which uses the -webkit-transition family of properties, allows you to set timings for fades, rotation, expansion, collapses, and more. They work in the same way as many current JavaScript libraries.

    I’m in two minds about this; while it’s always welcome to see more innovation from browser manufacturers, I can’t help but think that they’re focussing their energies in the wrong direction. As I mentioned above, all of the above effects can be replicated with JavaScript libraries, and I don’t think that CSS should be used for controlling behaviour so explicitly. Users who don’t like to see animated pages currently have the option of disabling scripts, but they won’t have the option of disabling CSS in the same way.

    Also, IMHO, there are a more pressing areas of CSS that need investigating; the Advanced Layout or Grid Layout modules are more important to the future of CSS than animations and transformations.

    On the positive side, the Webkit team have promised to release technical documents which explain the proposed spec in detail.

    If these new features float your boat, you can test them out by downloading the latest Webkit nightlies.

Hosting by: