2011-02-28 8 views
5

quiero una sombra por debajo div llamado "sombra":¿Por qué las propiedades CSS tienen diferentes nombres para Chrome, FF, Opera?

#shadow { box-shadow: 1px 1px 1px #000 }; 

Hecho?

No, en absoluto. Funciona solo en un navegador. Adivina cual.

Para FF/Chrome Tengo que añadir no muy intuitiva:

-moz-box-shadow: 1px 1px 1px #000; 
-webkit-box-shadow: 1px 1px 1px #000; 

Y ahora todo está bien. Este esquema se aplica a MUCHAS propiedades de CSS. ¿Por qué?

Afortunadamente no hay -webkit-border, moz-font o -ie-backgroundcolor.

PS. Sí, ni una sola palabra sobre IE. Llamar a THIS un navegador es como comparar la silla de ruedas con los autos de Modena.

PD 2. ¿Por qué hay un logotipo al lado de la etiqueta de Google Chrome debajo de mi publicación? ¿O por qué no hay logotipos para Opera & FF?

+0

En cuanto a PS2: La etiqueta de Chrome tiene un logotipo, ya que Google paga Stackoverflow a mostrar uno. Es una forma sutil de publicidad;). – hallvors

Respuesta

2

Es una forma de que los navegadores publiquen características antes de que la especificación CSS esté completamente aprobada.

Por ejemplo, mire los degradados de CSS3. -moz- vs -webkit- son completamente diferentes.

background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0.15, rgb(145,4,88)), 
    color-stop(0.58, rgb(174,30,115)), 
    color-stop(0.79, rgb(209,57,150)) 
); 
background-image: -moz-linear-gradient(
    center bottom, 
    rgb(145,4,88) 15%, 
    rgb(174,30,115) 58%, 
    rgb(209,57,150) 79% 
); 

Esto puede ser de interés: http://www.alistapart.com/articles/prefix-or-posthack/

Así que la próxima vez que se encuentre quejándose de declarar la misma cosa cuatro veces, una para cada navegador , recuerde que el dolor es temporal. Es un poco como una vacuna , el tiro duele ahora, es cierto, pero realmente no es tan malo en comparación con a la enfermedad que previene.Y en el caso este caso, está siendo vacunado frente a un caso grave de varios años pirateo de analizador y rastreo de navegador. Sufrimos la larga plaga una vez. Los prefijos, si se usan correctamente, evitan otro brote durante mucho tiempo más.

NOTA: Es una buena práctica incluir la versión sin los prefijos, ya que la función de sitios se continuará cuando la propiedad se haya adoptado por completo.

+0

El artículo de AListApart es una lectura obligada para cualquiera que esté dispuesto a comprender por qué los prefijos de propiedades son una forma de mejorar el desarrollo de estándares web. – dSebastien

0

Las capacidades de los navegadores superan los estándares que deben seguir. Le dan acceso a las capacidades mientras tanto hasta que se publique el estándar, luego siguen el estándar publicado y brindan compatibilidad con los formatos "webkit ..." de aspecto funky.

+0

Incluso se requiere, más o menos. El estado de la Recomendación solo puede alcanzarse si hay dos implementaciones anteriores por parte de los proveedores. Sin implementación, sin estándar. – FelipeAls

3

Esto sucede porque los navegadores no quieren conflictos entre sí. Además de eso, no hay realmente una "especificación" para la sombra de caja en este momento, por lo que varios navegadores tienen su propia implementación de la misma.

Este enfoque permite que cualquier extensión específica del proveedor de coexistir con cualquier futura (o corriente) CSS propiedades sin causar conflictos porque, de acuerdo con las especificaciones de W3C , un nombre de propiedad CSS nunca empezar un guión o un guión bajo :

Fuente: http://reference.sitepoint.com/css/vendorspecific

0

Propiedades whic h se implementan en función de las especificaciones de los no acabados; se les da el prefijo del proveedor. Lo mismo si el proveedor dado piensa que su implementación no está terminada, aunque la especificación sí lo esté.

0

Como otros ya han respondido, es porque se están poniendo en práctica una función para los que las especificaciones aún no están completos, o una función para la que su aplicación no se ha completado.

Este es un comportamiento intencional ; la especificación de CSS especifica que así es como se supone que deben hacer las cosas en este caso. Las razones de esta regla son los siguientes:

  • Para asegurar que cuando diferentes navegadores implementan la función diferente (debido a cambios o inconsistencias en la especificación), esas diferencias pueden ser incorporados en la misma hoja de estilo.
    Por ejemplo: Las primeras versiones de -moz-border-radius trabajaron de manera muy diferente a -webkit-border-radius; había diferencias de sintaxis significativas entre ellos, por lo que si ambos hubieran sido solo border-radius, no habría sido capaz de soportarlos a ambos.
  • Para simplificar la transición cuando se completa la especificación.
    Si utiliza una función con un prefijo de proveedor, ponga siempre la versión no prefijada de la característica, después de las otras. De esta forma, un navegador que se actualizó recientemente para admitirlo correctamente seleccionará la versión correcta en lugar de que sea anulada por la versión con prefijo desactualizado.
  • Para asegurarse de que los desarrolladores web saben cuando están usando una característica que no está necesariamente lista para el uso en horario de máxima audiencia.
    Esto es importante: debe tener en claro que el uso de una función con prefijos de proveedor significa que está utilizando una característica que los fabricantes de navegadores y los redactores de especificaciones no creen que esté lista aún. Necesitas saber esto. No dejes que te impida usar algo si es útil, pero ten en cuenta que las cosas pueden cambiar con la próxima versión.
Cuestiones relacionadas