28172 sujets

CSS et mise en forme, CSS3

Bonjour,

je suis en train de lire le livre CSS Mastery de Andy Budd chez Apress.

Il y a un exemple (page 204 du livre) qui me donne du fil à retordre, visible en suivant ce lien:

http://www.barbulon.com/t1/layout-1.html

La page s'affiche correctement dans Firefox et Google Chrome mais bien sur avec IE, c'est encore la merde... alors que le code utilise la librairie Modernizer pour offrir un 'fallback' aux navigateurs qui ne connaissent pas flexbox..

upload/40948-flex-1.jpg
Bonjour.

Si vous enlevez toutes les propriétés de flexbox avec préfixes, des problèmes avec Internet Explorer, vous n'en avez plus...

Après, peut-être pour des raisons de compatibilité et de support, faut-il régler des cas spécifiques...

Smiley smile
Smiley confus Si, au départ, sur Internet Explorer, il était évident qu'il 'y avait un problème...' maintenant je pense que vous devriez être un peu plus précis sur ce qui vous chiffonne...

Je regarde le dernier lien sur Mozilla Firefox 48 et sur Internet Explorer 11, les différences que je voie concernent la taille des polices, les polices de caractère et quelques légères différences de hauteur de colonnes.

D'après le titre de la page, j'ai l'impression que vous voudriez que toutes les colonnes aient la même hauteur, n'est-ce pas ?

Smiley smile
Zelena a écrit :
Smiley confus

D'après le titre de la page, j'ai l'impression que vous voudriez que toutes les colonnes aient la même hauteur, n'est-ce pas ?

Smiley smile


ben surtout j'aimerais que ça s'affiche autrement qu'en vrac...... comme sur l'image jointe...
pour l'instant la taille des polices n'est pas un gros problème..
J'essayais de me mettre un peu sur Flexbox, maisj e sens que je vais attendre 2 ou 3 ans de plus le temps que les navigateurs obsolètes disparaissent du parc Smiley smile

upload/40948-flex-1.jpg
Modifié par lionel_css3 (17 Oct 2016 - 10:42)
C'est que ça s'affiche autrement qu'en 'vrac' sur mon poste... que ce soit avec Internet Explorer 11 ou Mozilla Firefox 48... avec le dernier lien en tout cas.

Avec le premier lien, c'est, en effet, du 'vrac' sur Internet Explorer.

A votre place, je m' "amuserais" avec Flexbox dans la mesure où vous ne voulez pas - encore - l'utiliser sérieusement... C'est la façon la plus agréable d'apprendre.

Smiley smile
Modifié par Zelena (17 Oct 2016 - 11:40)
connecté
Ça commence mal : sur l'exemple je vois des margins avec 4 chiffres après la virgule alors qu'Internet Explorer n'en prend que deux. Et c'est important dans le calcul des layouts avec flexbox.

Moi j'avais résolu la problématique avec la fonction .calc()

Un visuel : Grid Layout

Le code concerné : CSS

Une discution sur le sujet à propos du framework KNACSS : lien
Olivier C a écrit :
Ça commence mal : sur l'exemple je vois des margins avec 4 chiffres après la virgule alors qu'Internet Explorer n'en prend que deux. Et c'est important dans le calcul des layouts avec flexbox.


ah bon????? depuis quand? j'ai jamais entendu parler de ça...
c'est le code du bouquin mais dans tout mes layouts en resonsive j'ai toujours laissé le max de décimale dans les calculs...

Olivier C a écrit :

Moi j'avais résolu la problématique avec la fonction .calc()



Il y a des bugs référencés avec flexbox quand on utilise cal() je crois
connecté
lionel_css3 a écrit :
ah bon????? depuis quand? j'ai jamais entendu parler de ça...

Ben justement j'ai mis un lien à lire sur le sujet plus haut.
lionel_css3 a écrit :
c'est le code du bouquin mais dans tout mes layouts en resonsive j'ai toujours laissé le max de décimale dans les calculs...

Et bien c'est un tort. Comme quoi ce qui est écrit n'est pas toujours parole d'évangile et vaut parfois moins qu'un bon commentaire dans un forum.

lionel_css3 a écrit :
Il y a des bugs référencés avec flexbox quand on utilise cal() je crois

Oui, mais ils se limitent à certains contextes, les pages que j'ai donné en exemples sont-elles concernées ? Bref les exemples que je t'ai proposé fonctionnent-ils ou pas ? Le mieux restant toujours un test en live pour trancher une question...
Modifié par Olivier C (17 Oct 2016 - 18:07)
Olivier C a écrit :


Et bien c'est un tort. Comme quoi ce qui est écrit n'est pas toujours parole d'évangile et vaut parfois moins qu'un bon commentaire dans un forum.



Alors là je suis pas d'accord, j'ai plutôt tendance à croire des gens comme James Williamson et Ray Villa Lobos (de chez Lynda.com) ou Andy Budd (auteur du livre et gourou du CSS) que "Monsieur tout le monde" qui s'exprime dans un forum, sans vouloir être offensant à ton égard bien sur tu l'auras compris...

J'ai déjà lu de la part de plusieurs auteurs plus que respectables dans le domaine que les navigateurs n'avaient aucuns problèmes à gérer les valeurs de tailles avec de nombreuses décimales et il était recommandé d'être même le plus précis possible.
Alors je crois que dans le cas qui me préoccupe c'est plutôt liée à un problème d'émulation de version à l'intérieur d'Internet Explorer.
connecté
lionel_css3 a écrit :
Alors là je suis pas d'accord, j'ai plutôt tendance à croire des gens comme James Williamson et Ray Villa Lobos (de chez Lynda.com) ou Andy Budd (auteur du livre et gourou du CSS) que "Monsieur tout le monde" qui s'exprime dans un forum, sans vouloir être offensant à ton égard bien sur tu l'auras compris...

Bien sûr, il ne faut pas croire tout ce qui se dit sur le web, d'autant plus qu'une bonne partie des tutoriels sont tout ou partie recopiés les uns sur les autres, prônant des recommandations parfois défaillantes ou obsolètes (j'ai quelques noms de blogs, encore très en vue aujourd'hui, dans mon collimateur).

lionel_css3 a écrit :
J'ai déjà lu de la part de plusieurs auteurs plus que respectables dans le domaine que les navigateurs n'avaient aucuns problèmes à gérer les valeurs de tailles avec de nombreuses décimales et il était recommandé d'être même le plus précis possible.

Et ces dires sont démontrés par quelles expérimentations ?

Edit : Rappelez-vous "l'affaire du sélecteur *" sensé provoquer des baisses de performance pour l'affichage et rejeté par tous les ténors CSS de l'époque : opinion jamais vérifiée et qui se révélera fausse au final, tout au moins sans la baisse significative de performance tenue pour certaine.

Et moi qui pensait que les "arguments d'autorités" dataient d'un autre temps (en philosophie tout au moins)... à ceux-ci je préfère opposer des expérimentations éprouvées. Et chez moi seul un retrait de -0.01px avec la fonction calc() (solution ébauchée par G3ronim0 et validée par R. Goëtter) a élucidé mes problèmes de layout de manière propre.
Modifié par Olivier C (18 Oct 2016 - 12:37)
lionel_css3 a écrit :


Alors là je suis pas d'accord, j'ai plutôt tendance à croire des gens comme James Williamson et Ray Villa Lobos (de chez Lynda.com) ou Andy Budd (auteur du livre et gourou du CSS) que "Monsieur tout le monde" qui s'exprime dans un forum, sans vouloir être offensant à ton égard bien sur tu l'auras compris...

J'ai déjà lu de la part de plusieurs auteurs plus que respectables dans le domaine que les navigateurs n'avaient aucuns problèmes à gérer les valeurs de tailles avec de nombreuses décimales et il était recommandé d'être même le plus précis possible.
Alors je crois que dans le cas qui me préoccupe c'est plutôt liée à un problème d'émulation de version à l'intérieur d'Internet Explorer.

Attention, pour aussi érudits qu'ils soient il arrive aussi à certains auteurs reconnus d'écrire des erreurs, voire de n'être pas d'accord entre eux ce qui implique qu'un au moins desdits auteurs se fourvoit...
Les navigateurs étant ce qu'ils sont, à moins d'aller dépiauter leur code certaines affirmations peuvent relever de l'empirisme ou des sciences occultes.
Quant à"Mr Tout le Monde" intervenant sur un forum il arrive qu'il soit bien plus inspiré que les auteurs ayant pignon sur rue tout simplement parce que les forums en question sont aussi fréquentés par des professionnels qui, eux, sont confrontés tous les jours à la réalité du terrain et forcés de trouver des solutions pratiques.
Certains intervenants sont particulièrement compétents dans leur domaine et n'écrivent pas forcément un bouquin ou souhaitent acquérir la notoriété d'un auteur.
Bref, bouquins "officiels" et intervenants sur les forums ne sont pas mutuellement exclusifs et ne constituent qu'une source d'information complémentaire.
Certains grands Chefs écrivent de superbes livres de cuisine mais peuvent être battus à plate couture par la mamie du coin livrant ses trucs et astuces au détour d'un forum.