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

Cuando quiero crear un fondo degradado en CSS3, 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 realmente molesto. ¿Existe una solución mejor, por ejemplo, un complemento jQuery, que hará que mi código sea compatible con todos los navegadores, si solo uso:

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

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

preguntado el 10 de marzo de 12 a las 11:03

escribe el tuyo si es tan molesto ... prefixr.com -

+1 por plantear su problema muy pensado -

@webarto - ¿por qué reinventar la rueda? :) -

porque solo entonces sabrás realmente cómo funciona la rueda -

@webarto sí, a veces este es el camino a seguir :) -

5 Respuestas

Hay muchas herramientas para esto:

Estos se conocen generalmente como preprocesadores CSS.

Terminaría escribiendo algo como esto una vez, como una definición de función (generalmente llamada "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 */
}

Luego para aplicar:

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

Altamente recomendado.

contestado el 05 de mayo de 12 a las 22:05

Personalmente recomiendo LESS y LESSPHP. +1 para una buena variedad de soluciones. - Bojangles

También hay cssmin para PHP, que es un poco más "tradicional" en el sentido de que simplemente agrega las propiedades específicas del navegador para usted, pero no es tan útil como los mixins y los estilos anidados (aunque su código se "degrada" de nuevo a CSS estándar mejor). - Wesley Murch

Borbón La colección mixin para Sass tiene muchos mixins CSS3 que manejan todos los problemas de compatibilidad del navegador. - Tomas

Siempre puede usar una herramienta en línea para generarlos por usted:

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

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

respondido 10 mar '12, 11:03

¿Existe una solución mejor, por ejemplo, un complemento jquery, que hará que mi código sea compatible con varios navegadores?

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

Un script que le permite usar solo propiedades CSS sin prefijo en todas partes. Funciona detrás de escena, agregando el prefijo del navegador actual a cualquier código CSS, solo cuando es necesario.

Entonces solo necesitaría usar la función sin prefijo, que misteriosamente falta en su CSS:

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

respondido 10 mar '12, 12:03

esos complementos son lentos con una función limitada. Vaya con SASS / LESS o no use ninguno. - vincicat

Sí, un preprocesador del lado del servidor suele ser la mejor opción. Sin embargo, valía la pena mencionar una opción del lado del cliente. - treinta y dos

Encontré la respuesta a la pregunta. Es un programa llamado "autoprefixer", es gratis y usa Grunt (así como un par de cosas más). Le da el archivo o directorio con css sin editar, y automáticamente agrega los prefijos en función de los navegadores específicos a los que desea apuntar, y los genera en un nuevo archivo. Aquí hay un artículo sobre cómo usarlo.

Publicación sobre Autoprefixer del autor: http://css-tricks.com/autoprefixer/ Cómo usar Grunt para el principiante absoluto: http://24ways.org/2013/grunt-is-not-weird-and-hard/ Luego, puede buscarlo en Github para encontrar el archivo Léame.

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

respondido 21 mar '14, 22:03

https://autoprefixer.github.io/ Prueba este. Esto no necesariamente te ayuda a escribir un 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);

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

Respondido el 27 de Septiembre de 16 a las 03:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.