¿Hay alguna forma de hacer que el código CSS3 entre navegadores sea SECO?

Question

Cuando quiero crear un gradiente de fondo en CSS 3 que tengo que hacer esto:

background-color: #3584ba; 
background-image: -webkit-gradient(linear, left top, left bottom, from(#54a0ce), to(#3584ba)); /* Safari 4+, Chrome */ 
background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); /* Safari 5.1+, Chrome 10+ */ 
background-image: -moz-linear-gradient(top, #54a0ce, #3584ba); /* FF3.6 */ 
background-image:  -o-linear-gradient(top, #54a0ce, #3584ba); /* Opera 11.10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#54a0ce', endColorstr='#3584ba'); /* IE */ 

y esto es muy molesto. ¿Hay una mejor solución, por ejemplo, un plugin de jQuery, que hará que el navegador cruz código compatible, si yo sólo uso:

background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); /* Safari 5.1+, Chrome 10+ */ 

por ejemplo? ¿Hay alguna herramienta que me ayude a escribir código CSS3 más fácilmente?

Answer 1

Hay muchas herramientas para esto:

• http://lesscss.org/
• http://leafo.net/lessphp/
• http://sass-lang.com/
• http://compass-style.org/

Estos se conocen generalmente como Preprocesadores CSS.

que terminaría escribiendo algo como esto una vez, como una definición de función (por lo general llamado "mixin"):

.linear-gradient(@start, @end) { 
    background-color: @end; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); /* Safari 4+, Chrome */ 
    background-image: -webkit-linear-gradient(top, @start, @end); /* Safari 5.1+, Chrome 10+ */ 
    background-image: -moz-linear-gradient(top, @start, @end); /* FF3.6 */ 
    background-image:  -o-linear-gradient(top, @start, @end); /* Opera 11.10+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@start', endColorstr='@end'); /* IE */ 
} 

entonces para aplicar:

.my-class { 
    .linear-gradient(#54a0ce, #3584ba); 
} 
.my-other-class { 
    .linear-gradient(#ccc, #aaa); 
} 

encarecidamente.

Answer 2

Siempre se puede utilizar una herramienta en línea para generarlos para usted:

http://www.colorzilla.com/gradient-editor/

http://www.css3maker.com/css-gradient.html

Answer 3

¿Hay una mejor solución, por ejemplo, un plugin de jQuery, que hará que mi código compatible con navegador cruzado

Para una solución del lado del cliente, puede usar http://lea.verou.me/prefixfree/

Una secuencia de comandos que le permite usar solo propiedades de CSS no prefijadas en todas partes. Funciona entre bastidores y agrega el prefijo del navegador actual a cualquier código CSS , solo cuando es necesario.

A continuación, sólo tendrá que utilizar la función sin prefijo, que se encuentra en su misteriosa CSS:

background-image: linear-gradient(top, #54a0ce, #3584ba); 

Answer 4

he encontrado la respuesta a la pregunta. Es un programa llamado "autoprefixer", es gratis y usa Grunt (así como un par de otras cosas). Usted le da el archivo o directorio con CSS sin editar, y agrega automáticamente los prefijos en función de los navegadores específicos que desea orientar, y los emite en un nuevo archivo. Aquí hay un artículo sobre cómo usarlo.

Post sobre Autoprefixer por el autor: http://css-tricks.com/autoprefixer/ Cómo utilizar ronco para el principiante absoluto: http://24ways.org/2013/grunt-is-not-weird-and-hard/ entonces usted puede mirar hacia arriba en Github para encontrar el readme.

Estaba buscando exactamente lo mismo, y esta fue la mejor solución que encontré que procesa CSS regularmente. Espero que eso ayude.

Answer 5

https://autoprefixer.github.io/ Pruebe esto. Esto no necesariamente le ayuda a escribir código más fácil, no es una biblioteca de JavaScript. Pero agrega prefijos de proveedor y elimina el código css inútil.

background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); 
background-image: linear-gradient(top, #54a0ce, #3584ba); 

Al introducir su código, ese es el resultado que obtengo. (Eliminé el -webkit- del código original para obtener ese resultado).