Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2027 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] faire un site qui est PDA friendly

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] faire un site qui est PDA friendly

n°1445628
IvanleFou
Posté le 21-09-2006 à 10:09:20  profilanswer
 

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. }
  6. #droite {
  7.   display: inline;
  8.   border: 1px solid #0000ff;
  9.   font-weight:bold
  10. }


le CSS pour PDA:

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


 
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:

mood
Publicité
Posté le 21-09-2006 à 10:09:20  profilanswer
 

n°1445649
IvanleFou
Posté le 21-09-2006 à 10:49:23  profilanswer
 

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

n°1445656
chani_t
From Dune
Posté le 21-09-2006 à 10:55:47  profilanswer
 

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
n°1445666
MagicBuzz
Posté le 21-09-2006 à 11:08:00  profilanswer
 

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
n°1445673
chani_t
From Dune
Posté le 21-09-2006 à 11:20:16  profilanswer
 

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. ;)

n°1445677
MagicBuzz
Posté le 21-09-2006 à 11:22:58  profilanswer
 

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
n°1445680
mIRROR
Chevreuillobolchévik
Posté le 21-09-2006 à 11:25:25  profilanswer
 

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

n°1445684
MagicBuzz
Posté le 21-09-2006 à 11:26:53  profilanswer
 

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
n°1445686
mIRROR
Chevreuillobolchévik
Posté le 21-09-2006 à 11:28:51  profilanswer
 

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]  

n°1445694
chani_t
From Dune
Posté le 21-09-2006 à 11:40:03  profilanswer
 

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


 
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
mood
Publicité
Posté le 21-09-2006 à 11:40:03  profilanswer
 

n°1445703
MagicBuzz
Posté le 21-09-2006 à 12:11:05  profilanswer
 

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

n°1445706
IvanleFou
Posté le 21-09-2006 à 12:17:51  profilanswer
 

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

n°1445711
MagicBuzz
Posté le 21-09-2006 à 12:25:17  profilanswer
 

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".

n°1445713
IvanleFou
Posté le 21-09-2006 à 12:26:20  profilanswer
 

non non la version PDA ;)

n°1445715
MagicBuzz
Posté le 21-09-2006 à 12:27:39  profilanswer
 

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

n°1445718
IvanleFou
Posté le 21-09-2006 à 12:36:49  profilanswer
 

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 :)

n°1445720
IvanleFou
Posté le 21-09-2006 à 12:43:21  profilanswer
 

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]

n°1445721
MagicBuzz
Posté le 21-09-2006 à 12:45:14  profilanswer
 

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:

n°1445723
MagicBuzz
Posté le 21-09-2006 à 12:52:25  profilanswer
 

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
n°1445727
IvanleFou
Posté le 21-09-2006 à 13:00:07  profilanswer
 

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

n°1445739
mIRROR
Chevreuillobolchévik
Posté le 21-09-2006 à 13:36:57  profilanswer
 

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

n°1445753
MagicBuzz
Posté le 21-09-2006 à 13:57:14  profilanswer
 

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
n°1445755
MagicBuzz
Posté le 21-09-2006 à 13:59:49  profilanswer
 

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 :??:

n°1445756
MagicBuzz
Posté le 21-09-2006 à 14:01:45  profilanswer
 

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 ;)

n°1445762
IvanleFou
Posté le 21-09-2006 à 14:10:07  profilanswer
 

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

n°1445769
MagicBuzz
Posté le 21-09-2006 à 14:15:42  profilanswer
 

ben tu indiques le float :spamafote:


Message édité par MagicBuzz le 21-09-2006 à 14:15:53
n°1445772
IvanleFou
Posté le 21-09-2006 à 14:26:32  profilanswer
 

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

n°1445844
IvanleFou
Posté le 21-09-2006 à 15:52:12  profilanswer
 

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]

n°1445846
MagicBuzz
Posté le 21-09-2006 à 15:53:10  profilanswer
 

arf

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] faire un site qui est PDA friendly

 

Sujets relatifs
Pb bidon en CSSInstaller un flux RSS sur mon site ?
relier un site e-commerce et un logiciel de gestion commercialAide pour site de vente en ligne
[CSS] Compteur de visites et DIV caché, ça worke quand même?subtilité (?) en CSS - alignement mauvais dans Firefox
Problème ligne de base CSS -> IE et Firefox différents ...Cherche un bon logiciel d'édition HTML/CSS ?
SVN/CVS sur site webDesign vs en pensez quoi? + aide CSS
Plus de sujets relatifs à : [CSS] faire un site qui est PDA friendly


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR