সিএসএস সহ কেবল ফায়ারফক্সকে লক্ষ্য করে

616

শর্তাধীন মন্তব্যগুলি ব্যবহার করে ব্রাউজার-নির্দিষ্ট সিএসএস বিধি দিয়ে ইন্টারনেট এক্সপ্লোরারকে লক্ষ্য করা সহজ:

<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->

কখনও কখনও এটি গেকো ইঞ্জিন (ফায়ারফক্স) যা খারাপ ব্যবহার করে। আপনার সিএসএস বিধি এবং অন্য কোনও ব্রাউজার নয় কেবল ফায়ারফক্সকে টার্গেট করার সর্বোত্তম উপায় কী হবে? এটি হ'ল, ইন্টারনেট এক্সপ্লোরার কেবল ফায়ারফক্স-কেবল নিয়মকেই উপেক্ষা করবে না, তবে ওয়েবকিট এবং অপেরাও উচিত should

দ্রষ্টব্য: আমি একটি 'পরিষ্কার' সমাধান খুঁজছি। আমার এইচটিএমএলে একটি 'ফায়ারফক্স' ক্লাস যুক্ত করতে একটি জাভাস্ক্রিপ্ট ব্রাউজার স্নিফার ব্যবহার করা আমার মতে পরিষ্কার হিসাবে যোগ্য নয়। আমি বরং এমন কিছু দেখতে চাই যা ব্রাউজারের ক্ষমতার উপর নির্ভর করে, যেমন শর্তাধীন মন্তব্যগুলি কেবল আইইয়ের কাছে 'বিশেষ' ...

css firefox css-hack

— avdgaag
সূত্র

কিছু অনুরূপ প্রশ্ন ও Thier সংশ্লিষ্ট উত্তর ... তাকান করতে চাইবেন stackoverflow.com/questions/738831/...

— AnonJr

3

ম্যাক্স বনাম উইন্ডোজ মেশিনে ফায়ারফক্সকে লক্ষ্য করার কোনও উপায় আছে কি?

— কেগান কুইম্বি

4

<! - [যদি গেকো]> ... ... অন্তর্ভুক্ত করুন ... <! [endif] ->

— সংজ্ঞায়িত করেছে

1252

ঠিক আছে, আমি এটি খুঁজে পেয়েছি। এটি সম্ভবত এটি সবচেয়ে পরিষ্কার এবং সহজ সমাধান এবং এটি জাভাস্ক্রিপ্ট চালু হওয়ার উপর নির্ভর করে না।

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

<h1>This should be red in FF</h1>

স্নিপেট প্রসারিত করুন

এটি অন্য একটি মজিলা নির্দিষ্ট সিএসএস এক্সটেনশনের ভিত্তিতে। এই সিএসএস এক্সটেনশনের জন্য এখানে পুরো তালিকা রয়েছে: মজিলা সিএসএস এক্সটেনশানস ।

— আয়নু জি স্টান
সূত্র

17

"@ -Moz- নথি" এর পরে url-উপসর্গ () এর অর্থ কী? উৎসুক.

— ম্যাট

17

@ ম্যাট, এটি সেই ওয়েবসাইটগুলি ফিল্টার করার একটি উপায় যার উপর সেই সিএসএস প্রয়োগ করা হয়। আরেকটি বিকল্প হ'ল domain()ফিল্টারটি ব্যবহার করা । উদাহরণস্বরূপ @-moz-document domain(google.com) {...}কেবল গুগল.কম ডোমেনে আবদ্ধ সিএসএস বিধি প্রয়োগ করা হবে।

— আয়নু জি স্টান

10

আমি পছন্দ করি আপনি কীভাবে আপনার জন্য আইই এর মতো সম্পূর্ণ নতুন সিএসএস ডকুমেন্ট তৈরি করতে হবে না।

— জেডি আইজ্যাকস

7

@ জনআইস্যাকস আইই শর্তসাপেক্ষ মন্তব্যগুলির জন্য আপনার আলাদা স্টাইলশিট লাগবে না। তারা ইনলাইন হতে পারে। আপনি যেভাবে এটি করতে চান তা অন্য প্রশ্ন।

— ডিলান

4

এটা তোলে এর মূল্য লক্ষ করেন, এই কার্যসংক্রান্ত আর কাজ করে ফায়ারফক্স 59 মার্চ 2018 মুক্তি হিসাবে: bugzilla.mozilla.org/show_bug.cgi?id=1035091

— জর্ডন গ্রে

104

আপডেট করা হয়েছে (@ অ্যান্টাইন মন্তব্য থেকে)

তুমি ব্যবহার করতে পার @supports

@supports (-moz-appearance:none) {
    h1 { color:red; } 
}

<h1>This should be red in FF</h1>

স্নিপেট প্রসারিত করুন

আরও @supports এখানে

— laaposto
সূত্র

11

এটি @-মোজ-ডকুমেন্ট ইউআরএল-প্রিফিক্স () উদাহরণের চেয়ে অনেক সুন্দর সমাধান, এটি এসসিএসএস পার্সারের সাথেও দুর্দান্ত অভিনয় করে যেখানে অন্যটি তা করেনি।

— অ্যালাস্টার হজসন

1

আমি ফায়ারফক্স ব্যবহার করছি এবং এটি এখনও সাদা, আমি যে সংস্করণটি ব্যবহার করছি তা কি এটির কারণেই?

— এন্টোইন

3

@ এন্টাইন আপনি ঠিক বলেছেন! এটি এফএফ এর সর্বশেষ সংস্করণগুলির জন্য কাজ করে না। আমি আমার উত্তর আপডেট। এটি এখন কাজ করা উচিত। এটি নির্দেশ করার জন্য থ্যাঙ্কস!

— laaposto

83

এখানে তিনটি ভিন্ন ব্রাউজারকে কীভাবে মোকাবেলা করতে হবে: আইই, এফএফ এবং ক্রোম

<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
    width:490px;
}
/*This will work for firefox*/
@-moz-document url-prefix() {
    #categoryBackNextButtons{
        width:486px;
    }
}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
    width:486px;
}
</style>
<![endif]-->

— ওয়াকাস আলী খান পূর
সূত্র

66

যদি আমি এটি সঠিকভাবে বুঝতে পারি তবে শীর্ষস্থানীয় ক্রোম নয়, তবে আপনি ফায়ারফক্স এবং আইইয়ের জন্য ওভাররাইড করবেন এমন ডিফল্ট আচরণটি সুনির্দিষ্ট করে।

— মুহাম্মদ

3

খুব দরকারী. একজন প্রাক্তন ফায়ারফক্স প্রেমী হিসাবে, আমি অনুভব করেছি যে আমাকে ফায়ারফক্সের নির্দিষ্ট হ্যাকগুলি করতে হবে তবে যতক্ষণ না এটি কাজ করে আমি এর সাথে বেঁচে থাকতে পারি।

— স্পেসবিয়ারগুলি

IE সনাক্তকরণের জন্য পরামর্শটি যদি আপনি এটি একটি .css ফাইলে যুক্ত করতে চান তবে কাজ করে না। আপনি যদিও এটিতে এইভাবে স্টাইলশিটগুলি অন্তর্ভুক্ত করতে পারেন। আপনি যদি কোনও সিএসএস ফাইলে IE সিএসএস পেতে চান তবে আমি এখানে দেখার পরামর্শ দিই: keithclark.co.uk/articles/…

— বিপবট ভন স্টার্লিং

16

কেবলমাত্র ফায়ারফক্স ব্রাউজারকে লক্ষ্য করার জন্য এখানে কিছু ব্রাউজার হ্যাক রয়েছে,

নির্বাচক হ্যাক ব্যবহার করে।

_:-moz-tree-row(hover), .selector {}

জাভাস্ক্রিপ্ট হ্যাকস

var isFF = !!window.sidebar;

var isFF = 'MozAppearance' in document.documentElement.style;

var isFF = !!navigator.userAgent.match(/firefox/i);

মিডিয়া ক্যোয়ারী হ্যাকস

এটি ফায়ারফক্স ৩.6 এবং তার পরে কাজ করবে

@media screen and (-moz-images-in-menus:0) {}

আপনার যদি আরও তথ্যের প্রয়োজন হয় তবে দয়া করে ব্রাউজারহ্যাকগুলি দেখুন

— Hbirjand
সূত্র

1

আপনি কীভাবে "নির্বাচক হ্যাকগুলি ব্যবহার করছেন" এবং আপনার প্রদত্ত উদাহরণটি কীভাবে কাজ করে সে সম্পর্কে আরও কিছুটা ব্যাখ্যা করতে পারেন? ধন্যবাদ।

— জেজে_

1

ঠিক আছে এটি নিজেই পেয়েছি: মূলত এটি যা করে তা দ্বিতীয় নির্বাচককে অন্য ব্রাউজারগুলিতে লুকিয়ে রাখে যা প্রথমটি বোঝে না। _:moz-tree-row(hover)এক্ষেত্রে কেবল মজিলা বুঝতে পারে তাই .selector{}আসার পরে প্রক্রিয়া করতে সক্ষম হবেন একমাত্র এটি । এই স্পষ্টিকাল হ্যাকগুলি বর্তমানে ফায়ারফক্সের সমস্ত সংস্করণে কাজ করে, এ সম্পর্কে আরও তথ্যের জন্য ব্রাউজারহ্যাকস ডট কম পরীক্ষা করুন।

— জেজে_

1

আমি মিডিয়া ক্যোয়ারী হ্যাক ব্যবহার করেছি: \ @ মিডিয়া স্ক্রিন এবং (-মোজ-ইমেজ-ইন-মেনু: 0) {} এটি med @ মিডিয়া স্ক্রিন এবং (-উইবকিট-মিনিট-ডিভাইস-পিক্সেল-অনুপাত: 0) এবং ভিজ্যুয়াল স্টুডিও এটি ব্যবহার করে কোনও সতর্কতা ফেলে দেয় না।

— ড্যান র্যান্ডলফ

1

দয়া করে মনে রাখবেন -moz-চিত্র-ইন-মেনু: 0 ফায়ারফক্স কারণে সরানো হয়েছে 52 - bugzilla.mozilla.org/show_bug.cgi?id=1302157

— jonathanKingston

13

প্রথমত, একটি দাবি অস্বীকার। আমি নীচে আমি যে সমাধানটি উপস্থাপন করেছি তার পক্ষে সত্যই আমি সমর্থন করি না। আমি লিখি কেবল ব্রাউজার নির্দিষ্ট সিএসএস হ'ল আইই (বিশেষত আই 6), যদিও আমার ইচ্ছা যদি এটি না হয়।

এখন, সমাধান। আপনি এটিকে মার্জিত হতে বলেছিলেন তাই আমি জানি না এটি কত মার্জিত তবে এটি নিশ্চিত যে কেবল গেকো প্ল্যাটফর্মকেই টার্গেট করে চলেছে।

কৌশলটি কেবল তখনই কাজ করছে যখন জাভাস্ক্রিপ্ট সক্ষম করা থাকে এবং মজিলা বাইন্ডিংগুলি ( এক্সবিএল) ব্যবহার করে ) ব্যবহার করে, যা ফায়ারফক্স এবং অন্যান্য সমস্ত গেকো ভিত্তিক পণ্যগুলিতে অভ্যন্তরীণভাবে ব্যবহৃত হয়। তুলনার জন্য, এটি আইই এর আচরণ সিএসএস সম্পত্তি মত, তবে অনেক বেশি শক্তিশালী।

তিনটি ফাইল আমার সমাধানে জড়িত:

ff.html: স্টাইল থেকে ফাইল
ff.xML: গেকো বাইন্ডিংগুলি সংযুক্ত করে ফাইল
ff.css: ফায়ারফক্স নির্দিষ্ট স্টাইলিং

ff.html

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
body {
 -moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>

<h1>This should be red in FF</h1>

</body>
</html>

ff.xml

<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl">
    <binding id="load-mozilla-css">
        <implementation>
            <constructor>
            <![CDATA[
                var link = document.createElement("link");
                    link.setAttribute("rel", "stylesheet");
                    link.setAttribute("type", "text/css");
                    link.setAttribute("href", "ff.css");

                document.getElementsByTagName("head")[0]
                        .appendChild(link);
            ]]>
            </constructor>
        </implementation>
    </binding>
</bindings>

ff.css

h1 {
 color: red;
}

আপডেট: উপরের সমাধানটি তেমন ভাল নয়। এটা ভাল যদি এর পরিবর্তে একটি নতুন লিঙ্ক উপাদান যোগ করা হবে সংযোজন অন্তর্ভুক্ত হয়ে যেতাম যে শরীরের উপাদান এ "ফায়ারফক্স" শ্রেণী। উপরের জেএসের পরিবর্তে কেবল নিম্নলিখিতটি দিয়ে এটি সম্ভব:

this.className += " firefox";

সমাধানটি ডিন এডওয়ার্ডসের মোজ-আচরণ থেকে অনুপ্রাণিত হয় ।

— আয়নু জি স্টান
সূত্র

11

-আঙ্গিন নির্দিষ্ট সুনির্দিষ্ট বিধিগুলি কার্যকরভাবে ব্রাউজারের কার্যকর লক্ষ্যবস্তু নিশ্চিত করে।

<style type="text/css">

    //Other browsers
    color : black;


    //Webkit (Chrome, Safari)
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        color:green;
    }

    //Firefox
    @media screen and (-moz-images-in-menus:0) {
        color:orange;
    }
</style>

//Internet Explorer
<!--[if IE]>
     <style type='text/css'>
        color:blue;
    </style>
<![endif]-->

— Rayjax
সূত্র

7

আপনার ধারণার একটি ভিন্নতা হ'ল server-side USER-AGENT detectorএটি যা পৃষ্ঠায় কী স্টাইল শীট সংযুক্ত করবে তা নির্ধারণ করবে। এইভাবে আপনি একটি করতে পারেনfirefox.css, ie.css, opera.css, etc ।

আপনি জাভাস্ক্রিপ্ট নিজেই একটি অনুরূপ জিনিস সম্পাদন করতে পারেন, যদিও আপনি এটি পরিষ্কার হিসাবে বিবেচনা করতে পারেন না।

আমি না থাকার একটি অনুরূপ জিনিস করেছি default.cssযার মধ্যে all common styles and then specific style sheetsওভাররাইড যোগ করা হয়, অথবা অক্ষমতা উন্নত।

— Kekoa
সূত্র

এটি কিছু সুন্দর এবং স্থিতিশীল পদ্ধতির মতো করে & mdash; ধন্যবাদ & mdash; যদিও এটি এখনও ব্রাউজার স্নিফিংয়ের উপর নির্ভর করে। আমি বরং এমন কিছু ব্যবহার করব যা সক্ষমতার উপর নির্ভর করে, যেমন গেকো-কেবল সিএসএস নিয়ম বা কিছু use আমি একই বেসিক পদ্ধতির ব্যবহার করব: ডিফল্ট শৈলী এবং ব্রাউজার-নির্দিষ্ট অ্যাড-অন।

— avdgaag

1

@ অ্যাভিডাগ: বেশিরভাগ ক্ষেত্রে দক্ষতা সনাক্তকরণকে অগ্রাধিকার দেওয়া হয়, তবে আপনি যখন কোনও নির্দিষ্ট রেন্ডারিং ইঞ্জিনের বাগটি "ফিক্স" করতে কোনও হ্যাক ইনজেকশনের চেষ্টা করছেন, তখন ব্যবহারকারী এজেন্টকে লক্ষ্য করে তাত্ত্বিকভাবে অনুকূল সমাধানটি তৈরি করা হয়। আপনি অজানা ব্রাউজারগুলির সাথে বৈষম্য করছেন না; এবং ব্যবহারকারী-এজেন্ট ক্ষেত্রটি আপনাকে ব্রাউজারটি কী কী রেন্ডারিং ইঞ্জিন ব্যবহার করছে তা বলার কথা রয়েছে, তাই যদি বিরল একটি গেকো ব্রাউজার আসে তবে এটি ঠিক করে দেওয়া হবে given এটি বলেছিল যে ব্রাউজার-সনাক্তকরণের অনুপযুক্ত ব্যবহারের কারণে এখন প্রচুর ব্রাউজার তাদের ব্যবহারকারী-এজেন্ট স্ট্রিংগুলিকে নকল করে। সুতরাং অনুশীলনে এটি এত ভাল কাজ করতে পারে না।

— লজ মাজেস্টে

6

ফায়ারফক্স কোয়ান্টাম 57 এখন স্টেকো বা কোয়ান্টাম সিএসএস হিসাবে সম্মিলিতভাবে গেকোর উন্নতি - এবং সম্ভাব্যভাবে ভাঙ্গন - সহ উন্নতি নিয়ে চলেছে, আপনি নিজেকে এমন পরিস্থিতিতে দেখতে পারেন যেখানে আপনাকে ফায়ারফক্স এবং ফায়ারফক্স কোয়ান্টামের উত্তরাধিকার সংস্করণগুলির মধ্যে পার্থক্য করতে হবে।

আমার উত্তর থেকে এখানে :

আপনি স্টাইলোর পরীক্ষার জন্য @supportsএকটি calc(0s)অভিব্যক্তির সাহায্যে ব্যবহার করতে পারেন @-moz-document- গেকো calc()প্রকাশের সময় মানগুলি সমর্থন করে না তবে স্টাইলো করেন:
@-moz-document url-prefix() {
  @supports (animation: calc(0s)) {
    /* Stylo */
  }
}
এখানে ধারণার একটি প্রমাণ রয়েছে:
body::before {
  content: 'Not Fx';
}

@-moz-document url-prefix() {
  body::before {
    content: 'Fx legacy';
  }

  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}
স্নিপেট প্রসারিত করুন
ফায়ারফক্সের উত্তরাধিকার সংস্করণগুলিকে টার্গেট করা কিছুটা জটিল - যদি আপনি কেবল সমর্থন করে এমন সংস্করণগুলিতে আগ্রহী হন @supports, যা Fx 22 এবং তার বেশি হয়, @supports not (animation: calc(0s))আপনার যা প্রয়োজন তা কেবল:
@-moz-document url-prefix() {
  @supports not (animation: calc(0s)) {
    /* Gecko */
  }
}
... তবে আপনার যদি আরও পুরানো সংস্করণগুলি সমর্থন করার প্রয়োজন হয় তবে আপনার উপরের প্রুফ-অফ কনসেপ্টে প্রদর্শিত হিসাবে ক্যাসকেডটি ব্যবহার করা দরকার ।

— বোল্টক্লক
সূত্র

3

এটি করার একমাত্র উপায় হ'ল বিভিন্ন সিএসএস হ্যাকের মাধ্যমে, যা আপনার পৃষ্ঠাটিকে পরবর্তী ব্রাউজার আপডেটগুলিতে ব্যর্থ হওয়ার সম্ভাবনা অনেক বেশি করে দেবে। যদি কিছু হয় তবে এটি জেএস-ব্রাউজার স্নিফার ব্যবহারের চেয়ে কম নিরাপদ হবে।

— jvenema
সূত্র

1

পার্শ্ব নোট হিসাবে, সিএসএস সমর্থন জাভাস্ক্রিপ্টের সাথে আবদ্ধ।

if (CSS.supports("( -moz-user-select:unset )")) {
    console.log("FIREFOX!!!")
}

স্নিপেট প্রসারিত করুন

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

— NVRM
সূত্র

0

নিম্নলিখিত কোডটি স্টাইল লিন্টের সতর্কতাগুলি ফেলে দেয়:

@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}

পরিবর্তে ব্যবহার

@-moz-document url-prefix('') {
    h1 {
        color: red;
    }
}

আমাকে সাহায্য করেছেন! এখান থেকে স্টাইল লিন্টের সতর্কতার জন্য সমাধান পেয়েছেন

— কৈলাস
সূত্র