Utilisation de CSS 3

bonjour,
Voici la partie HTML

Code:

---

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

---

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

Code:

---

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!!

J'utilise comme navigateur FireFox 3.0.3

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

Code:

---

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:

---

1 2 3 4 5 6

.border_shadow { -webkit-box-shadow: 10px 10px 5px #888; padding: 5px 5px 5px 15px; width: 300px; }

---

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.

Citation:

---

Envoyé par Candygirl

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

---

Sans oublier maintenant Google Chrome.

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

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.

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.

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

Citation:

---

Envoyé par Erwan31

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.

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?

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

Citation:

---

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.

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.

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.

Citation:

---

Envoyé par Erwan31

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:

---

::-moz-selection

---

ni dans le document original en anglais.

Citation:

---

Envoyé par Bisûnûrs

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

Code:

---

::-moz-selection

---

ni dans le document original en anglais.

---

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

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

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

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

Citation:

---

Envoyé par adamo901

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.

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.

De toute façon c'est navigateur seront toujours présent. Il suffit devoir pour IE6 où tout le monde se disait qu'il serait remplacé par IE7. Et à mon avis c'est par IE8 ou même IE9 qui changera la donne.

Et rien n'empêche de faire appel aux propriétés CSS3 vu qu'il y aura toujours un navigateur qui sera en retard par rapport aux autres. Il suffit de coder en fonction du navigateur comme on le fait tous actuellement (d'ailleurs qui le fait pas ?? :aie:).

Enfin le but de ces articles n'est pas de vous plonger dans le CSS3 à tout prix et de vous obliger à utiliser les nouvelles propriétés mais plutôt de vous présenter les nouvelles fonctionnalités qui pourraient voir le jour. Et comme c'est écrit c'est juste une introduction et si je me souviens bien dès le début on dit que le CSS3 est toujours en écriture.

Citation:

---

Envoyé par Introduction au CSS3 - Partie 1 : Qu'est-ce que c'est ?

Les autres sont toujours en écriture

---