Quelques erreurs sur le tutoriel CSS3 Pie

Bonjour,

J'ai remarqué quelques erreurs sur le tutoriel de CSS3 Pie posté aujourd'hui. Je souhaitais juste les indiques pour qu'elles soient corriger.

- Deux titres sont inversés dans la section des "problèmes connus". Zoom navigateur et z-index ont été mélangés

- Dans la section sur box-shadow, on parle de la non prise en charge de la propriété inset. Cependant, il serait peut-être important d'ajouter que si un règle behavior de PIE suit une déclaration de box-shadow et inset, PIE.htc rencontrera une erreur et ne sera pas appliqué nul part sur la page.

La manière de résoudre ce bug à ma connaissance serait de faire ainsi:

selecteur{
  box-shadow: 1px 1px 1px #000 inset;
}
selecteur{ /* le même sélecteur */
  border-radius: 8px;
  behavior: url(/PIE.htc);
}

- Et pour terminer, il s'agit d'une question

Sur les première version de PIE, utiliser un dégradés forçait le bloc à avoir des coins carrés (donc incompatibilité entre le dégradé et les coins arrondis), est-ce encore le cas ?


Merci

Bonjour,

J'aurais voulu ajouter que l'article, en soit très bien et bien expliqué, débute fort mal à mon sens en présentant IE comme un ancêtre caduque.
En effet, il est parfaitement absurde de reprocher à un navigateur ancien de ne pas prendre en compte des spécifications qui n'existaient pas à la date de leur développement ; si l'on prend les anciennes versions d'IE en mauvais élèves pour ce cas, pourquoi ne pas faire pareil avec firefox < 3, Opera < 10, Safari < 4 ?

Du reste, IE9 gère déjà un petit paquet d'éléments CSS3, parfois même que ses concurrents ne gèrent toujours pas ou seulement très récemment.

Bref, un bon article qui peut être très utile à certains (je prône plutôt la dégradation adaptative, mais ce n'est pas le débat), bien écrit et documenté, devrait se doter d'une introduction plus juste.


Modifié par Manumanu (19 Oct 2011 - 13:16)

Manumanu a écrit :
(je prône plutôt la dégradation adaptative, mais ce n'est pas le débat)

La majorité de tes clients acceptent ça sans broncher..?

Personnellement CSS3 Pie me permet d'utiliser CSS 3 quotidiennement sans trop m'en faire pour IE et la satisfaction des clients.

Il n'y a rien à "accepter". S'ils me demandent un site 100% compatible avec Firefox 0.1a, je le ferais. Non sans leur avoir exposé à quel point c'est parfaitement inutile, mais je le ferais quand même s'il décide que.

En soit, à part les nouveaux sélecteurs, il n'y a rien qui m'intéresse vraiment dans CSS3. Je ne fais pas souvent d'angles arrondis (mon style est plutôt "Metro" de microsoft que "Glossy" de Apple, quoi), donc ils ne vont pas pleurer pour le border-radius. Reste quoi ? Trois box-shadow qui puent des pieds ? Ils survivront. Et si par exemple j'utilise text-justify ? Comment faire pour Firefox, Chrome, Opera ?

Pour le reste, c'est une question de conception. On peut avoir un site globalement bien affiché sous IE6 sans faire excessivement de compromis, ou bien s'en tamponner gravement les ratiches des navigateurs morts.


Mais encore une fois, ce n'est pas le sujet ici, je tenais simplement à mettre en avant le fait que commencer un article par quelque chose d'inexact tend à le dégrader, fut-il excellent par la suite, et proposais à l'auteur de corriger ça.

Car je pense qu'il est largement temps que les vieux clichés s'arrêtent, autant "IE c'est pourri ça respecte pas les standards" que "T'es graphiste, t'es sous Mac", par exemple. Parce que malheureusement, en sévissant sur un autre forum très régulièrement dans la partie XHTML/CSS (puisqu'il n'y a qu'à ça que je suis capable d'aider quelqu'un), je vois très régulièrement des codes d'une immondice aussi injustifiable qu'inqualifiable, horribles, faux et j'en passe, que leur auteur tente vainement de camoufler sous une avalanche de mauvaise foi type "non, 'float: center' n'est pas faux, c'est IE qui respecte pas les standard" ; s'ensuit un long moment à leur mettre le nez dans leur caca pour leur prouver par A + B qu'avec un code au minimum potable à défaut d'être bien foutu, on a un site correctement affiché.

Et donc, l'arrêt de cette vieille croyance ne peut se faire que lorsqu'il ne sera plus marqué sur les sites de référence que, grosso modo, IE est mauvais.

Voilà voilà.

Ca se voit que tu n'as pas travaillé en agence.

Je ne vois absolument pas au nom de quoi tu déduis ceci ; d'autant que c'est faux. Et ça n'a toujours rien à voir.

Manumanu a écrit :
éléments CSS3

L'expression qui fait exploser le propos en vol.
Non je déconne.
Mais quand même, «élément CSS», hu hu.

Manumanu a écrit :
parfois même que ses concurrents ne gèrent toujours pas ou seulement très récemment

Tu pourras dire ça d'IE10, mais pour IE9 ce n'est pas vraiment le cas. En fait je n'ai pas souvenir d'un seul module CSS3 supporté par IE9 et pas déjà supporté (en même temps ou, le plus souvent, avec une ou plusieurs années d'avance) par une partie des concurrents.

Manumanu a écrit :
Et donc, l'arrêt de cette vieille croyance ne peut se faire que lorsqu'il ne sera plus marqué sur les sites de référence que, grosso modo, IE est mauvais.

Les versions 6 et 7 sont mauvaises sur le support de CSS 2 (lacunes/bugs/hasLayout), et côté JavaScript (standards/bugs/performances).
La version 8 est bonne sur le support de CSS 2.1, et toujours mauvaise du côté de JavaScript (avec quand même des bugs corrigés et quelques ajouts sympa genre querySelector).
La version 9 est bonne tout court, un poil en retard sur la concurrence mais pas de grand chose (hors APIs HTML5).
La version 10 va dépoter.

En gros IE c'est une série de bons navigateurs concurrentiels au moment de leur sortie, sauf IE7 (très en retard sur les concurrents) et IE8 (déjà mieux mais toujours à la bourre). Là où Microsoft est attaquable c'est sur ces deux versions, et surtout sur l'incurie post-IE6 qui a créé ce retard qui a nécessité trois versions majeures pour être rattrapé.

Manumanu a écrit :
je tenais simplement à mettre en avant le fait que commencer un article par quelque chose d'inexact tend à le dégrader, fut-il excellent par la suite

Je suis d'accord. Au début je ne comprenais pas cette remarque car l'article me semblait parfait, mais en fait j'avais zappé l'abstract placé avant l'en-tête de l'article. Effectivement cet abstract était assez mauvais (contrairement à tout le reste). Comme il y avait une différence de ton et d'orientation forte entre l'article lui-même et cet abstract, je me suis permis de réécrire ce dernier.

Bonjour à tous,

Je viens de découvrir cette discussion. Voici mes commentaires aux vôtres.
Tout d'abord merci pour vos commentaires positifs, ça fait du bien de lire ce genre de remarques.

Vaxilart a écrit :
Bonjour,
- Deux titres sont inversés dans la section des &quot;problèmes connus&quot;. Zoom navigateur et z-index ont été mélangés

Je n'ai pas constaté ce problème, mais je suppose qu'un des admins d'Alsacréation s'en est occupé (fvsch peut-être). Merci.

Vaxilart a écrit :

- Dans la section sur box-shadow, on parle de la non prise en charge de la propriété inset. Cependant, il serait peut-être important d'ajouter que si un règle behavior de PIE suit une déclaration de box-shadow et inset, PIE.htc rencontrera une erreur et ne sera pas appliqué nul part sur la page.
La manière de résoudre ce bug à ma connaissance serait de faire ainsi:

selecteur{
  box-shadow: 1px 1px 1px #000 inset;
}
selecteur{ /* le même sélecteur */
  border-radius: 8px;
  behavior: url(/PIE.htc);
}

Je ne connaissais pas ce bug. Pas le temps de tester là, mais merci pour l'astuce ;

Vaxilart a écrit :

- Et pour terminer, il s'agit d'une question

Sur les premières version de PIE, utiliser un dégradés forçait le bloc à avoir des coins carrés (donc incompatibilité entre le dégradé et les coins arrondis), est-ce encore le cas ?

Eh bien, ce problème a été résolu, en tout cas sur la dernière version mise en ligne (la 1beta5). Il suffit de vérifier ça sur la page de démo que je propose : http://www.alsacreations.com/xmedia/tuto/exemples/css3pie/css3pie-demo.html
On pourra constater que les coins arrondis à gauche du textarea dont le fond est composé d'un dégradé et d'une image de fond ont été conservés. Petite citation du site officielle trouvée sur la page http://css3pie.com/documentation/supported-css3-features/ :

CSS3 Pie a écrit :

The rounded corners are applied to the element's background area (including solid background colors, background images, and background gradients), the element's border, and the box-shadow if specified.

Pareil pour les ombres portées d'ailleurs.

Un petit commentaire à propos de mon introduction à destination de Manumanu. Certes le ton employé vis à vis d'IE était un peu agressif (encore que je trouvais que j'aurais pu être bien plus caustique), cela est sûrement dû aux nombreuses heures de recherches que j'ai dû passer à trouver une solution de mise en page pour telles ou telles propriété mal prise en charge, mais je ne renie pas pour autant mes dires. Je ne suis pas un pro en matière de développement Web, je fais ça pour mon plaisir, pour aider bénévolement et également pour ma culture générale. Tout ce que j'ai appris, je l'ai trouvé sur le Web et dans les ouvrages que je lis à ce sujet. Je n'ai donc pas d'impératifs "commerciaux", mon expérience se base simplement sur des pratiques de passionné du Web standard. Je pense que d'autres comme moi se sont également arrachés les cheveux à ce sujet...Ceci dit, je terminais ma critique par un point positif, la venue de IE10 (avec en plus un lien pointant vers la prise en charge avancée d'IE 10 concernant CSS 3).
Ce passage ayant été modifié, on va pouvoir enterrer la hache de guerre, mais je reste tout de même convaincu de ne pas avoir écrit des choses "inexactes" (cette remarque m'a un peu déstabilisé, pour ne pas dire offusqué, sur le coup, il faut bien l'avouer) ma pratique en la matière (certes d'amateur, mais approfondie) l'a prouvé. J'espère que d'autres web développeurs (plus "pro") pourront confirmer cela...

#### edit ####
Pour mémoire je colle ici mon introduction :

jojaba a écrit :

CSS3 pointe son nez apportant son lot d'avancées assez spectaculaires, il faut bien le dire. Mais, comme nous en avons déjà pris l'habitude, cette spécification n'est prise en charge à peu près correctement que par les navigateurs dits «&nbsp;modernes&nbsp;» et presque totalement ignorée par les différentes versions du navigateur "historique" (pour ne pas dire préhistorique) Internet Explorer (même si l'avenir de ce butineur, nous réserve de bonnes surprises à ce sujet, notamment la version 10 qui prendrait en charge un bon nombre de spécifications CSS3 !!!).

### /edit ###
Modifié par jojaba (21 Oct 2011 - 11:16)

fvsch a écrit :
L'expression qui fait exploser le propos en vol.

Je mea-culpise

fvsch a écrit :
Tu pourras dire ça d'IE10, mais pour IE9 ce n'est pas vraiment le cas. En fait je n'ai pas souvenir d'un seul module CSS3 supporté par IE9 et pas déjà supporté (en même temps ou, le plus souvent, avec une ou plusieurs années d'avance) par une partie des concurrents.

Box-sizing, géré par chrome mais toujours pas par firefox sans l'attribut -moz-, ni par safari sans -webkit-
Text-justify, géré par aucun autre
Text-overflow, présent depuis IE5 (normal donc), géré depuis firefox 7
Word-break, toujours aucune gestion de firefox
Word-wrap également.
Il y a aussi les propriétés ruby-align, ruby-overhand, ruby-position, dont j'ignore encore l'utilité.
Donc oui, pas de quoi casser trois pattes à un canard face à l'engouement de transition et autre tranform, mais tout de même.
Il y a aussi font-face, qui a toujours été géré sous IE.

fvsch a écrit :
Les versions 6 et 7 sont mauvaises sur le support de CSS 2 (lacunes/bugs/hasLayout), et côté JavaScript (standards/bugs/performances).
La version 8 est bonne sur le support de CSS 2.1, et toujours mauvaise du côté de JavaScript (avec quand même des bugs corrigés et quelques ajouts sympa genre querySelector).
La version 9 est bonne tout court, un poil en retard sur la concurrence mais pas de grand chose (hors APIs HTML5).
La version 10 va dépoter.

On est parfaitement d'accord ; IE6 et 7 doivent périr. IE6 n'était pas un mauvais navigateur, il était juste adapté au web de 2001... Le problème est qu'il a été, comme Windows XP, trop longtemps sans remplaçant. IE7 est donc ce qu'il aurait dû être, mais au moins quatre ans trop tard.

@jojaba : Ah, je n'ai pas voulu être blessant dans mes propos, je m'en excuse ! D'autant que j'ai apprécié l'article, encore une fois, et que je ne remettais surtout pas sa qualité en cause
J'avais bien noté ton point positif par IE10, et sur ce sujet tu dois être mieux renseigné que moi, puisque je ne me suis toujours pas penché sur cette version (j'attends la finale). C'est juste que, comme toi tu te bats pour trouver des correctifs à des problèmes, je me bats - comme dit plus haut - pour que ceux (je ne parle pas de toi hein !) qui abusent de mauvaise foi envers un navigateur (c'est pas toujours IE, mais majoritairement) regardent d'abord d'où vient le problème dans leur code. Et si je redirige des gens vers un tutoriel comme le tiens, je préfère autant que ce tutoriel ne leur fassent pas dire "oui mais il a dit que IE...", tout simplement.

Si ça peut te rassurer, j'ai été aussi pénible et râleur envers le tutoriel célèbre de Mathieu Nebra qui présentait IE6 en tout début de son tutoriel, et conseillait vivement l'utilisation de Firefox, parce que ledit tutoriel datait de plusieurs années déjà.
Modifié par Manumanu (21 Oct 2011 - 14:08)

J'ai aussi remarqué une petite erreur dans les codes d'exemple pour les ombres portées, il y a un tiret avant box-shadow qui n'a pas lieu d'être.

Dieulot a écrit :
J'ai aussi remarqué une petite erreur dans les codes d'exemple pour les ombres portées, il y a un tiret avant box-shadow qui n'a pas lieu d'être.

Corrigé, merci

Dieulot a écrit :
J'ai aussi remarqué une petite erreur dans les codes d'exemple pour les ombres portées, il y a un tiret avant box-shadow qui n'a pas lieu d'être.

Merci !
@dev
Je n'ai pas été averti de cette réponse (pas de notification automatique), d'ailleurs ce n'est pas la première fois... C'est dommage.