[css3] sa beauté mais l'enfer de sa prog !!! Résolu

Question

Bonjour,  

Je développes actuellement un site web en utilisant CSS3. 
Avec ce dernier, les rendus sont bluffant sous Chrome mais ne fonctionne pas tous sur Mozilla. 

Vive la mauvais compatibilité... 

Question, pourquoi cela ne fonctionne pas: 

 background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff)); 
 background: -moz-gradient(linear, left top, left bottom, from(#ccc), to(#fff));  

Sous Chrome c'est parfait, sous mozilla j'ai un fond blanc. 
C'est bien beau CSS3, mais si les navigateurs ne sont pas capables de le gérer tous de la même manière.... -_-" 

Et ce n'est pas le seul exemple, mon site fonctionne parfaitement sur Chrome, les radius, les effets... mais sous mozilla c'est l'enfer à programmé.
Une idée pour résoudre déjà le fond ?


MERCI
Configuration: NZXT Lexa S 
Microsoft Seven Premium 
Intel core I5 2400 
Asus P8P67 LE Rev 3.0 (Révision B3) 
Arctic Cooling MX-2 (4 g) 
Sapphire Radeon HD 6850 1Go 
G.Skill Kit Extreme3 2 x 2 Go PC12800 Ripjaws X CAS8 
Seagate Barracuda SATA Revision 3.0 - 1 To 
Antec HCG - 520W 
Cooler Master Hyper 212 Plus 
Ecran 17" 
Enceinte Logitech 5.1 


Ordinateur portable Toshiba A500-18T 
Ordinateur portable Toshiba A660-12E

ViDikk · Answer

Bonjour,

C'est normal que votre site fonctionne mal sous Firefox, si vous utilisez CSS3. En effet, chaque navigateur utilise un moteur de rendu différent. Et comme le CSS3 n'est pas complètement normalisé, chacun utilise son propre code pour l'interprêter. Concernant votre fond, vous devez mettre ceci :

background-color: #cccccc;
background-image: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#ffffff)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #cccccc, #ffffff); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image:    -moz-linear-gradient(top, #cccccc, #ffffff); /* FF3.6 */
background-image:     -ms-linear-gradient(top, #cccccc, #ffffff); /* IE10 */
background-image:      -o-linear-gradient(top, #cccccc, #ffffff); /* Opera 11.10+ */
background-image:         linear-gradient(to bottom, #cccccc, #ffffff);

Il existe des sites pour vous aider à bien développer avec du CSS3, comme https://css3please.com/

patrice86 · Answer

Bien vu merci bien ;)

C'est bien beau CSS3 mais il serait temps qu'il sorte la version stables pour tous. Car c'est un peu un barbant de devoir faire des lignes différentes pour chaques navigateurs.

[css3] sa beauté mais l'enfer de sa prog !!!

2 réponses

Votre réponse

Discussions similaires