কেবলমাত্র ক্রোমে নির্দিষ্ট সিএসএসের নিয়ম কীভাবে প্রয়োগ করবেন?

Question

divকেবলমাত্র গুগল ক্রোমে কোনও নির্দিষ্ট ক্ষেত্রে নিম্নলিখিত সিএসএস প্রয়োগ করার কোনও উপায় আছে ?

position:relative;
top:-2px;

Comments

কোনও ক্রোম / অপেরা নির্দিষ্ট স্টাইলশিট কীভাবে করবেন তার

— জাকব

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

— পেক্কা

@Pekka এই আমার সমস্যা stackoverflow.com/questions/9311965/... , এবং আমি দেখা গেছে যে একমাত্র সমাধান ঐ কিন্তু শুধুমাত্র Chrome এর জন্য, দয়া করে সহায়তা :( যোগ হয়

— user1213707

আপনার মূল প্রশ্নের উত্তর কি সহায়ক হয়নি?

— পেক্কা

ব্যক্তিগতভাবে আমি ক্রোমের জন্য বিকাশ করি (যা ফায়ারফক্সে অনুলিপি করে) এবং শেষে IE সম্পর্কে চিন্তিত।

— স্পেসবিয়ার্স

Answer 1

সিএসএস সলিউশন

https://jeffclayton.wordpress.com/2015/08/10/1279/ থেকে

/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */
@media and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    div{top:0;} 
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
     property:value;
  );} 
}

জাভাস্ক্রিপ্ট সমাধান

if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button 
}

Comments

এই বিধিটি সাফারি এবং ক্রোম উভয়ই প্রয়োগ করবে

— মিউরাঙ্গা

সম্ভবত @AlirezaNoori কারণ এটি উভয় ক্রোম ক্ষেত্রে প্রযোজ্য এবং সাফারি, না শুধুমাত্র ক্রোম।

— thom_nic

এটি আইই এজতেও

— llamerr

আমি data-ng-classকৌনিক জন্য ব্যবহার করেছি এবং .chromeজেএস এক্সপ্রেশন সহ একটি শ্রেণি যুক্ত করেছি । কবজির মতো কাজ করেছেন। ধন্যবাদ

— ক্রেকেন

আমি নীচে মিডিয়া অনুসন্ধান করতে এটি সাহায্য করেছে।

— ব্রাউনরিস

Answer 2

যেমনটি আমরা জানি, ক্রোম একটি ওয়েবকিট ব্রাউজার, সাফারিও একটি ওয়েবকিট ব্রাউজার এবং অপেরাও, তাই মিডিয়া ক্যোয়ারী বা সিএসএস হ্যাক ব্যবহার করে গুগল ক্রোমকে লক্ষ্য করা খুব কঠিন, তবে জাভাস্ক্রিপ্টটি আরও কার্যকর।

এখানে জাভাস্ক্রিপ্ট কোডের টুকরা যা Google Chrome 14 এবং তারপরে লক্ষ্যবস্তু হবে,

  var isChrome = !!window.chrome && !!window.chrome.webstore;

এবং নীচে হ্যাক দ্বারা প্রভাবিত ব্রাউজার সহ গুগল ক্রোমের জন্য উপলব্ধ ব্রাউজার হ্যাকগুলির একটি তালিকা রয়েছে

ওয়েবকিট হ্যাক:

.selector:not(*:root) {}

• গুগল ক্রোম : সমস্ত সংস্করণ
• সাফারি : সমস্ত সংস্করণ
• অপেরা : 14 এবং তারপরে
• অ্যান্ড্রয়েড : সমস্ত সংস্করণ

হ্যাক্স সমর্থন করে:

@supports (-webkit-appearance:none) {}

গুগল ক্রোম 28, এবং গুগল ক্রোম> 28, অপেরা 14 এবং অপেরা> 14

• গুগল ক্রোম : ২৮ এবং তারপরে
• অপেরা : 14 এবং তারপরে

সম্পত্তি / মান হ্যাকস:

.selector { (;property: value;); }
.selector { [;property: value;]; }

গুগল ক্রোম 28, এবং গুগল ক্রোম <28, অপেরা 14 এবং অপেরা> 14, এবং সাফারি 7 এবং 7 এর চেয়ে কম - গুগল ক্রোম : 28 এবং তার আগে - সাফারি : 7 এবং তার আগে - অপেরা : 14 এবং পরবর্তী

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

var isChromium = !!window.chrome;

• গুগল ক্রোম : সমস্ত সংস্করণ
• অপেরা : 14 এবং তারপরে
• অ্যান্ড্রয়েড : 4.0.4

জাভাস্ক্রিপ্ট হ্যাকস: 2 {ওয়েবকিট}

var isWebkit = 'WebkitAppearance' in document.documentElement.style;

• গুগল ক্রোম : সমস্ত সংস্করণ
• সাফারি : 3 এবং তারপরে
• অপেরা : 14 এবং তারপরে

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

var isChrome = !!window.chrome && !!window.chrome.webstore;

• গুগল ক্রোম : 14 এবং তারপরে

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

@media \\0 screen {}

• গুগল ক্রোম : 22 থেকে 28
• সাফারি : 7 এবং তারপরে

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

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }

• গুগল ক্রোম : ২৯ এবং তারপরে
• অপেরা : 16 এবং তারপরে

আরও তথ্যের জন্য দয়া করে এই ওয়েবসাইটটি দেখুন

Comments

যেমন সেবাস্তিয়ান বলেছেন যে @ সাপোর্টস (-উবকিট-উপস্থিতি: কিছুই নেই) v Saf সাফারিকে প্রভাবিত করে, দশমিক দশে পরীক্ষিত

— দিমিত্রি মালিশেভ

@supports (-webkit-appearance:none) { }এমএস এজ জন্য এখন কাজ করছে।

— ভাদিম ওভচিনিকভ

@ মিডিয়ার সমস্ত এবং (ওয়েবেকিট-মিনিট-ডিভাইস-পিক্সেল-অনুপাত: 0) এবং (মিনিট রেজোলিউশন: .001dpcm) se। নির্বাচনকারী {}} এখন ফায়ারফক্সকেও প্রভাবিত করে

— জো সালাজার

Answer 3

ক্রোম> 29 এবং সাফারি> 8 এর জন্য একটি আপডেট:

সাফারি এখন @supportsবৈশিষ্ট্যটিও সমর্থন করে । তার মানে এই হ্যাকগুলি সাফারির জন্যও বৈধ হবে।

আমি সুপারিশ করতাম

@ http://codepen.io/sebilasse/pen/BjMoye

/* Chrome only: */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  p {
    color: red;
  }
}

Comments

পাঠ্যটি আমার জন্য ফায়ারফক্সেও লাল।

— কেরি 7777

Answer 4

এই সিএসএস ব্রাউজার নির্বাচনকারী আপনাকে সাহায্য করতে পারে। দেখা যাক.

সিএসএস ব্রাউজার নির্বাচনকারী একটি খুব ছোট জাভাস্ক্রিপ্ট যা কেবলমাত্র একটি লাইন যা সিএসএস নির্বাচকদের ক্ষমতায়িত করে। এটি আপনাকে প্রতিটি অপারেটিং সিস্টেম এবং প্রতিটি ব্রাউজারের জন্য নির্দিষ্ট সিএসএস কোড লেখার ক্ষমতা দেয়।

Comments

"সিএসএস ব্রাউজার নির্বাচনকারী" ঘোষণাটি একটি সাধারণ জাভাস্ক্রিপ্টের জন্য কিছুটা বিভ্রান্তিকর। সিএসএস নিজেই ব্রাউজারগুলির দ্বারা কোনও নির্বাচনকে সমর্থন করে না!

— আরমিন

দুঃখিত তবে এটিই এটির সৃষ্টিকর্তা বলেছেন। আমি কেবল তার উদ্ধৃতি দিয়েছি :(

— তারাশিশ

লেখকের খুব সুস্পষ্ট বাক্যাংশ ;-)

— আর্মিন

তোমরা, না সত্যিই শুধু এই জন্য JS একটি সম্পূর্ণ লোড যোগ করার জন্য সহায়ক হতে পারে চাও :( কিন্তু অন্যথায়।

— জেমি Hutber

মূল সমস্যাটি হ'ল এটি ব্যর্থতার এক ভঙ্গুর একক বিন্দুতে পরিণত হয় কারণ এটি কোনও একক প্রোগ্রামারকে উত্সর্গীকৃত হওয়ার উপর নির্ভরশীল এবং এটি আপডেট হওয়ার জন্য তাদের পরিবর্তনগুলি ট্র্যাক করে রাখতে হবে। মূলত, একটি চলমান সমস্যা মোকাবেলার একটি সন্দেহজনক উপায়, এটি স্বল্প মেয়াদে সহায়তা করতে পারে, এটি সমস্যার সমাধান করে না।

— পতঞ্জলি

Answer 5

http://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html

কেবলমাত্র .selector:not(*:root)আপনার নির্বাচকদের সাথে ব্যবহার করে ক্রোমে নির্দিষ্ট সিএসএসের নিয়ম প্রয়োগ করুন :

div {
  color: forestgreen;
}
.selector:not(*:root), .div1 {
  color: #dd14d5;
}

<div class='div1'>DIV1</div>
<div class='div2'>DIV2</div>

Comments

এই হ্যাক আমার জন্য কাজ করে। যে সমাধানগুলি স্ক্রিন রেজোলিউশনে নির্ভর করেছিল সেগুলি ফায়ারফক্সকেও প্রভাবিত করেছিল।

— স্টিভ

@ স্টিভব্রিজে এটি লক্ষ্য করা গেছে, আমি সন্দেহ করি এটি কেবল আধুনিক ব্রাউজারগুলির জন্য।

— শশা

Answer 6

আমি এখন পর্যন্ত কোনও ক্রোম-অনলাইনে সিএসএস হ্যাক করতে হয়েছিল এমন কোনও দৃষ্টান্ত জুড়ে নেই। যাইহোক, আমি এটি স্লাইডশোর নীচে সামগ্রী সরিয়ে নিতে দেখতে পেয়েছি যেখানে পরিষ্কার: উভয়; ক্রোমে কোনও কিছুই প্রভাবিত করে না (তবে অন্য যে কোনও জায়গায় - এমনকি আইই!) কাজ করে।

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome, if Chrome rule needed */
    .container {
     margin-top:100px;
    }

    /* Safari 5+ ONLY */
    ::i-block-chrome, .container {
     margin-top:0px;
    }

Answer 7

আপনি যদি চান তবে আমরা নির্দিষ্ট ব্রুউজারে ক্লাস যুক্ত করতে পারি [ফিডাল লিঙ্ক] [1] [1] দেখুন:

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };

    BrowserDetect.init();


    var bv= BrowserDetect.browser;
    if( bv == "Chrome"){
        $("body").addClass("chrome");
    }
    else if(bv == "MS Edge"){
     $("body").addClass("edge");
    }
    else if(bv == "Explorer"){
     $("body").addClass("ie");
    }
    else if(bv == "Firefox"){
     $("body").addClass("Firefox");
    }


$(".relative").click(function(){
$(".oc").toggle('slide', { direction: 'left', mode: 'show' }, 500);
$(".oc1").css({
   'width' : '100%',
   'margin-left' : '0px',
   });
});

.relative {
  background-color: red;
  height: 30px;
  position: relative;
  width: 30px;
}
.relative .child {
  left: 10px;
  position: absolute;
  top: 4px;
}
.oc {
  background: #ddd none repeat scroll 0 0;
  height: 300px;
  position: relative;
  width: 500px;
  float:left;
}
.oc1 {
  background: #ddd none repeat scroll 0 0;
  height: 300px;
  position: relative;
  width: 300px;
  float:left;
  margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="relative">
<span class="child">
  ○
</span>
</div>
<div class="oc">
<div class="data"> </div>
</div>
<div class="oc1" style="display: block;">
<div class="data"> </div>
</div>

Answer 8

আমি ক্রোম শৈলীর জন্য সাস মিক্সিন ব্যবহার করছি, এটি Chrome 29+উপরের মার্টিন ক্রিশ্চিয়্যানসন থেকে সমাধান ধার করার জন্য ।

@mixin chrome-styles {
  @media screen and (-webkit-min-device-pixel-ratio:0)
    and (min-resolution:.001dpcm) {
      @content;
  }
}

এটি এর মতো ব্যবহার করুন:

@include chrome-styles {
  .header { display: none; }
}

Comments

ফায়ারফক্স এখন এই নিয়মটিও পড়ে, তাই আপনি যদি কেবলমাত্র ক্রোমকে লক্ষ্য করতে চান তবে এটি আর ভাল নয়।

— মাহন 3'19

Answer 9

ক্রোম কেবল এটির জন্য সিএসএস সংজ্ঞা সেট করার জন্য নিজস্ব শর্তাদি সরবরাহ করে না! এটি করার দরকার নেই, কারণ ডাব্লু 3 সি স্ট্যান্ডার্ডে সংজ্ঞায়িত যেমন ক্রোম ওয়েবসাইটকে ব্যাখ্যা করে।

সুতরাং, আপনার দুটি অর্থবহ সম্ভাবনা রয়েছে:

1. জাভাস্ক্রিপ্ট দ্বারা বর্তমান ব্রাউজার পান ( এখানে দেখুন) )
2. পিএইচপি / সার্ভারসাইড দ্বারা বর্তমান ব্রাউজার পান ( এখানে দেখুন )

Comments

আপনি Chrome এ প্রয়োগ করতে চান তবে অবশ্যই সাফারি বা ফায়ারফক্সের জন্য অবশ্যই কারণগুলি রয়েছে, যেমন ব্রাউজারগুলি <নির্বাচন> উপাদানগুলিকে কীভাবে রেন্ডার করে তার মধ্যে পার্থক্য। একটি সিএসএস-কেবলমাত্র সমাধানটি সার্ভার- বা ক্লায়েন্ট-সাইড কোডের সাথে জড়িত থাকার চেয়ে অনেক বেশি ক্লিনার।

— thom_nic

ক্রোম নিখুঁত নয়। সফ্টওয়্যারটির অন্য কোনও অংশের মতোই এতে রেন্ডারিং ইঞ্জিন সহ বাগগুলি রয়েছে এবং কিছু কিছু বছর পরে স্থির হয় না। সুতরাং bu বাগগুলির প্রভাবগুলি মোকাবেলায় Chrome সনাক্ত করতে সক্ষম হওয়া গুরুত্বপূর্ণ important bugs.chromium.org/p/chromium/issues/…

— জো সালাজার

Answer 10

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
     /*your rules for chrome*/
     #divid{ 
         position:relative;
         top:-2px; 
     }
}

আমার জন্য এই কাজ পরীক্ষা করুন।

Answer 11

খুবই সোজা. লোডের সময় আপনার উপাদানটিতে কেবল একটি দ্বিতীয় শ্রেণি বা আইডি যুক্ত করুন যা এটি কোন ব্রাউজারটি নির্দিষ্ট করে।

সুতরাং মূলত সামনের প্রান্তে, ব্রাউজারটি সনাক্ত করুন তারপরে আইডি / শ্রেণি সেট করুন এবং আপনার সিএসএস সেই ব্রাউজারের নির্দিষ্ট নেমটাগগুলি ব্যবহার করে সাফ করা হবে