S'amuser avec les styles CSS utilisateurs

S'amuser avec les styles CSS utilisateurs (le 12 février 2012)

Hier matin, je constate avec stupeur (qui était de passage par chez moi à ce moment précis) que j'ai enfin la nouvelle interface web de Twitter.

Surprise : si certaines fonctionnalités sont plutôt agréables, je suis un peu perdu, les tweets qui étaient à gauche sont désormais à droite, et les infos du profil sont désormais à gauche alors qu'elles étaient à droite.

Interface de Twitter avant restylage express

Je décide d'observer avec Firebug les propriétés CSS de cette nouvelle interface. Rapidement, je vois que les div .dashboard et .content-main ont respectivement pour propriétés float:left; et float:right;. N'écoutant que mon courage (sic), je décide d'inverser ces propriétés sous Firebug. Le tout s'affiche et fonctionne parfaitement.

Seul souci, les modifications que j'ai faites sous Firebug ne survivent pas à un rafraichissement de la page.

Et c'est là que le monstre qui sommeille en chaque intégrateur va sortir… finalement, je m'installe l'extension Stylish qui permet de gérer simplement des styles CSS utilisateurs pour chaque site ou domaine. Rappelons que les styles utilisateur sont, comme leur nom l'indique, les styles définis par l'utilisateur, en l’occurrence la personne qui navigue sur le site, en l'occurrence moi.

Et me voila parti à faire quelques essais :

  • la zone principale n'est pas assez large sur mon portable,
  • les tweets sont trop entassés,
  • le panneau désormais à droite serait bien en position fixe,
  • la fenêtre qui contient les liens concernant Twitter ne me sert à rien maintenant que le bloc de droite est fixe,
  • le texte qui affiche le texte du tweet est trop serré à droite,
  • etc.

En dix minutes, j'arrive à ce style :

@-moz-document domain("twitter.com") {
.dashboard{
position:fixed !important;
left:1020px !important;
}

.content-main{
float:left !important;
width:900px !important;
}
.wrapper,
.wrapper-narrow,
.wrapper-permalink,
.global-nav .container{
width:1220px !important;
}
.component[data-component-term~=footer]{
display:none !important;
}
.js-tweet-text{
margin-right:2em !important;
}
}

Qui me donne ceci sur mon portable :

Interface de Twitter après restylage express
Nous sommes bien d'accord :

  • J'ai fait cela en 10 minutes montre en main, c'est fait à l'arrache… et pourtant, cela ne gêne en rien le fonctionnement du site,
  • cette rectification de style n'est prévue pour fonctionner que sur mon portable, ou du moins sur un écran de résolution équivalente (ceci dit, c'est très facilement adaptable),
  • le restylage est très personnel, les goûts et les couleurs dit-on,
  • et en effet, il faut quand même quelques connaissances pour le faire.

Ceci dit, je ne sais pas si vous voyez l'idée, je vais donc la résumer : en 10 minutes, je viens de changer et personnaliser une interface web à ma guise.

Celui qui vient encore me dire que CSS n'est pas un langage puissant après ça… je risque de lui rire à la figure !

Bref, ça sera peut-être ça le web 3.0 : (re)définissez vos sites préférés comme vous l'entendez. ;)

Et accessoirement, si vous voulez frimer, vous pouvez dire que vous avez participé au redesign de l'interface de Twitter (bon, n'en faites pas trop quand même).

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1454

4 commentaires

Posté par Victor Brito le 12/02/2012 à 20:54:13
Tu as utilisé un seul préfixe (-moz-) ! Pas bien ! :-P

« Bref, ça sera peut-être ça le web 3.0 : (re)définissez vos sites préférés comme vous l'entendez. (clin d’oeil) » Sauf que la possibilité de fournir une feuille de style utilisateur ne date pas d'hier, même si elle paraît sous-exploitée. Bref, même motif, même punition que pour le Web 2.0 : trop de bruit commercial pour rien ou si peu. (clin d’oeil)
Posté par Nico le 12/02/2012 à 21:22:19
Nan, c'est pas moi qui ai utilisé ce préfixe, c'est stylish ! (Sourire qui tue)

(pour ceux qui n'auraient pas compris, vu que le style dont je parle ne marche que sous une extension Firefox... je n'utilise que le préfixe de ce dernier)

Pour les deux phrases de fin, j'étais complètement ironique (clin d’oeil) , le concept mérite d'ailleurs le nom de web 4.0 tellement il est puissant ! (grand sourire)
Ou web 1.5 vu que ça existait déjà avant le ouaib 2.0 ?

Arf, j'ai déjà eu de grands débats avec Laurent Denis sur le fait que les styles utilisateurs étaient une chose fantastique... mais qu'il ne fallait pas se leurrer : personne ne les utilise, hormis les intés qui ont envie de s'amuser et qui le font sciemment (et encore).
Posté par ReBleach le 14/02/2012 à 9:32:32
Salut,

Je viens de passer à la nouvelle interface (ce matin) et je dois avouer qu'au premier abord je suis du même avis que toi.

J'utilisais déjà les feuilles de style perso sur Facebook pour éviter d'avoir les pubs et autres invitations, mais je sens que cela va venir pour Twitter...

En tout cas ton rendu est propre même si je dois dire que 140px sur 900px de long c'est un peu ridicule. J'aime le fait que les tweets soient sur deux ou 3 lignes. (Avis perso).

Bonne journée.

JP
Posté par Nico le 15/02/2012 à 10:18:34
ReBleach : ah tiens, j'avais pas pensé à cacher les pubs, faut que je m'y mette. ^^

Oui, comme je l'ai dit, les goûts et les couleurs, j'étais pas parti là-dessus au début, et j'aime bien. Mais je peux changer d'avis un de ces 4. (sourire)

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.