Before et After : multiples possibilités

élucubrations XHTML, CSS
et Standards web

Recherche par mot-clés

CSS · XHTML · Standards W3C · Webdesign · Accessibilité · Référencement · JavaScript · PHP · Humour

AlsaQuiz

A retenir

Syndication

Rédacteurs du blog

Partenaires

Poster

Toujours incompatibles avec la dernière version d'Internet Explorer en date (IE6), les pseudo-classes :before et :after n'ont pour l'instant jamais vraiment suscité de vif intérêt chez moi, je l'avoue.

Pire encore : leur utilisation pour générer du contenu textuel qui ne serait pas interprêté sur des navigateurs sans support des styles CSS me paraissait assez inconvenant.

Par contre, une nouvelle venue dans la blogosphère, Nanoum, une collègue modératrice de Mediabox, s'est penchée - et bien penchée - sur la question.
Elle s'est amusée à dénicher plusieurs possibilités très intéressantes pour ces pseudo-classes, allant d'un allègement du principe du clear : both à des cadres arrondis très ingénieux.

Bref, ce billet vaut le détour !

Par Raphael GOETTER - dimanche 24 octobre 2004 à 00:09

Astuces - #80 - Lu 8444 fois - Intérêt du billet: 2.31(13) - Fil RSS

Trackbacks

Le dimanche 24 octobre 2004 à 15:43, de Blog & Blues :: #

:before et :after, du bon usage du contenu généré

Exploitation d'un contenu HTML existant Dans ce premier cas de figure, nous ne génèrerons aucun contenu à proprement parler. Il s'agit simplement d'utiliser les sélecteurs :before ou :after et la propriété content pour rendre visible un contenu HTML...

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le dimanche 24 octobre 2004 à 00:22, par ElMoustiko :: site :: #

Moi j'utiliser :after (je pourrais mettre :before) pour indiquer les articles déjà lu ou non.
Je fait un content: " - déjà lu - " ;
Je trouve ca plutot sympa, de même qu'au survol, je fait content: " - lire cet article - ", pas de contenu indispensable, un petit plus comme ca

Le dimanche 24 octobre 2004 à 01:14, par Ldo :: site :: #

t'as pas honte gros pervers !
Nanoum penchée, non mais
:mrgreen:

Le dimanche 24 octobre 2004 à 04:17, par mat :: site :: #

Je ne suis pas sur que le coup du clear soit sensé marcher. La recommandation précise que les generated content, ca ne crée pas de nouvel élement dans le DOM. Donc on peut pas ajouter des nouvelles propriétés comme ca... Maintenant, ils ne parlent pas de clear la :

User agents must ignore the following properties with :before and :after pseudo-elements: 'position', 'float', list properties, and table properties.

The :before and :after pseudo-elements elements allow values of the 'display' property as follows:

* If the subject of the selector is a block-level element, allowed values are 'none', 'inline', 'block', and 'marker'. If the value of the 'display' has any other value, the pseudo-element will behave as if the value were 'block'.
* If the subject of the selector is an inline-level element, allowed values are 'none' and 'inline'. If the value of the 'display' has any other value, the pseudo-element will behave as if the value were 'inline'.

Faut tester

Le dimanche 24 octobre 2004 à 06:31, par Laurent Denis :: #

Sur le hack du clear CSS, de manière plus complète, voir www.positioniseverything....

Le dimanche 24 octobre 2004 à 09:08, par Groumphy :: #

Intéressant !
J'aime particulièrement les listes permettant l'insertion automatique ! Mais comme à l'acoutumée, IE pose problème... Snirf
@ElMoustiko > As-tu vu le paragraphe "Les éléments flottants et le clear:both" ; je pense que cela pourra m'aider dans mon problème aussi afin de paufiner la mise en page

Le dimanche 24 octobre 2004 à 09:52, par Raphael :: site :: #

@Laurent > merci pour le lien et les précisions qu'il apporte.

Le dimanche 24 octobre 2004 à 11:45, par ElMoustiko :: site :: #

@Groumphy> UHH ?? de quoi tu me parle là ?
Si c'est pour ton problème sur MB, je t'ai déjà fait une solution.

Le dimanche 24 octobre 2004 à 15:24, par Hervé :: #

Autant les effets graphiques (décoration) ou le « nettoyage » avec un clear (si l'effet s'avère) sont intéressants, autant pour ajouter du contenu textuel je suis très réservé. Pourquoi la mention « euros » ou « Tous droits réservés » se seraient pas inscrits dans la page ? Pour moi ils font partie du document et si on l'isole, on peut perdre beaucoup de sens. Sans compter tout simplement que les agents utilisateurs qui ne tiennent pas compte des feuilles de style ne peuvent restituer qu'un document amoindri au lecteur/auditeur/robot.

À noter aussi l'utilisation classique sur les blogs dont Dotclear qui consiste à ajouter la langue d'un lien (externe) entre crochets ou parenthèses (plus logique grammaticalement) derrière le dit lien.

Le dimanche 31 octobre 2004 à 15:44, par Raphael :: site :: #

Dans la même veine, voici un lien vers une cadre arrondi (ou graphique) fluide, uniquement en before/after, qui ne gêne donc pas la structure : www.virtuelvis.com/galler...