Darathor 
Posté le : 21 Avr 2007 16:18
Une feuille de style, qu'est-ce que c'est ?
Les feuilles de style sont écrite dans le langage CSS et permettent de configurer l'affichage d'un site. Elles permettent d'appliquer des styles (couleurs, tailles, bordures, positionnements, etc) à un élément html. Ainsi avec un même code html, on peut donner un rendu totalement différent en changeant simplement la feuille de style. Le meilleur exemple de la puissance des CSS reste ce site : ~lien~ (en cliquant sur un lien de la colonne de droite, vous pouvez afficher la même page (même code html) mais avec une feuille de style différente... et ça n'a plus rien à voir !).
Des feuilles de style personnalisées ?
C'est là que FireFox intervient. En effet, ce génial navigateur a une fonctionnalité qui bien que peu connue du grand public ouvre d'énormes possibilités : il permet à l'utilisateur averti de définir des feuilles de styles personnelles appliquées soit à tous les sites qu'il affiche, soit à un site, groupe de sites ou même une page en particulier (plus d'explications ici).
De base c'est masqué et pas facile d'accès mais l'extension Stylish permet de les définir très facilement.
Ainsi on peut modifier soi-même l'affichage des sites que l'on visite.
On peut donc réorganiser les éléments en occupant l'espace inutilisé par un design prévu pour une résolution plus base, remplacer certaines couleurs insupportables, supprimer certains blocs d'affichage, etc.
NB : Cette modification n'étant évidemment valide que pour votre navigateur.
Ajout d'un feuille de style étape par étape
0) Installez Stylish et relancez Firefox.
1) Lancez l'outil de gestion des feuilles de style :
2) Cliquez sur le bouton "Écrire" :
3) Indiquez d'abord un titre (1) qui vous servira uniquement à reconnaitre cette feuille quand vous en aurez ajouté plein d'autres. Puis copiez/collez le code CSS que vous voulez appliquer dans le cadre texte (2) et enfin cliquez sur "Enregistrer" (3).
4) C'est prêt. Il peut cependant s'avérer necessaire de rafraichir la page pour que les modifications apparaissent.
J'utilise IE alors ça marche pas
Alors ça c'est ballot
Ça m'étonnerait fortement qu'IE gère un truc pareil... Idem pour les autres navigateurs tels qu'opera ou safari... Cela dit, rien ne vous empêche de chercher et de faire part de vos découvertes
Les feuilles de style sont écrite dans le langage CSS et permettent de configurer l'affichage d'un site. Elles permettent d'appliquer des styles (couleurs, tailles, bordures, positionnements, etc) à un élément html. Ainsi avec un même code html, on peut donner un rendu totalement différent en changeant simplement la feuille de style. Le meilleur exemple de la puissance des CSS reste ce site : ~lien~ (en cliquant sur un lien de la colonne de droite, vous pouvez afficher la même page (même code html) mais avec une feuille de style différente... et ça n'a plus rien à voir !).
Des feuilles de style personnalisées ?
C'est là que FireFox intervient. En effet, ce génial navigateur a une fonctionnalité qui bien que peu connue du grand public ouvre d'énormes possibilités : il permet à l'utilisateur averti de définir des feuilles de styles personnelles appliquées soit à tous les sites qu'il affiche, soit à un site, groupe de sites ou même une page en particulier (plus d'explications ici).
De base c'est masqué et pas facile d'accès mais l'extension Stylish permet de les définir très facilement.
Ainsi on peut modifier soi-même l'affichage des sites que l'on visite.
On peut donc réorganiser les éléments en occupant l'espace inutilisé par un design prévu pour une résolution plus base, remplacer certaines couleurs insupportables, supprimer certains blocs d'affichage, etc.
NB : Cette modification n'étant évidemment valide que pour votre navigateur.
Ajout d'un feuille de style étape par étape
0) Installez Stylish et relancez Firefox.
1) Lancez l'outil de gestion des feuilles de style :
2) Cliquez sur le bouton "Écrire" :
3) Indiquez d'abord un titre (1) qui vous servira uniquement à reconnaitre cette feuille quand vous en aurez ajouté plein d'autres. Puis copiez/collez le code CSS que vous voulez appliquer dans le cadre texte (2) et enfin cliquez sur "Enregistrer" (3).
4) C'est prêt. Il peut cependant s'avérer necessaire de rafraichir la page pour que les modifications apparaissent.
J'utilise IE alors ça marche pas
Alors ça c'est ballot
Ça m'étonnerait fortement qu'IE gère un truc pareil... Idem pour les autres navigateurs tels qu'opera ou safari... Cela dit, rien ne vous empêche de chercher et de faire part de vos découvertes
|