Journal CSS Media Types, smartphones et prises de têtes

Posté par Infernal Quack (site web personnel) le 06 juin 2011 à 23:47.

Étiquettes :

juin

2011

DLFPiennes, DLFPiens,

Dans le but d'améliorer le moulage depuis un smartphone, j'ai jeté un oeil au "CSS Media Types" permettant à ce que des styles ne soient appliqués qu'à des médias ciblés.

Les médias CSS sont apparus avec CSS2 pour pouvoir distinguer le média sur lequel allait s'afficher le document web : http://www.w3.org/TR/CSS2/media.html#media-types
Les plus utilisés sont "all" (Tous les médias), "screen" (Ordinateur classique), "print" (Impression / Aperçu avant impression), "handheld" (Mobile) et "projection" (Mode présentation d'Opéra).

Pour les utiliser, il y a 3 façons :

Soit en important une CSS via la balise "link" on limite le média en utilisant l'attribut "media":
Soit dans la CSS elle-même via un bloc : @media monMedia {...}
Soit lors de l'import d'une CSS dans une autre via : @import(pipo.css) monMedia

Pour cibler un smartphone, on devrait utiliser le média "handheld" comme indiqué, mais il est désormais difficile de distinguer un mobile d'un ordinateur surtout depuis l'arrivée des tablettes.

Apple a carrément décidé d'ignorer le média "handheld".

Les autres navigateurs mobiles font normalement de même sauf que certains proposent une mode "Mobile View". Quand celui-ci est activé, il utilise le média "handheld". En fait ça a l'air un peu plus complexe et il utilise le média "handheld" si celui-ci est référencé, sinon il semble utiliser le média "screen". C'est le cas d'Opera Mobile, Opera Mini et du navigateur par défaut d'Android.

Mais alors si tout le monde utilise "screen", comment on peut distinguer le média cible ? Certains proposeraient du user-agent sniffing mais c'est Mal(tm)(c) !

Dans CSS3 on été ajouté des possibilités de cibler sur des caractéristiques du média : couleur ou noir et blanc, mode portrait ou paysage, définition de l'écran, taille de l'affichage,...: http://www.w3.org/TR/css3-mediaqueries/

Donc avec tous ces outils à ma disposition, j'ai voulu que la tribune de Moules.org soit moins chargée et plus utilisable depuis un smartphone. Bin c'est le bordel !
J'ai essayé les 3 façons de faire et ça merde sur Android avec les navigateurs webkit pourtant vu les commentaires Internet je ne pense pas me tromper de façon de faire. Des fois ça marche et la page se recharge et paf ça ne fonctionne plus du tout. Le seul navigateur qui fonctionne parfaitement est Opera Mini. Opera Mobile plante sur mon Android Phone pour une raison que j'ignore. Firefox Mobile semble ne bien gérer que la première façon de faire. Safari, je n'ai pas testé.

Voilà au final la chaîne média que j'ai spécifiée : handheld, only screen and (max-device-width: 600px), only screen and (max-width: 600px)

Cela cible donc les vieux navigateurs mobiles ou les récents avec un mode "Mobile View", les navigateurs sur des petits écrans et les navigateurs avec une fenêtre d'affichage pas très large. Ce dernier permet de tester sur un ordinateur classique et ça fonctionne plutôt bien pour ce cas. Le "only" est là pour que les navigateurs supportant CSS2 mais pas 3 ignore ce média et ne le prenne pas pour "screen" seul.

Si vous voulez tester par vous-même : http://moules.org/board/

Réduisez la largeur du navigateur pour voir l'effet ou essayer sur un smartphone (si ça marche).

Sinon vous pouvez essayer sur le simulateur d'Opera Mini : http://www.opera.com/mobile/demo/

Donc, lecteur, si toi aussi tu as joué avec les médias CSS pour les mobiles, comment as-tu fais pour que cela fonctionne ?

Sinon, "I have a dream". J'ai le rêve que les navigateurs proposent tous de pouvoir changer le média de "screen" à "projection", "print" ou "handheld". Faire ses présentations avec un navigateur c'est top ( Exemple : http://www.howtocreate.co.uk/operaStuff/operaShowPresentation.html à voir sous Opera après avoir mis en plein écran). Et cela sans hack ou add-on et sans mélanger cela avec une fonctionnalité autre (Fullscreen d'Opera). On peut toujours rêver.

Sinon, je ne comptais pas cibler que Moules.org mais si je trouve un truc qui fonctionne bien ça serait de pouvoir avoir une version mobile de DLFP. Pour cela il faudrait que :

Soit que les CSS personnalisées gère cela elles-même avec la possibilité d'avoir un mode mobile avec un thème similaire à celui sur PC et la chaîne média libre (donc possibilité de cibler finement). Par contre c'est du boulot pour les concepteurs de CSS.
Soit on a une CSS mobile unique non personnalisable se lançant avec une chaîne média figée et à définir.
Soit on a des CSS personnalisables pour PC et des CSS mobiles personnalisables avec chaîne média figée et à définir.
Soit la possibilité de choisir les CSS que l'on veut en indiquant la chaîne média libre. Ceci permettrait d'avoir une CSS adaptée pour un 24", une pour son smartphone, une pour sa tablette,... Aux auteurs d'indiquer pour quel périphériques leur CSS est conseillée sans forcer la main. Un vrai mode avancée pour les thèmes DLFP !

Si ça marche, Ne-serait pas cool ?

# Cela offrirait une possibilité

Posté par Fuasgail le 07 juin 2011 à 00:23. Évalué à 2.

Bonsoir,

J'avais aussi commencé à regarder ces CSS media, et j'y pensais particulièrement depuis que B r u n o a fait sa spasibo. Mais je n'étais pas encore allé aussi loin que toi pour proposer quoi que se soit.
Merci pour le boulot ! :-)

Ne naviguant pas spécialement sur mobile, j'y pensais plus pour offrir une possibilité aux visiteurs. Même avec le N900, j'avoue que j'ai du mal à l'utiliser pour autre chose que chercher une information précise rapidement.

Sinon, sur le N900 avec firefox (le dernier) ou le navigateur par défaut (un autre firefox), pour ton lien (moules) cela ne change rien, mais je pense que c'est normal puisqu'il fait 800 de largeur. Alors que c'est typiquement un media mobile.
# Choix de l'utilisateur

Posté par Michaël Malter (site web personnel) le 07 juin 2011 à 00:33. Évalué à 5.

Je crois qu'il vaut mieux s'en tenir au standard. Pour ma part, j'utilise la vue mobile la plupart du temps sur mon smartphone. Parfois, je préfère voir le site comme sur mon PC, même si ce n'est pas pratique. Au final, le choix entre les deux vues doit rester à l'utilisateur. Si les gens ne souhaitent pas utiliser les fonctions spécifiques de leurs téléphones… tant pis pour eux.
# Récapitulatif ?

Posté par windu.2b le 07 juin 2011 à 08:20. Évalué à 2.

Existe-t-il un site répertoriant les media types CSS (et éventuellement les styles) CSS supportés par les différents navigateurs mobiles ?
- [^] # Re: Récapitulatif ?
  
  Posté par Vincent Bernat (site web personnel) le 07 juin 2011 à 09:00. Évalué à 3.
  Voir :
  - http://caniuse.com/#feat=css-media
  - https://github.com/scottjehl/Respond
# Html5boilerplate

Posté par weeber (site web personnel) le 07 juin 2011 à 08:44. Évalué à 4.

Tu peux regarder du coté de html5boilerplate, c'est un concentré de toutes les bonnes pratiques, pour faire des pages utilisant html5 et css3.
Il y a ce dont tu parles :

http://html5boilerplate.com/docs/#The-style%E2%98%85media-queries

Le github:
https://github.com/paulirish/html5-boilerplate
- [^] # Re: Html5boilerplate
  
  Posté par Vincent Bernat (site web personnel) le 07 juin 2011 à 08:59. Évalué à 3.
  
  À noter la possibilité de spécifier le viewport dans le template proposé (meta name="viewport" content="width=device-width,initial-scale=1.0"). En combinaison avec les CSS media queries, on peut obtenir une version mobile de son site sans trop d'efforts (à condition de pas avoir surchargé sa page de javascript et d'images). Perso, j'utilise pas le polyfill pour le support des vieux IE. Je ne sais pas si y'a des masses de mobile en circulation avec ces versions.
  
  Pour une autre démo des CSS media queries, j'ai écrit une bafouille dessus y'a pas longtemps :
  http://www.luffy.cx/fr/blog/2011-css-media-query.html
  
  Je n'ai pas eu de soucis lors des tests sur Android (et ça a l'air de fonctionner sur iPhone), mais je ne change pas la feuille de style du tout au tout. Il y a juste des adaptations successives selon la largeur dispo. Y'a un lien pour le source du site en bas pour voir les CSS non minifiés.
  - [^] # Re: Html5boilerplate
    
    Posté par olivn le 07 juin 2011 à 21:53. Évalué à 1.
    
    Article assez ancien décrivant une méthode de détection de mobile : android, iphone, blackberry, windows mobile ...
    
    http://www.bushidodesigns.net/blog/mobile-device-detection-css-without-user-agent/
# Et les sous domaine ?

Posté par Memiks (site web personnel) le 07 juin 2011 à 09:46. Évalué à 1.

J'ai eu plusieurs fois à gérer cette problématique.
Et bien que les standard puisse le gérer (CSS2 & 3, média etc...), j'ai remarqué que la meilleure solution est souvent de passer par un sous domaine par ex:

mobile.linuxfr.org ainsi tu affiches en version mobile...
- [^] # Re: Et les sous domaine ?
  
  Posté par Vincent Bernat (site web personnel) le 07 juin 2011 à 10:11. Évalué à 3.
  
  Un sous-domaine dédié, ça permet aussi de servir du code HTML réduit, avec moins d'images, moins de Javascript. Les CSS peuvent pas réduire la taille d'une page de 1 Mo à 90 Ko par exemple.
  - [^] # Re: Et les sous domaine ?
    
    Posté par Florence Birée (site web personnel) le 07 juin 2011 à 11:47. Évalué à 4.
    
    Et après on se retrouve à surfer sur la version mobile du site avec son ordi quand on est sur une connexion pourrie (56k, 3G, wifi capté dans des conditions acrobatiques)...
    
    Avoir des pages de faible taille, ça me paraît être un objectif pertinent quelque soit le terminal utilisé (qui n'a pas de rapport avec la qualité de la connexion disponible...).
    
    Alors c'est dommage de le lier à des contraintes relatives à la taille de l'écran (j'avoue d'ailleurs que je préfèrerai parfois voir un site en vue « mobile » sur mon EeePC 701 et son écran en 800x480, même quand j'ai la connexion qui poutre de renater).
    
    Donc arrêtons de mélanger taille d'écran, qualité de la connexion, et type de périphérique !
# Ce n'est pas ton problème

Posté par devnewton 🍺 (site web personnel) le 07 juin 2011 à 09:56. Évalué à 6.

Mais alors si tout le monde utilise "screen", comment on peut distinguer le média cible ?

Si les navigateurs mobiles n'utilisent pas le mode "handheld", tant pis pour eux. Pour moi, un site doit être lisible même quand on désactive les styles.

Le post ci-dessus est une grosse connerie, ne le lisez pas sérieusement.
# ti chouïa qui marche pas

Posté par solsTiCe (site web personnel) le 07 juin 2011 à 10:39. Évalué à 1.

euh je voudrais pas casser ta joie mais moi ca marche pas dans operamobile

y'a le bandeau tribune qui se ballade au milieu de l'écran quand je scrolle vers le bas.

et puis même sans scroller il recouvre en partie le premier commentaire
- [^] # Re: ti chouïa qui marche pas
  
  Posté par solsTiCe (site web personnel) le 07 juin 2011 à 10:57. Évalué à 1.
  
  ooops. c'est avec opera mobile emulator http://www.opera.com/developer/tools/mobile/ que ça marche pas
  
  c'est dommage, il donne pas le même rendu que opera mini. Il est quand même censé remplacé opera mini sur le desktop ... on peut même débuggé avec. super pratique mais ...
  
  sinon pour utiliser opera mini sur le desktop directement y'a micro emulator http://www.microemu.org/ il suffit de charger le .jad
  - [^] # Re: ti chouïa qui marche pas
    
    Posté par BohwaZ (site web personnel, Mastodon) le 07 juin 2011 à 18:52. Évalué à 7.
    
    Pour tester les sites en affichage handheld, il suffit d'utiliser Opera version desktop et dans le menu Affichage de choisir "Petit écran" (Shift+F11 le raccourci chez moi, mais ça a pu changer dans la config par défaut).
    
    Au passage je rappelle à tous les marketeux et chefs de projet que non l'iPhone n'est pas le navigateur majoritaire sur mobile, c'est bel et bien Opera (Mini/Mobile) qui est le navigateur mobile le plus utilisé au monde.
    
    Oh et parmis les téléphones les plus utilisés au monde pour un usage mobile beaucoup ne sont pas tactiles (se reporter aux state of the mobile web d'opera, toujours intéressants). Donc non faire un site "IPhone" n'est pas faire un site mobile, c'est perdre son temps pour un public minoritaire, tout comme l'époque ou on faisait des sites i-Mode pour les clients Bouygues Télécom. Oui l'Iphone est un navigateur mobile, mais c'en est un parmi une myriade, et il faut tous les prendre en compte. Et ça compte aussi pour le côté graphique, reprendre le style de l'interface iOS non je suis désolé ce n'est ni une bonne idée, ni original.
    
    « Je vois bien à quels excès peut conduire une démocratie d'opinion débridée, je le vis tous les jours. » (Nicolas Sarkozy)
    - [^] # Re: ti chouïa qui marche pas
      
      Posté par Infernal Quack (site web personnel) le 07 juin 2011 à 23:04. Évalué à 3.
      
      On dirait que ça a été viré dans les dernières versions d'Opéra :(
      
      L'association LinuxFr ne saurait être tenue responsable des propos légalement repréhensibles ou faisant allusion à l'évêque de Rome, au chef de l'Église catholique romaine ou au chef temporel de l'État du Vatican et se trouvant dans ce commentaire
      - [^] # Re: ti chouïa qui marche pas
        
        Posté par BohwaZ (site web personnel, Mastodon) le 07 juin 2011 à 23:43. Évalué à 2.
        
        Effectivement ce n'est plus affiché, mais ça marche encore, va dans les préférences, raccourcis clavier et ajoute un raccourci (par exemple f11 shift) avec comme action :
        
        Enable handheld mode | Disable handheld mode
        
        Et ça marche. Mais bon ptet qu'ils vireront le mode un jour. Les cons. (Noter que je suis coincé avec Opera 10.11 depuis longtemps car le navigateur ne fait plus rien correctement maintenant :'( ).
        
        « Je vois bien à quels excès peut conduire une démocratie d'opinion débridée, je le vis tous les jours. » (Nicolas Sarkozy)
        
        [^] # Re: ti chouïa qui marche pas
        
        Posté par Infernal Quack (site web personnel) le 08 juin 2011 à 01:17. Évalué à 3.
        
        Viré en 11.x :(
        
        L'association LinuxFr ne saurait être tenue responsable des propos légalement repréhensibles ou faisant allusion à l'évêque de Rome, au chef de l'Église catholique romaine ou au chef temporel de l'État du Vatican et se trouvant dans ce commentaire
# C'est le bordel

Posté par BohwaZ (site web personnel, Mastodon) le 07 juin 2011 à 18:45. Évalué à 6.
Alors déjà effectivement, depuis qu'Apple a décidé que handheld ça servait à rien (lol aller on casse le web) c'est le bordel monstre.

Je rappelle que si vous êtes un bon dév/intégrateur web vous n'avez pas besoin de créer un site différent pour mobile et pour desktop, car vous aurez déjà veillé à ce que votre site soit léger, rapide et conforme aux standards. Donc exit les mobile.site.tld qui ne fonctionnent jamais bien (par exemple certains sites pensent que Opera n'existe qu'en navigateur mobile et redirigent le navigateur de bureau sur leur site mobile, les noobs), maintenir deux fois le même site c'est un peu comme se casser le cul pour rien.

Donc : faites un site correct pour le média que vous utilisez au quotidien (desktop pour la plupart d'entre nous), vous ajouterez les autres médias ensuite.

Pour les conneries Apple et autres (même Opera mobile/mini maintenant), j'ai personnellement choisi la solution la moins prise de tête :
```
<?php

const MOBILE_UA_REGEXP = '!(?:Mobile.*Safari|NetFront|Minimo|Fennec|MIDP-?[12].0|Nokia|Vodafone|webOS|Palmsource|PalmOS|Symbian|Opera Mini|Opera\s+Mobi|BlackBerry|HTC|IEMobile|Android|Series60|Symbian OS|Windows CE|Windows Phone)!i';

if (!empty($_SERVER['HTTP_USER_AGENT']) && preg_match(MOBILE_UA_REGEXP, $_SERVER['HTTP_USER_AGENT']))
{
    echo '<link rel="stylesheet" type="text/css" href="static/handheld.css" media="screen" />';
    // iPhone specific bullshit
    echo '<meta name="viewport" content="width=device-width, initial-scale=1.0" />';
}
else
{
    echo '
        <link rel="stylesheet" type="text/css" href="static/handheld.css" media="handheld" />
        <link rel="stylesheet" type="text/css" href="static/screen.css" media="screen,projection" />';
}
?>
```
Oui c'est du sniffing, c'est crade, mais c'est pas moi qui ait commencé à ne pas respecter la spéc et à faire dire "nan nan je suis pas un mobile" aux mobiles.

Je pense que se baser uniquement sur la taille de l'écran n'est pas un critère suffisant pour appliquer une CSS handheld, car on peux très bien être sur un écran et avoir une taille de fenêtre inférieure à 480px (ou 800px en mode paysage sur les mobiles), ça n'a rien à voir. Le mobile est un média bien spécifique qui est limité à plein de niveaux et notamment au niveau de l'interaction, certains vont avoir une interface tactile au doigt (donc faut prévoir des zones de clic plus grosses), d'autres une navigation au clavier (c'est la majorité des utilisateurs mobiles je crois), d'autres une trackball ou un stylet, etc. On ne conçoit pas une CSS handheld simplement en se disant que l'écran est moins grand, c'est toute une logique d'accessibilité.

Avoir détruit la CSS handheld est une décision stupide prise par Apple qui ne peux s'empêcher de ré-inventer la roue de manière non-standard afin de créer "son" éco-système adapté uniquement à sa plateforme.

« Je vois bien à quels excès peut conduire une démocratie d'opinion débridée, je le vis tous les jours. » (Nicolas Sarkozy)
- [^] # Re: C'est le bordel
  
  Posté par claudex le 07 juin 2011 à 19:19. Évalué à 3.
  
  (par exemple certains sites pensent que Opera n'existe qu'en navigateur mobile et redirigent le navigateur de bureau sur leur site mobile, les noobs
  
  même chose avec Konqueror (qui n'existe même pas en version mobile lui). Mais le pire, c'est qu'ils redirigent sur la page d'accueil, du coup, tu perds l'article sur lequel tu étais.
  
  « Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche
  - [^] # Re: C'est le bordel
    
    Posté par dj_ (site web personnel) le 07 juin 2011 à 23:27. Évalué à 1.
    
    Et j'ai déjà eut pareil avec midori, qui était considéré comme un navigateur pour mobile par facebook par exemple...

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.