2013-01-19 13 views
8

Vacci piano con me. Sto solo imparando l'HTML.Perché "<! -" commenta una regola di stile, ma "<! -" no?

Accroding al http://www.w3.org/TR/html-markup/syntax.html#comments e molti altri siti che ho visto come questo http://www.w3schools.com/tags/tag_comment.asp

dicono un commento HTML è <!-- text --> senza spazio tra ! e la prossima trattino.

Tuttavia, mostro di seguito che solo quando scrivo <! -- test --> viene effettivamente ignorato. Si noti la maggior spazio tra il <! e --

Ecco il codice HTML

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style type="text/css"> 
<!-- td {border: 1px solid gray;} --> 
    </style> 
</head> 
<body> 

<table> 
    <tr> <td>  test </td> </tr> 
</table> 

</body> 
</html> 

Ora prima di eseguirlo, dovrebbe avere la tabella di bordo o no?

Se il materiale in testo/css è davvero commentato, la tabella non dovrebbe avere il bordo, giusto? Ma lo fa. Ho provato questo sulla versione cromata 24.0.1312.52 sotto Linux Mint 14, e anche firefox 18,0

Ora quando cambio la linea di

<! -- td {border: 1px solid gray;} --> 

Avviso lo spazio in più ora. Quindi la tabella si presenta senza bordi come previsto. Lo stesso accade quando io in realtà cancellare l'intera riga:

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style type="text/css"> 
    </style> 
</head> 
<body> 

<table> 
    <tr> <td>  test </td> </tr> 
</table> 

</body> 
</html> 

domanda è: è il commento <!-- text --> o è <! -- text -->?

risposta

19

CSS non accetta HTML <!-- comment here --> commenti. Invece il CSS usa /* comment */ per commentare le righe. Prova invece.

+0

Una buona risorsa per gli sviluppatori web è jsfiddle.net, è possibile testare il codice su Internet e renderlo disponibile agli altri in fase di risoluzione dei problemi, è molto utile e dovresti usarlo molto o trovare uno strumento di condivisione del codice altrettanto utile . –

+2

+1 @Ilan Biala, l'hai inchiodato. Per essere chiari, @Nasser: i commenti HTML devono essere evitati '', ma nel momento in cui viene fatto il commento, ci si trova all'interno di un blocco CSS, e quindi si applicano altre regole. – weltraumpirat

+2

Sì, a cosa serve realmente html sta costruendo il documento, e CSS lo sta disegnando. Sono molto meglio separati, e dovresti cercare di cambiare i tuoi stili in linea in fogli di stile esterni collegati alla pagina html. –

11

La stringa <! -- non commenta nulla. Invece, in CSS è un errore di sintassi e le regole CSS error processing implicano in questo caso che tutto il foglio di stile viene ignorato.

La stringa <!-- non avvia un commento, ma dalle regole CSS comment, è (e anche -->) è consentita e ignorata (ignorata) in determinati contesti. Così, il foglio di stile

<!-- td {border: 1px solid gray;} --> 

è preso come

{border: 1px solid gray;} 

È possibile controllare questo utilizzando il W3C CSS Validator. Nel primo caso, con lo spazio, viene segnalato un errore e non vengono riportate regole CSS valide. Nel secondo caso, non viene segnalato alcun errore e la regola viene mostrata come valida.

In CSS, un commento inizia sempre con /* e termina con */.

La ragione per le regole particolari per <!-- e --> è che molto tempo fa (e stiamo parlando del periodo in cui Netscape 1 era ancora in uso), alcuni browser non riconoscono l'elemento style a tutti.Ciò implicava che ignorassero i tag <style> e </style> ed elaborassero il contenuto tra loro come se fosse normale contenuto HTML. Ciò avrebbe causato la visualizzazione del foglio di stile all'interno della pagina su tali browser. Per evitare ciò, per "nascondere il foglio di stile", il foglio di stile era avvolto tra i delimitatori di commento HTML. I vecchi browser ignoravano semplicemente il contenuto dell'elemento style. Ma poi una regola speciale doveva essere aggiunta alle specifiche CSS per consentire i delimitatori.

Questa è una storia antica, ma le vecchie abitudini prevalgono e vengono persino copiate dal codice di altre persone senza capire cosa significano. Non c'è stato alcun motivo per "nascondere il foglio di stile" per molto, molto tempo, e il trucco ora è diventato un potenziale rischio (a causa di possibili interferenze con le regole XHTML o confusione della gente e errori di battitura).

Quindi, non utilizzare mai <!-- (o <! --) in CSS.

+0

Penso che sia stato presto Netscape (e altri browser da quel momento), ma non solo Netscape 1. –

1

Ho visto persone usare <!-- --> nel blocco di stile CSS per scopi di compatibilità.

In questo caso, i vecchi browser che non supportano CSS commenteranno per evitare errori.

<style type="text/css"> 
<!-- td {border: 1px solid gray;} --> 
</style> 

sarà interpretato come

<style type="text/css"> 
</style> 

da vecchi browser che non supportano i CSS . In questo modo questi browser evitano potenziali errori.

Nei moderni browser, tuttavia, il <!-- --> all'interno del blocco di stile CSS verrà ignorato.

<style type="text/css"> 
<!-- td {border: 1px solid gray;} --> 
</style> 

sarà interpretato come

<style type="text/css"> 
td {border: 1px solid gray;} 
</style> 

dai browser con supporto CSS.

+0

Avere non commentato non sarebbe un errore, la pagina avrebbe solo td {border: 1px grigio fisso;} visualizzato (che non è ciò che lo sviluppatore vorrebbe, ma non è un errore). –

Problemi correlati