Aller au contenu

Utiliser des propriétés CSS 3 ?


davidm

Sujets conseillés

Certaines propriétés CSS 3ème génération (CSS3 W3C) sont reconnues par les navigateurs Mozilla sans pour autant compromettre la compatibilité avec des navigateurs moins avancés...

Pour beaucoup d'entre nous, il est tentant d'expérimenter les nombreuses possibilités ouvertes par cette évolution des CSS.

Je me demandai si certains d'entre vous les utilisent et si oui, lesquelles ?

Merci !

Lien vers le commentaire
Partager sur d’autres sites

Salut,

Pour ma part, j'utilise le moz-border-radius que je trouve formidable....

C'est en effet très pratique pour faire des arrondis sans images, et c'est très réussi....

Pour le webmaster, (ou le designer) c'est une révolution....

Faire des arrondis sans passer un temps fou, à faire des tableaux avec des coins imagés pour une compatibilité totale avec tous les navigateurs ou devenir dingue avec des balises div et les positionnements propres à chaque navigateur..

Quel dommage que IE ne les intègre pas.... ^_^

Olivier

Lien vers le commentaire
Partager sur d’autres sites

Le border image et le border radius ont l'air géniaux... Je ne connaissais pas du tout ces propriétés ! Nan sérieusement, pour moi, c'est une avancée géniale, le temps de chargement sera amélioré, et le code plus clair que des divs imbriqués pour avoir un menu arrondi... :unsure: le reve !!

Dommage que ça soit pas compatible avec beaucoup de navigateurs... :(

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

La propriété border-radius me semble la plus connue et la plus utilisée actuellement. Je la trouve très séduisante.

Séduite un temps par les méthodes CSS2, j'ai laissé tomber trouvant les techniques trop lourdes à mettre en place (une excellente analyse de ces méthodes sur e-t172.net : Bords arrondis extensibles en XHTML/CSS). Par contre l'utilisation de border-radius ne nuit en rien à l'affichage d'une page avec un navigateur qui ne l'implémente pas... elle est juste un peu plus raffinée avec un navigateur qui l'implémente B)

La propriété box-sizing est intéressante aussi pour résoudre le mode de rendu "quirks" ou "strict" (exemple expliqué sur darkBlog : The Doctype Switching is not enough).

Une intéressante présentation des principales nouveautés de CSS3 sur Empyrée.org : Quelques nouveautés des CSS3 avec un complément un billet explicatif sur Les extensions propriétaires (vendor-specific).

A retenir aussi Implémentation CSS3 : testez votre navigateur ! sur web-jardin, une série de tests sur les sélecteurs.

Lien vers le commentaire
Partager sur d’autres sites

Pour ma part je suis séduit par les colonnes CSS3 qui permettent d'afficher du texte sur plusieurs colonne sans solution lourde et/ou sale et finalement de manière très élégante. Je crois qu'il n'y a pour le moment que -moz-column-count -moz-column-width car le reste devrait parait-il changer presque à coup sur. Ça ne fonctionne que sur les dernières versions de Mozilla (les "nightlies" et les betas de Mozilla 1.8). (et c'est encore très buggué, je ne sais plus pourquoi mais je n'avais pas pu l'utiliser pour une raison quelconque)

Sinon le seul que j'utilise vraiment c'est le border-radius, je ne connaissais pas l'existance de -khtml-border-radius et je vais donc l'ajouter de suite :hourra:

Lien vers le commentaire
Partager sur d’autres sites

Salut,

Pour ma part, je trouve border image génial : le temps qu'on peut mettre à créer une pseudo-structure destinée uniquement à porter une bordure autour d'un élément en mettant en place plein de divs dans tous les sens pour les bords et les coins dès qu'on veut une décoration un tant soit peu évolué.

Le temps gagné sera appréciable.

Le temps perdu à devoir traiter avec des navigateurs obsolètes aussi :rolleyes:

Et faire du multi-colonnes sans rien, en ayant un beau code tout pur rraaaahhhh lovely :wub:

Lien vers le commentaire
Partager sur d’autres sites

Bonsoir,

moz-border-radius n'est pas valide et je n'arrive pas à faire fonctionner les border-radius...

Ca vient de moi (firefox 1.01) ou ça ne fonctionne pas encore ?

Quelqu'un a un exemple qui fonctionne ?

Merci :)

Lien vers le commentaire
Partager sur d’autres sites

Ca vient de toi.

A priori, border-radius n'est pas censé marcher, puisque la propriété n'est pas encore implémenté (elle devrait l'être en css 3).

Pour la propriété spécifique mozilla, c'est -moz-border-radius.

NB : On ne peut pas vraiment dire que -moz-border-radius ne soit pas valide. On a le droit d'avoir des propriétés spécifiques à un navigateur, SI elles sont clairement indiquées avec le préfixe approprié.

Le valideur automatique se contente de vérifier si la propriété fait partie du standard.

Lien vers le commentaire
Partager sur d’autres sites

Ces "tests" n'ont aucune valeur, puisque :

1) CSS3 n'en est pas encore au stade de "Recommandation"

2) Dire qu'un navigateur supporte telle ou telle propriété sur les background alors que le sujet en question en est encore au stade de "working draft" est absurde

Lien vers le commentaire
Partager sur d’autres sites

Ces "tests" n'ont aucune valeur, puisque :

1) CSS3 n'en est pas encore au stade de "Recommandation"

2) Dire qu'un navigateur supporte telle ou telle propriété sur les background alors que le sujet en question en est encore au stade de "working draft" est absurde

<{POST_SNAPBACK}>

La question n'est pas de savoir si ces tests ont une valeur "dans l'absolu", effectivement CSS3 est en draft. La question c'est de savoir lorsque l'on souhaite utiliser certaines de ces propriétés quels sont les navigateurs compatibles ou non. Ces tests donnent des indications, et intéressent ceux qui veulent expérimenter.

On peut penser qu'il y a quand même quelques éléments stabilisés puisque les navigateurs ont pris la peine de les intégrer...

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

Ces "tests" n'ont aucune valeur, puisque :

<{POST_SNAPBACK}>

En fait cela dépend du sens que tu donnes à "valeur" ;)

Pour rappel, Les niveaux de maturité au cours de la progression d'un rapport technique vers la recommandation

Version de travail (WD)

    Une version de travail est un document publié par le W3C pour révision par la communauté, c'est-à-dire les membres du W3C, le public et les autres organisations techniques.

Recommandation candidate (CR)

    Une recommandation candidate est un document que le W3C estime largement révisé et qui satisfait aux conditions techniques du groupe de travail. Le W3C publie une recommandation candidate afin de réunir une expérience des mises en uvre.

Recommandation proposée (PR)

    Une recommandation proposée est un rapport technique mature qui, après un contrôle exhaustif de la solidité technique et de la faisabilité, est envoyé par le W3C au Comité consultatif pour approbation finale.

Recommandation du W3C (REC)

    Une recommandation du W3C est une spécification ou un ensemble de directives qui, après une élaboration à partir d'un vaste consensus, a reçu l'approbation des membres du W3C et du Directeur. Le W3C encourage une large diffusion de ses recommandations. Remarque : Les recommandations du W3C équivalent aux normes publiées par les autres organisations.

Les travaux et leur avancement sont publics. Via une liste de discussion tout le monde peut faire part de commentaires, comptes rendus de tests...

C'est dans ce cadre-là que les différents tests effectués ont de la valeur.

Un autre exemple, magique : pseudo-class :target

Si vous voulez suivre l'évolution des travaux du W3C à ce sujet et, pourquoi pas, y contribuer :

CSS: under construction

Lien vers le commentaire
Partager sur d’autres sites

Merci à tous et à toutes pour les réponses :)

En résumé, pour faire des coins arrondis, moz-border-radius est la solution qui fonctionne mais la CSS n'est plus valide, border-radius ne fonctionnant pas encore ;)

Lien vers le commentaire
Partager sur d’autres sites

La question n'est pas de savoir si ces tests ont une valeur "dans l'absolu", effectivement CSS3 est en draft. La question c'est de savoir lorsque l'on souhaite utiliser certaines de ces propriétés quels sont les navigateurs compatibles ou non.  Ces tests donnent des indications, et intéressent ceux qui veulent expérimenter.

Je suis d'accord que ces tests sont intéressants à titre d'étude de progression, mais la première phrase de la page sonne comme un reproche à tel ou tel navigateur de ne pas supporter certaines propriétés. Or, j'estime qu'on n'a pas à reprocher à un navigateur de ne pas supporter des propriétés qui ne sont pas encore officiellement définies.

On peut penser qu'il y a quand même quelques éléments stabilisés puisque les navigateurs ont pris la peine de les intégrer...

Les seuls éléments qui peuvent être considérés stabilisés sont ceux qui ont atteint le statut W3C Recommendation.

moz-border-radius est la solution qui fonctionne mais la CSS n'est plus valide

Comme je l'ai dit précédemment, cette propriété étant propriétaire, il me semble que ta feuille de style est théoriquement valide, quoi qu'en dise le valideur automatique w3c. Il me semble en effet que tu as le droit d'utiliser des propriétés propriétaires, si elles sont clairement nommées comme telles, à l'aide du préfixe qui a été attribué au fabricant du navigateur en question.

Lien vers le commentaire
Partager sur d’autres sites

  • 2 months later...

J'utilise sur mon site le "moz-border-radius".

Savez-vous quand le CSS3 sera au stade de recommendation ?

Peut-on espérer le voir intégré à IE7 ou devra-t-on attendre encore ? Si non jusqu'à quand ?

Lien vers le commentaire
Partager sur d’autres sites

IE7 ne va même pas être capable de prendre en compte toutes les propriétés CSS2.0... alors CSS3.0... non malheureusement.

Pour la date prévisionnelle, aucune idée mais ce n'est pas pour demain :(

Lien vers le commentaire
Partager sur d’autres sites

Bon ben mobilisation pour faire passer tout le monde sur firefox alors hein :):) !

Le monde des navigateurs n'est pas manichéen Firefox/Explorer :huh:

Encore moins sur des plate-formes autres que Windows.

À part peut-être Explorer 7 car il beaucoup de retard à rattraper d'abord, tous les navigateurs subiront des mises-à-jour pour implémenter les nouvelles fonctions CSS 3 lorsque celles-ci sortiront. Mon navigateur qui n'est ni Firefox ni Explorer supporte déjà très bien quelques principales fonctions CSS 3. Sa prochaine mise-à-jour le verra supporter complètement tous les tests du Acid Test 2 de WS, ce qui en fera le 1er navigateur à pouvoir les supporter.

Pour autant, je ne désire faire aucune mobilisation vers Safari (mon navigateur, donc) ni vers un autre.

Que ce soit OmniWeb, Mozilla, Netscape, iCab, Camino, Firefox,Safari, Opera ou autres, tous implémenteront à terme les CSS 3, pas d'inquiétudes :)

Quant à Explorer, je suis d'avis que ces utilisateurs finiront par le délaisser car il a pris un retard irrattrapable.

Cette propagande Firefox me semble vraiment avoir vécu.. et je pense qu'elle dessert plus ce navigateur qu'autre chose :unsure:

edit: tiens, je pensais avoir déjà répondu à ce sujet, en fait non. J'utilise beaucoup outline et opacity pour ma part. Mais just for fun.

Modifié par Dudu
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...