Cross-Browser Regla CSS 3

Tengo una pregunta estúpida,Cross-Browser Regla CSS 3

Si quiero añadir esquinas redondeadas para un elemento en los navegadores que soportan algunas cosas de CSS3, tengo que repetir el estilo varias veces para cada navegador, porque es diferente ?

Por ejemplo:

  -moz-border-radius: 12px; /* FF1+ */ 
     -webkit-border-radius: 12px; /* Saf3+, Chrome */ 
      border-radius: 12px; /* Opera 10.5, IE 9 */

Esto significa, que tengo que añadir 3 estilos por esta frontera radio, ¿no es así?

Fuente

2010-04-27 AlexC

Descargo de responsabilidad: espero que hayas encontrado esto un año después de haberlo escrito y ahora está completamente equivocado, y tenemos un estándar, ¡yay!

Por ahora, sí, esto es correcto ... necesita todas las reglas. Desafortunadamente, esto es resultado de una especificación implementada mientras fluye, pero así es como evolucionó la web, a veces el desarrollo de las unidades de disco, más a menudo con la web, los navegadores hacen cosas ordenadas y es una especificación posterior .

Esperemos que una vez que la especificación esté finalizada, tengamos solo border-radius: 12px;. Dado que Firefox y Chrome impulsan actualizaciones automáticas (¿no está seguro de Safari?), Es mucho más probable que esto ocurra, a diferencia de los usuarios de IE que quizás nunca se actualicen.

Fuente

2010-04-27 16:26:31

Se recomienda a los navegadores implementar lo no prefijado cuando la especificación alcanza la Recomendación del candidato. Voy a actualizar css3please para asegurarme de que se mantenga sincronizado con las especificaciones y las mejores prácticas. –

border-radius es la regla oficial de CSS3 para agregar un radio de borde. Sin embargo, como señala Nick, esto no es compatible con todos los navegadores, por lo que debe agregar las versiones adecuadas para que funcione en tantos navegadores como sea posible.

Fuente

2010-04-27 16:31:13

Prueba esto: http://css3please.com/

Fuente

2010-04-27 16:41:11

Compass proporciona Sass mixins para many CSS3 properties que significa que puede escribir algo como:

.foo { 
    @include border-radius(4px, 4px); 
}

que generará el siguiente CSS:

.foo { 
    -webkit-border-radius: 4px 4px; 
    -moz-border-radius: 4px/4px; 
    -o-border-radius: 4px/4px; 
    -ms-border-radius: 4px/4px; 
    -khtml-border-radius: 4px/4px; 
    border-radius: 4px/4px; 
}

Esto es grande porque tienes que escribir menos código, pero proporciona reglas que se dirigen a una amplia gama de navegadores.

Fuente

2011-08-04 10:37:10

Sólo es necesario border-radius para los navegadores que soportan realidad esa parte de CSS 3. Las otras propiedades son para los navegadores que tienen experimentales implementaciones. La versión más nueva de esos navegadores reemplazará las propiedades experimentales prefijadas del proveedor con las propiedades estándar cuando se estabilicen su implementación y la especificación.

Fuente

2011-08-04 10:42:14 Quentin

Respuesta

Cuestiones relacionadas