CSS3

I’m working on the CSS3 Backgrounds and Borders module with Bert Bos, and I’d like to start a new Q&A series because I think we need some help: This time I’ll ask the questions, and you give me answers. Ok? :) Since the CSS Working Group Blog currently doesn’t accept comments, CSS3.info has kindly allowed me to cross-post so you can write back. The first issue is a complicated one, so I’ll start with an easy question. The topic is drop shadows.

In the latest public working draft we have a box-shadow property. The point is, obviously, to be able to draw a drop-shadow for a CSS box. It starts to get complicated once you ask “what happens when there are semi-transparent parts of the box?” At first we figured ‘box-shadow’ should just draw the shadow as if the box was opaque. Then Dave Hyatt, who had started implementing this, started questioning that logic. We’ve got proposals for a ‘border-shadow’ property to shadow just the border and a ‘background-shadow’ property to shadow just the background color (but not the image?), etc. We could also just “shadow everything drawn in this element”. This all sounds rather complicated to me so I want to step back and ask:

What do you, the web designers of the world, want to do with shadows? What’s the end result you want to get?

Show me. Post a few links to stuff from your portfolio that uses anything beyond pure text shadows, even if it’s all done with pure Photoshop(/Painter/GIMP) graphics. Draw (or explain) a picture of what you want to achieve. Then maybe we can figure out how best to make it happen in CSS.

This morning while going through my mail, I read that Opera has filed an antitrust complaint against Microsoft with the European Union, to force Microsoft to:

1. “unbundle Internet Explorer from Windows and/or carry alternative browsers pre-installed on the desktop”
2. “require Microsoft to follow fundamental and open Web standards accepted by the Web-authoring communities”

Because both of these raised a few questions with me, even after reading the press release by Opera and Håkon Wium Lie’s open letter to the web community, I quickly emailed him with a few questions, and he was kind enough to respond:

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).

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.

We’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!

To create a coherent collection of blog discussion about CSS3 and the future of CSS, the CSSWG and the css3.info team have teamed up to create a W3C-hosted aggregate feed, The Future of Style, and an associated css3.info-hosted open community blog, the CSS3 Soapbox.

We’re starting off The Future of Style by pulling in the CSS Working Group Blog, css3.info, and the CSS3 Soapbox. If you have a post you want to add to this feed, post a link (or the whole thing) on the CSS3 Soapbox. If you own a blog with frequent posts about the future of CSS, and want to be added to The Future of Style, contact fantasai.

The CSS3 Soapbox is meant to give you as a developer, designer or whatever, a voice in css development. This feed will be read by all those involved in CSS development, so you can get your message across easily.

We want you to join the conversation!

Next up in our now probably well known series of interviews is the lovely Jina Bolton, it’s good stuff, so keep reading!

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.

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.

Slides from Jina Bolton‘s presentation at FoWD 2007, CSS3 And What Could Be [PDF, 3.2MB], are now available to download from her website Creating Sexy Stylesheets.

There won’t be a lot of revelatory information in there for regular readers of this site, or those otherwise clued up on CSS3, but there are some nice practical examples to take a look at, particularly of the Advanced Layout and Grid Positioning modules.

Rijk van Geijtenbeek wrote in to tell us that he’s created a CSS3 Quick reference in the form of a browser sidebar (direcly usable in Firefox and Opera) for quick access to all CSS 3 properties from all published modules. This, he says, is an ofshoot of Eric Meyer’s CSS 2 QR sidebar which he’s been maintaining for a few years.

His official announcement can be found here, and you can download this or his other panels from here.

It looks great, so thx a lot Rijk for putting your work into this!