Une CSS pour les petits écrans (media handheld)

Une CSS pour les petits écrans (media handheld) (le 11 avril 2005)

Je me suis un peu amusé ce dimanche, et j'ai pu ajouter une CSS dédiée à l'affichage sur petits écrans (média "handheld").

Pour résumer en deux mots, tout est mini dans cette CSS, le site s'affiche en une colonne, les images sont remplacées par leur attribut "alt", etc.

Si vous utilisez Opera, vous pouvez voir ce que cela donne en mode "Small Screen" (rendu en petit écran, dispo si vous faites Maj + F11 sous Opera).

Toutefois, je trouvais dommage que l'on ne puisse pas voir dans un navigateur classique ce que cela peut donner, j'ai donc créé une seconde CSS basée sur celle pour les petits écrans, avec deux ou trois légères modifications inhérentes au média "screen".

C'est donc en quelque sorte un nouveau skin que je vous propose, je l'ai mis dans la catégorie "Expériences curieuses" de la page des skins.

Et comme tout est mini dans cette CSS, je l'ai donc logiquement baptisée Mini-Blue !

P.S : il est tout à fait normal que cette expérimentation ne soit pas parfaite, si vous avez des remarques à me communiquer à ce sujet (tests, conseils, etc. j'ai un peu de mal à trouver des infos sur le sujet), n'hésitez pas.

Permalien :

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

7 commentaires

Posté par Cédric le 11/04/2005, à 18:49:15
Je viens de tester sur Opera sur mon Nokia 6600, et c'est largement lisible. Merci pour l'expé, je pense faire de même pour mes sites prochainement.
Posté par Nico le 11/04/2005, à 19:21:34
Merci pour le test, je n'ai malheureusement pas la possibilité de voir moi-même le résultat. (triste)

C'est pas trop long à charger d'ailleurs ?
Posté par Antoine le 15/04/2005, à 18:59:13
Il existe aussi une extension pour Firefox, Small Screen Rendering, développé par Disruptive Innovations (Nvu).

http://disruptive-innovations.com/products/index.html#SSRXPI

parceque Opera, c'est pas libre (grand sourire)

</troll>

Antoine (clin d’oeil)
Posté par Nico le 15/04/2005, à 22:52:14
Ah, je connaissais pas !

Je viens de l'essayer, et il faut reconnaître qu'Opera lui est largement supérieur dans ce domaine, l'extension de Firefox ne prend pas en compte le media handheld !

Résultat : la CSS handheld.css n'est pas utilisée dans ce mode de rendu !

Dommage... (triste)
Posté par Antoine le 17/04/2005, à 14:45:20
Oui, effectivement, dommage (triste)

Tu peux suggérer une amélioration sur le blog de Daniel Glazman (http://glazman.org/weblog/dotclear/index.php?2005/04/14/992-small-screen-renderer-11 ) (clin d’oeil)

Antoine
Posté par Nico le 18/04/2005, à 11:59:00
C'est fait !
Posté par erilam le 17/10/2008 à 0:47:01
Pour ceux qui, contrairement à Cédric n'ont pas de super Nokia, il existe une démo ici : http://www.feedm8.com/zarabianienablogach1 (clin d’oeil)

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.