28172 sujets

CSS et mise en forme, CSS3

Sur mon site j'ai mis sur certaines pages le div principale en relative transparence (ex. : http://www.devcore.fr/freeware.html). Ce qui fonctionne bien avec le code suivant :
filter:alpha(opacity=60);
-moz-opacity:  0.6;
opacity: 0.6;
-khtml-opacity: 0.6;

Mais problème, ce code n'est pas conforme W3C. Smiley pleure
J'ai cherché du coté javaScript, plus précisément Jquery, et les seuls codes que je trouve permettent de gérer la transparence des png sur IE6. Smiley hum
Donc si certains on résoluent le problème conforme W3C je serais très intéressé.
Merci d'avance.
Modifié par Oime (03 Jan 2010 - 22:57)
Modérateur
Salut, Smiley smile

Si tu cherches absolument à obtenir un code valide W3C, alors il ne faut conserver que la propriété "opacity" car tes 3 autres lignes sont des codes propriétaires. Ceci dit, tu n'auras alors plus la transparence sur certains navigateurs.

Maintenant, si ton objectif est autre, à savoir conserver la transparence sur l'ensemble des navigateurs, alors il faut conserver ces 4 lignes.

L'utilisation d'une bibliothèque JS pour régler cela est totalement hors sujet vu qu'elle se reposera de toute façon sur les mêmes bouts de code.

Aussi, la seule chose à comprendre là dedans est que les standards sont des règles définies dans le but d'améliorer la qualité des pages web. Ces standards, rédigés par le W3C (principalement constitué de personnes provenant de sociétés éditrices telles que Mozilla, Microsoft, etc...), servent de fil conducteur lors de tes développements et... c'est tout !

Le validateur W3C n'est pas là pour distribuer des fessées à la première incartade mais pour t'avertir, lors de tes développements, des différences par rapport aux standards. Aussi, si tu t'en écartes tout en sachant ce que tu fais et pourquoi tu le fais , il n'y a aucun mal.

Il faut bien comprendre que si les éditeurs de navigateurs n'implémentent pas forcément toutes les propriétés telles que définies dans les standards, c'est aussi parce que ces mêmes standards ont parfois été définis après l'implémentation de la fonctionnalité au sein du navigateur.

Dans une telle situation, il faut donc savoir faire preuve d'adaptation et ne pas voir la validation comme la quête du Saint Graal.

Bonne journée Smiley cligne
Bonjour,
déjà tu peux transférer les propriété Microsoft dans un CSS conditionnelles (voir la FAQ si inconnu) pour IE8 et versions inférieures mais en ajoutant la syntaxe qui fonctionne pour IE8 et dans cet ordre:


-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /*IE8*/
filter: alpha(opacity=60);  


Supprimer l'alias -moz-opacity: qui ne sert plus à rien les premières version de Firefox puisqu'il prend en compte opacity depuis longtemps et -khtml-opacity qui n'est
plus défini dans la dernière version de Konqueror je crois et dont les anciennes version représente une pourcentage d'utilisation ridicule.
Quant à Safari, il a implémenté Opacity depuis sa version 2.

Ton "problème" d'invalidité est donc résolu mais sur le fond
tu devrais suivre les conseils de Koala.
Modifié par Hermann (03 Jan 2010 - 16:31)
mlbcreation a écrit :
Un png transparent et un hack IE 6 ferait l'affaire Smiley cligne

Mouais... On préfèrera utiliser un commentaire conditionnel, surtout si le but est de valider la feuille de style.
Merci beaucoup pour vos réponses, elles m'ont bien aidé! (Et désolé Laurie-Anne c'est noté)
Je résume Hermann bien que très clair :
- pour IE -> CSS conditionnelles :
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /*IE8*/
filter: alpha(opacity=60); 

- pour les navigateurs moins $*!/°$¤& -> dans le css conventionnel :
opacity:0.5;

C'est déjà beaucoup mieux ! Smiley smile
Mais sachant bien que le W3C n'est pas un but mais une direction (dixit koala64) j'aurais voulu un site conforme et il me reste ce message :
La propriété opacity n'existe pas en CSS niveau 2.1. mais existe en : 0.5
Sans partir dans du flash, voyez vous une solution pour ce dernier message d'erreur ?
Oime a écrit :

Je résume Hermann bien que très clair...
oui

Oime a écrit :

Mais sachant bien que le W3C n'est pas un but mais une direction (dixit koala64) j'aurais voulu un site conforme et il me reste ce message :

Alors tu as mal compris le message qu'à voulu faire passer Koala Smiley cligne

Oime a écrit :

La propriété opacity n'existe pas en CSS niveau 2.1. mais existe en : 0.5
Sans partir dans du flash, voyez vous une solution pour ce dernier message d'erreur ?

Ce message est une erreur je pense : CSS 0.5 n'a jamais existé, ne pas en tenir compte.
Opacity fait parti d'un module CSS 3 qui a déjà passé l'état de Candidate Recommendation, cette propriété est donc implémentable et a été implémentée par la plupart des principaux navigateurs alternatifs, donc aucune contre-indication à son utilisation.
Tu devrais plutôt utiliser le validateur CSS3 du W3C.
Hermann a écrit :
Tu devrais plutôt utiliser le validateur CSS3 du W3C.

Plus précisément, sélectionner le niveau 3 dans les options (masquées par défaut). Smiley cligne
Victor BRITO a écrit :

Plus précisément, sélectionner le niveau 3 dans les options (masquées par défaut). Smiley cligne
Oui merci pas inutile de le préciser en effet Smiley cligne
C'est ce qui me manquait, merci c'est niquel.
J'ai eu le droit à un beau :
Félicitations ! Aucune erreur trouvée.
Smiley ravi
bonjour, Smiley smile

j'ai un div tranparent pour avoir un effet de cache blanc sur une page

, ça marche avec :
 filter:alpha(opacity=90); 
-moz-opacity:  0.9; 
opacity: 0.9; 
-khtml-opacity: 0.9;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);  


mais évidemment le texte à l'intérieur est aussi transparent
quel est le meilleur moyen pour enlever cela?

je pensais faire un div avec mon calque pour la transparence + une div intérieure ou je faisais un inherit des opacity mais cela me parait lourd
Modifié par sergeweb54 (01 Jun 2010 - 19:53)
sergeweb54
utilise rgba(0, 0, 0, 0.9) dans le background-color de ta div
c'est du css3 évidemment...