[CSS] faire un site qui est PDA friendly

faire un site qui est PDA friendly [CSS] - HTML/CSS - Programmation

Marsh Posté le 21-09-2006 à 10:09:20    

Bonjour,
 
Depuis que j'ai un PDA je m'apercois que c'est souvent de galère de surfer car les sites ne sont pas prévus pour. J'ai donc essayé de faire un test avec 2 CSS, un pour PC et un pour PDA mais ca ne marche pas trop:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3.   <head>
  4.     <title>Test PDA</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.     <link type="text/css" rel="stylesheet" href="style.css" media="screen,print" title="style" />
  7.     <link type="text/css" rel="stylesheet" href="style_pda.css" media="handheld" title="style_pda" />
  8.   </head>
  9.   <body>
  10.     <div id="gauche">test that</div><div id="droite">YAIS!!</div>
  11.   </body>
  12. </html>


le CSS pour PC:

Code :
  1. #gauche {
  2.   display: inline;
  3.   border:1px solid #ff0000;
  4.   font-weight:bold
  5. }
  7. #droite {
  8.   display: inline;
  9.   border: 1px solid #0000ff;
  10.   font-weight:bold
  11. }


le CSS pour PDA:

Code :
  1. #gauche {
  2.   border:1px solid #00ff00;
  3. }
  5. #droite {
  6.   border: 1px solid #00ff00;
  7. }


 
Au résultat sous IE (ou firefox) sur PC j'ai bien 2 boites cote a cote avec les contours rouge et bleu et du texte en gras.
Sur le PDA je voudais qu'il me prenne uniquement son CSS, au lieu de cela il me fait un mix des 2. Il met les boîtes cote a cote (au lieu de l'une sous l'autre), le texte en gras et les contours de boites en vert.
 
D'autre part je sais que IE suis le standard quand ca l'arrange donc est ce un caprice de IE ou bien un problème dans mon code :??:  
 
Merci pour vos réponses :jap:

Reply

Marsh Posté le 21-09-2006 à 10:09:20   

Reply

Marsh Posté le 21-09-2006 à 10:49:23    

Je viens de tester avec minimo (mozilla pour pda) et il me prend que le CSS pour PC lui :pt1cable:

Reply

Marsh Posté le 21-09-2006 à 10:55:47    

A tester :
 

Code :
  1. 7.1 Introduction aux types de médias
  2. Une des fonctions primordiales des feuilles de style repose sur le fait de pouvoir adapter la représentation d'un
  3. document pour différents médias : un écran, une feuille de papier, un synthétiseur de parole, un appareil braille,
  4. etc.
  5. Certaines propriétés CSS fonctionnent exclusivement avec un média donné (ex. la propriété 'cue−before' pour les
  6. agents utilisateurs auditifs). Cependant, il peut arriver qu'une même propriété fasse partie de différentes feuilles de
  7. style propres un média, cette propriété prenant alors des valeurs en fonction de ce média. Par exemple, la
  8. propriété 'font−size' peut jouer un rôle aussi bien dans un rendu sur écran que dans une page imprimée. Ces deux
  9. médias sont suffisamment dissemblables pour nécessiter des valeurs particulières pour cette même propriété ; le
  10. rendu typique d'un document sur un moniteur demande une plus grande taille de police que sur une feuille de
  11. papier. L'expérience montre également que les polices sans−serif ont une plus grande lisibilité à l'écran, et
  12. inversement, que les polices serif sont plus lisibles sur le papier. Pour ces raisons, il faut pouvoir dire qu'une
  13. feuille de style, ou une partie de celle−ci, ne concerne que certains types de médias.
  14. 7.2 La spécification des feuilles de style en fonction du média
  15. Pour l'instant, on peut adjoindre les feuilles de style appropriées aux médias concernées de deux façons :
  16. En spécifiant le média visé dans la feuille de style au travers des règles−at @media ou @import ;
  17. Exemple(s) :
  18. @import url("loudvoice.css" ) aural;
  19. @media print {
  20. /* la feuille de style pour l'impression vient ici */
  21. }
  22. ·
  23. En spécifiant le média visé dans le langage du document. Par exemple avec HTML 4.0 ([HTML40]), on
  24. utilise l'attribut "media" de l'élément LINK pour attacher une feuille de style externe à un média donné :
  25. <!DOCTYPE HTML PUBLIC "−//W3C//DTD HTML 4.0//EN">
  26. <HTML>
  27. <HEAD>
  28. <TITLE>Un lien vers le média cible</TITLE>
  29. <LINK rel="stylesheet" type="text/css"
  30. media="print, handheld" href="foo.css">
  31. </HEAD>
  32. <BODY>
  33. <P>Le corps du document...
  34. </BODY>
  35. </HTML>
  36. ·
  37. La règle @import est définie dans le chapitre sur la cascade.
  38. 7.2.1 La règle @media
  39. Une règle @media spécifie les types de médias (séparés par des virgules) d'un jeu de règles (entres des accolades).
  40. La construction @media précise les règles pour les divers médias dans la même feuille de style :
  41. @media print {
  42. BODY { font−size: 10pt }
  43. }
  44. @media screen {
  45. BODY { font−size: 12pt }
  46. }
  47. @media screen, print {
  48. BODY { line−height: 1.2 }}


 
EDIT : Copie d'une partie de la doc sur les css2 ;)


Message édité par chani_t le 21-09-2006 à 10:56:23
Reply

Marsh Posté le 21-09-2006 à 11:08:00    

Pour info, peut-être que les tous derniers navigateurs pour PDA commencent à supporter ça.
 
Mais j'ai voulu tester il y a quelques temps (6 mois ? 1 an ?) sur mon SPV, et même en prenant la dernière version d'Opera à l'époque (pas de Moz pour Windows Mobile :spamafote:) pas moyen de faire comprendre le media "handled" (c'était déjà mieux que IE qui comprenait pas "media" tout court :D)
Du coup ben... Je te conseille de faire une CSS "normale" qui passe quand même partout, parceque si y'a 1% des PDA actuels succeptibles de peut-être comprendre "handled", c'est bien le maximum.
 
J'ai testé et subit pour toi :sweat:
 
A noter aussi que je ne sais pas ce qu'il en est actuellement. Mais à l'époque le media "handled" n'était qu'à l'état de Working Draft, et n'était pas prévu dans le CSS 2, mais plutôt dans le 3.

Message cité 1 fois
Message édité par MagicBuzz le 21-09-2006 à 11:12:02
Reply

Marsh Posté le 21-09-2006 à 11:20:16    

MagicBuzz a écrit :

... Mais à l'époque le media "handled" n'était qu'à l'état de Working Draft, et n'était pas prévu dans le CSS 2, mais plutôt dans le 3.


 
l'extrait que j'ai mis est un extrait des recommandation W3C CSS2 : REC−CSS2−19980512
donc a priori, il sont dans le css2. ;)

Reply

Marsh Posté le 21-09-2006 à 11:22:58    

Ben chais pas.
Toujours est-il qu'il est supporté quand il a le temps :spamafote:
 
ps: recommandations, c'est pas le doc définitif à ma connaissance. c'est pas au contraire, avec la working draft ? genre c'est la liste des "recommandations" pour que la future norme soit mieu que la première (des suggestions quoi)
 
parceque notamment 1998, ça m'étonne que le CSS 2 ait été finalisé à cette époque alors que le CSS 1 commençait à peine à prendre :??:

Message cité 1 fois
Message édité par MagicBuzz le 21-09-2006 à 11:25:11
Reply

Marsh Posté le 21-09-2006 à 11:25:25    

c est un peu crade mais on peut pas faire comme a la vieille epoque ? un js qui reconnait avec quoi tu te ballades sur le site (que ce soit basé sur le navigateur ou l os j y connais rien en pda :D) et qui envoie la bonne css selon le cas

Reply

Marsh Posté le 21-09-2006 à 11:26:53    

ben sur PDA, généralement le JS est encore plus mal pris en charge que le CSS, c'est à dire pas du tout :D

Message cité 1 fois
Message édité par MagicBuzz le 21-09-2006 à 11:27:14
Reply

Marsh Posté le 21-09-2006 à 11:28:51    

MagicBuzz a écrit :

ben sur PDA, généralement le JS est encore plus mal pris en charge que le CSS, c'est à dire pas du tout :D


 
maÿçaÿçupâÿre  [:ciler]  

Reply

Marsh Posté le 21-09-2006 à 11:40:03    

MagicBuzz a écrit :

...
parceque notamment 1998, ça m'étonne que le CSS 2 ait été finalisé à cette époque alors que le CSS 1 commençait à peine à prendre :??:


 
arf.. c'est pas faux... ben du coups chais pas :D, mais alors pourquoi garder les recommandations
 

Code :
  1. 7.1 Introduction to media types
  3. One of the most important features of style sheets is that they specify how a document is to be presented on different media:
  4. on the screen, on paper, with a speech synthesizer, with a braille device, etc.
  6. Certain CSS properties are only designed for certain media (e.g., the 'page-break-before' property only applies to paged media).
  7. On occasion, however, style sheets for different media types may share a property, but require different values for that property.
  8. For example, the 'font-size' property is useful both for screen and print media.
  9. The two media types are different enough to require different values for the common property;
  10. a document will typically need a larger font on a computer screen than on paper.
  11. Therefore, it is necessary to express that a style sheet, or a section of a style sheet, applies to certain media types.
  12. 7.2 Specifying media-dependent style sheets
  14. There are currently two ways to specify media dependencies for style sheets:
  16.     * Specify the target medium from a style sheet with the @media or @import at-rules.
  18.       Example(s):
  20.       @import url("fancyfonts.css" ) screen;
  21.       @media print {
  22.         /* style sheet for print goes here */
  23.       }
  25.     * Specify the target medium within the document language. For example, in HTML 4 ([HTML4]),
  26. the "media" attribute on the LINK element specifies the target media of an external style sheet:
  28.       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  29.       <HTML>
  30.          <HEAD>
  31.             <TITLE>Link to a target medium</TITLE>
  32.             <LINK REL="stylesheet" TYPE="text/css"
  33.         MEDIA="print, handheld" HREF="foo.css">
  34.          </HEAD>
  35.          <BODY>
  36.             <P>The body...
  37.          </BODY>
  38.       </HTML>
  40. The @import rule is defined in the chapter on the cascade.
  41. 7.2.1 The @media rule
  43. An @media rule specifies the target media types (separated by commas) of a set of rules (delimited by curly braces).
  44. The @media construct allows style sheet rules for various media in the same style sheet:
  46.   @media print {
  47.     body { font-size: 10pt }
  48.   }
  49.   @media screen {
  50.     body { font-size: 13px }
  51.   }
  52.   @media screen, print {
  53.     body { line-height: 1.2 }
  54.   }


 
Extrait de Cascading Style Sheets, level 2 revision 1
CSS 2.1 Specification
W3C Working Draft 11 April 2006
 
Et pis il y a aussi les recommandations css pour modile/pda ICI

Message cité 1 fois
Message édité par chani_t le 21-09-2006 à 11:41:23
Reply

Marsh Posté le 21-09-2006 à 11:40:03   

Reply

Marsh Posté le 21-09-2006 à 12:11:05    

chani_t a écrit :

mais alors pourquoi garder les recommandations


Bah justement parcequ'il me semble qu'ils ne les ont pas implémentées dans le 2.0, et du coup les ont reconduites pour le 2.1
Si y'a un gars du consortium qui veut cette fonctionnalité et tous les autres refusent, on peut avoir cette roco jusqu'à la version 10 :D

Reply

Marsh Posté le 21-09-2006 à 12:17:51    

J'ai essayé la syntaxe "@media" et mozilla s'en tape completement du "handheld". IE lui tente de faire un mix toujours. Bref je pense que vous avez raison et c'est toujours pas supporté par les browsers.
 
On est bon pour se taper des sites avec une presentation pas terrible pendant un moment encore. :(  
 
je vais qd meme tester opera, on sait jamais faut garder espoir :D

Reply

Marsh Posté le 21-09-2006 à 12:25:17    

Quand tu parles de moz, c'est sur PC ou PDA ? Parceque si c'est sur PC c'est normal qu'il se contrebalance de "handled".

Reply

Marsh Posté le 21-09-2006 à 12:26:20    

non non la version PDA ;)

Reply

Marsh Posté le 21-09-2006 à 12:27:39    

Ah, y'a une version PDA maintenant ? :)

Reply

Marsh Posté le 21-09-2006 à 12:36:49    

Oui elle s'appelle minimo mais c'est encore en dév, donc peut être pour cette raison qu'elle ne supporte pas toutes les fonctions.
 
 
Sinon excellent nouvelle, opera sur PDA va bien prendre les les attributs qui lui sont dediés en utilisant la syntaxe "@media" dans 1 seul fichier CSS. par contre avec 2 fichiers il ne va pas lire le fichier qui lui est dédié et la présentation reste brut de fonderie. Mais c'est deja un mieux :)

Reply

Marsh Posté le 21-09-2006 à 12:43:21    

En fait la solution serait de faire comme ca:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3.   <head>
  4.     <title>Test PDA</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.     <link type="text/css" rel="stylesheet" href="style_pda.css" media="handheld" title="style_pda" />
  7.     <link type="text/css" rel="stylesheet" href="style.css" media="screen" title="style" />
  8.   </head>
  9.   <body>
  10.     <div id="gauche">test that</div><div id="droite">YAIS!!</div>
  11.   </body>
  12. </html>


 
En spécifiant le CSS du PDA en 1er opera le charge correctement. Sur PC les browsers eux arrivent a charger correctement le 2eme qui leur ait dedié sauf.... FIREFOX qui lui n'en charge aucun. Ca me parait bizarre ca qd meme [:noxauror]  
 [:haha]

Reply

Marsh Posté le 21-09-2006 à 12:45:14    

Pour un coup que FF est le plus buggé de tous les navigateurs, ça se fête :bounce:
 
Tu peux mettre tes tests sur une page publique ?
J'aimerais voir ce que ça donne avec IE7, et j'aila flème de faire des copier/coller de ton code :ange:

Reply

Marsh Posté le 21-09-2006 à 12:52:25    

IE7 RC1 a passé le test avec succès : quelque soit l'ordre des CSS, il charge la bonne et n'applique surtout pas l'autre.
 
test.htm


<html>
  <head>
    <title>Test Handled</title>
    <link type="text/css" rel="stylesheet" media="screen" href="screen.css"/>
    <link type="text/css" rel="stylesheet" media="handled" href="handled.css"/>
  </head>
  <body>
   <h1>Test Handled</h1>
   <p>TAIST</p>
  </body>
</html>


 
screen.css


body
{
  font-size: 5cm;
}


 
handled.css


body
{
  color: red;
}


Message édité par MagicBuzz le 21-09-2006 à 12:53:36
Reply

Marsh Posté le 21-09-2006 à 13:00:07    

Comme IE6 alors. Par contre ya des bugs d'affichage sous IE6 (avec mon code). Les boites div n'ont pas le cadre complet autour, juste les bordures droites et gauche qui sont en couleur :D

Reply

Marsh Posté le 21-09-2006 à 13:36:57    

mais vu que c est handheld le comportement logique veut que la ligne complete soit ignoree si tu mets handled ;)

Reply

Marsh Posté le 21-09-2006 à 13:57:14    

Groumpf !
 
Dislexie, quand tu nous tiens :o
 
Bon, après correction, IE7 se comporte quand même normalement avec on style.
 
Mais pas avec celui d'Ivan (il aplique les deux feuilles) :heink:


Message édité par MagicBuzz le 21-09-2006 à 13:57:54
Reply

Marsh Posté le 21-09-2006 à 13:59:49    

Argh !!!
 
Sisisi en fait sous IE7 ça marche bien le truc d'Ivan, sauf que sur mon écran de portable, au milieu "rouge + bleu" = "violet" :D
 
Et j'ai pas de vert par contre.
 
Chose étrange par contre, moi j'ai la bordure à gauche et à droite de chaque div, mais pas au dessus/dessous :??:

Reply

Marsh Posté le 21-09-2006 à 14:01:45    

Arf, je viens de voir... En fait c'est un bug dans les CSS d'Ivan : un "display: inline" sur un div, c'est déjà un miracle qu'il nous mette une bordure à droite à et gauche... passe en block ;)

Reply

Marsh Posté le 21-09-2006 à 14:10:07    

Ah ce moment la en block il va mettre les div un dessous l'autre non :??:

Reply

Marsh Posté le 21-09-2006 à 14:15:42    

ben tu indiques le float :spamafote:


Message édité par MagicBuzz le 21-09-2006 à 14:15:53
Reply

Marsh Posté le 21-09-2006 à 14:26:32    

Effectivement :jap: Désolé je connais très peu le CSS, à part les quelques attributs pour mettre en gras et changer la police...

Reply

Marsh Posté le 21-09-2006 à 15:52:12    

Bon j'ai trouvé pourquoi ca buggait avec firefox. C'est le title dans le link qui indique que c'est un CSS alternatif du coup Firefox l'ignore [:mrbrelle]

Reply

Marsh Posté le 21-09-2006 à 15:53:10    

arf

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed