Haciendo caso omiso del selector CSS específico de Webkit en Firefox

Estoy trabajando en un tema jQuery que incluye estilos para tantos elementos de formulario como sea posible. Inicialmente fue desarrollado para Webkit (Chrome). Ahora también quiero que funcione con Firefox.Haciendo caso omiso del selector CSS específico de Webkit en Firefox

El problema es; Firefox tiene problemas con alguna sintaxis específica de Webkit.

Por ejemplo:

input[type="range"]::-webkit-slider-thumb, 
input[type=radio], 
input[type=checkbox] { 
    -webkit-appearance: none !important; 
    -moz-appearance: none; 
    width: 1.2em; 
    height: 1.2em; 
    border: 1px solid black; 
    background: #666666 url(images/ui-bg_highlight-soft_50_666666_1x100.png) 50% 50% repeat-x; 
}

El problema es el bit input[type="range"]::-webkit-slider-thumb,. Quítalo y Firefox funciona bien. También lo hace para otras sintaxis como ::-webkit-file-upload-button, ::selection y todas las demás cosas utilizando las etiquetas ::-webkit-.... Sin embargo, reconoce sus propias etiquetas ::-moz-..., como ::-moz-selection.

Parece que Webkit simplemente ignora las etiquetas ::-moz-.

¿Hay alguna manera conveniente de hacer que Firefox ignore las etiquetas ::-webkit-... o resolver este problema sin tener que mantener varias copias de cada bloque de CSS?

Uso de versiones actualizadas de Chrome y Firefox.

Fuente

2011-11-29 Martijn

¿Qué quieres decir cuando dices WebKit simplemente ignora las etiquetas ':: - moz-'? ¿Aplica la regla de todos modos, ignorando solo el pseudo-elemento con ese prefijo? (No se supone que ...) – BoltClock

@BoltClock Quiero decir que WebKit solo renderiza la regla. Como si la etiqueta ':: - moz-' no estuviera allí; ignorando solo el pseudo-elemento con ese prefijo. Si tuviera 'div, span :: - moz-whatever, p {color: red; } ', WebKit aplicaría la regla a div y p. – Martijn

Por desgracia, no es posible sin necesidad de duplicar los bloques de declaración, como el CSS spec stipulates que los navegadores deben comportarse de esta manera cuando se enfrentan a los selectores no reconocidos en las reglas CSS:

El selector consiste en todo hasta (pero no incluyendo) el primer corsé izquierdo ({). Un selector siempre va junto con un {} -bloque. Cuando un agente de usuario no puede analizar el selector (es decir, no es válido CSS3), también debe ignore {} -block.

En este caso, es el navegador de un proveedor que no puede reconocer los prefijos de otro proveedor, por lo que tiene que ignorar la regla.

Fuente

2011-11-29 21:49:06 BoltClock

Y es por eso que odio los prefijos de los proveedores en los selectores y en las reglas. – BoltClock

Gracias por la respuesta. No es el que esperaba, pero tendrá que hacer. Entonces otra vez ... ¿no debería '' - webkit -... 'ser tan correcto o incorrecto como un prefijo' :: - moz -... '? Si Mozilla entiende uno, ¿por qué debería fallar en el otro? – Martijn

@Martijn: Debido a que la implementación de WebKit es solo para uso de WebKit. Los proveedores nunca deben intentar analizar o aplicar estilos que no usen sus propios prefijos. Por qué WebKit no está fallando una regla completa en ':: - moz-' como anotó anteriormente, sin embargo, está más allá de mí ... – BoltClock

tuve que leer un poco para responder a esta pregunta, aquí hay algunos buenos recursos, Gecko Style Engine Further Reading on the Engine Implementation, todavía no vi ningún punteros como por qué sería dejarlo caer, pero te puedo dar mi mejor conjetura, yo piense que el motor está cayendo todo el selector, suponga que mozilla implementa pseudo selector -moz-slider-thumb e intenta usarlo con -webkit- y también se eliminará.

He visto este comportamiento antes en todos los navegadores, y creo que se está utilizando como un hack para orientar algunos navegadores a veces.

Esto funcionará

input[type=radio], 
input[type=checkbox] { 
    -webkit-appearance: none !important; 
    -moz-appearance: none; 
    width: 1.2em; 
    height: 1.2em; 
    border: 1px solid black; 
}

Esta costumbre

input[type="range"]::-webkit-slider-thumb, 
input[type=radio], 
input[type=checkbox] { 
    -webkit-appearance: none !important; 
    -moz-appearance: none; 
    width: 1.2em; 
    height: 1.2em; 
    border: 1px solid black; 
}

o esta

input[type="range"]::-moz-slider-thumb, 
input[type=radio], 
input[type=checkbox] { 
    -webkit-appearance: none !important; 
    -moz-appearance: none; 
    width: 1.2em; 
    height: 1.2em; 
    border: 1px solid black; 
}

creo que tendrá que volver a escribir las propiedades de los valores de dos o más diferentes selectores, esto solo afectará el tamaño de los estilos porque los motores seguirán dejando caer los selectores que no poseen.

Realmente espero que esto ayude un poco al menos.

EDIT:

Como señaló @BoltClock usuario en los comentarios de mi suposición era correcta aquí es un enlace a la especificación w3.org/TR/css3-syntax/#rule-sets

Fuente

2011-11-29 21:52:02 rroche

Su suposición es correcto. Esto está documentado en la especificación: http://www.w3.org/TR/css3-syntax/#rule-sets – BoltClock

¡Gracias! ¡Lo tendré en mente! – rroche

FYI, terminamos yendo a una solución diferente.

Como mi producto final es una hoja de estilo, decidí usar un compilador CSS para generar el archivo .CSS basado en un archivo fuente. Hasta ahora está funcionando bien.

He utilizado LessPHP porque el formato .less es bastante popular y estoy familiarizado con PHP, pero cualquiera de los otros lo hará.

Tenga en cuenta que estoy utilizando LessPHP solo para compilar un archivo .CSS estático, por lo que no será un requisito para los usuarios finales de este proyecto a menos que deseen cambiar los archivos fuente .less ellos mismos.

Fuente

2011-12-06 19:59:00 Martijn

Haciendo caso omiso del selector CSS específico de Webkit en Firefox

Respuesta

Cuestiones relacionadas