Pure CSS rollovers in Opera
By glazou on Monday 29 March 2004, 10:05 - CSS and style - Permalink
When I joined the CSS Working Group in 1997, I proposed quite rapidly to extend the content property to all replaced elements. IMG for instance. The goal was to centralize in a site's stylesheet the reference to site's logo for instance.
img.siteLogo { content: url("siteLogo.png"); }
....
<img class="siteLogo" alt="My own company"/>
I needed it for all EDF's web sites, and many other corporations had expressed the same need to centralize image URLs in one single location, the main stylesheet. Refused at that time. Then I proposed it once again imagining pure CSS rollovers with that:
img.rightArrow { content: url("rightArrow.png"); }
img.rightArrow:hover { content: url("rightArrow-hover.png"); }
....
<img class="rightArrow" alt="Click to select"/>
Refused again but the rollover argument was a good one, if not the good one... So the CSS Working Group finally accepted to extend the content property to all elements for CSS 3. And Opera has implemented it. Sincere congrats to Håkon Lie and his team. The numbers of technical possibilities that opens is incredible. Generated content will have a great fate, IMHO.
Amazing how many years it can take sometimes for a simple and very useful proposal to be implemented...
Comments
Rhaa, depuis le temps qu'on attendait tous ca !
Je ne compte plus le nombre de fois ou j'ai peste apres ce truc !
Merci pour le lobbying
Excellent idea, thanks Daniel! I hope Microsoft and Mozilla implement it soon....
Mozilla is not likely to implement this any time soon. Especially when you consider the fact that non-image generated content is still so half-baked as a concept (people can't even agree on how it should act wrt selection!). As long as you allow all the varied forms of generated content that CSS2(.1) allows, there's nothing simple about any of it.
Boris: we'll see... I can't believe Tasman is *not* going to implement it. If Tasman and Opera do have this incredibly useful feature for big corporate web sites, we'll have to implement it in Mozilla. I never said the implementation of the extended content property is easy in _our_ model. I said the feature is easy and simple to understand. And if like Opera you rewrite your layout engine at the right moment with a little more laxist model than ours, well, they did it. And it works *very* well.
This feature will also solve the well-known problem of image replacement..
Ça a l'air super ce truc. Vous ne pouvez pas insérer dans CSS 2.1 www.w3.org/TR/CSS21 que www.w3.org/TR/CSS21/gener... peut s'utiliser sur n'importe quelle cible, pas seulement sur *:before et *:after ?! Ça sera déjà cependant bien si c'est dans CSS 3 www.w3.org/TR/css3-conten... . Est-ce que
« all elements » dans www.w3.org/TR/2003/WD-css... signifie que c'est déjà le cas dans la version du 2003-05-14 ?
Daniel, I was talking about the feature being hard to understand, not hard to implement. I think I wouldn't have too much trouble implementing it; the problem would be doing it interoperably.
For example, what does Opera do with:
<body>
This <span style="content: 'should'">should not</span> be
selectable.
</body>
when you select? When you copy? In various media? What about:
@media print {
span { content: 'selectable'; }
}
@media screen {
span { content: 'not selectable'; }
}
Followed by the markup above without the style attribute? Again, same questions.
Basically, generated content as currently specified in CSS is not implementable interoperably and anything but the most trivial use case is very difficult conceptually, as far as I can see. If CSS restricted to the trivial use cases that would be fine, but it does not.
Would this do the same?
HTML:
<div id=logo>
<img class='default'>
<img class='roleover'>
</div>
CSS:
IMG.roleover {visibility: hidden;}
.logo:hover IMG.default {visibility: visible;}
.logo:hover IMG.roleover {visibility: hidden;}
You can contact my though the feedback link my website. Just a subsection of my site is in English.