Validatore CSS
La riga, la proprietà, la correzione
Questo validatore CSS legge un foglio di stile come fa un browser e segnala quello che scarterebbe. Ogni nota porta un numero di riga, la proprietà in errore e quello che il parser si aspettava. Niente di ciò che incolli lascia il browser.
- GratisPrezzo
- 6Controlli
- NessunaIscrizione
- NessunaCaricamenti
Validatore CSS
Leggi un foglio di stile e nomina ogni dichiarazione che il browser scarterebbe, con la riga in cui si trova
Niente di letto per ora.
Niente da segnalare. Ogni nome qui è noto al lettore, e ogni valore è fra quelli che quella proprietà accetta.
Pronto. Incolla un foglio di stile, oppure premi uno dei pulsanti di esempio.
Cosa intercetta un validatore CSS
Un browser è indulgente con il CSS, e il problema è proprio questo. Quindi il browser scarta in silenzio una regola che non sa leggere, e la pagina sembra semplicemente sbagliata.
Questo validatore CSS dà un nome a ciò che il browser scarterebbe. Ogni nota porta un numero di riga. Porta anche la proprietà o il selettore in errore e il motivo della fermata.
Legge il foglio in ordine, tenendo traccia se si trova dentro una regola, una stringa, un commento o una regola @. Poiché lo stato decide il significato di un carattere, una parentesi dentro un commento non apre mai un blocco.
Questo validatore CSS controlla sei famiglie di errori. Due rompono il file, e le altre quattro ti costano una dichiarazione senza rompere nulla.
Tutto gira in questa scheda. Quindi un foglio per un sito coperto da riservatezza qui non è diverso da uno pubblico.
Come un validatore CSS legge un foglio di stile
Il lettore percorre il testo una volta. A ogni carattere sa in quale di cinque stati si trova. Un selettore, un blocco, un valore, una stringa o un commento.
Da quello stato capisce se una parentesi apre un blocco. Capisce se i due punti avviano un valore. Capisce anche se il punto e virgola chiude una dichiarazione. La grammatica in sé è breve. Il modulo di sintassi CSS è dove il gruppo di lavoro la scrive.
Poiché il percorso conserva lo stato, una parentesi fuori posto in un commento non cambia nulla. Un lettore che contasse i caratteri la prenderebbe per l’inizio di un blocco e sposterebbe ogni riga successiva.
Il recupero conta quanto il rilevamento. Quando un browser incontra una dichiarazione che non sa analizzare, salta al punto e virgola successivo e va avanti. Quindi un valore sbagliato costa una dichiarazione invece del file.
Così una regola che ha perso una dichiarazione può restare mesi su un sito attivo. La pagina continua a funzionare, con una proprietà in meno, e niente in console lo dice.
Perché gli scarti silenziosi vale la pena trovarli
Un refuso nel nome di una proprietà costa poco e si nota male. Una lettera di troppo e la dichiarazione sparisce.
Poiché il resto della regola si applica ancora, l’elemento conserva quasi tutta la sua formattazione. Quindi la pagina sembra quasi giusta, e la parte mancante si attribuisce facilmente ad altro.
Vale lo stesso per un’unità. Una lunghezza scritta senza unità è valida in pochi posti e invalida quasi ovunque. Quindi il browser scarta un margine di dieci invece di dieci pixel, e lo spazio previsto non compare mai.
Un validatore trasforma tre di quei casi in tre righe di output. È tutto il valore: il browser tace e la pagina no.
I sei controlli e cosa significa ognuno
Il primo controllo è l’equilibrio delle parentesi. Una parentesi aperta senza chiusura, o una chiusa senza apertura, riceve una nota. La nota nomina la riga dove il conteggio è andato storto. È l’unico errore che può costare tutto il resto del file.
Il secondo è un punto e virgola mancante. Poiché il browser legge allora la proprietà successiva come parte del valore, un solo segno dimenticato inghiotte due dichiarazioni. La nota nomina entrambe le righe.
Il terzo è una proprietà sconosciuta. Il lettore segnala tutto ciò che non riconosce come probabile refuso, e propone la corrispondenza più vicina quando esiste.
Il quarto è un valore che la proprietà non accetta. Un colore scritto come una parola che non è un nome di colore. Oppure una lunghezza in percentuale su una proprietà che non la prende.
Il quinto è un’unità scritta male. Una lunghezza senza unità, un’unità non riconosciuta, e un’unità su una proprietà che vuole un numero semplice.
Il sesto è un duplicato. Lo stesso selettore due volte in un blocco, o la stessa proprietà due volte in una regola. Poiché vince la dichiarazione più tarda, un valore vecchio può restare lì a sembrare autorevole senza fare nulla.
Cosa non è la validità
Un validatore risponde a una domanda: il browser saprà analizzare questo. Non può dire se la regola era una buona idea.
Quindi un foglio può passare ogni controllo e restare sbagliato. Un colore può non superare il contrasto. Una larghezza fissa può rompersi su uno schermo stretto. Una dimensione può essere in pixel dove serviva un’unità relativa. Niente di tutto questo è grammatica.
Vale lo stesso per il supporto. Una proprietà può essere perfettamente valida e non fare nulla, perché il browser non l’ha implementata. La validazione non dice niente in merito, e un risultato verde letto come promessa di compatibilità inganna.
Per questo la pagina rimanda al verificatore di contrasto e al tester di selettori. Quei due rispondono alle domande che un validatore non può affrontare.
Come usare il validatore CSS
Quattro passi, e nessuno chiede un account.
- 1
Incolla il foglio di stile
Quindi incolla un file intero o una regola. Poiché il lettore prende del testo e non una forma compilata, un frammento basta purché le parentesi siano bilanciate.
- 2
Scegli la severità
Poi scegli se una proprietà sconosciuta è un errore o un avviso. Una proprietà nuova può semplicemente essere in anticipo su questo lettore. Il livello avviso la lascia quindi passare con una nota.
- 3
Leggi le note in ordine
Poi scorri il pannello. Le note seguono l’ordine delle righe, quindi la prima di solito causa le due dopo.
- 4
Correggi, riprova, poi copia
Infine correggi il foglio nel tuo editor e reincollalo per confermare che il conteggio è zero. Dopo di che copia o scarica il file pulito.
Perché usare questo validatore CSS
Cinque motivi, e ognuno ti risparmia una sessione di debug.
Nomina la riga
Poiché ogni nota di questo validatore CSS porta un numero di riga, ci vai diretto invece di leggere il file. Quindi un foglio da duecento righe è una questione di due minuti.
Spiega il motivo
Una nota di un validatore CSS dice cosa si aspettava il parser, non solo che si è fermato. Quindi la correzione è spesso ovvia già dalla nota.
Legge come legge un browser
Così un validatore CSS segue stringhe, commenti e regole @ allo stesso modo. Quindi una parentesi dentro un commento non produce una falsa segnalazione.
Niente viene caricato
Tutto il controllo gira in questa scheda. Quindi un foglio coperto da riservatezza qui non è diverso da uno pubblico.
Resta zitto sul gusto
La grammatica è tutto il lavoro. Quindi lo strumento non commenta i tuoi nomi, il tuo annidamento o la tua scelta di unità. Un risultato verde vuol dire analizzato, e niente di più.
Le abitudini che tengono pulito un foglio di stile
Sei abitudini che tengono un foglio leggibile e facile da validare.
- Una dichiarazione per riga Così un punto e virgola mancante appare come una riga rossa nel tuo editor invece che come una nota qui. Le regole su più righe sono anche molto più facili da confrontare.
- Non scrivere mai una lunghezza senza unità Uno zero può restare solo, e nient’altro. Poiché il browser scarta una lunghezza senza unità, la spaziatura semplicemente non compare e la causa è difficile da indovinare.
- Scrivi una proprietà personalizzata una volta sola Una proprietà personalizzata è un nome che inventi, quindi un refuso dentro resta silenzioso ovunque. Quindi dichiarala in cima al file e copia la grafia invece di riscriverla.
- Valida prima del minificatore, non dopo Un minificatore si fida del suo input, quindi una regola rotta esce rotta e più difficile da leggere. Poiché i numeri di riga sopravvivono nel file non minificato, controlla prima quello.
- Occhio all’ultima regola di un blocco L’ultima dichiarazione è il punto dove un punto e virgola mancante fa meno danno e si nasconde meglio. Poiché la riga dopo è una parentesi chiusa, la regola funziona ancora e la nota non compare mai.
- Tratta un prefisso come normale Una proprietà con prefisso è valida e il lettore lo sa. Quindi un avviso su di essa è un controllo da aggiornare, non un errore da correggere.
Sei modi in cui i fogli si rompono in silenzio
Ognuno lascia la pagina quasi giusta, ed è ciò che rende la ricerca così lenta.
Una dichiarazione persa in una scorciatoia
Attenzione qui. Una scorciatoia come margin espansa male perde l’intera riga. Quindi si muovono quattro lati invece di uno.
Un valore che la proprietà non accetta
Una percentuale dove la proprietà vuole una lunghezza, o una parola dove vuole un numero. Poiché il browser salta al punto e virgola successivo, la dichiarazione dopo sopravvive.
Una proprietà duplicata in una regola
Vince il valore più tardo, quindi uno vecchio può restare lì a sembrare autorevole. Quindi cancella invece di commentare, altrimenti il prossimo lettore se ne fiderà.
Un punto e virgola mancante prima di una parentesi chiusa
L’ultima dichiarazione di un blocco è l’unico posto dove l’errore non costa nulla. Quindi sopravvive a una revisione e salta fuori solo quando qualcuno aggiunge una dichiarazione dopo.
Un commento non chiuso
Un commento che non si chiude mai inghiotte tutto ciò che segue, comprese tutte le regole. Quindi la pagina si mostra senza stile da quel punto, e il file in un diff sembra a posto.
Fidarsi di un risultato verde sul supporto
Una proprietà valida può non fare nulla nel browser che conta. Poiché la validazione è grammatica, controlla la compatibilità per il tuo target a parte.
Domande sul validatore CSS
Questo validatore CSS è gratis?
Sì. Nessun account, nessun limite e nessun piano a pagamento. Quindi puoi validare tutti i fogli che vuoi.
Che cosa controlla un validatore CSS?
Sei famiglie: parentesi, punti e virgola, nomi di proprietà, valori, unità e duplicati dentro la stessa regola.
Confronta il mio CSS con la specifica?
Controlla la grammatica che fissa il modulo di sintassi CSS. Controlla anche un elenco di proprietà note e i valori che ognuna accetta. Quindi questo lettore può segnalare una proprietà nuovissima finché il suo elenco non si aggiorna.
Perché il mio CSS sembra a posto se contiene un errore?
Perché il browser salta al punto e virgola successivo e va avanti. Quindi una dichiarazione sbagliata costa una dichiarazione, e la pagina continua a mostrarsi senza di essa.
Modifica il mio foglio di stile?
No. Il lettore segnala e il file resta esattamente come l’hai incollato. Ogni correzione è tua, nel tuo editor.
Il mio foglio di stile viene caricato da qualche parte?
No. Tutto il controllo gira in questa scheda. Quindi un foglio coperto da riservatezza resta sulla tua macchina.
Posso validare SCSS o Less?
Non direttamente. Aggiungono l’annidamento e le variabili sopra il CSS. Prima passali quindi dal convertitore di preprocessore. Poi valida il CSS puro che ne esce.
Controlla il supporto dei browser?
No. Una proprietà può essere valida e non fare nulla nel browser che conta. La validazione è grammatica, e il supporto è una questione separata.
Qual è la cosa più vicina a un vero errore?
Una parentesi non bilanciata. Il browser legge allora il resto del file alla profondità sbagliata. Quindi una parentesi mancante può costare tutte le regole seguenti.
Segnala una proprietà con prefisso?
No, il lettore conosce una proprietà con prefisso e l’accetta. Quindi un blocco con sei prefissi per una sola funzione passa senza note.
Posso validare un frammento invece di un file intero?
Sì. Una sola regola o un gruppo di regole basta, purché le parentesi siano bilanciate. Il conteggio riguarda allora le righe incollate invece di un file.
Controlla le proprietà personalizzate?
Controlla la sintassi e l’uso. Poiché un nome che inventi non ha un’ortografia da verificare, non può capire che due grafie dovevano essere una sola.
Qual è la differenza tra un errore e un avviso?
Un errore significa che il browser scarterà la dichiarazione. Un avviso significa che questo lettore non conosce la proprietà, il che a volte vuol dire solo che è nuova.
Può contare le mie regole e i miei selettori?
Sì. Il riepilogo riporta il numero di regole, dichiarazioni e selettori, cosa utile quando alleggerisci un file.
Formatta o minifica il foglio di stile?
No, ed è voluto. Formattare e validare sono due decisioni distinte. Il minificatore del sito si occupa degli spazi.
Perché una mia regola valida non si applica ancora?
La causa di solito è il selettore, non la dichiarazione. Quindi passalo dal tester di selettori, che chiede se raggiunge davvero un elemento.
Funziona sul telefono?
Sì. I pannelli si impilano e le note vanno a capo. Quindi un controllo veloce è possibile lontano dalla scrivania, anche se un file lungo resta più comodo con la tastiera.
Posso scaricare le note?
Sì. Il download salva il rapporto come file di testo, cosa utile per un ticket o un commento di revisione.
Il foglio di stile resta mio?
Del tutto. Questa pagina non rivendica alcuna licenza sul tuo file, e non c’è nessun credito da dare.
Servono un account o un’estensione?
No. Nessuna iscrizione, nessun plugin e nessuna estensione da aggiungere. Quindi chiudi la scheda quando il foglio è pulito.
Gli strumenti che vanno con questo
Quattro pagine a cui lo stesso lavoro porta spesso.
Minificatore CSS
Quando il foglio è pulito, togli gli spazi. Poiché un browser scarica ogni commento e ogni a capo, minifica dopo la validazione e non prima.
Apri lo strumento →Tester di selettori CSS
Poi controlla che un selettore raggiunga qualcosa. Poiché una regola che non raggiunge nulla fallisce in silenzio, è l’altra metà dello stesso lavoro.
Apri lo strumento →Selettore di codice colore
Un colore valido può ancora non superare il contrasto. Quindi leggi il rapporto prima di fissare la palette.
Apri lo strumento →Convertitore di preprocessore CSS
Se la sorgente è SCSS o Less, trasformala prima in CSS puro. Poi il validatore ha qualcosa da leggere.
Apri lo strumento →
Trova la dichiarazione che il browser ha scartato
Incolla il foglio di stile, leggi le note in ordine di riga, correggi la prima e riprova. Niente viene caricato e nulla cambia sulla tua macchina. Spesso il foglio è pulito prima che il tè si raffreddi.