2012-10-30 19 views
9

È necessario avere un CSS valido? Sto usando Twitter Bootstrap per lo sviluppo rapido del web e dopo aver eseguito i due fogli di stile Bootstrap principali tramite il validatore CSS W3C, ho notato circa 600 errori.È necessario avere un CSS valido?

La mia domanda è, il mio sito sembra buono, quindi perché è così importante che il CSS sia valido?

+1

Quali sono alcuni degli errori di convalida? – scunliffe

+1

Se gli errori di convalida riguardano prefissi specifici del fornitore, ignorarli. Altrimenti, questo è un problema con Bootstrap. Come ha chiesto @scunliffe - quali sono alcuni degli errori che ottieni? – Ryan

+1

Se si esegue un sito che utilizza Bootstrap tramite lo strumento di convalida CSS W3C, verranno visualizzati i messaggi di errore che vengono generati. Troppi per elencare qui adesso – henrywright

risposta

7

Sì, è assolutamente necessario disporre di CSS valido. Il CSS è un linguaggio di programmazione e come tale, devi seguire le sue regole linguistiche. Solo perché i browser tendono ad accettare codice HTML non valido e provare a renderlo, non rende la generazione di HTML mal formattato una buona pratica. Lo stesso vale per i CSS, sebbene - fortunatamente - le regole CSS siano un po 'più severe delle regole HTML.

Un'altra ragione è che il CSS valido ha un comportamento garantito: se si scrive una regola, è possibile aspettarsi che tale regola si comporti in un determinato modo. (Browser Buggy, come tutte le versioni di IE a parte.) Se il tuo CSS non è valido, qualsiasi comportamento che ottieni non è definito e potrebbe interrompersi quando viene rilasciata una patch release per uno qualsiasi dei browser che utilizzi per il test. Il tuo CSS non si interromperà necessariamente, ma quando scrivi CSS non valido, non ottieni alcuna garanzia di alcun comportamento: ottieni semplicemente il comportamento che potrebbe sembrare corretto, ma che potrebbe cambiare in qualsiasi momento.

Se il CSS corretto è stato mescolato con CSS errato, i browser tendono a ignorare le parti non valide (proprio come la specifica dice loro) ma ogni browser lo fa in modo leggermente diverso. Allo stesso modo, mentre molte persone consigliano di usare gli hack CSS, direi di no, per i motivi sopra esposti.

+0

Potrebbe essere "preferibilmente" non "assolutamente". Perché la realtà è che dobbiamo supportare i browser che usano i nostri utenti. – Grimmo

+0

@Grimmo per lo più sono d'accordo con il tuo commento. Il motivo per cui ho usato assolutamente è perché molti lettori potrebbero interpretare "preferibilmente" in modo permissivo - cioè, possono presumere che sia ok avere un CSS "cattivo" ed è giusto affidarsi al browser per risolverlo. – xxbbcc

0

Ora un giorno c'è un numero diverso di browser con un numero diverso di versioni. Alcuni supportano molto, ma alcuni non lo sono. Così quando si includono gli stili non è sempre possibile adattarsi perfettamente al 100%. Se il tuo stile funziona senza problemi ok. Ma quando si passa a diversi browser se si dispone di CSS relativi ai problemi, è necessario fare attenzione altrimenti nessun problema.

3

Il CSS non deve essere valido per funzionare. I browser ignorano semplicemente i CSS che non capiscono.

La convalida del CSS è un metodo per verificare se segue le specifiche. Se lo fa, qualsiasi browser che sia aggiornato con le specifiche utilizzate comprenderà il CSS.

0

sì è importante, la maggior parte dei browser segue lo standard w3c quando caricano la pagina html. se la tua pagina non ha il css valido, in diversi browser potrebbe apparire in modi diversi. I vecchi esploratori di Internet non seguivano gli standard W3c, il che costava molto agli sviluppatori, in quanto lo sviluppatore necessitava sempre di css extra affinché l'IE visualizzasse correttamente la pagina.

3

È un argomento piuttosto discusso. Gli strumenti del W3C sono certamente buoni da usare, ma tendono a non tenere conto di un sacco di codice moderno. Naturalmente, è difficile per loro non solo anticipare gli standard, ma anche assicurarsi che gli strumenti che offrono siano responsabili di un codice nuovo e inventivo.

Al fine di ottenere un bell'aspetto dei siti Web in tutti i browser e su tutte le piattaforme, è necessario che le persone si estendano oltre le norme che altrimenti sarebbero "valide". È difficile discutere contro un sito che funzioni perfettamente su browser e piattaforme, anche se il CSS non è al 100% senza macchia. Sono i miei due centesimi.

3

tuo CSS non ha bisogno di essere valido (a seconda di chi si chiede), ma se è valido, si dovrebbe avere una ragione per l'invalidità:

audio, 
canvas, 
video { 
    display: inline-block; 
    *display: inline; 
    *zoom: 1; 
} 

Il validatore ha un errore di analisi qui a causa dell'asterisco all'inizio della proprietà.Questo è un trucco oscuro ma riconosciuto per il targeting di Internet Explorer. Altri browser ignoreranno le proprietà che non riconosceranno ma IE6/7 leggerà le proprietà con asterischi.


input:-moz-placeholder, 
textarea:-moz-placeholder { 
    color: #999999; 
} 

input:-ms-input-placeholder, 
textarea:-ms-input-placeholder { 
    color: #999999; 
} 

input::-webkit-input-placeholder, 
textarea::-webkit-input-placeholder { 
    color: #999999; 
} 

L'errore validatore qui è il risultato di pseudo-classi specifiche del fornitore. Nota che a differenza delle proprietà non riconosciute, se un browser non riconosce il selettore l'intera regola verrà ignorata in modo che le estensioni del segnaposto del fornitore debbano essere regole separate. Questo accade anche quando si utilizza l'operatore virgola così:

input::-moz-placeholder, 
input::-ms-input-placeholder, 
input::-webkit-input-placeholder, { 
    color: #999999; 
} 

sarebbero ignorate in tutti i browser meno che essi hanno riconosciuto tutti e tre i vendor prefix.


filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); 

Questa è l'estensione IE vecchio stile per le sfumature. Si increspa e causa un numero di errori nel validatore anche se IE lo segue e altri browser non lo ignorano tranquillamente.


width: auto\9; 

Il \ 9 è un altro mod IE che gli obiettivi di IE < = 8


La linea di fondo è che se si sta facendo qualcosa di non standard, assicuratevi di sapere perché lo stai facendo.

Problemi correlati