ما هو بديل مرشح CSS لمتصفح فايرفوكس؟

Question

أنا أستخدم مرشحات CSS لتعديل الصور بسرعة داخل المتصفح.تعمل هذه بشكل مثالي في Internet Explorer، ولكنها غير مدعومة في Firefox.

هل يعرف أحد ما هو مكافئ مرشح CSS لـ Firefox؟يُفضل الإجابة التي قد تعمل عبر المتصفحات (Safari وWebKit وFirefox وما إلى ذلك).

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

تحديث:أعلم أن عامل التصفية هو ميزة خاصة بـ IE.هل هناك أي نوع مكافئ لأي من هذه العناصر التي يدعمها Firefox؟

Answer 1

رجاء تاكد من مكتبة تأثيرات الصور Nihilogic Javascript:

• يدعم IE وFx بشكل جيد
• لديه الكثير من الآثار

يمكنك العثور على العديد من التأثيرات الأخرى في مشاريع سي في آي:

• هم أيضًا يعتمدون على JS
• هناك مختبر للتجربة

حظ سعيد

Answer 2

هل يمكنك أن تعطينا مثالاً ملموسًا لما تحاول فعله بالضبط؟ربما ستحصل على عدد أقل "معجبك" الردود وأكثر من ذلك "ماذا عن تجربة هذا النهج المختلف؟" تلك.

عادةً ما يتم استخدام CSS للتحكم في شكل ومظهر محتوى HTML، وليس لإضافة تأثيرات أو تحرير الصور بطرق ذكية.ما تحاول القيام به قد يكون ممكنًا باستخدام جافا سكريبت، ولكن البرنامج النصي الموجه نحو السلوك لا يزال على الأرجح غير مناسب تمامًا لنوع التغيير والتبديل الذي تريد القيام به (على الرغم من وجود شيء مثل هذا هي مغامرة ممتعة وغير فعالة للغاية في لعبة CSS / JS tomfoolery).

لا أستطيع أن أتخيل السيناريو عندما تفعل ذلك يحتاج العميل لإجراء التغيير والتبديل في الصورة في الوقت الحقيقي.يمكنك تعديل الصور من جانب الخادم والإشارة ببساطة إلى هذه الإصدارات المعدلة باستخدام CSS أو ربما Javascript، اعتمادًا على ما تفعله بالضبط. ImageMagick هي أداة سطر أوامر صغيرة رائعة لجميع تأثيرات الصور التي قد تحتاجها في أي وقت، وهي سهلة الاستخدام جدًا بمفردها أو ضمن لغة الخادم التي تختارها.أو إذا كنت تستخدم PHP، على ما أعتقد مكتبة PHP GD تحظى بشعبية كبيرة.

Answer 3

وهناك لا يعادله في المتصفحات الأخرى. الأقرب يمكن أن تحصل يستخدم مكتبة الرسومات مثل قماش والتلاعب في الصور في ذلك، ولكن عليك أن تكتب التلاعب نفسك وانها تريد يتطلب جافا سكريبت.

---

وfilter هي ميزة IE فقط - أنها ليست متاحة في أي متصفح آخر

.

Answer 4

مرشحات SVG تطبيقها على HTML محتوى .

ويعمل فقط في فايرفوكس 3.1 وما فوق، على الرغم من أنني أعتقد سفاري تسير في نفس الاتجاه.

Answer 5

لا أحد أعرفه. وكان مرشح شيء IE الوحيد، وأنا لا أعتقد أن أي متصفح آخر اتبعت مع وظائف مماثلة.

وماذا هناك حالة استخدام محددة تحتاج إليها؟

Answer 6

وأنا أخشى أنك حد كبير من الحظ مع أكثر من وظيفة filter من نوع عبر متصفح. CSS وحدها لن يسمح لك أن تفعل أكثر من هذه الأشياء. على سبيل المثال، لا توجد وسيلة لعكس صورة عبر متصفح فقط باستخدام CSS. سوف يكون لديك نسختين مختلفة من الصورة (مقلوب واحد) أو هل يمكن أن حاول استخدام جافا سكريبت أو تذهب عنه بطريقة مختلفة تماما ربما، ولكن ليس هناك حل بسيط فقط في CSS.

Answer 7

هناك مرشحات، مثل Gaussian Blur et al في SVG، والتي يتم دعمها أصلاً بواسطة معظم المتصفحات باستثناء IE.

تجربة فكرية خالصة هنا، يمكنك لف صورك في كائن SVG بسرعة باستخدام جافا سكريبت ومحاولة تطبيق المرشحات عليها.

أشك في أن هذا قد ينجح مع صور الخلفية، على الرغم من أنه ربما ينجح مع الكثير من المواقع الذكية.

ومن غير المرجح أن يكون حلا واقعيا.إذا كنت لا تريد تعديل الصور المصدر بشكل دائم، رودي لديه أفضل إجابة، وسيكون استخدام الأدوات الموجودة على جانب الخادم لتطبيق التحويلات بسرعة (أو تخزينها مؤقتًا للأداء) هو أفضل حل عبر المتصفح.

Answer 8

هذا سؤال قديم جدًا ولكن تم تحديث CSS لدعم المرشحات الآن.اقرأ المزيد عنها في

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

بناء الجملة

مع الدالة استخدم ما يلي:

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

للإشارة إلى عنصر SVG، استخدم ما يلي:

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

Answer 9

وليس حقا، ونأمل لن يكون هناك. انها ليست ميزة CSS القياسية على شبكة الإنترنت وذلك لسبب أن كنت تستخدم CSS لتنسيق صفحة ويب، وليس المتصفح نفسه. اليوم الذي مصممي المواقع الإلكترونية الأخرى والمطورين يعتقدون أنهم يجب أن أسلوب متصفحي ما يحلو لهم ويتم بعد ذلك القيام بذلك هو اليوم أتوقف عن زيارة صفحاتهم (وأنا أقول هذا بصفتي نهاية الرجل على شبكة الإنترنت الأمامي).