csant.css

Mon amante a les vertus de l'eau: un sourire clair, des gestes coulants, une voix pure et chantant goutte à goutte.

Et quand parfois, -- malgré moi -- du feu passe dans mon regard, elle sait comment on l'attise en frémissant: eau jettée sur les charbons rouges.

Mon eau vive, la voici répandue, toute, sur la terre! Elle glisse, elle me fuit; -- et j'ai soif et je cours après elle.

De mes mains je fais une coupe. De mes deux mains je l'étanche avec ivresse, je l'étreins, je a porte à mes lèvres:

Et j'avale une poignée de boue.

Victor Segalen

cascading style sheets

Very often I have the association of style sheets with music: both have a peculiar disembodied nature. The visual arts do materialise in an object, the piece of art - styling with cascading style sheets is somewhat different. As with music a score exists: this is the markup page. But a score is lifeless in itself, the value of music is not in the score itself. It needs somebody to breath life into it - and that is exactly what a style sheet does. The markup suddenly wakes up to life, it floats a span above the ground, the way Zarathustra did in his most happy moments. A given markup can magically transfigure into something completely different, and yet still being itself: the resulting styled page exists in a somewhat different realm… This very disembodied nature, the ineffable balance between the ratio of the well structured markup and the beauty of a style awakening a page to life are the magic excitement I experience in CSS.

To procede viewing the experimental CSS section, please

Get Opera!

There are many reasons why Opera is better!

experiments

This section collects some of my experiments I am doing with CSS. It has been commented upon the fact that my samples work on Opera only. They heavily rely on one of the most future-pregnant techniques, generated content (The Moose has written a beautiful and comprehensive article about the subject - don't miss it!). Opera is, at the moment, the only browser supporting all features of adding, replacing and positioning of content. Hopefully the future development will allow Mozilla users to join the feast as well… I will be most pleased to welcome them!

alice through the looking glass…

Experimenting with the rendering of generated content tempted me to experiment with some abstract entities. Think about the vast potential of ‏ - the right-to-left mark… in Opera (in Opera only!) it works beautifully, reversing, if added ::after, the following inline element. I did not, for some reason, succed in reversing the element itself by adding it ::before. Thus you can reverse content on-the-fly without need of javascript. please note that it reverses inline elements only, and if in the rendered content a line break occurs, the rendering does not reverse the new line, even if it is part of the same inline box. one funny detail: mark a word in the content, then reverse the content - the marking stays, and is swapped around as well… (of course - why not?). Works only in Opera 7.23+

This experiment is invalid! Stu Nicholls has made a valid variant

Come to visit Alice.

Created :: 20.11.2003

chessboard [ hommage to alice I ]

The Reverend Dogdson has always been one of my prefered readings - ever since I grew out of childhood (let's face it: which child does understand him?) I felt very close to his peculiar, charming surrealism… I love the funny creatures appearing and vanishing without any particular reason… when experimenting with stylesheets i suddenly had the association of generated content with Alice's Wonderland…

The first hommage is a simple and somewhat reduced chessboard - which has some hidden tresures in it. The markup is one simple table with four rows and four cells in each row: no divs nor spans, not to speak of any ids, are polluting the clean & neat table. generated content is simply placed in the table cells… It fails in IE really badly and just badly in Firebird. Works fine in Opera 7.23+.

Come to see the chessboard

Created :: 24.11.2003

catch me if you can… [ hommage to alice II ]

The second hommage to Alice takes the moves from the first chessboard and develops it further into a funny chase… this experiment plays with a little rendering lazyness of Opera, as generated and absolutely positioned content seems to be persistent also after the :hover action is over - you need to explicitly cancel the rendering with an empty string of generated content. Non-positioned generated content, on the other hand, disappears naturally. One can beautifully play with this lazyness and generate content triggered by one hovering, and cancel it by a hovering over another element! Very often i have been lamenting the lack of cross-element action in css, easily achievable through scripting. This little experiment opens a little door to many yet unthinkable possibilities hidden in CSS… and let us hope that it might take some time to remove this bug! Let me actually ask: shall we really consider it a bug?! I feel it much too beautiful to wanting it removed… It fails in IE really badly. Firebird offers a little, absurd and absolutely illogical hommage to Alice of its own… Works like intended in Opera 7.23+.

Come to catch me if you can

Created :: 24.11.2003

a non-document…

Opera 7.23+ has a little bug: when switching to full-screen display, elements fixed-positioned from the bottom simply disappear. What happens, I was wondering, if I absolutely position from bottom not just an element, and not the body of a document, but… html itself? If maximized, html itself would disappear with all its elements. the result would be not just a blank page, but a non-page! A document with neither head nor body, nor… html! all you are left over with, is html's background…

The bug was fixed in Opera 7.50 preview 2 - what a pity…

Are you ready for the non-document par excellence? Works - of course - in Opera only… although the way Firebird and IE handle the document has something somewhat funny to it…

Created :: 03.12.2003

pronouncing foreign words

Generated content can be extremely useful in many different contexts, and not only for decorational purposes. When used to replace content, it can be used to give an alternative version of the original content: a practical application could be, for example, to give visitors of multi-lingual web-pages a pronunciation help for the foreign words. Works only in Opera 7.23+

I provide only a very basic sample.

Created :: 25.01.2004

CSS glasses: translating a forum with CSS!

Generated content has proven to be extremely useful, and not only decorative, in one more situation!

There have been complaints about difficult usability of a forum due to language problems: but, as translating the whole board would have been a solution with too much overhead and the bit which is important to be translated is basically the navigation commands of the forum plus some additional info here and there, I made my own version… it only works in Opera 7.2+

Here is the recipe…

You need the stylesheet - save it in styles/user in the Opera folder. Next open the file opera6def.ini and copy the section [Local CSS Files] into the file oper6.ini in your profile folder, and delete the section in opera6def.ini - the section may only be in one of the two files. At the end of the section you add following two lines:

Name X=AntiVir
File X=C:\<opera installation folder>\styles\user\avpe.css

X is the next free number. Then you go into preferences > page style > configure modes and check the box my style sheet under author mode.

Now visit the forum and check in author mode the stylesheet AntiVir… you can view a sample screenshot of the result here.

Created :: 26.01.2004