Cum să aplici reguli CSS specifice numai pe Chrome? (Programare, Css, Google Chrome, Css Hack)

user1213707 a intrebat.

Există o modalitate de a aplica următoarele reguli CSS la un anumit div numai în Google Chrome?

position:relative;
top:-2px;

Comentarii

  • possible duplicate of Cum se face o foaie de stil specifică Chrome/Opera? –  > Por Jakub.
  • Cu ce problemă te confrunți care te obligă să faci asta? Orientarea regulilor CSS pentru browsere specifice nu este un design grozav și, în majoritatea cazurilor, nu ar trebui să mai fie necesar în zilele noastre. –  > Por Pekka.
  • @Pekka aceasta este problema mea stackoverflow.com/questions/9311965/… , și am descoperit că singura soluție este să adaug acelea, dar numai pentru Chrome, vă rog să mă ajutați 🙁 –  > Por user1213707.
  • Răspunsul din întrebarea inițială nu te-a ajutat? –  > Por Pekka.
  • Personal, eu dezvolt pentru Chrome (care tinde să se copieze pe Firefox) și îmi fac griji pentru IE la final. –  > Por SpaceBeers.
11 răspunsuri
Martin Kristiansson

Soluție CSS

de la https://jeffclayton.wordpress.com/2015/08/10/1279/

/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */
@media screen 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;
  );} 
}

Soluție JavaScript

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

Comentarii

    17

  • Această regulă se va aplica atât în Safari cât și în Chrome –  > Por Miuranga.
  • @AlirezaNoori probabil pentru că se aplică atât pentru Chrome și la Safari, nu doar Chrome. –  > Por thom_nic.
  • De asemenea, funcționează și în IE Edge, verificați acest lucru jeffclayton.wordpress.com/2015/08/10/1279 –  > Por llamerr.
  • Am folosit data-ng-class pentru angular și am adăugat un .chrome clasă cu expresia JS. A funcționat ca un farmec. Mulțumiri –  > Por Kraken.
  • Am constatat că a ajutat să aibă interogările media în partea de jos. –  > Por Brownrice.
Hbirjand

După cum știm,Chrome este un Webkit Safari este un browser Webkit și Safari este un browser Webkit și, de asemenea, Opera, așa că este foarte greu să țintiți Google Chrome, folosind media queries sau hacks CSS, dar Javascript este cu adevărat mai eficient.

Iată bucata de cod Javascript care va viza Google Chrome 14 și mai târziu,

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

și mai jos este o listă de hack-uri de browser disponibile,pentru Google Chrome, inclusiv browserul influențat,de acest hack

WebKit hack:

.selector:not(*:root) {}
  • Google Chrome:Toate versiunile
  • Safari:Toate versiunile
  • Opera :14 și ulterior
  • Android:Toate versiunile

Suportă Hacks:

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

Google Chrome 28,și Google Chrome > 28, Opera 14 și Opera > 14

  • Google Chrome:28 și ulterior
  • Opera :14 și ulterior

Hacks pentru proprietăți/valori:

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

Google Chrome 28,și Google Chrome < 28, Opera 14 și Opera > 14, Safari 7 și mai puțin de 7. – Google Chrome:28 și înainteSafari:7 și înainteOpera :14 și ulterior

Hack-uri JavaScript:1

var isChromium = !!window.chrome;
  • Google Chrome:Toate versiunile
  • Opera :14 și ulterior
  • Android:4.0.4

Hack-uri JavaScript:2 {Webkit}

var isWebkit = 'WebkitAppearance' in document.documentElement.style;
  • Google Chrome:Toate versiunile
  • Safari:3 și ulterior
  • Opera :14 și ulterior

Hack-uri JavaScript:3

var isChrome = !!window.chrome && !!window.chrome.webstore;
  • Google Chrome:14 și ulterior

Hacks pentru interogări media:1

@media \0 screen {}
  • Google Chrome:22 până la 28
  • Safari:7 și ulterior

Trucuri de interogare media:2

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
  • Google Chrome:29 și ulterior
  • Opera:16 și ulterior

Pentru mai multe informații, vă rugăm să vizitați acest site

Comentarii

  • așa cum a spus Sebastian @supports (-webkit-appearance:none) {} afectează Safari, testat pe v.10 –  > Por Dmitrii Malyshev.
  • @supports (-webkit-appearance:none) { } funcționează acum pentru MS Edge. –  > Por Vadim Ovchinnikov.
  • @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} } afectează acum și Firefox –  > Por Joe Salazar.
sebilasse

O actualizare pentru chrome > 29 și Safari > 8 :

Safari acceptă acum @supports caracteristică prea. Asta înseamnă că aceste hack-uri ar fi valabile și pentru Safari.

Aș recomanda

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

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

Comentarii

  • Textul este roșu și în FireFox pentru mine. –  > Por Kerry777777.
tarashish

Acest selector css pentru browser vă poate ajuta. Aruncați o privire.

CSS Browser Selector este un javascript foarte mic, cu doar o singură linie, care împuternicește selectori CSS. Acesta vă oferă posibilitatea de a scrie cod CSS specific pentru fiecare sistem de operare și fiecare browser.

Comentarii

  • Declarația „css browser selector” este puțin confuză pentru un javascript simplu. CSS în sine nu suportă nicio selecție în funcție de browsere! –  > Por Armin.
  • Îmi pare rău, dar așa l-a numit creatorul său. Tocmai l-am citat 🙁 –  > Por tarashish.
  • Frază foarte șugubeață a autorului 😉 –  > Por Armin.
  • ye, nu prea vreau să adaug o grămadă de js doar pentru asta 🙁 dar altfel ar putea fi util. –  > Por Jamie Hutber.
  • Principala problemă este că devine un singur punct de eșec fragil, deoarece se bazează pe un singur programator dedicat, iar acesta ar trebui să continue să urmărească modificările sale pentru a se menține la zi. Practic, este o modalitate dubioasă de a rezolva o problemă în curs de desfășurare, deoarece, deși poate ajuta pe termen scurt, nu rezolvă problema. –  > Por Patanjali.
CodeGust

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

Aplicați reguli CSS specifice numai în Chrome folosind .selector:not(*:root) cu selectorii dumneavoastră:

Comentarii

  • Acest hack a funcționat pentru mine. Soluțiile care se bazau pe rezoluția ecranului afectau și Firefox. –  > Por Steve Breese.
  • @stevebreese Am observat și eu, bănuiesc că este doar pentru browserele moderne. –  > Por Shasha.
Elaine

Nu am dat niciodată peste un caz în care a trebuit să fac un hack css doar pentru Chrome până acum. Cu toate acestea, am găsit acest lucru pentru a muta conținutul de sub un slideshow unde clear:both; nu a afectat nimic în Chrome (dar a funcționat bine peste tot în rest – chiar și în IE!).

@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;
    }

yan bellavance

Atât de simplu. Trebuie doar să adăugați o a doua clasă sau un id la elementul dvs. la momentul încărcării, care specifică ce browser este.

Deci, practic, la front-end, detectați browserul, apoi setați id/clasa și css-ul dvs. va fi definit folosind acele etichete specifice browserului

neel upadhyay

dacă doriți, putem adăuga clasa la un anumit tip de browser, consultați [linkul fiddle][1][1][1]:

svnm

Folosesc un mixin sass pentru stilurile chrome, acesta este pentru Chrome 29+ împrumuta soluția de la Martin Kristiansson de mai sus.

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

Folosiți-l în felul următor:

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

Comentarii

  • Firefox citește acum și el această regulă, deci nu mai este bună dacă doriți să vizați doar Chrome. –  > Por Mahn.
  • exact problema mea @Mahn, surprins că nu există o soluție în acest fir de discuție pentru asta… –  > Por RedactedProfile.
Armin

Chrome nu oferă condiționale proprii pentru a seta definiții CSS doar pentru el! Nu ar trebui să fie nevoie de așa ceva, pentru că Chrome interpretează site-urile web așa cum sunt definite în standardele w3c.

Așadar, aveți două posibilități semnificative:

  1. Obțineți browserul curent prin javascript (uitați-vă aici)
  2. Obțineți browserul curent prin php/serverside (vezi aici)

Comentarii

  • Există cu siguranță motive pentru care ați dori să aplicați la Chrome, dar nu și la Safari sau Firefox, de exemplu, diferențele în modul în care browserele redau elementele <select>. O soluție exclusiv CSS ar fi mult mai curată decât să fie nevoie să implice coduri de partea serverului sau a clientului. –  > Por thom_nic.
  • Chrome nu este perfect. La fel ca orice altă bucată de software, are erori, inclusiv în motorul de redare, iar unele nu sunt rezolvate nici după câțiva ani. Așadar, a fi capabil să detectezi Chrome pentru a contracara efectele acestor bug-uri este important. bugs.chromium.org/p/chromium/chromium/issues/… –  > Por Joe Salazar.
  • Nu doar CSS trebuie să fie specific pentru Chrome. Să presupunem că doriți să utilizați caracteristica #:~:text=… a Chrome, dacă este disponibilă, dar, în caz contrar, doriți să utilizați #nearestanchor ? Păcat că nu avem vechile hack-uri condiționale IE: <!–[if lte IE 9]> … <![endif]–> –  > Por Dave Burton.
ashanrupasinghe
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
     /*your rules for chrome*/
     #divid{ 
         position:relative;
         top:-2px; 
     }
}

verificați acest lucru.it lucru pentru mine.