Prendre un Café - css

Quelques extensions Firefox pratiques

NiKo — Mon, 01 May 2006 12:10:46 +0000

JSView (XPI)
Permet de voir la source des fichiers javascript appellés par une page [via]
VideoDownloader (XPI)
Permet de télécharger les fichiers vidéos depuis une soixantaine de services existant (dont Google Video, Youtube, etc.)
Google Bookmarks Button (XPI)
Pour celles et ceux qui utilisent Google Bookmarks, cette extension est incontournable.
CSS Viewer (XPI)
Permet de visualiser en rollover toutes les propriétés CSS des éléments d'une page HTML, notament typographiques.
Pear Crescent Page Saver (XPI)
Permet de sauvegarder directement une page HTML en fichier image au format PNG (capture d'écran).

J'aime les brocolis

NiKo — Tue, 25 Apr 2006 11:41:35 +0000

Désolé pour le titre, j'ai plus d'imagination pour titrer les billets en vrac...

Un petit séquenceur musical en ligne complètement addictif (Flash requis).
Le site officiel de Spore, un des jeux les plus prometteurs du moment, est bien marrant (Flash requis).
Google Maps|Local s'étend à l'Europe côté cartographie routière, itinéraires et services de proximité : c'est assez réussi. Bon, les pages jaunes ont encore quelques beaux jours devant elles pour ce qui est des recherches de pizzerias.
Tab Mix Plus, une de mes extensions préférées pour Firefox, en fait toujours plus dans sa dernière mouture. Le top : on peut sauvegarder les nombreux réglages effectués dans un fichier de configuration.
Des fois, la science, c'est vraiment beau.
IE7 beta 2 disponible au téléchargement. Un miracle est-il encore possible ? J'en doûte. Edit : de nouveaux problèmes s'annoncent...
Signer une pétition contre la licence globale (source) ne dispense pas de respecter la licence Creative Commons
Edit : J'oubliais : hahahahaha (via mEga).
Edit : Wow ! (via Scoopeo)

PS : ça devient vraiment n'importe quoi ces billets. Promis, bientôt je me recentre.

Alignement vertical en CSS

NiKo — Thu, 20 Apr 2006 20:40:50 +0000

Enfin ! [via]

Edit : Bon, OK, la news est moisie. Pour me venger, j'ai commandé le renouvellement de ma Freebox par une Freebox v5 HD.

Sans chemise, sans pantalon

NiKo — Wed, 05 Apr 2006 11:36:54 +0000

Aujourd'hui, jour du CSS Naked Day, ce site est à poil tout nu. Paf.

Remarque : A quand une journée sans javascript, qu'on rigole un coup ?

Edit du lendemain : Rhabillé.

En vrac

NiKo — Fri, 03 Mar 2006 10:22:59 +0000

Une bonne nouvelle de bon matin : le chocolat divise vos risques de mourir subitement par deux [via]
La Chine planche sur son propre protocole internet. La fin annoncée de l'internet global ? [via]
Une maison dessinée en pures CSS [via]
Le montage d'un Airbus A340 en 340 secondes [via]
Une plateforme d'hébergement dédiée à Rails va bientôt ouvrir ses portes, et ça n'a pas l'air mal du tout [via]
Ubuntu Lite est une Ubuntu allégée pour machines anciennes. Excellente initiative !
Edit : Trop drôle : la courbe d'apprentissage d'Emacs (don't feed the drôle)

Chantier, casque obligatoire

NiKo — Mon, 20 Feb 2006 00:17:42 +0000

Comme vous l'avez sans doûte remarqué si vous n'utilisez pas un agrégateur pour lire ces quelques lignes, je suis en train de procéder au redesign de ce blog. J'en avais vraiment marre du gris. Donc j'ai mis de la couleur partout.

C'est pas fini, j'ose même pas imaginer ce que ça donne sous IE, mais j'ai l'impression que c'est un bon début. En tout cas, que je suis sur la bonne voie.

Comme d'hab, commentaires et suggestions sont les bienvenues

Support des standards avec IE6 : c'est pas impossible

NiKo — Thu, 05 Jan 2006 23:42:50 +0000

Neolao - qui devrait sérieusement commencer à penser à s'ouvrir un blog - me transmet par mail une information interessante : il existe un projet de rendre IE6 à peu près respecteux des standards web et plus particulièrement des CSS. Le projet s'appelle IE7 ^[1], et propose sa solution sous la forme d'un certain nombre de fichiers javascript à inclure dans ses documents HTML.

Le résultat est assez convaincant, puisqu'il est alors possible d'utiliser les selecteurs et même les pseudo-classes :focus, :before, :after et consorts...

Au chapitre des inconvénients :

Grosse alerte de sécurité (merci le SP2) au chargement de l'objet ActiveX utilisé depuis javascript,
Obsolète en cas de désactivation du javascript par l'internaute.

Donc on ne tient pas encore la solution idéale, mais ça pourra peut-être aider les plus impatients à attendre la sortie de la future version 7 officielle (hahaha).

Téléchargement sur Sourceforge.net

Notes

[1] Apparemment, rien à voir avec la dénomination de ~~l'arlesienne~~ la future version du navigateur de Microsoft...

Animations Flash à l'échelle en CSS

NiKo — Tue, 22 Nov 2005 01:18:28 +0000

Peut-être cette astuce est-elle archi connue, mais je ne l'ai jamais vue auparavant.

Peut-être avez-vous déjà voulu réaliser un modèle de mise en page scalable ^[1] en CSS contenant des animations Flash. Et peut-être avez-vous pesté contre l'impossibilité apparente de gérer en valeurs relatives la taille desdits objets, puisque les attributs width et height d'une balise <object> sont par définition exprimées en pixels, la largeur et la hauteur restant alors desespéremment fixes lors de l'augmentation de la taille du texte et des éléments de mise en page...

Pour remédier à ce problème, ma solution réside dans l'application de valeurs proportionnelles (exprimées en em) à l'objet Flash via CSS.

Prenons par exemple ce code XHTML affichant une animation Flash de 320px par 240px:

<object id="swf_banner" type="application/x-shockwave-flash" data="swf/ban_home.swf" width="320" height="240">
	<param name="movie" value="swf/ban_home.swf" />
	<img id="img_banner" src="swf/alt/ban_home.jpg" alt="banner" />
</object>

En appliquant les règles CSS suivantes au corps du document et à l'objet, la taille de ce dernier devient fluide !

body {
	font-size: 100%; /* Autorise le redimensionnement de texte pour MSIE */
}
html > body {
	font-size: 16px; /* Pour les autres navigateurs */
}
#swf_banner {
	width: 20em;
	height: 15em;
}

Et voila, en jouant des combinaisons de touches <Ctrl> + "+" et <Ctrl> + "-" dans Firefox ^[2], votre objet flash est maintenant redimensionné à l'échelle, au même titre que le reste des éléments du document dont les dimensions sont exprimées en valeurs proportionnelles.

Conversion des valeurs `px` en `em`

Mais - allez-vous me dire - comment convertir mes valeurs de taille d'objet Flash, exprimées en pixels, en valeurs proportionnelles (em) ? Pour cela, il existe une astuce consistant à définir une taille par défaut de la police de caractère du document courant, et de lui appliquer un ratio multiplicateur pour en obtenir les valeurs proportionnelles correspondantes.

Dans notre exemple, l'objet Flash fait 320 par 240 pixels. Fixons la taille de police par défaut de notre document à 16px.

body {
	font-size: 100%; /* Autorise le redimensionnement de texte pour MSIE */
}
html > body {
	font-size: 16px; /* Pour les autres navigateurs */
}

Pour calculer la hauteur de notre objet Flash en em, on effectue une simple opération :

<taille_en_pixels_du_flash> / <taille_de_police_du_body_en_pixels> = <valeur_en_em>

Soit pour la largeur :

320 / 16 = 20em

Et pour la hauteur :

240 / 16 = 15em

Note : MSIE ne permet pas par défaut le redimensionnement de police ; il faut pour cela utiliser un subterfuge, sous cette forme :

body {
	font-size: 100%; /* Autorise le redimensionnement de texte pour MSIE */
}

Opera quand à lui propose en natif le zoom à l'échelle, quelles que soient les métriques utilisées.

Pour finir, voila un exemple concret.

Notes

[1] Je suis preneur d'une traduction de ce terme

[2] On peut aussi utiliser la combinaison <Ctrl> + molete de la souris

Prendre un Café - css

Quelques extensions Firefox pratiques

J'aime les brocolis

Alignement vertical en CSS

Sans chemise, sans pantalon

En vrac

Chantier, casque obligatoire

Support des standards avec IE6 : c'est pas impossible

Notes

Animations Flash à l'échelle en CSS

Conversion des valeurs px en em

Notes

Conversion des valeurs `px` en `em`