Perché funzionano i CSS con falsi elementi?

Question 1

Perché CSS funziona con elementi falsi?

(La maggior parte) i browser sono progettati per essere (in una certa misura) in avanti compatibili con le future aggiunte a HTML. Gli elementi non riconosciuti vengono analizzati nel DOM, ma non hanno semantics o rendering predefinito specializzato ad essi.

Quando un nuovo elemento viene aggiunto alla specifica, a volte CSS, Javascript e Aria possono essere utilizzati per fornire la stessa funzionalità nei browser più vecchi (e gli elementi devono apparire nel DOM per quelle lingue per essere in grado di manipolarli per aggiungere tale funzionalità ).

(C'è una specifica per elementi personalizzati, ma hanno requisiti di denominazione specifici e richiedono la registrazione utilizzando JavaScript.)

Perché il mio professore non vuole che io usi elementi inventati?

Non sono consentiti dalle specifiche HTML
Potrebbero essere in conflitto con gli elementi standard futuri con lo stesso nome
C'è probabilmente un elemento HTML esistente che è più adatto al compito

Anche; Perché non sapeva che gli elementi inventati esistessero e lavoravano con CSS. Sono rari?

Sì. Le persone non li usano perché hanno i problemi di cui sopra.

Question 2

Tl; dr

I tag personalizzati non sono validi in HTML. Ciò può portare a problemi di rendering.
Rende lo sviluppo futuro più difficile poiché il codice non è portatile.
HTML valido offre molti vantaggi come SEO, velocità e professionalità.

Risposta lunga

Ci sono Alcuni argomenti Quel codice con tag personalizzati è più utilizzabile.

Tuttavia, porta a HTML non valido. Il che non va bene per il tuo sito.

Il punto di CSS/HTML valido | Stackoverflow

Google lo preferisce quindi è buono per SEO.

Rende la tua pagina web più probabile che funzioni nei browser che non hai testato.

Ti fa sembrare più professionale (almeno per alcuni sviluppatori)

I browser conformi possono rendere [HTML valido più veloce

Indica un sacco di bug oscuri che probabilmente ti sei perso che influiscono sulle cose che probabilmente non hai testato, ad esempio il codepage o il set di lingue della pagina.

Perché convalidare | W3C

Convalida come strumento di debug

Convalida come controllo di qualità a prova di futuro

La convalida allevia la manutenzione

La convalida aiuta a insegnare buone pratiche

La convalida è un segno di professionalità

Question 3

Yada (ancora un'altra (diversa) risposta)

Modifica: consultare il commento da Boltclock in basso per quanto riguarda il tipo vs tag vs elemento. Di solito non mi preoccupo della semantica, ma il suo commento è molto appropriato e informativo.

Anche se ci sono già un sacco di buone risposte, hai indicato che il tuo professoressa ti ha spinto a pubblicare questa domanda in modo che sembri (formalmente) a scuola. Ho pensato di esporre un po 'più in profondità non solo su CSS ma anche sul meccanica di browser Web. Secondo Wikipedia, "CSS è un linguaggio del foglio di stile usato per descrivere ... un documento scritto in un Lingua di markup. "(Ho aggiunto l'enfasi su" A ") Si noti che non dice" scritto in HTML "molto meno una versione specifica di HTML. CSS può essere utilizzata su HTML, XHTML, XML, SGML, XAML, ecc. . Certo, hai bisogno di qualcosa che lo farà rendere Ognuno di questi tipi di documenti che applicheranno anche lo stile. Per definizione, CSS no sapere / capire / preoccuparti Tag del linguaggio di markup specifici. Quindi, i tag possono essere "non validi" per quanto riguarda HTML, ma non esiste un concetto di tag/elemento/tipo "valido" in CSS.

Moderno I browser visivi non sono programmi monolitici. Sono un amalgama di diversi "motori" che hanno lavori specifici da svolgere. A a minimo indispensabile Posso pensare a 3 motori, al motore di rendering, al motore CSS e al motore JavaScript/VM. Non sono sicuro che il parser faccia parte del motore di rendering (o viceversa) o se è un motore separato, ma hai l'idea.

Indipendentemente dal fatto che a visivo browser (~~Altri hanno già affrontato il fatto che lo schermo lettori Potrebbe avere altre sfide che si occupano di tag non validi~~) si applica la formattazione dipende dal fatto che il parser lasci il tag "non valido" nel documento e quindi se il motore di rendering applica gli stili a quel tag. Dal momento che renderebbe più difficile lo sviluppo/il mantenimento, i motori CSS non vengono scritti comprendere Che "Questo è un documento HTML, quindi ecco l'elenco di tag / elementi / tipi validi." I motori CSS trovano semplicemente Tag / elementi / tipi E poi dì al motore di rendering: "Ecco gli stili che dovresti applicare". Il fatto che il motore di rendering decida o meno di applicare effettivamente gli stili è in aumento.

Ecco un modo semplice per pensare al di base Flusso dal motore al motore: parser -> CSS -> rendering. In realtà è molto più contorto, ma questo è abbastanza buono per i principianti.

Questa risposta è già troppo lunga, quindi finirò qui.

Question 4

Elementi sconosciuti sono trattati come divs da tutti i browser moderni.Ecco perché funzionano.Questo è parte di imminente standard HTML5 che presenta una struttura modulare in cui i nuovi elementi possono essere aggiunti.

Nei vecchi browser (penso IE7-) è possibile applicare un Javascript-trucco dopo di che funzionerà anche.

Qui è un domanda correlata Ho trovato quando alla ricerca di un esempio.

Qui è un domanda su Javascript fix.Si scopre che è davvero IE7 che non supporta questi elementi fuori dalla scatola.

Anche;perché non sapeva a che il composto tag esistito e ha lavorato con i CSS.Sono rari?

Sì, abbastanza.Ma soprattutto:non servono altre finalità.E sono nuovo html5.Nelle precedenti versioni di HTML un tag sconosciuto non era valido.

Inoltre, gli insegnanti sembrano avere lacune di conoscenza, a volte.Questo potrebbe essere dovuto al fatto che hanno bisogno di insegnare agli studenti le nozioni di base su un determinato argomento, e non è davvero pagare per conoscere tutti i dettagli e molto aggiornato.Una volta ho avuto la detenzione a causa di un insegnante, ho programmato un virus, solo perché ho potuto fare un computer riprodurre musica utilizzando il play comando in GWBasic.(Storia vera, e sì, tempo fa).Ma qualunque sia la ragione, penso che il consiglio di non usare rito elementi è valida.

Question 5

In realtà puoi usare elementi personalizzati. Ecco le specifiche W3C su questo argomento:

http://w3c.github.io/WebComponents/Spec/Custom/

Ed ecco un tutorial che spiega come usarli:

http://www.html5rocks.com/en/tutorials/webComponents/Customelements/

Come sottolineato da @quentin: questa è una bozza di specifica nei primi giorni di sviluppo e che impone restrizioni a quali possono essere i nomi degli elementi.

Question 6

Ci sono alcune cose sulle altre risposte che sono solo poco formulate o forse un po 'errate.

Falso (ish): gli elementi HTML non standard non sono "consentiti", "illegali" o "non validi".

Non necessariamente. Loro sono "non conforme". Qual è la differenza? Qualcosa può "non conformarsi" ed essere comunque "consentito". Il W3C non manderà la polizia HTML a casa tua e ti porterà via.

Il W3C ha lasciato le cose in questo modo per un motivo. La conformità e le specifiche sono definite da una comunità. Se ti capita di avere una comunità più piccola che consuma HTML per scopi più specifici e tutti sono d'accordo su alcuni nuovi elementi di cui hanno bisogno per rendere le cose più facili, possono avere ciò che il W3C si riferisce "Altre specifiche applicabili". (Questo è un lordo rispetto alla semplificazione, ovviamente, ma hai l'idea)

Detto questo, i severi validatori dichiaranno che i tuoi elementi non standard non siano "non validi". Ma questo perché il compito del validatore è quello di garantire la conformità a qualsiasi specifica per la convalida, non per garantire la "legalità" per il browser o per uso.

Falso (ish): elementi HTML non standard volere provocare problemi di rendering

Forse, ma improbabile. (Sostituisci "Will" con "Might") L'unico modo in cui ciò dovrebbe comportare un problema di rendering è se l'elemento personalizzato è in conflitto con un'altra specifica, come una modifica alle specifiche HTML o un'altra specifica onorata all'interno dello stesso sistema (come SVG, matematica o qualcosa di personalizzato).

Infatti, Il motivo per cui CSS può modellare tag non standard è perché la specifica HTML chiaramente afferma Quello:

Gli agenti utente devono trattare elementi e attributi che non comprendono come semanticamente neutrali; Lasciandoli nel DOM (per i processori DOM) e lo styling secondo CSS (per i processori CSS), ma non infinire alcun significato da loro

Nota: Se vuoi utilizzare un tag personalizzato, ricorda solo una modifica alle specifiche HTML in un secondo momento, potrebbe far esplodere lo stile, quindi preparati. È davvero improbabile che il W3C implegerà il <imsocool> tag, tuttavia.

Tag non standard e JavaScript (tramite il DOM)

Il motivo per cui è possibile accedere e modificare elementi personalizzati usando JavaScript è perché il le specifiche parlano anche di come dovrebbero essere gestite nel DOM, che è l'API (davvero orribile) che ti consente di manipolare gli elementi sulla tua pagina.

L'interfaccia HTMLunkNownElement deve essere utilizzata per elementi HTML che non sono definiti da questa specifica (o altre specifiche applicabili).

TL; DR: conforme alle specifiche viene eseguito a fini di comunicazione e sicurezza. La non conformità è ancora consentita da tutto tranne che a validatore, il cui unico scopo è far rispettare la conformità, ma il cui uso è facoltativo.

Per esempio:

var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]

(Sono sicuro che questo disegnerà fiamme, ma ci sono i miei 2 centesimi)

Question 7

Secondo le specifiche:

CSS

UN Digitare il selettore è il nome di un tipo di elemento del linguaggio del documento scritto usando la sintassi dei nomi qualificati CSS

Pensavo che questo fosse chiamato il elemento selettore, ma a quanto pare è in realtà il genere selettore. Le specifiche continuano a parlare CSS qualified names che non ha dato alcuna restrizione a quali sono effettivamente i nomi. Vale a dire che fintanto che il selettore di tipo corrisponde alla sintassi del nome qualificato CSS è tecnicamente corretta CSS e corrisponderà all'elemento nel documento. Non esiste una restrizione specifica per CSS su elementi che non esistono in una particolare specifica: HTML o altro.

Html

Non ci sono restrizioni ufficiali su come includere tag nel documento che desideri. Tuttavia, dice la documentazione

Gli autori non devono utilizzare elementi, attributi o valori degli attributi a fini diversi dal loro scopo semantico previsto appropriato, poiché ciò impedisce al software di elaborare correttamente la pagina.

E in seguito dice

Gli autori non devono utilizzare elementi, attributi o valori degli attributi che non sono consentiti da questa specifica o altre specifiche applicabili, in quanto ciò rende significativamente più difficile l'estensione della lingua in futuro.

Non sono sicuro specificamente dove o se la specifica dice che lo sono elementi sconsiderati permesso, ma parla del HtmlunknownElement Interfaccia per elementi non riconosciuti. Alcuni browser potrebbero non riconoscere nemmeno elementi che si trovano nelle specifiche attuali (mi viene in mente IE8).

C'è un Draft per elementi personalizzati, tuttavia, ma dubito che sia ancora implementato ovunque.

Question 8

Ciò è possibile con HTML5 ma è necessario prendere in considerazione i browser più vecchi.

Se decidi di usarli allora, assicurati di commentare il tuo HTML !! Alcune persone potrebbero avere qualche problema a capire cosa sia, quindi un commento potrebbe farli risparmiare un sacco di tempo.

Qualcosa come questo,

<!-- Custom tags in use, refer to their CSS for aid -->

Quando crei il tuo tag/elementi personalizzati, i browser più vecchi non avranno idea di cosa sia proprio come elementi HTML5 come nav/section.

Se sei interessato a questo concetto, allora ti consiglio di farlo nel modo giusto.

Iniziare

Gli elementi personalizzati consentono agli sviluppatori Web di definire nuovi tipi di elementi HTML. La specifica è una delle numerose nuove primitive API che atterrano sotto l'ombrello dei componenti web, ma è probabilmente il più importante. I componenti Web non esistono senza le funzionalità sbloccate da elementi personalizzati:

Definire i nuovi elementi HTML/DOM Crea elementi che si estendono da altri elementi raggruppano la funzionalità personalizzata in un singolo tag estendi l'API degli elementi DOM esistenti

C'è molto che puoi farci e rende la tua sceneggiatura in quanto piace questo articolo. Elementi personalizzati che definiscono nuovi elementi in HTML.

Quindi ricapitoliamo,

Professionisti

Molto elegante e facile da leggere.
È bello non vederne così tanti divs. :p
Consente un'atmosfera univoca al codice

Contro

Il supporto del browser più vecchio è una cosa forte da considerare.
Altri sviluppatori potrebbero non avere idea di cosa fare se non sanno di tag personalizzati. (Spiega loro o aggiungi commenti per informarli)
Infine, una cosa da prendere in considerazione, ma non sono sicuro, sono elementi a blocchi e in linea. Usando i tag personalizzati finirai per scrivere più CSS a causa del tag personalizzato non avrà un lato predefinito.

La scelta dipende interamente da te e dovresti basarla su ciò che il progetto chiede.

Aggiornamento 1/2/2014

Ecco un articolo molto utile che ho trovato e ho pensato che avrei condiviso, Elementi personalizzati.

Impara la tecnologia perché elementi personalizzati? Gli elementi personalizzati consentono agli autori di definire i propri elementi. Gli autori associano il codice JavaScript con i nomi dei tag personalizzati, quindi usano quei nomi di tag personalizzati come farebbero qualsiasi tag standard.

Ad esempio, dopo aver registrato un tipo speciale di pulsante chiamato Super-Button, usa il pulsante Super in questo modo:

Gli elementi personalizzati sono ancora elementi. Possiamo creare, usare, manipolare e composizione altrettanto facilmente di qualsiasi standard o oggi.

Questa sembra un'ottima libreria da usare, ma ho notato che non ha superato lo stato di build di Window. Questo è anche in un pre-alfa credo, quindi vorrei tenere d'occhio questo mentre si sviluppa.

Question 9

Perché non vuole che tu li usi? Non sono comuni né parte dello standard HTML5. Tecnicamente, non sono ammessi. Sono un hack.

Mi piacciono io stesso, però. Potresti essere interessato a XHTML5. Ti consente di definire i tuoi tag e utilizzarli come parte dello standard.

Inoltre, come hanno sottolineato altri, sono non validi e quindi non portatili.

Perché non sapeva che esistono? Non lo so, tranne per il fatto che non sono comuni. Forse non era a conoscenza del fatto che tu potessi.

Question 10

I tag inventati non sono quasi mai usati, perché è improbabile che funzionino in modo affidabile in ogni browser attuale e in ogni browser futuro.

Un browser deve analizzare il codice HTML in elementi che conosce, per i tag inventati verranno convertiti in qualcos'altro per adattarsi al Modello Object Document (DOM). Poiché gli standard Web non coprono come gestire tutto ciò che è al di fuori degli standard, i browser Web tendono a gestire il codice non standard in modi diversi.

Lo sviluppo web è abbastanza complicato con un sacco di browser diversi che hanno le loro stranezze, senza aggiungere un altro elemento di incertezza. La migliore scommessa che si attacca con cose che sono effettivamente negli standard, questo è ciò che i venditori del browser cercano di seguire, quindi ha le migliori possibilità di funzionare davvero.

Question 11

Penso che i tag inventati siano potenzialmente più confusi o poco chiari delle P con ID (un blocco di testo in generale). Sappiamo tutti che AP con un ID è un paragrafo, ma chissà a cosa servono i tag inventati? Almeno questo è il mio pensiero. :) Quindi questo è più un problema di stile / chiarezza di una funzionalità.

Question 12

Altri hanno fatto punti eccellenti, ma vale la pena notare che se guardi un framework come Angularjs, esiste un caso molto valido per elementi e attributi personalizzati. Questi trasmettono non solo un migliore significato semantico all'XML, ma possono anche fornire comportamenti, guardare e sentire la pagina web.

Question 13

CSS è un linguaggio di foglio di stile che può essere utilizzato per presentare documenti XML, non solo (x) documenti HTML. Il tuo frammento con i tag inventati potrebbe far parte di un documento XML legale; Sarebbe uno se lo racchiudessi in un singolo elemento di radice. Probabilmente hai già un <html> ...</html> intorno ad esso? Qualsiasi browser corrente può visualizzare documenti XML.

Naturalmente non è un ottimo documento XML, manca di una grammatica e una dichiarazione XML. Se si utilizza invece un'intestazione di dichiarazione HTML (e probabilmente una configurazione del server che invia il tipo di mime corretto), sarebbe invece HTML illegale.

(X) HTML ha vantaggi rispetto agli XML semplici poiché gli elementi hanno un significato semantico che è utile nel contesto di una presentazione della pagina web. Gli strumenti possono funzionare con questa semantica, altri sviluppatori conoscono il significato, è meno soggetto a errori e meglio leggere.

Ma in altri contesti è meglio usare CSS con XML e/o XSLT per fare la presentazione. Questo è quello che hai fatto. Dato che questo non era il tuo compito, non sapevi cosa stavi facendo e HTML/CSS è il modo migliore per andare la maggior parte del tempo che dovresti attenersi ad esso nel tuo scenario.

Dovresti aggiungere un'intestazione HTML (x) al tuo documento in modo che gli strumenti possano darti messaggi di errore significativi.

Question 14

... Cambio semplicemente tutti i miei tag inventati in paragrafi con gli ID.

In realtà metto in discussione il suo suggerimento su come farlo correttamente.

UN  Il tag è per i paragrafi. Vedo le persone che lo usano sempre invece di un div - semplicemente per scopi di spaziatura o perché sembra più delicato. Se non è un paragrafo, non usarlo.
Non hai bisogno o vuoi attaccare gli ID su tutto a meno che tu non sia necessario prenderne di mira in modo specifico (ad esempio con JavaScript). Usa le classi o solo un div diretto.

Question 15

Sin dai suoi primi giorni CSS è stato progettato per essere agnostico di markup in modo che possa essere utilizzato con qualsiasi linguaggio di markup che produce albero allo stesso modo strutture DOM (SVG per esempio). Qualsiasi tag che sia conforme a name token La produzione è perfettamente valida in CSS. Quindi la tua domanda è piuttosto su HTML piuttosto che CSS stesso.

Gli elementi con tag personalizzati sono supportati dalle specifiche HTML5. HTML5 standardizza il modo in cui gli elementi sconosciuti devono essere analizzati nel DOM. Quindi HTML5 è la prima specifica HTML che consente elementi personalizzati in modo rigoroso. Devi solo usare HTML5 Doctype <!DOCTYPE html> nel tuo documento.

A partire dai nomi dei tag personalizzati stessi ...

Questo documento http://www.w3.org/tr/custom-elements/ Consiglia i tag personalizzati che scegli di contenere almeno un simbolo '-' (Dash). In questo modo non saranno in conflitto con futuri elementi HTML. Quindi è meglio cambiare il tuo dottore in qualcosa del genere:

<style>
so-cool {
    color:blue;
}
</style>

<body>
    <so-cool>HELLO</so-cool>
</body>

Question 16

Sorprendentemente, nessuno (incluso il mio io passato) ha menzionato l'accessibilità. Un altro motivo per cui l'utilizzo di tag validi anziché quelli personalizzati è per la compatibilità con la massima quantità di software, tra cui lettore di schermo e altri strumenti di cui le persone hanno bisogno a fini di accessibilità. Inoltre, leggi sull'accessibilità come Wai richiedere Fare siti Web accessibili, il che generalmente significa richiedere loro di utilizzare il markup valido.

^{Apparentemente nessuno l'ha menzionato, quindi lo farò.}

Questo è un sottoprodotto di Guerre del browser.

Negli anni '90, quando Internet stava iniziando a diventare mainstream, la concorrenza è aumentata nel mercato dei browser. Per rimanere competitivi e attirare gli utenti, alcuni browser (in particolare Internet Explorer) hanno cercato di essere utili e "intuitivi" tentando di capire quali progettisti di pagine significava e quindi consentito markup errato (ad es. foobar renderebbe correttamente come audace-italic).

Ciò aveva senso in una certa misura perché se un browser continuasse a lamentarsi degli errori di sintassi mentre un altro mangiava tutto ciò che ci ha lanciato e sputava un risultato (più o meno) corretto, allora le persone si affollavano naturalmente a quest'ultimo.

Mentre molti pensavano che le guerre del browser fossero finite, una nuova guerra tra i venditori del browser si è riacceso negli ultimi anni da quando è stato rilasciato Chrome, Apple ha ricominciato a crescere e spingendo Safari e cioè ha perso il suo dominio. (Potresti chiamarlo una "guerra fredda" a causa della cooperazione percepita e del sostegno degli standard da parte dei venditori del browser.) Pertanto, non è una sorpresa che anche i browser contemporanei che Presumibilmente Conformarsi rigorosamente agli standard Web in realtà cercare di essere "intelligenti" e consentire un comportamento standard come questo al fine di cercare di ottenere un vantaggio come prima.

Sfortunatamente, questo comportamento permissivo ha portato a un enorme (alcuni Potrebbe anche dire canceroso) crescita di pagine Web scarsamente contrassegnate. Poiché IE era il browser più indulgente e popolare e, a causa del continuo infranzione di Microsoft di standard, IE è diventato famoso per incoraggiare e promuovere il cattivo design e la propagazione e perpetuare pagine rotte.

Potresti essere in grado di cavartela con stranezze ed exploit come quello per ora su alcuni browser, ma a parte il puzzle o il gioco occasionali o qualcosa del genere, dovresti sempre attenersi standard web Quando si creano pagine Web e siti per assicurarsi che vengano visualizzati correttamente ed evitano che si rottano (possibilmente completamente ignorati) con un aggiornamento del browser.

Question 17

Mentre i browser generalmente metteranno in relazione CSS con i tag HTML indipendentemente dal fatto che siano validi o meno, non dovresti assolutamente farlo.

Tecnicamente non c'è nulla di sbagliato in questo dalla prospettiva CSS. Tuttavia, usare tag inventati è qualcosa che non dovresti mai fare in HTML.

HTML è un linguaggio di markup, il che significa che ogni tag corrisponde a un tipo specifico di informazioni.

I tag inventati non corrispondono a nessun tipo di informazione. Ciò creerà problemi da crawler Web, come Google.

Ulteriori informazioni su Importanza del markup corretto.

Modificare

I Div si riferiscono a gruppi di più elementi correlati, destinati a essere visualizzati in forma di blocco e possono essere manipolati come tali.

Le span si riferiscono ad elementi che devono essere in stile diverso rispetto al contesto che si trovano attualmente e sono pensati per essere visualizzati in linea, non come blocco. Un esempio è se poche parole in una frase devono essere tutte i limiti.

I tag personalizzati non sono correlati a nessun standard e quindi Span/Div devono invece essere utilizzati con le proprietà di classe/ID.

Ci sono molto esenzioni specifiche a questo, come Angolare js

Question 18

Sebbene CSS abbia una cosa chiamata "selettore tag", in realtà non sa cosa sia un tag. È rimasto per definire la lingua del documento. CSS è stato progettato per essere utilizzato non solo con HTML, ma anche con XML, dove (supponendo che tu non stia usando un DTD o un altro schema di validazione) i tag possono essere praticamente qualsiasi cosa. Potresti usarlo anche con altre lingue, anche se dovresti trovare la tua semantica per esattamente quali cose come "tag" e "attributi" corrispondono.

I browser generalmente applicano CSS a tag sconosciuti in HTML, perché questo è considerato migliore che rompere completamente: almeno possono visualizzare qualcosa. Ma è molto Cattiva pratica per usare deliberatamente tag "falsi". Uno dei motivi è che i nuovi tag vengono definiti di volta in volta, e se uno è definito che assomiglia al tuo tag falso ma non funziona proprio allo stesso modo, ciò può causare problemi con il tuo sito su nuovi browser.

Question 19

Perché CSS funziona con elementi falsi? Perché non fa male a nessuno perché non dovresti usarli comunque.

Perché il mio professore non vuole che io usi elementi inventati? Perché se quell'elemento è definito da una specifica in futuro, il tuo elemento avrà un comportamento imprevedibile.

Inoltre, perché non sapeva che esistono elementi inventati e lavorano con CSS. Sono rari? Perché lui, come la maggior parte degli altri sviluppatori web, capisce che non dovremmo usare cose che potrebbero rompersi in modo casuale in futuro.