Selectors complete, what next?
Sunday, 24. June 2007, 23:50:45
On this blog I've mentioned quite a lot about CSS3 selectors. You might have noticed that the official Opera desktop team blog recently announced that Opera Kestrel has completed and enabled full selectors support. This also means that Opera Mini 4 should have full support by launch and the Wii browser will likely also benefit from this. Now I ca put to bed talking about selectors, what else is on the horizon? Well, there is certainly a lot more CSS3 that we can work on, including some very interesting things like multiple background images, border-radius, multi column layout, web fonts (a particular favourite of Håkon, our CTO and father of CSS) etc. I can't promise support for any of this, but we are listening to designers and developers, so it'd be interesting to see which CSS3 properties are most wanted.
Away from CSS, our SVG continues to improve, cementing Opera's place as the most compatible browser for SVG rendering. I believe we are still the only browser that supports SVG animation. Being able to use SVG from the img element and from CSS is a particular favourite of mine as it leads to some interesting scaleable design techniques, such as using SVG as a background gradient, or bullet point icons that don't go jagged when zooming into the content. Because SVG isn't as widely implemented as CSS (read no IE support and no official Safari release until Safari 3 comes out ), there isn't as much talk about it as CSS, and I don't think that Opera perhaps gets as much publicity as it deserves for our stellar support (do a Google search for SVG). Maybe it is time we made a svg.info site.
As a Mac user, what really excites me is the news that Kestrel will get an improved theme and interface for Mac. I'm not a big fan of the current look, so the improvements will be welcome. Even as an insider, I've not seen these changes yet, so i guess I should start digging into the internal builds.
WIDGETIZE
Steve Darken # 25. June 2007, 00:35
Andrew Gregory # 25. June 2007, 04:13
Overflow-x/y are already implemented in IE and Firefox (and probably Safari too), and already widely used, so they are a must-have.
There have been countless techniques developed to produce rounded corners. Therefore, border-radius should be near the top of the list. I see you're already using it in your CSS here!
I also notice box-shadow in your CSS. Like text-shadow (which I know is already in Kestrel), this is a popular request (there are already many workaround techniques) and should be high on the list.
The demand for more fonts has also been very high. There have been some nice Flash-based workarounds, but mostly people just use bandwidth-sapping images. So @font-face should also be high on the list. However, there must be controls on this - the last thing I want is every site specifying their own special multi-megabyte font to download
Transparency is also a popular effect. Opacity goes a lot of the way to fulfilling that need, but it has limitations. Support for the other transparency effects - rgba (and hsl/ hsla) colours should be high on the list.
Multi-column support I don't see as needing a high priority. Multi-columns don't fit very well in the infinite-height design model of the typical web document. Printing and presentations are different - there multi-column support would be nice.
I've hardly seen any requests for multiple background images (and border images), so they should get a lower priority.
I think that's plenty enough. Seriously, as much as I'd like new CSS toys to play with, it's relatively pointless without support from more popular browsers. Yeah, I'm talking IE
mabdul # 25. June 2007, 08:47
for example the old protokolls wais and gopher ^^
and the ftp is also not really good. make a real ftp-client!
Mihai Sucan # 25. June 2007, 09:00
Personally I'd like very, very much to be able to use:
http://www.css3.info/preview/border-image.html
I like this is supported by Safari. I have done tons of layouts which needed this.
High on my list would also be border-radius and multiple backgrounds.
Multi-columns is just a "fancy" feature for now. I'd like them as well, but, first, we need the actual properties we would use every day (border-image).
Anonymous # 25. June 2007, 09:02
Multiple backgrounds is highest on my list. Really.
Anonymous # 25. June 2007, 09:51
Multiple backgrounds, so that we can stop wrapping elements with unnecessary divs.
Rounded corners and border images can be achieved with multiple backgrounds, so those can wait a little more :)
Rafał Miłecki # 25. June 2007, 10:11
<div id="elem"><div><div><div>
Wohoo, I'm box with 4 backgrounds
</div></div></div></div>
The rest would be also fine (columns, web-font, border-radius)
porneL # 25. June 2007, 11:27
border-raduis = to have it interoperable (as far as non-IEs go)
border-image = because it rocks
text-justify:newspaper = it works in IE and makes justified text much nicer!
word-break:break-word = people often ask how to prevent long text from breaking layout without using overflow.
box-shadow is nice to have.
improve content: support! make it degrade to normal content rather than ugly [ image ].
CSS3 (+custom) cursors are very useful for web apps.
Some print CSS for setting page orientation, forcing backgrounds to be printed and removing default page headers (these added by browser on margins) would be very welcome.
Of all CSS3 I care least about multicol. It's more often annoying than useful and is probably awafully difficult to implement.
Anonymous # 25. June 2007, 19:01
1., multiple backgrounds
2., border image
3., multi-columns
Marek # 25. June 2007, 20:26
1. rgba() support - opacity is nice but when you have it you realize that rgba() is what you really wanted
2. border-radius - a must have
3. multiple background images
4. text-stroke - this is not in CSS3 but Safari has working implementation so I think it will make its way to CSS
5. box-shadow would be nice
Multi-columns can wait until Peregrine
@mabdul: As far as I know Opera already support wais and gopher. Anyway, who use it these days? I remember using gopher but it was about 15 years ago
mabdul # 25. June 2007, 21:14
and you're right: nobody uses it any more, but for instance ff is also support it (ok, no gopher+) why opera not? i'm testing gopher servers in the last time for fun o.O
Dustin Wilson # 27. June 2007, 23:52
Personally, my preferences for inclusion would start with web fonts. Typography sucks on the web. I'd love to see multiple backgrounds, image borders, and border radius. I'd love also to see image cursors. That's a CSS2 item. It's got plenty of room for abuse, but image cursors would be excellent for web applications.
@Darken: The PNG Group officially rejected APNG in April, so there's a good chance APNG won't be supported, but MNG should be IMO.
Something in your post really intrigued me, though.
Originally posted by David Storey:
Does this mean that the Wii Browser will see regular updates? I'm not such a big fan of the DS Browser because by the nature of what it is (a cartridge) it would be expensive to release new versions of the browser.
Steve Darken # 28. June 2007, 04:50
David Storey # 28. June 2007, 13:16
Dustin Wilson # 28. June 2007, 15:25
Anonymous # 28. June 2007, 23:51
Outside of the render engine, I'd like to see the Developer Tools improved (at least with a DOM inspector) and better Widget implementation (perhaps an automatic updater).
David Storey # 29. June 2007, 12:58
Anonymous # 25. July 2007, 23:41
I'd like to add a gasp of shock and horror at Andrew Gregory's claim that there is "hardly ... any requests for multiple background images (and border images)"!
Personally that's got to be at the top of my list - even above the corner radius, as with the multiple backgrounds we could fake this pretty easily (as we have been doing for years using multiple divs etc. etc. oh god etc.)
While I'm here, +1 for the dev tools: Opera is currently my browser of choice, but I normally switch back to FireFox for development work due to Chris Pederick's excellent Web Developer toolbar (worth the hassle for the "Outline Current" and disabling tools alone).
Steve Darken # 26. July 2007, 00:07
Many web'dev tools exists for Opera.
mabdul # 6. July 2008, 13:44