JeuWeb - Crée ton jeu par navigateur
Simuler min-height sans hack CSS ni Javascript - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Simuler min-height sans hack CSS ni Javascript (/showthread.php?tid=5274)

Pages : 1 2


Simuler min-height sans hack CSS ni Javascript - php_addict - 22-02-2011

bonjour

on connait tous le problème en css avec min-height notament sur ie5 et ie6. Le problème est qu'il semble y avoir le même bug sous le navigateur du samsung galaxy (je crois que c'est ce mobile) mobile LG

enfin bref, vous me direz: laisse tomber ie5 et ie6..ok pas de problème . mais pour les navigateurs exotique comme ceux de certains téléphones mobiles j'ai du mal à les laisser de côté...

j'en viens à ma question du jour:

est il possible de rendre cross-browser le min-height sans utiliser de hack css ni de javascript ?

et s'il n'est pas possible, alors quel hack ou autre technique me conseillerez-vous ?

bonne fin de journee


RE: simuler min-height sans hack css ni javascript - Sephi-Chan - 22-02-2011

Pourquoi tu ne veux pas de hack CSS ?


Sephi-Chan


RE: simuler min-height sans hack css ni javascript - Holy - 22-02-2011

Ca serait bien d'avoir le nom du navigateur du samsung galaxy.

Sans cela, il me semble assez difficile de pouvoir t'aider.

Et à ta question : "est il possible de rendre cross-browser le min-height sans utiliser de hack css ni de javascript ?"

La réponse est non, si ton problème vient effectivement de la propriété min-height.


RE: simuler min-height sans hack css ni javascript - php_addict - 22-02-2011

ok...quel hack me conseillerez vous car j'en ai vu des tonnes pour le min-height

PS: je me renseigne sur le nom du navigateur en question car ce n'est pas mon mobile...

EDIT: il s'agit d'un mobile LG ku990i


RE: Simuler min-height sans hack CSS ni Javascript - php_addict - 22-02-2011

Pour répondre à Sephi-Chan, je n'aimes tout simplement pas trop les hack css je trouve ca laid

bon...il semblerait qu'il y ai la possibilité de se passer de hack ou de JS:

http://www.greywyvern.com/code/min-height-hack

j'ai testé sur IE 5, 6, 7, 8 (avec IEtester) et chrome, opera...

cela semble fonctionner à merveille...


RE: Simuler min-height sans hack CSS ni Javascript - Sephi-Chan - 22-02-2011

Pourtant c'est un hack aussi.
Ce n'est pas un terme péjoratif.


Sephi-Chan


RE: Simuler min-height sans hack CSS ni Javascript - php_addict - 22-02-2011

(22-02-2011, 08:13 PM)Sephi-Chan a écrit : Pourtant c'est un hack aussi.

oui mais c'est quand meme plus propre que:


selector {
min-height:500px;
height:auto !important;
height:500px;
}

ou que:


/* for Mozilla/Safari/Opera */
*>.box {
padding-top: 200px;
min-height: 1px;
}
*>.box p {
margin-top: -200px;
}
/* for IE, with IE5/Mac backslash filter \*/
* html .box {
height: 200px;
}
/* end filter */

non ?


RE: Simuler min-height sans hack CSS ni Javascript - Sephi-Chan - 22-02-2011

Je ne suis pas convaincu qu'il soit plus propre d'ajouter du balisage dans le seul but de régler un problème de CSS.
Je trouve plus élégant de tirer profit de la capacité des navigateurs à interpréter ou non certains sélecteurs ou certaines règles. C'est dans l'esprit de graceful degradation.


Sephi-Chan


RE: Simuler min-height sans hack CSS ni Javascript - Viciousity - 22-02-2011

Entièrement d'accord avec Sephi.
CSS évolue de plus en plus en parallèle avec le XHTML pour alléger un max le code source (balise div, span, etc ...).
Ainsi on dissocie la couche MARKUP et la couche DESIGN.

Par exemple au mieu d'avoir :
Code :
<ul>
  <li class='first'>Premier item</li>
  <li>Middle item</li>
  <li class='last'>Dernier item</li>
</ul>

li { border-top:1px solid #FFF;border-bottom:1px solid #000; }
li.first { border-top:none }
li.last { border-bottom:none }

On va le "Simplifier" en utilisant les sélecteurs :
Code :
<ul>
  <li>Premier item</li>
  <li>Middle item</li>
  <li>Dernier item</li>
</ul>

li { border-top:1px solid #FFF;border-bottom:1px solid #000; }
li:first-child { border-top:none }
li:last-child { border-bottom:none }

Et hop, séparation des couches Big Grin


RE: Simuler min-height sans hack CSS ni Javascript - php_addict - 22-02-2011

dans un sens tu as raison, mais le hic c'est qu'il y a de plus en plus de navigateur: mobile, tablettes, etc...et j'ai l'impression chacun y vas de sa propre interprétation des standards.

si demain un constructeur de téléphone mobile sort un nouveau navigateur propriétaire alors qui sait si les graceful degradation en place dans nos css vont avoir leurs petits effets...

je m'attarde sur des faux problèmes je te l'accordes mais je serais navré si un internaute ne peut pas surfer sur mon site correctement même avec un navigateur un peu pourri...