Forum d'entraide PHPFrance

Bonjour,

Voila je veux changer de prise en compte de fichier css selon si il s'agit d'un mobile ou d'un pc.
Donc j'ai mis ce code

<link rel="stylesheet" media="handheld" type="text/css" href="../style.css">
<link rel="stylesheet" media="screen" type="text/css" href="../stylenormal.css">

Mais il ne fonctionne pas. Avec se code, sur un pc, il s'agit du 2eme pris en compte, donc ça c'est ok, par contre avec un mobile c'est aussi le 2eme pris en compte. Si je laisse que le premier sur le pc, la fenêtre n'est pas mis en page, alors que sur le mobile il prend bien en compte le premier.

Voila, j'espère que vous aurez une idée pour mon problème.

Merci

Le seul fait d'indiquer le média handheld ne suffit pas pour les navigateurs mobiles. Modifie la première ligne comme suit : Le média only screen and (max-device-width: 480px) fait partie du module media queries de CSS 3 ; sa syntaxe signifie : uniquement pour sortie sur écran, dont la largeur maximale ne dépasse pas 480 pixels. Bien que CSS 3 soit toujours en chantier, cette syntaxe de média est déjà implémentée par Safari pour l'iPhone, Opera Mini et Opera Mobile.

Quelques lectures à ce sujet, pour compléter ce propos :

• Return on the Mobile Stylesheet sur A List Apart,
• Feuilles de styles, médias CSS et navigateurs mobiles : une astuce pour garantir compatibilité et confort d'utilisation, si jamais si tu as du mal avec l'anglais.

oki merci je vais regarder ça, et je te tiens au courant. Merci

bon ben ça ne fonctionne pas en remplaçant ma ligne par la tienne. Je vais regarder tes liens (surtout celui en français, je ne connais pas du tout langlais!) Merci

bon ben ça ne fonctionne pas en remplaçant ma ligne par la tienne.

Tout dépend aussi du navigateur avec lequel tu testes : si ton navigateur ne comprend ni handheld ni cette syntaxe CSS, c'est sûr que ça ne fonctionnera pas.

Et puis, autre suggestion : inverse l'ordre l'affichage des feuilles de styles, en commençant d'abord par la feuille de style la plus commune, puis par celle ciblant les navigateurs mobiles (en n'oubliant pas, si besoin est, de redéclarer les règles CSS contenues dans la feuille de style commune, afin d'en corriger certains effets, comme certaines dimensions par exemple).

donc en faite j'ai mis ça :

<link media="handheld, only screen and (max-device-width: 600px)" href="../style.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" media="screen and (min-device-width: 600px)" href="../stylenormal.css">

donc ça fonctionne sous firefox mais pas internet explorer.
merci

mais pas internet explorer.

Internet Explorer est très en retard pour tout ce qui touche à CSS 3.

Ce qu'il faudrait faire plutôt, c'est d'inverser l'ordre d'appel des feuilles de style, comme suit : et de veiller à ce que la feuille de style pour mobiles annule certaines règles de la feuille de style commune.

Exemple :
stylenormal.css style.css (pour mobile) Les navigateurs mobiles chargeront d'abord la feuille de style commune (stylenormal.css), avec la largeur de body à 900 pixels, puis la feuille de style destinée aux mobiles (style.css), où la largeur de body est redéfinie, ce qui veut dire que la valeur appliquée sera finalement les 480 pixels. Autrement dit, la règle CSS ci-dessus contenue dans stylenormal.css est écrasée par celle de style.css. Encore faut-il que style.css soit appelé après stylenormal.css.

Est-ce plus clair ?