[CSS] faire un site qui est PDA friendly

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] faire un site qui est PDA friendly

IvanleFou

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 :

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

le CSS pour PC:

Code :

#gauche {
display: inline;
border:1px solid #ff0000;
font-weight:bold
}
#droite {
display: inline;
border: 1px solid #0000ff;
font-weight:bold
}

le CSS pour PDA:

Code :

#gauche {
border:1px solid #00ff00;
}
#droite {
border: 1px solid #00ff00;
}

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:

Publicité

IvanleFou

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

chani_t

From Dune

A tester :

Code :

7.1 Introduction aux types de médias
Une des fonctions primordiales des feuilles de style repose sur le fait de pouvoir adapter la représentation d'un
document pour différents médias : un écran, une feuille de papier, un synthétiseur de parole, un appareil braille,
etc.
Certaines propriétés CSS fonctionnent exclusivement avec un média donné (ex. la propriété 'cue−before' pour les
agents utilisateurs auditifs). Cependant, il peut arriver qu'une même propriété fasse partie de différentes feuilles de
style propres un média, cette propriété prenant alors des valeurs en fonction de ce média. Par exemple, la
propriété 'font−size' peut jouer un rôle aussi bien dans un rendu sur écran que dans une page imprimée. Ces deux
médias sont suffisamment dissemblables pour nécessiter des valeurs particulières pour cette même propriété ; le
rendu typique d'un document sur un moniteur demande une plus grande taille de police que sur une feuille de
papier. L'expérience montre également que les polices sans−serif ont une plus grande lisibilité à l'écran, et
inversement, que les polices serif sont plus lisibles sur le papier. Pour ces raisons, il faut pouvoir dire qu'une
feuille de style, ou une partie de celle−ci, ne concerne que certains types de médias.
7.2 La spécification des feuilles de style en fonction du média
Pour l'instant, on peut adjoindre les feuilles de style appropriées aux médias concernées de deux façons :
En spécifiant le média visé dans la feuille de style au travers des règles−at @media ou @import ;
Exemple(s) :
@import url("loudvoice.css" ) aural;
@media print {
/* la feuille de style pour l'impression vient ici */
}
·
En spécifiant le média visé dans le langage du document. Par exemple avec HTML 4.0 ([HTML40]), on
utilise l'attribut "media" de l'élément LINK pour attacher une feuille de style externe à un média donné :
<!DOCTYPE HTML PUBLIC "−//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Un lien vers le média cible</TITLE>
<LINK rel="stylesheet" type="text/css"
media="print, handheld" href="foo.css">
</HEAD>
<BODY>
<P>Le corps du document...
</BODY>
</HTML>
·
La règle @import est définie dans le chapitre sur la cascade.
7.2.1 La règle @media
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).
La construction @media précise les règles pour les divers médias dans la même feuille de style :
@media print {
BODY { font−size: 10pt }
}
@media screen {
BODY { font−size: 12pt }
}
@media screen, print {
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

MagicBuzz

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

chani_t

From Dune

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.

MagicBuzz

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

mIRROR

Chevreuillobolchévik

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 ) et qui envoie la bonne css selon le cas

MagicBuzz

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

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

mIRROR

Chevreuillobolchévik

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

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

chani_t

From Dune

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 , mais alors pourquoi garder les recommandations

Code :

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

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

Publicité

MagicBuzz

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

IvanleFou

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

MagicBuzz

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

IvanleFou

non non la version PDA

MagicBuzz

Ah, y'a une version PDA maintenant ?

IvanleFou

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

IvanleFou

En fait la solution serait de faire comme ca:

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test PDA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" rel="stylesheet" href="style_pda.css" media="handheld" title="style_pda" />
<link type="text/css" rel="stylesheet" href="style.css" media="screen" title="style" />
</head>
<body>
<div id="gauche">test that</div><div id="droite">YAIS!!</div>
</body>
</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]

MagicBuzz

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:

MagicBuzz

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

IvanleFou

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

mIRROR

Chevreuillobolchévik

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

MagicBuzz

Groumpf !

Dislexie, quand tu nous tiens

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

MagicBuzz

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"

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

MagicBuzz

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

IvanleFou

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

MagicBuzz

ben tu indiques le float :spamafote:

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

IvanleFou

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

IvanleFou

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]

MagicBuzz

arf

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] faire un site qui est PDA friendly

Sujets relatifs
Pb bidon en CSS	Installer un flux RSS sur mon site ?
relier un site e-commerce et un logiciel de gestion commercial	Aide 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 web	Design vs en pensez quoi? + aide CSS
Plus de sujets relatifs à : [CSS] faire un site qui est PDA friendly

Page générée en 0.151 secondes