Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

12.05.2009

Intégrer le style citation à la feuille de styles

Après avoir jouer à être "border line", puis avoir exploré les espaces intérieurs (et au-delà), nous en sommes arrivés à l'intégration du style citation dans la feuille de styles. Et nous allons enfin aborder la logique de la montre carrée...

Voilà où nous avions laissé notre style citation :

Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.

Balzac (Le Lys dans la vallée)

Lire la suite

03.03.2009

Quand le burp mène au style

Il m'avait promis celle qui fait oublier toutes les autres, celle qui interroge sur le néant que peut être la vie jusque là... et il n'avait pas menti.

L'auteur du blog Comme une image, évoqué dans la note précédente a fort à propos commenté nombre des miennes. Et dans celle qui vous incitait à ne pas manquer de style, son commentaire invitait à découvrir une autre extension de Firefox : Firebug. J'ai testé, j'approuve.


Une extension qui va loin

Firebug vous permet de visualiser le code HTML d'une page en même temps que la feuille de styles qui lui est liée, ce qui est bien le moins. Selon la sélection que vous ferez dans la page ou ce que vous trierez dans les volets (parce que le tri se fait dans les volets, et pas dessus, allons), vous verrez défiler les paramètres précis du style concerné, et sa "généalogie" dans la feuille. Rappelons qu'il y a bien "Cascading Style Sheet", et donc nécessité de ne pas se perdre dans les caractères hérités ou transmis d'un style à l'autre.


Modifiez à la volée

Firebug vous permet de modifier ce que vous voyez, alors même que cela ne vous appartient pas. En agissant sur les fichiers stockés en mémoire cache, cette extension vous permet de modifier tant le code HTML que les styles utilisés. Évidemment, ces modifications sont sans effet sur les fichiers du site. Cela vous permet de visualiser, tester, avant de rentrer dans le code de vos fichiers. Vous ne pourrez pas ajouter un argument dans la feuille de styles, seulement modifier les valeurs de ceux qui existent déjà.


Ça fait un peu peur...

geemee2_lettrine.jpgVous voyez ci-contre une capture faite alors que je tentais de mettre en place un style de paragraphe avec lettrine dans mon labo (sur un autre conseil de CUI).

Il faut tout de même reconnaître que l'outil est puissant, et demande un certain temps de prise en main. Je ne l'ai moi-même pas eu pour l'instant, ce qui n'est pas forcément une référence, j'en conviens. C'est donc un outil que je ne recommande qu'à ceux qui sont prêts à sérieusement bricoler. D'autant que je n'ai pas encore trouvé de documentation en français à partir de la page qui lui est consacrée sur le site officiel de Firebug.

Bonne nouvelle pour les utilisateurs exclusifs de Microsoft Internet Explorer : une version compatible (avec Opera et Safari aussi), allégée, est disponible à cette adresse.

 

17.02.2009

Ne manquez pas de styles, affichez-les tous !

Je vous avais déjà incité à ne pas manquer de caractères, ce qui ne saurait vous arriver, aussi continué-je dans mes conseils superflus pour qu'il ne vous arrive pas de manquer de style.

L'essentiel de la mise en forme de votre blog Hautetfort est commandé par la feuille de styles, document de référence qui contient toutes les zones de chaque page méritant des attributs de style différents. Dans le code de la page HTML on indique « ceci est un titre de niveau 1 », et dans la feuille de styles on indique les paramètres applicables aux titres de niveau 1. Ce qui a pour énorme avantage de n'avoir qu'à intervenir sur la feuille de styles pour modifier l'apparence de toutes les pages d'un site.

Pour en savoir plus à propos des feuilles de styles, vous pouvez vous lancer dans l'exploration du site SelfHTML. Ce n'est peut-être pas le meilleur, même si je m'y réfère souvent.


Comment voir les styles ?


S'agissant de votre feuille de styles, une fois passé en « configuration avancée », il suffit d'aller visualiser le fichier du même nom. Mais pour les sites dont vous n'avez pas la clé ?

C'est le moment de vous présenter deux modules additionnels (add-on) de Firefox. Je n'ai rien contre les utilisateurs de Microsoft Internet Explorer, mais j'ai une nette préférence.


JS View

Ce module permet d'accéder à toutes les instrucions en javascript et à toutes les feuilles de styles appelées par la page courante. Il vous est donc loisible de visualiser le code et de vous en inspirer pour vos propres développements.

Attention, il ne suffit pas de copier la feuille de styles de ce blog pour que le votre ait la même apparence. J'ai une colonne de chaque côté de la zone centrale, peut-être pas vous. Et puis, il vous manquera des éléments comme des images qui sont stockées dans mes répertoires. Vous pourrez toujours bidouiller pour aller les récupérer, il n'y a pas de sécurisation particulière.

Plus d'information sur JSView sur le site des modules de Firefox.


CSS viewer

Ce module permet de voir quelle partie de la feuille de styles (quelle « classe ») est concernée par la zone que vous survolez avec la souris, et quels sont les paramètres.

L'imbrication des différentes classes rend parfois les choses un peu compliquées, et ce module vous aidera à vous y retrouver.

Plus d'informations sur CSS Viewer sur le site des modules de Firefox.


Pour un bricoleur comme moi, ces deux modules me sont vite devenus indispensables. Et si cela doit vous faire passer à Firefox, vous pourriez doublement tirer profit de cette note.