Archives du mot-clé cite

Les exclusivités d’Opera

Initialement publié le 17 avril 2006 à 19:03:41

Exclusivités

  • Titres numérotés Gecko en fait désormais autant
  • Espaces fines insécables Gecko en fait désormais autant
  • Sélection de texte autogénéré
  • Retours chariot CSS (\a, de mémoire)
  • Le seul à pouvoir correctement utiliser run-in avec du display:after (les dernières compilations nocturnes de Webkit ont réglé le problème ; mais pas la dernière nocturne de Gecko 1.9)
  • La meilleure gestion de l’attribut cite à ce jour grâce aux liens en cascade (CLink)

Exemples

Sur ce blog

Démonstration de la puissance d’Opera
Démonstration de la puissance d’Opera

Le texte cité est une liste de définitions (en gras, les dt). Les deux_points et espaces les précédants sont autogénérés (quand on y pense, c’est de la présentation, tout ça).

Si vous cliquiez sur le texte violet en bas, ça vous emmènerait sur la page de source. Et vous pourriez aussi le sélectionner, quand bien même il est autogénéré depuis l’attribut title.

Bien entendu, il n’a pas le problème de Safari avec les guillemets, qu’il localise comme demandé (Firefox le fait aussi correctement).

Soyons honnêtes : Opera a du mal avec les enrichissements typographiques et surexploite les déliés (vous le voyez en bas). D’une manière générale, Opera a du mal avec Mac. Il n’empêche, c’est bien, tout ça.

Autre

Un autre exemple que je compte bien (re)mettre en action dans la nouvelle version du site Web, les compteurs (counter, conter-increment) :

h3:before	{ 	content:counter(thetitre3) "."; 	counter-increment:thetitre3; 	}
Un exemple simple
Un exemple simple
Un exemple plus évolué
Un exemple plus évolué

Le fichier HTML

Notez que dans le dernier exemple, les astérisques peuvent tout à fait être rendus par une autre navigateur ; en effet, il n’y a aucune numérotation derrière.

Notez également que les postulats des titres (h*), qui ne sont pas des blocs, mais des lignes, ont été totalement revus en XHTML 2.0 (à l’avenir cependant incertain). Les compteurs ne devraient donc plus être nécessaires (pour cette utilisation) dans cette nouvelle mouture du langage par excellence du Web.

Voir aussi

  1. Télécharger Opera
    • en version stable. Préférez la version anglaise, la version française étant très en retard
    • en version beta. La version 9 est en bêta, j’en ai fait une revue (pour la bêta 1) et c’est celle que j’utilise, preuve de sa stabilité
  2. D’autres articles sur Opera, sur ce blog
  3. Le blog de Laurent Denis, chantre francophone d’Opera et spécialisé dans l’accessibilité
  4. Wikipédia — Opera et Wikipédia — Liste des fonctionnalités du navigateur Opera
  5. Les primeurs d’Omniweb, où je glorifie un autre navigateur
  6. Des caption pour les listes, où je traite d’un autre problème lié aux énumérations

flattr this!

Exploiter l’attribut cite

Citer un texte sans ajouter du texte inutile.

  • HTML : attribut cite dans les éléments blockquote ou q.
  • CSS : pseudo-classe :after et extension propriétaire pour les liens en cascade (CLink; Opera-only)

q[cite]:after, blockquote[cite]:after {
content: "Source : " attr(cite);
display:block
}

q[cite], blockquote[cite] {
-o-link: attr(cite);
-o-link-source: current;
cursor: pointer
}

Sources :

flattr this!

HTML : blockquote cite

L’excellent selfhtml.org montre comment faire avec un bloc de texte ce que l’on fait avec un tableau : ajouter une méta-information qui semble aller de soit, en l’occurrence la source.

C’est tout simple, mais comme cite est généralement utilisé comme élément, je ne pensais pas qu’il pouvait aussi être utilisé comme attribut…

Suite à une suggestion de ma part, Olivier Meunier a intégré le trackback d’attributs cite dans le code de Dotclear.

<blockquote cite="URL">Texte</blockquote>

Malheureusement, ni Safari 5, Firefox 4 ou Chrome 10 n’affichent l’URL de reférence.

  • <q cite="http://www.empyree.org">Empyrée, site éclectique s’il en est.</q>
    Empyrée, site éclectique s’il en est.
  • <blockquote cite="http://joueb.com/empyree/">Empyrée blog, pas bien mieux.</blockquote>

    Empyrée blog, pas bien mieux.

De même, j’ai trouvé un attribut pour les éléments ins et del :

  • <ins datetime="yyyy-MM-ddThh:mm:ss+hh:mm">texte inséré</ins>
    texte inséré le 17 octobre 2003
  • <del datetime="yyyy-MM-ddThh:mm:ss+hh:mm">texte effacé</del>
    texte effacé le même jour

flattr this!