selectores lista etiquetas ejemplos codigos avanzados css internet-explorer firefox cross-browser filter

lista - selectores css



¿Cuál es la alternativa de Filtro CSS para Firefox? (9)

¿Podría darnos un ejemplo concreto de lo que está tratando de hacer exactamente? Probablemente obtendrás menos respuestas "Your brower sux" y más "¿Qué tal intentar este enfoque diferente?" unos.

Normalmente CSS se usa para controlar la apariencia del contenido HTML, no para agregar efectos o editar imágenes de manera inteligente. Lo que estás tratando de hacer podría ser posible usando javascript, pero una secuencia de comandos orientada al comportamiento aún no es muy adecuada para el tipo de ajuste que quieres hacer (aunque algo como esto es una aventura divertida e ineficiente en CSS) / JS payasadas).

No puedo imaginar un escenario en el que necesite que el cliente realice ajustes de imagen en tiempo real. Podrías modificar las imágenes del lado del servidor y simplemente hacer referencia a estas versiones modificadas con tu CSS o posiblemente Javascript, dependiendo de lo que estés haciendo exactamente. ImageMagick es una gran herramienta pequeña de línea de comandos para todos los efectos de imagen que alguna vez necesitaría, y es bastante simple de usar por sí mismo o en el idioma del lado del servidor de su elección. O si está usando PHP, creo que la biblioteca GD de PHP es bastante popular.

Estoy usando filtros de CSS para modificar imágenes sobre la marcha dentro del navegador. Funcionan perfectamente en Internet Explorer, pero no son compatibles con Firefox.

¿Alguien sabe lo que el filtro CSS equivalente para estos es para Firefox? Una respuesta que funcionaría a través del navegador (Safari, WebKit, Firefox, etc.) sería preferible.

<style type="text/css"> .CSSClassName {filter:Invert;} .CSSClassName {filter:Xray;} .CSSClassName {filter:Gray;} .CSSClassName {filter:FlipV;} </style>

Actualización: sé que el filtro es una característica específica de IE. ¿Hay algún tipo de equivalente para cualquiera de estos que sea compatible con Firefox?

Hay filtros, como Gaussian Blur et al en SVG, que es compatible de forma nativa por la mayoría de los navegadores, excepto IE.

Experimento de pensamiento puro aquí, puede envolver sus imágenes en un objeto SVG sobre la marcha con javascript e intentar aplicarles filtros.

Dudo que esto funcione para imágenes de fondo, aunque quizás con un posicionamiento inteligente podría funcionar.

Es poco probable que sea una solución realista. Si no desea modificar permanentemente sus imágenes de origen, Rudi tiene la mejor respuesta, usar herramientas del lado del servidor para aplicar transformaciones sobre la marcha (o almacenadas en caché para el rendimiento) será la mejor solución de navegador cruzado.

Me temo que no está de suerte con la mayoría de las funciones de filter navegador múltiple. CSS solo no te permitirá hacer la mayoría de estas cosas. Por ejemplo, no hay forma de invertir una imagen entre navegadores utilizando solo CSS. Tendrás que tener dos copias diferentes de la imagen (una invertida) o podrías intentar usar Javascript o quizás hacerlo de una manera completamente diferente, pero no hay una solución simple únicamente en CSS.

Ninguno que yo sepa El filtro fue solo un IE y no creo que ningún otro navegador haya seguido con una funcionalidad similar.

¿Qué es un caso de uso específico que necesita?

No hay equivalentes en otros navegadores. Lo más cerca que podrías estar es usar una biblioteca de gráficos como Canvas y manipular las imágenes en él, pero tendrías que escribir las manipulaciones tú mismo y necesitarían JavaScript.

filter es una función solo de IE; no está disponible en ningún otro navegador.

No realmente, y con suerte nunca lo habrá. No es una función de CSS estándar de la web porque estás usando CSS para formatear la página web, no el navegador en sí. El día en que otros diseñadores y desarrolladores web crean que deberían darle estilo a mi navegador como lo desean y lo hacen luego es el día en que dejo de visitar sus páginas (y lo digo como un tipo de web front-end).

Esta es una pregunta muy antigua, pero css se ha actualizado para admitir filtros. Lea más sobre esto en

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Sintaxis

Con una función, use lo siguiente:

filter: <filter-function> [<filter-function>]* | none

Para una referencia a un elemento SVG, use lo siguiente:

filter: url(svg-url#element-id)