is er een css-hack voor safari alleen NIET chrome?

ik probeer een css-hack te vinden voor alleen safari, NIET chrome, ik weet dat dit beide webkit-browsers zijn, maar ik heb problemen met div-uitlijningen in chrome en safari, elk wordt anders weergegeven.

ik heb geprobeerd dit te gebruiken, maar het heeft ook invloed op chrome,

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  #safari { display: block; } 
} 

weet iemand nog een andere die alleen van toepassing is op safari?


Antwoord 1, autoriteit 100%

  • BIJGEWERKT VOOR CATALINA & SAFARI 13 (update begin 2020) *

PLEASE AUB —Als je problemen hebt, en echt hulp wilt krijgen of anderen wilt helpen door er een opmerking over te plaatsen, plaats dan je browser en apparaat (MacBook/IPad/etc… met zowel browser- als OS-versienummers!)

Beweren dat geen van deze werken niet juist is (en eigenlijk niet eens mogelijk.)Veel hiervan zijn niet echt ‘hacks’, maar code die in versies van Safari is ingebouwd door Appel. Er is meer informatie nodig. Ik vind het geweldig dat je hier bent gekomen en ik wil echt dat het goed met je gaat.

Als u problemen ondervindt om iets van hier op uw site te laten werken, controleer dan de testsite via onderstaande links— Als een hack daar werkt, maar niet op uw site, is de hack niet het probleem – er is iets anders aan de hand met uw site, vaak alleen een CSS-conflict zoals hieronder vermeld, of misschien werkt niets, maar u weet misschien niet dat u Safari helemaal niet gebruikt. Onthoud dat deze informatie hier is om mensen te helpen met (hopelijk) kortetermijnproblemen.

De testsite:

https://browserstrangess.bitbucket.io/css_hacks.html#safari

en spiegel!

https://browserstrangess.github.io/css_hacks.html#safari

OPMERKING: Filters en compilers (zoals de SASS-motor) Verwacht de standaard ‘Cross-Browser’-code – niet CSS-hacks zoals deze , wat betekent dat ze zullen herschrijven, Vernietig of verwijder de hacks omdat dat niet is wat hacks doen. Veel hiervan is niet-standaardcode die nauwgezet is gemaakt om alleen de single browserversies te targeten en kan niet werken als ze worden gewijzigd. Als u het wilt gebruiken met die, U moet uw gekozen CSS-hack laden na een filter of compiler . Dit lijkt misschien een gegeven, maar er is veel verwarring geweest tussen mensen die zich niet realiseren dat ze een hack ongedaan maken door deze door dergelijke software te laten werken die niet voor dit doel is ontworpen.

Safari is veranderd sinds versie 6.1, zoals velen hebben opgemerkt.

Let op: als u chroom gebruikt [en nu ook Firefox] op iOS (tenminste in iOS-versies 6.1 en nieuwer) en u vraagt ​​u zich af waarom geen van de hacks het scheiden van Safari scheidt , het komt omdat de iOS-versie van Chrome de Safari-motor gebruikt. Het maakt gebruik van Safari-hacks niet de chromen. Meer hier: https : //allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chroom-plated-apple/ firefox voor iOS werd vrijgegeven in de herfst 2015. Het reageert ook op de Safari-hacks, maar geen van de Firefox, hetzelfde als iOS Chrome.

OOK: als je een of meer van de hacks hebt geprobeerd en problemen hebt om ze te laten werken, post dan een voorbeeldcode (beter nog een testpagina) – de hack die je probeert en welke browser (s) (exacte versie!) die u gebruikt en het apparaat dat u gebruikt. Zonder die aanvullende informatie is het voor mij of iemand anders hier onmogelijk om je te helpen.

Vaak is het een simpele oplossing of een ontbrekende puntkomma. Bij CSS is het meestal dat of een probleem in welke volgorde de code wordt vermeld in de stylesheets, zo niet alleen CSS-fouten. Test de hacks hier op de testsite. Als het daar werkt, betekent dit dat de hack echt werkt voor uw installatie, maar dat het iets anders is dat moet worden opgelost. De mensen hier helpen je graag, of wijzen je in ieder geval in de goede richting.

Hier zijn geen hacks die je kunt gebruiken voor recentere versies van Safari.

Je moet deze eerst proberen, omdat deze de huidige Safari-versies dekt en alleen puur Safari is:

Deze werkt nog steeds goed met Safari 13 (begin 2020):

/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
  color:#0000FF; 
  background-color:#CCCCCC; 
}

Om meer versies, 6.1 en hoger, te dekken, moet je op dit moment het volgende paar CSS-hacks gebruiken. Degene voor 6.1-10.0 die past bij een die 10.1 en hoger aankan.

Dus dan — hier is er een die ik heb uitgewerkt voor Safari 10.1+:

De dubbele mediaquery is hier belangrijk, verwijder deze niet.

/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { @media {
    .safari_only { 
        color:#0000FF; 
        background-color:#CCCCCC; 
    }
}}

Probeer deze als SCSS of andere gereedschapsset problemen heeft met de geneste mediaquery:

/* Safari 10.1+ (alternate method) */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
    .safari_only { 
        color:#0000FF; 
        background-color:#CCCCCC; 
    }
}}

Deze volgende werkt voor 6.1-10.0 maar niet 10.1 (eind maart 2017 update)

Deze hack heb ik meer dan vele maanden testen en experimenteren door meerdere andere hacks te combineren.

Opmerkingen: Zoals hierboven is de dubbele mediaquery geen ongeval – het maakt veel oudere browsers uit die geen mediacy-query-nesting aankunnen. – De ontbrekende ruimte na een van de ‘en is ook belangrijk. Dit is tenslotte een hack … en de enige die voor 6.1 en alle nieuwere safari-versies op dit moment werkt. Houd er ook rekening mee dat de hack is vermeld in de opmerkingen, de hack is niet-standaard CSS en moet na een filter worden toegepast. Filters zoals SASS-motoren herschrijven / ongedaan maken of volledig verwijderen.

Zoals hierboven vermeld, controleer dan mijn testpagina om te zien werken als-is (zonder wijziging!)

en hier is de code:

/* Safari 6.1-10.0 (not 10.1) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    .safari_only { 
        color:#0000FF; 
        background-color:#CCCCCC; 
    }
}}

Ga voor meer ‘Versionspecifieke’ Safari CSS, blijf hieronder lezen.

/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
    .safari_only { 
        color:#0000FF; 
        background-color:#CCCCCC; 
    }
}}

Een voor Safari 11.0:

/* Safari 11.0 (not 11.1) */
html >> * .safari_only {
  color:#0000FF; 
  background-color:#CCCCCC; 
}

Een voor Safari 10.0:

/* Safari 10.0 (not 10.1) */
_::-webkit-:host:not(:root:root), .safari_only {
  color:#0000FF; 
  background-color:#CCCCCC; 
}

Iets gewijzigde werken voor 10.1 (alleen):

/* Safari 10.1 */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
    .safari_only { 
        color:#0000FF; 
        background-color:#CCCCCC; 
    }
}}

Safari 10.0 (niet-iOS-apparaten):

/* Safari 10.0 (not 10.1) but not on iOS */
_::-webkit-:-webkit-full-screen:host:not(:root:root), .safari_only {
  color:#0000FF; 
  background-color:#CCCCCC; 
}

Safari 9 CSS-hacks:

Een simpele ondersteunt een functiequery-hack voor Safari 9.0 en hoger:

@supports (-webkit-hyphens:none)
{
  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }
}

Een eenvoudige underscore-hack voor Safari 9.0 en hoger:

_:not(a,b), .safari_only {
  color:#0000FF; 
  background-color:#CCCCCC; 
}

Nog een voor Safari 9.0 en hoger:

/* Safari 9+ */
_:default:not(:root:root), .safari_only {
  color:#0000FF; 
  background-color:#CCCCCC; 
}

en nog een andere vraag over ondersteuningsfuncties:

/* Safari 9+ */
@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {
    .safari_only { 
        color:#0000FF; 
        background-color:#CCCCCC; 
    }
}

Een voor Safari 9.0-10.0:

/* Safari 9.0-10.0 (not 10.1) */
_::-webkit-:not(:root:root), .safari_only {
  color:#0000FF; 
  background-color:#CCCCCC; 
}

Safari 9 bevat nu functiedetectie, dus die kunnen we nu gebruiken…

/* Safari 9 */
@supports (overflow:-webkit-marquee) and (justify-content:inherit) 
{
  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }
}

Nu alleen gericht op iOS-apparaten. Zoals hierboven vermeld, omdat Chrome op iOS is geworteld in Safari, raakt het natuurlijk ook die.

/* Safari 9.0 (iOS Only) */
@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{
  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }
}

een voor Safari 9.0+ maar niet voor iOS-apparaten:

/* Safari 9+ (non-iOS) */
_:default:not(:root:root), .safari_only {
  color:#0000FF; 
  background-color:#CCCCCC; 
}

En een voor Safari 9.0-10.0 maar niet voor iOS-apparaten:

/* Safari 9.0-10.0 (not 10.1) (non-iOS) */
_:-webkit-full-screen:not(:root:root), .safari_only {
  color:#0000FF; 
  background-color:#CCCCCC; 
}

Hieronder staan hacks die 6.1-7.0 en 7.1+ scheiden
Deze vereisten ook een combinatie van meerdere hacks om het juiste resultaat te krijgen:

/* Safari 6.1-7.0 */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{  
   .safari_only {(;
      color:#0000FF; 
      background-color:#CCCCCC; 
    );}
}

Sinds ik heb gewezen op de manier om iOS-apparaten te blokkeren, is hier de aangepaste versie van Safari 6.1+ hack die zich richt op niet-iOS-apparaten:

/* Safari 6.1-10.0 (not 10.1) (non-iOS) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    _:-webkit-full-screen, .safari_only { 
        color:#0000FF; 
        background-color:#CCCCCC; 
    }
}}

Om ze te gebruiken:

<div class="safari_only">This text will be Blue in Safari</div>

Meestal [zoals in deze vraag] is de reden waarom mensen vragen naar Safari-hacks:
meestal met betrekking tot het scheiden van Google Chrome (alweer NIET iOS!)
Het kan belangrijk zijn om het alternatief te posten: hoe Chrome afzonderlijk te targeten
ook van Safari, dus die geef ik je hier voor het geval dat nodig is.

Hier zijn de basisprincipes, kijk nogmaals op mijn testpagina voor veel specifieke versies van Chrome, maar deze hebben betrekking op Chrome in het algemeen. Chrome is versie 45, Dev- en Canary-versies zijn op dit moment tot versie 47.

Mijn oude combinatie van mediaquery’s die ik op browserhacks heb gezet, werkt nog steeds alleen voor Chrome 29+:

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
    .chrome_only {
       color:#0000FF; 
       background-color:#CCCCCC; 
    }
}

Een @supports-functiequery werkt ook goed voor Chrome 29+… een aangepaste versie van degene die we hieronder voor Chrome 28+ gebruikten. Safari 9, de komende Firefox-browsers en de Microsoft Edge-browser worden niet opgepikt met deze:

/* Chrome 29+ */
@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none))
{
    .chrome_only {
       color:#0000FF; 
       background-color:#CCCCCC; 
    }
}

Voorheen waren Chrome 28 en nieuwer gemakkelijk te targeten. Dit is er een die ik naar browserhacks heb gestuurd nadat ik het zag opgenomen in een blok met andere CSS-code (oorspronkelijk niet bedoeld als CSS-hack) en besefte wat het doet, dus ik heb het relevante gedeelte voor onze doeleinden geëxtraheerd:

[ OPMERKING: ] Deze oudere methode hieronder toont nu Safari 9 en de Microsoft Edge-browser zonder de bovenstaande update. De komende versies van Firefox en Microsoft Edge hebben ondersteuning toegevoegd voor meerdere -webkit- CSS-codes in hun programmering, en zowel Edge als Safari 9 hebben ondersteuning toegevoegd voor @supports-functiedetectie. Chrome en Firefox bevatten eerder @supports.

/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */
@supports (-webkit-appearance:none) 
{
    .chrome_and_safari {
       color:#0000FF; 
       background-color:#CCCCCC; 
    }
}

Het blok van Chrome-versies 22-28 (indien nodig om oudere versies te ondersteunen) kan ook worden getarget met een draai aan mijn Safari-combo-hacks die ik hierboven heb gepost:

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0)
{
    .chrome_only { -chrome-:only(;
       color:#0000FF; 
       background-color:#CCCCCC; 
    );}
}
NOTE: If you are new, change class name but leave this the same-> { -chrome-:only(;

Zoals de Safari CSS-opmaak hacks hierboven, kunnen deze als volgt worden gebruikt:

<div class="chrome_only">This text will be Blue in Chrome</div>

Dus je hoeft er niet naar te zoeken in dit bericht, hier is mijn live-testpagina opnieuw:

https://browserstrangess.bitbucket.io/css_hacks.html#safari

[of de spiegel]

https://browserstrangess.github.io/css_hacks.html#safari

De testpagina heeft ook veel anderen, specifiek version-op basis van verder
Help u differentiëren tussen chroom en safari, en ook veel hacks voor Firefox, Microsoft Edge- en Internet Explorer Web-browsers.

Opmerking: als iets niet voor u werkt, controleert u eerst de testpagina, maar zorg voor exemplaarcode en welke hack u probeert voor iedereen.


2, Autoriteit 22%

Er is een manier om Safari 5+ uit Chrome te filteren:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .myClass {
     color:red;
    }
    /* Safari only override */
    ::i-block-chrome,.myClass {
     color:blue;
    }
}

3, Autoriteit 5%

SARARI ALLEEN

.yourClass:not(:root:root){ 
    /* ^_^ */ 
}

4, Autoriteit 2%

Vervang je klas in (.myClass)

/ * Safari alleen * /
.myClass: geen (: root: root) {
enter code here
}


5, Autoriteit 2%

Voor degenen die willen een hack voor Safari 7.0 en lager uit te voeren, maar niet 7.1 en hoger – het gebruik:

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

6

Ik wil graag de volgende methode te gebruiken:

var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari) { 
  $('head').append('<link rel="stylesheet" type="text/css" href="path/to/safari.css">') 
};

7

Bij gebruik van dit safari-only filter zou ik Safari (iOS en Mac) kunnen richten, maar chroom (en andere browsers) uitsluiten:

@supports (-webkit-backdrop-filter: blur(1px)) {
  .safari-only {
    background-color: rgb(76,80,84);
  }
}

8

Dit werkt:

@media not all and (min-resolution:.001dpcm) { 
  @media {
    /* your code for Safari Desktop & Mobile */
    body {
      background-color: red;
      color: blue;
    }
    /* end */
  }
}

9

Opmerking: Als iOS-alleen voldoende is (als u bereid bent Safari-desktop op te offeren), dan werkt deze:

   @supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */ 
    }

10

Hallo ik heb dit gemaakt en het werkte voor mij

@media(max-width: 1920px){
    @media not all and (min-resolution:.001dpcm) {
        .photo_row2 {
            margin-left: 5.5% !important;
        }
    }
}
@media(max-width: 1680px){
    @media not all and (min-resolution:.001dpcm) {
        .photo_row2 {
            margin-left: 15% !important;
        }
    }
}
@media(max-width: 1600px){
    @media not all and (min-resolution:.001dpcm) {
        .photo_row2 {
            margin-left: 18% !important;
        }
    }
}
@media (max-width: 1440px) {
@media not all and (min-resolution:.001dpcm) {
        .photo_row2 {
            margin-left: 24.5% !important;
        }
    }
}
@media (max-width: 1024px) {
@media not all and (min-resolution:.001dpcm) {
    @media {
        .photo_row2 {
            margin-left: -11% !important;
        }
    }
}

Antwoord 11

Stap 1: gebruik https://modernizr.com/

Stap 2: gebruik de html-klasse .regions om alleen Safari te selecteren

a { color: blue; }
html.regions a { color: green; }

Modernizr zal html-klassen aan het DOM toevoegen op basis van wat de huidige browser ondersteunt. Safari ondersteunt regio’s http://caniuse.com/#feat=css-regionsterwijl andere browsers (nog steeds niet). Deze methode is ook zeer effectief bij het selecteren van verschillende versies van IE. Moge de kracht bij je zijn.


Antwoord 12

Je kunt een media-query hack gebruiken om Safari 6.1-7.0 vanuit andere browsers te selecteren.

@media \\0 screen {}

Disclaimer: deze hack is ook gericht op oude Chrome-versies (vóór juli 2013).


Antwoord 13

Aan het einde gebruik ik een beetje JavaScript om dit te bereiken:

if (navigator.vendor.startsWith('Apple'))
    document.documentElement.classList.add('on-apple');

vervolgens in mijn CSS om de Apple-browserengine te targeten, zal de selector zijn:

.on-apple .my-class{
    ...
}

Antwoord 14

https://stackoverflow.com/a/17637937/3174065
het wordt hier beantwoord, hoewel deze methode wel wat JS gebruikt. indien gebruikt, zorg er dan voor dat je de js in de footer plaatst, de body moet volledig geladen zijn om dit goed te kunnen vuren, wanneer het in de head wordt geplaatst, geeft het een fout omdat het vuurt voordat het lichaam is geladen.

Het voegt vervolgens een .Safari-klasse toe aan het lichaam, maar alleen in safari, waardoor het doelwit van de CSS zeer eenvoudig is.


15

het werkt 100% in Safari..Ik probeerde

@media screen and (-webkit-min-device-pixel-ratio:0) 
{
::i-block-chrome, Class Name {your styles}
}

16

Ik heb getest en het werkte voor mij

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
 ::i-block-chrome, .myClass {
    height: 1070px !important;
  }
}

Other episodes