Technologies

Aller au contenu | Aller au menu | Aller à la recherche

jeudi 4 décembre 2008

Une feuille de style pour afficher les microformats

Traduction de l'article original en anglais A style sheet to show Microformats

Les Microformats définissent un format simple en (X)(HT)ML pour des type d'informations courant.

Cette CSS[1] permet de visualiser la présence de microformats dans une page web. Voir un exemple.

Cahier des charges
  • Simplicité: utiliser seulement une CSS, pas d'image, rien d'autre
  • Portabilité
  • Ne pas "encombrer mais être visible
  • Utiliser le vert pour rappeler le logo
  • Pour les éléments en ligne, un indice suffit
  • Pour les éléments de type block, il faut un indice de début et de fin. Mais ça ne suffit pas. C'est pourquoi il y a un cadre.
Utilisation

Pour installer, copier le fichier "microformats.css" dans le dossier de votre CSS, puis, à la fin de votre CSS ajouter une ligne avec

@import "microformats.css";
Camino/FireFox

La feuille de style par défaut de Camino est dans

~/Library/Application Support/Camino/chrome/userContent.css

La feuille de style par défaut de FireFox est dans

~/Library/Application Support/Firefox/Profiles/profilename/randomstring.default/chrome/

Et redémarrer Camino/FireFox

Thunderbird
~/Library/Application Support/Thunderbird/Profiles/profilename/randomstring.default/chrome/
Safari

Mettre le fichier css ou vous voulez (le dossier ~/Library/Safari/ convient) puis sélectionnez le dans Préférences > Avancées > Feuille de style.

Et redémarrer Safari.

Autre

Localisez la CSS locale et ajoutez à la fin la ligne

@import "microformats.css";

Voir un exemple d'utilisation

Notes:

L'idée de base vient de la feuille de style de DotClear.
SoJ'ai trouvé des informations sur ce site http://www.hicksdesign.co.uk/journa... que j'ai trouvé grâce au wiki Microformat

Notes

[1] Cascading Style Sheet

dimanche 26 octobre 2008

Une feuille de style pour montrer les microformats

Ce billet a été publié à l'origine en anglais sur SansFiltre

Les microformats permettent de structurer des informations de manière simple en (X)(HT)ML.

Cette CSS [1] permet de mettre en relief les éléments utilisant des microformats présents dans une page. Voir un exemple.

Critères
  • Simplicité: utiliser uniquement une CSS, pas d'image, rien d'autre
  • Portabilité
  • Ne pas être encombrant mais visible
  • La couleur verte rappelle le logo
  • Pour les éléments en ligne, un indicateur suffit
  • Pour les éléments de type block, il faut un indicateur de début et un indicateur de fin, mais celà ne suffit pas. Il y a donc un encadrement.
Utilisation

Pour installer cette CSS, copiez la dans le dossier ou se trouve votre feuille de style. À la fin de votre feuille de style, ajouter une ligne :

@import "microformats.css";
Camino/FireFox (Mac)

La feuille de style par défaut de Camino est dans

~/Library/Application Support/Camino/chrome/userContent.css

La feuille de style par défaut de FireFox est dans

~/Library/Application Support/Firefox/Profiles/profilename/randomstring.default/chrome/

Et redémarrez Camino/FireFox

Thunderbird
~/Library/Application Support/Thunderbird/Profiles/profilename/randomstring.default/chrome/
Safari

Copier la feuille de style ou vous voulez (Le dossier ~/Library/Safari/ par exemple) Puis sélectionnez la dans la boite de dialogue Préférences... > Avancées > Feuilles de styles > Autre emplacement.... Redémarrer Safari.

Autre

Trouver la CSS pas défaut et ajouter la ligne :

@import "microformats.css";

à la fin du fichier.

Notes:

L'idée originel vient de la fauille de style de DotClear.
Certaines informationt viennent de http://www.hicksdesign.co.uk/journa... trouvées grâce au Microformat wiki

Notes

[1] (feuille de style) téléchargeable en cliquant sur le bouton droit de la souris et en demandant "Enregistrer sous..."

A style sheet to show Microformats

This posts was originally published on SansFiltre

Microformats are a simple way to structure informations in (X)(HT)ML.

This CSS allow to show the Microformats bits contained in a page. View a page.

Design principles
  • Simplicity: Use only a CSS, no image, nothing else
  • Portability
  • Be unobtrusive but visible
  • Use the green color to remind of the logo
  • For inline elements, one clue is enough
  • For block element, a start and end element is needed but not sufficient. That is the reason for the border.
Usage

To install, just copy the file "microformats.css" in the directory next to your CSS, then at the end of your CSS add a line with

@import "microformats.css";
Camino/FireFox

The Camino default style sheet is in

~/Library/Application Support/Camino/chrome/userContent.css

The FireFox default style sheet is in

~/Library/Application Support/Firefox/Profiles/profilename/randomstring.default/chrome/

And restart Camino/FireFox

Thunderbird
~/Library/Application Support/Thunderbird/Profiles/profilename/randomstring.default/chrome/
Safari

Put the css file anywhere you like (your username/Library/Safari/ folder might be a good place) and then select it in Preferences > Advanced > Style Sheet. Restart Safari.

Others

Just find the default local CSS and add the line

@import "microformats.css";

at the end of the file.

Notes:

Idea from the DotClear style sheet.
Some informations found on http://www.hicksdesign.co.uk/journa... found via the Microformat wiki