C'è un modo per fare CSS condizionale specifico per browser all'interno di un file * .css? Voglio definire tutti gli stili all'interno dello stesso file fisico.C'è un modo per fare CSS condizionale specifico per browser all'interno di un file * .css?
C'è un modo per farlo in IE sfruttando i bug nel browser e @import. Il metodo migliore che ho visto è here, per gentile concessione di Bobince (e sicuramente ha battuto la mia risposta, heh).
In generale, tuttavia, no. Anche i commenti condizionali sono specifici del browser per IE.
Non sono sicuro di un modo per farlo esattamente. Abbiamo appena impostato il file CSS in base al browser degli utenti in codebehind.
Solo per mezzo di hack. I commenti condizionali sono definiti solo per i file di markup, non per i file .CSS.
No. L'intero scopo dell'utilizzo di file CSS è che ogni file rappresenta uno stile particolare. Se vuoi scrivere script, dovresti usare PHP o qualcosa del genere, CSS è semplicemente una descrizione di un singolo stile.
C'è più hack (vedi questo somewhat outdated table come esempio)
e c'è soluzioni basate sul lato server, come ad esempio conditional-css per PHP
Ma ben scritto, css ben strutturata non dovrebbe aver bisogno che molti hack, solo la fissazione ocassional ie.
è possibile utilizzare questo file javascript intelligente, CSS Selector Browser: http://rafael.adm.br/css_browser_selector/
che consente di indirizzare i browser specifici utilizzando nomi di classe come ad esempio:
.ie .example {
background-color: yellow
}
.ie7 .example {
background-color: orange
}
.gecko .example {
background-color: gray
}
.win.gecko .example {
background-color: red
}
.linux.gecko .example {
background-color: pink
}
.opera .example {
background-color: green
}
.konqueror .example {
background-color: blue
}
.webkit .example {
background-color: black
}
Non credo che ci sia una migliore Selettore del browser CSS rispetto a quello di cui sopra di Rafael Lima, quindi non aggiungerò il link qui o gli esempi che sono nello stesso post e presi dalla pagina di Rafael Lima.
L'avvertenza è che può essere utilizzato solo al di fuori del selettore CSS e non ha come target specifiche linee di CSS, ma è più robusto rispetto ai metodi standard e più facile da leggere.
Questo dovrebbe essere un commento –
Ho lavorato su questo per molti browser, specialmente recenti, la maggior parte delle versioni di Firefox, Webkit e versioni di Internet Explorer. Più recentemente, le versioni di Safari e Chrome possono essere separate. Alcuni di questi ho messo su browserhacks.com
È sempre meglio iniziare con il miglior CSS che si possa fare prima, ma questi sono disponibili per quando il tuo tempo è breve e c'è bisogno di qualcosa ... ieri.
Attualmente per riferimento, Internet Explorer è la versione 11, Safari è la versione 8, Firefox è fino a 36 in versioni di sviluppo/Aurora e Chrome è fino a 41 in versioni di sviluppo/Canarie al momento di questa pubblicazione.
Questi sono molto specifici, se vengono modificati rimuovendo le parti non funzioneranno correttamente.
Per indirizzare qualsiasi versione di Firefox [NON su iOS!Vedi sotto]:
/* Firefox (any) */
_:-moz-tree-row(hover), .selector { color:red; }
per rilevare le nuove versioni di Chrome:
(questo non è per Chrome su iOS !!! --- gli sviluppatori hanno utilizzato il motore di Safari su iPad e iPhone, invece di cromo o Mozilla - in modo da utilizzare il Safari hack per le versioni iOS di questi browser, invece)
/* Chrome 29 and newer */
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
.selector { color:red; }
}
Se si desidera farlo si può anche indirizzare Chrome un po 'più indietro con una combinazione incidere ho lavorato fuori (questo è strano CSS ma funziona - copialo esattamente come vedi qui:
/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0)
{
.selector {-chrome-:only(;
color:red;
);}
}
per rilevare nuove versioni di Safari era altrettanto difficile capire come Chrome, questo usando un paio nidificato di media query:
/* Safari 6.1-10.0 */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
.selector { color:red; }
}}
Safari aggiornato alla fine di marzo del 2017 in modo da questo funziona per 10.1:
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm)
{ @media {
.selector { color:red; }
}}
per le versioni (7.1 e superiori) è possibile utilizzare questo:
/* Safari 7.1+ (10.1 is the current version as of April 2017) */
_::-webkit-full-page-media, _:future, :root .selector { color:red; }
di indirizzare le nuove versioni di Internet Explorer:
/* Internet Explorer 11 */
_:-ms-fullscreen, :root .selector { color:red; }
/* Internet Explorer 10+ AND Microsoft Edge */
_:-ms-lang(x), .selector { color:red; }
/* Internet Explorer 9-11 */
_::selection, .selector { color:red\0; }
/* Microsoft's Edge Browser */
@supports (-ms-ime-align:auto) { .selector { color:red; } }
Queste sono le basi, ma per vedere di più delle mie creazioni per indirizzare molte versioni diverse del browser vedere il mio blog:
https://jeffclayton.wordpress.com
o le mie pagine di test di hacking CSS dal vivo:
https://browserstrangeness.bitbucket.io/css_hacks.html MIRROR: https://browserstrangeness.github.io/css_hacks.html
Divertiti!
Se si utilizza un trucco per indirizzare in modo specifico un browser (anche se non si controllano gli agenti utente), il codice potrebbe rompersi o avere effetti indesiderati quando il browser risolve il problema che si sta verificando. Invece, prova a trovare un modo più standardizzato per risolvere il problema, o ricerca per vedere se si tratta di un bug del browser o no. –