L'attributo colore CSS vincente non corrisponde al risultato

Vedo uno strano scenario in cui, in base alla console di sviluppo di Firefox, il colore corrispondente per un elemento css è diverso dall'output visibile. Se è importante, sto usando Bootstrap 3 come fonte di stile. Ecco il (molto breve) file HTML che sto usando per l'esempio.L'attributo colore CSS vincente non corrisponde al risultato

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 

<button class="form-control btn btn-success">Hello world</button>

Ecco uno screenshot dalla console dev Firefox con il presunto 'vincente' regola css per: enter image description here

Ed ecco uno screenshot del rendering del browser attuale: enter image description here

Come puoi vedere, il testo nel pulsante è reso bianco. Dall'alto delle regole CSS, sembra che il bianco sia stato, in effetti, selezionato. Ma non è chiaro da dove viene. L'unica regola dice "è bianco (#FFF)" è cancellata e l'unica regola che è non contrassegnata con barrata "è grigio scuro (# 555)". Allora perché il testo è bianco?

fonte

2015-07-02 J-bob

osservazione interessante! Sembrerebbe che gli strumenti di sviluppo di Firefox utilizzino il numero di riga del blocco di dichiarazione per determinare l'importanza del selettore, quando la specificità di due selettori è la stessa.

Questo può essere un problema quando il file CSS viene comunque ridotto e tutti i blocchi di dichiarazione finiscono sulla stessa riga.

diventa più evidente se si utilizza la risorsa non minimizzato:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">

A JSFiddle with the minified CSS presenta questo problema, ma non one using the fully expanded CSS.

Spero che questo chiarisca la questione. Forse vale un bug report?

MODIFICA: Un altro po 'di test indica che gli strumenti di Firefox posizionano la precedenza sul blocco più a sinistra di fronte a più selettori di stessa specificità su una singola riga. (An example.)

fonte

2015-07-02 20:17:45 Serlite

Stavo pensando qualcosa come questo in quanto riporta tutte quelle regole sulla linea 5 –

Ah bello! Posso confermare che l'utilizzo della sorgente non minificata comporta un comportamento previsto. Sembra che dovremmo presentare un bug report. –

Ovviamente c'è già un [bug report per questo] (https://bugzilla.mozilla.org/show_bug.cgi?id=1085119). Come dice la risposta di Patrick, per ora puoi almeno vedere la traccia di stile corretta all'interno della [Vista regole] (https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS). –

Sì, certo che è strano, ma se guardi sotto Inspector, invece, vedo cosa ti aspetteresti: Deve essere un errore con gli strumenti dev di firefox?

enter image description here

fonte

2015-07-02 20:13:06

L'attributo colore CSS vincente non corrisponde al risultato

risposta

Problemi correlati