HTML 5 & CSS3

(reprise du message précédent)

Implémenté massivement sur des serveurs web, ça rejoint bien ce que je disais, a vouloir utiliser trop vite des technologies futurs, on prends des risques...

De toute façon ce débat a déjà du avoir lieu 10 fois rien que sur ce forum, on arrivera jamais a mettre tous le monde d'accord, donc ceux qui veulent l'utiliser l'utilise et basta ^^

Perso j'ai choisi de ne pas l'utiliser mais j'oriente mon moteur de template maison, dans le but de pouvoir y passer le jour J en quelques clic et sans avoir a modifier de PHP

a écrit :
De toute façon les specs du W3C ne fonctionne pas de la même façon que les releases de PHP. Pour chaque feature (module) il y a un niveau d'avancement qui dit si c'est utilisable (dans le sens possible à implémenter) en totalité, en partie ou pas du tout.

Pas vraiment, c'est le cas pour css, qui est développé de façon modulaire. Mais pour html5, on a un gros paquet qui est la spec html5, et deux ou trois annexes à côté. Et

Rappelons, en mettant de côté les divisions plus fines, qu'au w3c on a les diisions suivantes:

- standard (final): c'est un document finalisé et fiable, il ne changera pas.
- candidate recommandation (beta): cette spec est candidate à devenir un standard, on attends des retours sur l'implémentation et les pratiques pour être sûr qu'on puisse l'utiliser. Il existe un petit risque mais on fait avancer le web en s'en servant.
- draft (dev): cette spec est en travail, en théorie, des moteurs peuvent l'implémenter pour du testing, et des sites pour les mêmes raisons. C'est un brouillon quoi.

Comme les CSS sont développés par modules, on a déjà 2 modules CSS3 qui sont des standards: CSS3 selectors et CSS3 colors, donc là il faut se faire plaisir, c'est là pour ça. Ensuite on peu prendre le risque d'utiliser une candidate recommandation pour des éléments non bloquant, ou avec la conscience du risque et un contrat de maintenance. Pour finir les drafts sont là pour faire joujou, de jolies pages de démo qu'on met en lien sur notre blog, dans la section webdesign.

C'est parfait pour css. Mais HTML tout est d'un bloc, doit-on attendre que la spec soit en standard avant de l'utiliser? Mais la spec a besoin d'un application large avant que l'on puisse en faire un standard… Donc il faut piocher dedans pour commencer à utiliser, en étant conscient des risques, et en tentant de se tenir informer. Il existe des éléments qui sont "compatibles" sans travail supplémentaires, d'autres qu'on va juger comme assez sûrs par leur acception populaire (header, footer, article, aside)

a écrit :
il y 8 ans quand les standards ont commencé a vraiment s'implanter (doucement) en France c'était vraiment pas aussi cool et on se faisait vraiment c... avec des bidouilles pas possible pour faire la moindre mise en page

Je me souviens de cette période comme d'une période de grand bonheur! En se contentant du PGDC (ce qui fonctionne partout) on pouvait enfin ne faire qu'un seul site, et non plus un par navigateur.

kustolovic a écrit :


- standard (final): c'est un document finalisé et fiable, il ne changera pas.
- candidate recommandation (beta): cette spec est candidate à devenir un standard, on attends des retours sur l'implémentation et les pratiques pour être sûr qu'on puisse l'utiliser. Il existe un petit risque mais on fait avancer le web en s'en servant.
- draft (dev): cette spec est en travail, en théorie, des moteurs peuvent l'implémenter pour du testing, et des sites pour les mêmes raisons. C'est un brouillon quoi.

Plus exactement, voici les différents niveaux.

J'ai volontairement sauté la "Proposed Recommendation" qui est une petite étape de validation. La plupart des documents étant massivement dans les 3 autres.

Certains utilisent déjà CSS transition/transform voire même une partie du module animation alors que les specs sont encore à l'état de draft : http://www.w3.org/Style/CSS/current-work
On prend des risques à vouloir être toujours à l'avant-garde, et quelque part heureusement que ce processus de standardisation n'est pas trop rapide; ça nous laisse le temps pour apprendre
et d'intégrer chaque module individuellement.
Donc pour ma part j'hésite encore à les utiliser malgré les usages actuels le feu vert donné par http://html5please.com/

Hermann a écrit :
Donc pour ma part j'hésite encore à les utiliser malgré les usages actuels le feu vert donné par http://html5please.com/

Globalement il faut se faire plaisir sur les «use»
Après on a plein de raison d'avoir des réserves sur les «use with fallback», «use with polyfill».
Ma première raison:
J'ai d'autre choses à faire que de perdre mon temps sur la gestion de fallbacks et de polyfills, de les tester, de tester l'impact sur les performances, etc. Après certains fallback comme pour font-face sont assez simples, vu que intégrés à css .

Je bave devant css3

http://css-tricks.com/snippets/css/flip-an-image/

http://www.alsacreations.com/xmedia/tuto/exemples/transitions/images1.htm

http://www.alsacreations.com/xmedia/tuto/exemples/transitions/infobulles.html

http://www.paulrhayes.com/experiments/cube/multiCubes.html

http://www.the-art-of-web.com/css/css-animation/

Mais notre copain IE que j'adore car beaucoup de gens l'utilisent..bon j’arrête d'ironiser , ça fait mal !

Ma question est la suivante :

Quelles sont les propriétés css3 les plus compatibles, celles que l'on peut utiliser les yeux fermés ou du moins sans incidence sur l'affichage ?

Car je veux refaire un site perso et j'ai beaucoup d'idées mais je ne veux pas me faire de fausses illusions.

Tu peux faire tes emplettes sur when can i use.

Je l'ai déjà en marque page, patidou

Je voudrais juste que vous me les énumérer brièvement.

Globalement...

Dèsolé mais je ne les connais pas par cœur. Quand j'ai besoin de créer une ombre, je vais voir sur ce site sur quel navigateur les propriétés sont supportées et éventuellement j'assure un fallback.

Ex-aequo:
- @font-face (ouais je triche )
- border-radius

Ensuite:
- linear-gradient
- box-shadow
-multiple backgrounds

Si le client le souhaite: @media pour du mobile bien entendu.

Mais il y a du "CSS2.1 enfin utilisable" qui me semble nettement plus important :
- sélecteurs >, + et ~ (suffit de jeter IE6)
- table-cell (fallback pour IE7- : le "inline-block à la IE6/7" c'est-à-dire hasLayout - zoom:1; souvent - et inline)
- inline-block (idem)
- :before / :after (pas pour IE7)

Et en 3 lignes :
- l'instruction dont je ne me sers jamais : height (toujours min-height).
- l'unité dont je ne me sers JAMAIS pour font-size: px
- l'instruction dont je préfère arriver à me passer : overflow: hidden;

Salut,

Felipe a écrit :
Mais il y a du "CSS2.1 enfin utilisable" qui me semble nettement plus important :
- sélecteurs >, + et ~ (suffit de jeter IE6)

Attention ! le sélecteur ~ est un sélecteur CSS 3.

Puisqu'on en parle, les sélecteurs CSS 3 suivants sont utilisables sans problème : [E^=F], [E*=F], [E$=F] (reconnus par IE 7). De même, on peut utiliser les propriétés CSS 3 overflow-x, overflow-y, text-overflow (compris par IE 6), voire word-wrap.

Pour le reste, les ressources à consulter pour vérification ont été déjà citées.

MERCI

Ouais, ben c'est pas terrible tout ça !

J'en ai plusieurs mais quelqu'un aurait un lien fiable sur les pourcentages d'utilisation des navigateurs , lien régulièrement mis à jour si possible .

Que je puisse en me couchant le soir changer les indices en rêve

Felipe a écrit :
l'instruction dont je préfère arriver à me passer : overflow: hidden;

Pareil pour moi, display:table, on s'en sert pas assez mais ça peut servir (pour éviter la fusion des marges par exemple).

phpCbien a écrit :
J'en ai plusieurs mais quelqu'un aurait un lien fiable sur les pourcentages d'utilisation des navigateurs, lien régulièrement mis à jour si possible.

- NetMarketShare (NetApplications) avec des chiffres mondiaux fortement corrigés pour prendre en compte les marchés indiens, chinois, etc. (qui sont encore très fortement ou massivement sur des vieux vieux IE). Les chiffres régionaux ne sont pas communiqués (gratuitement), du coup c'est pas super exploitable. -> http://www.netmarketshare.com/
- StatCounter, qui a priori ne corrige pas ses chiffres en fonction du rapport entre la taille de ses échantillons et celle du marché local concerné. Moins fiable pour des chiffres globaux sans doute, mais a priori plus fiable pour des chiffres régionaux (du moins dans les pays où ils sont bien implantés, notamment en Europe). -> http://gs.statcounter.com/
- Les chiffres de l'application de suivi des visites (Google Analytics ou autre) du site sur lequel tu bosses. Ce sont les seuls qui comptent vraiment.

PS: la mort d'IE6 http://www.ie6countdown.com/
Modifié par fvsch (21 Jun 2012 - 09:46)

Felipe a écrit :
- sélecteurs >, + et ~ (suffit de jeter IE6)

a quoi sert la vague? je l'ai déjà vu dans du code CSS, mais je l'ai jamais trouvé dans la liste des selecteurs css2

Edit:

Victor BRITO a écrit :
Attention ! le sélecteur ~ est un sélecteur CSS 3.

ça doit être pour ça
Modifié par JJK801 (21 Jun 2012 - 09:49)

Il va permettre de sélectionner tous les blocs suivant celui indiqué.

#bloc2 ~ p

sélectionnera les frères de #bloc2 qui le suivent.

http://www.alsacreations.com/article/lire/1312-selectionner-les-freres-d-un-element-en-css-nth-child.html

Et c'est un sélecteur CSS3

Salut

Un nouveau lien de compatibilité

Et hop !

http://www.findmebyip.com/litmus/

Otan pour moi pour CSS3, je l'avais rangé dans la même catégorie que + parce qu'ils ont la même compatibilité ...

JJK801 a écrit :
la vague?

C'est un tilde (prononcer tildé), comme dans ¡ Hasta mañana ! (maniana ... mais pas Ñan cat par contre ) EDIT: et España mot encore plus courant
Modifié par Felipe (21 Jun 2012 - 19:51)