Quelle est l'alternative de filtrage CSS pour Firefox?

StackOverflow https://stackoverflow.com/questions/156116

Question

J'utilise des filtres CSS pour modifier les images à la volée dans le navigateur. Celles-ci fonctionnent parfaitement dans Internet Explorer, mais ne sont pas prises en charge dans Firefox.

Quelqu'un sait-il quel est l'équivalent du filtre CSS pour Firefox? Une réponse qui fonctionnerait sur plusieurs navigateurs (Safari, WebKit, Firefox, etc.) serait préférable. 

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

Mise à jour: Je sais que le filtre est une fonctionnalité spécifique à IE. Existe-t-il un type d’équivalent compatible avec Firefox?

Était-ce utile?

La solution

Vérifiez la bibliothèque d'effets d'image Javascript Nihilogic :

  • supporte assez bien IE et Fx
  • a beaucoup d'effets

Vous pouvez trouver de nombreux autres effets dans les projets CVI :

Bonne chance

Autres conseils

Pouvez-vous nous donner un exemple concret de ce que vous essayez exactement de faire? Vous obtiendrez probablement moins de réponses "Your Brower Sux" et davantage "Pourquoi ne pas essayer cette approche différente? .

.

Normalement, CSS est utilisé pour contrôler l'apparence du contenu HTML, et non pour ajouter des effets ou modifier des images de manière intelligente. Ce que vous essayez de faire est peut-être possible avec JavaScript, mais un script orienté vers le comportement n’est probablement toujours pas très bien adapté au type de peaufinage que vous voulez faire (bien que quelque chose comme ceci est une aventure amusante et très inefficace dans la tromperie CSS / JS).

Je ne peux pas imaginer de scénario où vous aurez besoin du client pour peaufiner ses images en temps réel. Vous pouvez modifier les images côté serveur et simplement référencer ces versions modifiées avec votre CSS ou éventuellement Javascript, en fonction de ce que vous faites exactement. ImageMagick est un excellent petit outil en ligne de commande pour tous les effets d'image dont vous avez besoin. Il est assez simple. à utiliser seul ou dans la langue côté serveur de votre choix. Si vous utilisez PHP, je pense que la la bibliothèque GD de PHP est très populaire.

Il n'y a pas d'équivalent dans les autres navigateurs. Le plus proche que vous puissiez obtenir consiste à utiliser une bibliothèque graphique telle que Canvas et à manipuler les images qu’elle contient, mais vous devrez écrire les manipulations vous-même et elles nécessiteront JavaScript.

filtre est une fonctionnalité exclusivement IE, il n'est disponible dans aucun autre navigateur.

filtres SVG appliqués au contenu HTML .

Ne fonctionne que dans Firefox 3.1 et supérieur, bien que je pense que Safari se dirige dans la même direction.

Aucun que je sache. Filtrer était une seule chose d'IE et je ne pense pas qu'aucun autre navigateur ait suivi avec une fonctionnalité similaire.

Quel est le cas d'utilisation spécifique dont vous avez besoin?

Je crains que vous n'ayez pratiquement pas de chance avec la plupart des fonctionnalités de type filtre inter-navigateurs. CSS seul ne vous permettra pas de faire la plupart de ces choses. Par exemple, il n’existe aucun moyen d’inverser une image sur plusieurs navigateurs en utilisant simplement CSS. Vous devrez disposer de deux copies différentes de l'image (une inversée) ou vous pouvez essayer d'utiliser Javascript ou peut-être vous y prendre d'une manière complètement différente, mais il n'existe pas de solution simple uniquement en CSS.

Il existe des filtres, tels que Gaussian Blur et al, en SVG, qui sont supportés nativement par la plupart des navigateurs, sauf IE.

Ici, vous pouvez encapsuler vos images dans un objet SVG à la volée avec javascript et essayer de leur appliquer des filtres.

Je doute que cela fonctionne pour les images d'arrière-plan, mais peut-être qu'avec un positionnement intelligent, cela pourrait fonctionner.

Il est peu probable que ce soit une solution réaliste. Si vous ne souhaitez pas modifier vos images source de manière permanente, Rudi propose la meilleure réponse. Utiliser des outils côté serveur pour appliquer des transformations à la volée (ou en cache pour améliorer les performances) sera la meilleure solution pour plusieurs navigateurs.

C'est une question très ancienne, mais css a été mis à jour pour prendre en charge les filtres. Plus d'informations à ce sujet sur

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

Syntaxe

Avec une fonction, utilisez les éléments suivants: 

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

Pour faire référence à un élément SVG, utilisez ce qui suit: 

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

Pas vraiment, et j'espère qu'il n'y en aura jamais. Ce n'est pas une fonctionnalité CSS standard Web pour la raison que vous utilisez CSS pour formater la page Web, pas le navigateur lui-même. Le jour où d'autres concepteurs et développeurs Web pensent qu'ils doivent styler mon navigateur comme bon leur semble et le font ensuite, c'est le jour où j'arrête de consulter leurs pages (et je le dis en tant qu'utilisateur Web frontal).

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top