Discussion :

[adamo901]

bonjour,
Voici la partie HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span class='border_shadow'>bonjour tout le monde</span>

et voici la partie css, j'ai utilisé (tuto developpez.com)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.border_shadow
{
    -webkit-box-shadow: 10px 10px 5px #888;
    padding: 5px 5px 5px 15px;
    width: 300px;
}

Pourtant ça ne marche pas?!
j'ai pas de bordures ombrées!!

[adamo901]

J'utilise comme navigateur FireFox 3.0.3

[adamo901]

Avec Firebug, dans la fenêtre de droite, avec l'onglet "style" je ne retrouve que :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.border_shadow {displaytagex.css (ligne 10)
padding:5px 5px 5px 15px;
width:300px;
}

bien que dans la partie HTML de firebug, je retrouve le code complet!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.border_shadow
{
    -webkit-box-shadow: 10px 10px 5px #888;
    padding: 5px 5px 5px 15px;
    width: 300px;
}

[Candygirl]

Bonjour,

Le préfixe -webkit cible le moteur de rendu WebKit utlisé ,entre autre, par safari et konkeror il me semble. Il est donc normal que Firefox, basé sur Gecko, ignore cette propriété spécifique.

[Bisûnûrs]

moteur de rendu WebKit utlisé ,entre autre, par safari et konkeror il me semble.

Sans oublier maintenant Google Chrome.

[Candygirl]

Merci, c'est juste il me semblait bien que j'oubliais qqch d'important d'où le "entre autre"

[Erwan31]

Salut,
pour Konkeror et les vieilles versions de Safari, il faut utiliser le préfixe
-khtml-, il me semble qu'il ne prend pas encore en compte -webkit- même
si sa dernière version à évolué vers ce fork (dérivé de KHTML) mais à confirmer.

[adamo901]

Merci pour toutes vos réponses très instructives!

Dans un premier lieu, je vais essayer le même code avec chrome de google.
Puis je vais essayer le KHTML pour le FireFox.

Je vous posterais le résultat.

[Bisûnûrs]

-khtml- n'est pas pour Firefox mais comme écrit plus haut :

pour Konkeror et les vieilles versions de Safari

Pour Firefox c'est -moz-. Mais encore faut-il qu'ils aient développés ces fonctionnalités sur les propriétés que tu veux utiliser.

[adamo901]

Merci beaucoup pour votre remarque.

ça me mène à poser deux nouvelles questions:

1. Y a-t-il un site sur lequel on pourra trouver la liste complète de tous ces moteurs, avec toutes les propriétés qui sont associées?

2. Est ce que cette diversification ne rend pas le CSS3 plus pénible à coder?

[Erwan31]

Pensez à faire des recherches, c'est pas compliqué: http://fr.wikipedia.org/wiki/Moteur_de_rendu_HTML
Pour les extension mozilla, tu as: http://developer.mozilla.org/index.p...nsions_Mozilla

2. Est ce que cette diversification ne rend pas le CSS3 plus pénible à coder?

Pourquoi évoques tu CSS3? On est encore là en CSS2.1.
Ce n'est dans la majorité des cas pas plus pénible, tout dépend de ce que tu souhaites obtenir.

[adamo901]

Je me suis basé sur le tutoriel de Design Shack du 02/10/2008 sur le CSS3

Avec le css2, je n'ai jamais rencontré des expressions comme -webkit-box-shadow.

[Erwan31]

Ah d'accord, eh ben l'auteur (de Designshack, pas le traducteur) a fait une confusion entre les extension CSS propriétaires (indépendantes des versions de CSS) et CSS3.
Ce sont juste des extension qui viennent en partie étendre les propriétés
CSS2.1 un peu à l'instar des plug-in.
Le seul rapport avec CSS3 est que certaines de ces extensions sont susceptibles d'être normalisées par le CSS working Group du W3C pour faire partie de CSS3.

[Bisûnûrs]

Pour les extension mozilla, tu as: http://developer.mozilla.org/index.p...nsions_Mozilla

C'est bizarre que dans ce document ils ne parlent pas de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

::-moz-selection

ni dans le document original en anglais.

[Erwan31]

C'est bizarre que dans ce document ils ne parlent pas de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

::-moz-selection

ni dans le document original en anglais.

Salut Bisunurs,
désolé je vois pas à quoi tu fais référence.

[Bisûnûrs]

@Erwan31 : A ce genre de code par exemple : http://www.developpez.net/forums/m2763399-9/

[Erwan31]

Oui en effet bizarre mais bon...on peut s'en passer hein.

[adamo901]

Donc si j'ai bien compris! pas de CSS3 pour le moment!!

[Erwan31]

Donc si j'ai bien compris! pas de CSS3 pour le moment!!

Pas du tout, tu as mal compris. Rien ne t'interdit d'utiliser des propriétés ou sélecteurs CSS3 à partir du moment ou tu sais ce que tu fais.
Les implémentations CSS3 des navigateurs graphiques progressent de jour en jour et certains navigateurs comme les dernières version d'Opera, Safari et Konqueror implémentent désormais tous les selecteurs/pseudo-classes CSS3 qui ne requièrent pas l'intervention de l'utilisateur et de plus en plus de propriétés, même si la majorité des modules CSS3 (CSS3 est modulaire contrairement à CSS2.1) sont encore à l'état de Working Draft (brouillon, premier état d'avancement d'une spécification). En revanche IE même dans sa version 8 beta2 est encore à la traine mais ce n'est qu'une bêta.

[kohsaka]

mais puisque ie6/7 sont encore bien présent, je ne pense pas que ça soit une bonne idée d'utiliser les fonctionnalités de CSS3.