- AGGIORNATO PER CATALINA E SAFARI 13 (aggiornamento inizio 2020) *
NOTA: filtri e compilatori (come il motore SASS) si aspettano un codice "cross-browser" standard - NON hack di CSS come questi, il che significa che riscriveranno, distruggeranno o rimuoveranno gli hack poiché non è ciò che fanno gli hack. Gran parte di questo è un codice non standard che è stato scrupolosamente realizzato per indirizzare solo le versioni del singolo browser e non può funzionare se vengono modificate. Se si desidera utilizzarlo con quelli, è necessario caricare l'hack CSS scelto DOPO qualsiasi filtro o compilatore . Questo può sembrare un dato di fatto, ma c'è stata molta confusione tra le persone che non si rendono conto che stanno annullando un hack eseguendolo attraverso tale software che non è stato progettato per questo scopo.
Safari è cambiato dalla versione 6.1, come molti hanno notato.
Nota: se stai utilizzando Chrome [e ora anche Firefox] su iOS (almeno nelle versioni iOS 6.1 e successive) e ti chiedi perché nessuno degli hack sembra separare Chrome da Safari, è perché la versione iOS di Chrome sta usando il motore Safari. Utilizza hack di Safari non quelli di Chrome. Maggiori informazioni qui: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ Firefox per iOS è stato rilasciato nell'autunno 2015. Risponde anche a Safari Hacks, ma nessuno di Firefox, uguale a iOS Chrome.
ANCHE: Se hai provato uno o più hack e hai difficoltà a farli funzionare, ti preghiamo di pubblicare un codice di esempio (meglio ancora una pagina di prova) - l'hack che stai provando e quale browser (versione esatta!) stai usando così come il dispositivo che stai utilizzando. Senza tali informazioni aggiuntive, è impossibile per me o per chiunque altro qui aiutarti.
Spesso è una soluzione semplice o un punto e virgola mancante. Con CSS di solito è questo o un problema di quale ordine il codice è elencato nei fogli di stile, se non solo errori CSS. Si prega di testare gli hack qui sul sito di test. Se funziona lì, significa che l'hack funziona davvero per la tua configurazione, ma è qualcos'altro che deve essere risolto. Le persone qui adorano davvero aiutare, o almeno indirizzarti nella giusta direzione.
Il sito di prova:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
E SPECCHIO!
https://browserstrangeness.github.io/css_hacks.html#safari
Quello fuori mano qui sono gli hack da usare per le versioni più recenti di Safari.
Dovresti provarlo prima perché copre le attuali versioni di Safari ed è solo Safari puro:
Questo funziona ancora correttamente con Safari 13 (inizio 2020):
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Per coprire più versioni, 6.1 e successive, in questo momento devi usare la prossima coppia di hack css. Quello per 6.1-10.0 va con quello che gestisce 10.1 e versioni successive.
Quindi, eccone uno che ho elaborato per Safari 10.1+:
La query doppio supporto è importante qui, non rimuoverla.
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Prova questo se SCSS o altri set di strumenti hanno problemi con la media query nidificata:
/* Safari 10.1+ (alternate method) */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Il prossimo funziona per 6.1-10.0 ma non 10.1 (aggiornamento di fine marzo 2017)
Questo hack l'ho creato in molti mesi di test e sperimentazione combinando più altri hack.
NOTE: come sopra, la doppia query multimediale NON è un incidente: esclude molti browser meno recenti che non sono in grado di gestire l'annidamento delle query multimediali. - Anche lo spazio mancante dopo uno degli "e" è importante. Dopotutto, questo è un hack ... e l'unico che funziona per la versione 6.1 e tutte le versioni più recenti di Safari in questo momento. Inoltre, come indicato nei commenti seguenti, l'hacking è CSS non standard e deve essere applicato DOPO un filtro. Filtri come i motori SASS riscrivono / annullano o lo rimuovono completamente.
Come accennato in precedenza, controlla la mia pagina di test per vederlo funzionare così com'è (senza modifiche!)
Ed ecco il codice:
/* 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;
}
}}
Per ulteriori CSS Safari specifici per versione, continua a leggere di seguito.
/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Uno per Safari 11.0:
/* Safari 11.0 (not 11.1) */
html >> * .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Uno per Safari 10.0:
/* Safari 10.0 (not 10.1) */
_::-webkit-:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Opere leggermente modificate per 10.1 (solo):
/* 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 (dispositivi non iOS):
/* 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;
}
Hacks Safari 9 CSS:
Un semplice supporto per la funzione di hacking delle query per Safari 9.0 e versioni successive:
@supports (-webkit-hyphens:none)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Una semplice sottolineatura per Safari 9.0 e versioni successive:
_:not(a,b), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Un altro per Safari 9.0 e versioni successive:
/* Safari 9+ */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
e anche un'altra query sulle funzionalità di supporto:
/* Safari 9+ */
@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Uno per 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 ora include il rilevamento delle funzionalità in modo da poterlo utilizzare ora ...
/* Safari 9 */
@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Ora per colpire solo i dispositivi iOS. Come accennato in precedenza, poiché Chrome su iOS è radicato in Safari, ovviamente colpisce anche quello.
/* 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;
}
}
uno per Safari 9.0+ ma non per dispositivi iOS:
/* Safari 9+ (non-iOS) */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
E uno per Safari 9.0-10.0 ma non per dispositivi iOS:
/* Safari 9.0-10.0 (not 10.1) (non-iOS) */
_:-webkit-full-screen:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Di seguito sono riportati gli hack che separano la versione 6.1-7.0 e 7.1+ e che richiedono anche una combinazione di più hack per ottenere il risultato giusto:
/* 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;
);}
}
Da quando ho indicato il modo di bloccare i dispositivi iOS, ecco la versione modificata dell'hack Safari 6.1+ che si rivolge ai dispositivi non iOS:
/* 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;
}
}}
Per usarli:
<div class="safari_only">This text will be Blue in Safari</div>
Di solito [come in questa domanda] il motivo per cui le persone chiedono degli hack di Safari è principalmente riferito alla separazione da Google Chrome (di nuovo NON iOS!) Potrebbe essere importante pubblicare l'alternativa: come indirizzare Chrome separatamente anche da Safari, quindi Ve lo sto fornendo qui nel caso fosse necessario.
Ecco le basi, controlla ancora la mia pagina di test per molte versioni specifiche di Chrome, ma queste riguardano Chrome in generale. Chrome è la versione 45, le versioni Dev e Canary sono fino alla versione 47 in questo momento.
La mia vecchia combinazione di query multimediali che ho installato su browserhacks funziona ancora solo per Chrome 29+:
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Una query sulla funzione @supports funziona bene anche per Chrome 29+ ... una versione modificata di quella che stavamo usando per Chrome 28+ di seguito. Safari 9, i prossimi browser Firefox e il browser Microsoft Edge non vengono rilevati con questo:
/* 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;
}
}
In precedenza, Chrome 28 e versioni successive erano facili da indirizzare. Questo è quello che ho inviato a browserhacks dopo averlo visto incluso in un blocco di altro codice CSS (non originariamente inteso come un hack CSS) e realizzato cosa fa, quindi ho estratto la parte pertinente per i nostri scopi:
[NOTA:] Questo vecchio metodo qui sotto mostra ora Safari 9 e il browser Microsoft Edge senza l'aggiornamento sopra. Le prossime versioni di Firefox e Microsoft Edge hanno aggiunto il supporto per più codici CSS -webkit nella loro programmazione, e sia Edge che Safari 9 hanno aggiunto il supporto per il rilevamento delle funzionalità @supports. Chrome e Firefox includevano @supports in precedenza.
/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */
@supports (-webkit-appearance:none)
{
.chrome_and_safari {
color:#0000FF;
background-color:#CCCCCC;
}
}
Il blocco di versioni di Chrome 22-28 (se necessario per supportare versioni precedenti) è anche possibile indirizzare con una svolta ai miei hack combinati Safari che ho pubblicato sopra:
/* 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(;
Come gli hack di formattazione CSS Safari sopra, questi possono essere usati come segue:
<div class="chrome_only">This text will be Blue in Chrome</div>
Quindi non devi cercarlo in questo post, ecco di nuovo la mia pagina di test live:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
[O lo specchio]
https://browserstrangeness.github.io/css_hacks.html#safari
La pagina di test ha anche molti altri, in particolare basati sulla versione per aiutarti a distinguere ulteriormente tra Chrome e Safari, e anche molti hack per browser Web Firefox, Microsoft Edge e Internet Explorer.
NOTA: se qualcosa non funziona per te, controlla prima la pagina di test, ma fornisci il codice di esempio e QUALE hack stai tentando per chiunque ti aiuti.