Bonjour,
J'ai regardé le code de plusieurs sites de référence qui proposaient des versions pour les téléphones portables et je ne sais plus trop quoi penser.
Soit ils proposaient deux versions de la feuille de style, une pour media=screen, l'autre pour media=handeld avec un seul codage xhtml strict, soit ils proposaient deux versions de leur fichier xhtml. Une pour le screen, une pour le mobile, avec chacune leur feuille de style.
L'intérêt des feuilles de style est bien de ne pas faire deux fois le travail pour le codage des pages...
Et une autre chose, j'ai lu - pas tout - les recommandations du WC et je me souviens qu'ils disaient qu'il fallait utiliser un doctype pour du xhtml basic. Et sur les sites que j'ai vus, où une version des pages était réservée aux mobiles, ils utilisaient un doctype spécial, fait pour les mobiles, du genre, xhtml mobile, etc...
Pas très clair pour moi, j'espère que quelqu'un pourra me renseigner à ce sujet.
Merci
la communauté d'entraide francophone dédiée au PHP
Choix du doctype pour mobile
Mammouth du PHP |
2937 Messages
Salut!
La DTD doit figurer tout au début de ta page, avant la balise ouvrante <html>. Elle précise la version de HTML ou de XHTML utilisée afin que le codage de la page soit correctement interprété dans le respect des standards du Web (autrement dit, des recommandations du W3C).
Voici le code de la DTD selon les versions de (X)HTML:
HTML 4.01 Strict
HTML 4.01 Transitionnel
HTML 4.01 Jeu de cadres
XHTML 1.0 Strict
XHTML 1.0 Transitionnel
XHTML 1.0 Jeu de cadres
Pour la version XHTML 1.0 mobile, il existe une DTD, que voici:
Mais, j'ignore si cette dernière est reconnue par le W3C.
Pour toutes les versions de XHTML, la balise html doit être complétée d'un attribut xmlns comme suit:
Si tu veux que ta page soit affichable sur un support autre qu'un écran d'ordinateur, il faut regarder du côté des CSS. En effet, lorsque tu attaches une feuille de styles à ta page, tu peux préciser le média auquel il s'applique.
Exemples:
Autres écritures de code:
Autre possibilité: préciser le média dans le fichier CSS lui-même:
Quelques liens pour approfondir:
-le choix de la DTD: Alsacréations;
-les différents types de médias reconnus par CSS: recommandations du W3C.
En espérant t'avoir un peu éclairé...
La DTD doit figurer tout au début de ta page, avant la balise ouvrante <html>. Elle précise la version de HTML ou de XHTML utilisée afin que le codage de la page soit correctement interprété dans le respect des standards du Web (autrement dit, des recommandations du W3C).
Voici le code de la DTD selon les versions de (X)HTML:
HTML 4.01 Strict
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">Pour toutes les versions de XHTML, la balise html doit être complétée d'un attribut xmlns comme suit:
Code : Tout sélectionner
<html xmlns="http://www.w3.org/1999/xhtml">Exemples:
Code : Tout sélectionner
<link href="ecran.css" rel="stylesheet" type="text/css">
<!-- Par défaut, s'applique à un écran d'ordinateur -->
Code : Tout sélectionner
<link href="ecran.css" rel="stylesheet" type="text/css" media="screen">
<!-- On indique que le fichier CSS s'applique à un écran d'ordinateur -->
Code : Tout sélectionner
<link href="ecran.css" rel="stylesheet" type="text/css" media="screen">
<link href="imprimante.css" rel="stylesheet" type="text/css" media="print">
Code : Tout sélectionner
<style type="text/css">
@import (styles.css);
</style>
Code : Tout sélectionner
<style type="text/css">
@import (styles.css) screen;
</style>
Code : Tout sélectionner
<style type="text/css">
@import (styles.css) screen;
@import (imprimante.css) print;
</style>
Code : Tout sélectionner
@media screen {
/* Propriétés CSS appliquables à l'écran d'ordinateur */
}
@media print {
/* Propriétés CSS appliquables à l'impression */
}
-le choix de la DTD: Alsacréations;
-les différents types de médias reconnus par CSS: recommandations du W3C.
En espérant t'avoir un peu éclairé...