Perché CSS funziona con elementi falsi?


438

Nella mia classe, stavo giocando e ho scoperto che CSS funziona con elementi inventati.

Esempio:

imsocool {
    color:blue;
}
<imsocool>HELLO</imsocool>

Quando il mio professore mi ha visto per la prima volta usare questo, era un po 'sorpreso che gli elementi di trucco funzionassero e mi ha raccomandato di cambiare semplicemente tutti i miei elementi di trucco in paragrafi con ID.

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

Inoltre, perché non sapeva che esistono elementi inventati e funzionano con i CSS. Non sono comuni?


62
L'HTML è un modo per fornire significato ai dati che possono essere compresi da un'ampia varietà di mezzi (inclusi utenti e browser). I tag creati non aggiungono alcun significato. Questo è uno dei tanti motivi per cui non vuole che tu li usi.
punkrockbuddyholly,

59
@MrMisterMan in realtà penso che lo facciano. Cosa c'è di più significativo - <p>555-212-2344</p>o <supportPhone> 555-212-2344 </supportPhone>
Yuriy Galanter

169
@YuriyGalanter <p class = "supportPhone">; P
punkrockbuddyholly

30
@MrMisterMan Ricorda, tutte queste regole e costrutti di programmazione sono stati inventati da persone non più intelligenti di te, e puoi cambiarlo, puoi influenzarlo, puoi costruire le tue cose che altre persone possono usare.
L_7337,

90
Potrei sottolineare che quello che stai facendo è fondamentalmente XML, non HTML. XML è un linguaggio di markup più astratto che ti consente di rappresentare i dati nel modo "utile" che descrivi, ad es. con significato semantico allegato. È quindi possibile utilizzare una trasformazione XSLT per eseguire il rendering dei dati in HTML
ose

Risposte:


470

Perché CSS funziona con elementi falsi?

I browser (la maggior parte) sono progettati per essere (in una certa misura) compatibili con future aggiunte HTML. Gli elementi non riconosciuti vengono analizzati nel DOM, ma non sono associati a semantica o rendering predefinito specializzato.

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 affinché tali lingue possano manipolarli per aggiungere quella funzionalità ).

(Anche se va notato che è in corso un lavoro per definire un mezzo per estendere l'HTML con elementi personalizzati , ma questo lavoro è attualmente nelle prime fasi di sviluppo, quindi dovrebbe probabilmente essere evitato fino a quando non è maturato.)

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

  • Non sono consentiti dalla specifica HTML
  • Potrebbero entrare in conflitto con futuri elementi standard con lo stesso nome
  • Probabilmente esiste un elemento HTML esistente che si adatta meglio all'attività

Anche; perché non sapeva che esistevano elementi inventati e funzionavano con i CSS? Non sono comuni?

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


30
"Non sono consentiti dalla specifica HTML" Non necessariamente vero. Non sono conformi alla specifica dello spazio dei nomi HTML, ma la specifica HTML5 è una cosa molto più ampia che consente specifiche personalizzate e indica esplicitamente come gestire tali cose per quanto riguarda la gestione CSS e API (DOM).
Ben Lesh,

4
Esistono già librerie, in particolare Angular.js, che ti consentono di estendere HTML con elementi personalizzati. Forse non nel senso che intendi perché gli elementi sono semplicemente analizzati da javascript e tradotti in quelli reali di solito, ma se stai cercando di estendere html con tag personalizzati, puoi farlo con Angular
Charlie Martin

11
+1 per "Potrebbero entrare in conflitto con gli standard futuri". Ricorda che potrebbe funzionare ora, ma deve funzionare per 3-4 anni dopo aver iniziato.
tim.baker

70
Mi piace avere un tag <ninja> per nascondere gli elementi dom invece di applicare la visualizzazione dello stile: nessuno, ad esempio: <ninja> Alcune cose nascoste </ninja>
kiranvj

18
Un altro punto davvero importante: i browser speciali per non vedenti o persone con capacità altrimenti limitate utilizzano gli elementi HTML corretti per cose diverse (facilita la navigazione nella pagina seguendo le intestazioni, ad esempio). Quindi la semantica mancante + il rendering predefinito potrebbero non influenzare troppo i normali browser, ma questi browser speciali saranno probabilmente confusi, riducendo drasticamente l'usabilità del tuo sito web.
Arve Systad,

98

TL; DR

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

Risposta lunga

Ci sono alcuni argomenti cui il codice con tag personalizzati è più utilizzabile.

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

The Point of Valid CSS / HTML | StackOverflow

  • Google lo preferisce, quindi è buono per il SEO.
  • Rende più probabile che la tua pagina web funzioni nei browser che non hai testato.
  • Ti fa sembrare più professionale (almeno per alcuni sviluppatori)
  • I browser compatibili possono eseguire il rendering [HTML valido più veloce]
  • Indica un mucchio di bug oscuri che probabilmente ti sei perso che riguardano cose che probabilmente non hai testato, ad esempio la tabella codici 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 facilita la manutenzione
  • La convalida aiuta a insegnare le buone pratiche
  • La convalida è un segno di professionalità

8
Un altro argomento per un codice valido è che, se è necessario passare a un altro sviluppatore o si lavora in gruppo, gli altri membri o il nuovo sviluppatore dovrebbero immediatamente capire cosa si sta tentando di ottenere. . . Con tag inventati non validi, questo può diventare molto difficile ...
Pat Dobson,

9
AKA. Sviluppo futuro e facilitazione della manutenzione.
Dan Grahn,

68

YADA (ancora un'altra (diversa) risposta)

Modifica: vedere il commento da BoltClock in basso relativo al tipo vs tag vs elemento. Di solito non mi preoccupo della semantica, ma il suo commento è molto appropriato e informativo.

Sebbene ci siano già un sacco di buone risposte, hai indicato che il tuo professore ti ha spinto a pubblicare questa domanda, quindi sembra che tu sia (formalmente) a scuola . Ho pensato di esporre un po 'più in profondità non solo i CSS ma anche la meccanica dei browser web. Secondo Wikipedia , "CSS è un linguaggio di fogli di stile usato per descrivere ... un documento scritto in un linguaggio di markup". (Ho aggiunto l'enfasi su "a") Si noti che non dice "scritto in HTML" e tanto meno una versione specifica di HTML. I CSS possono essere usati su HTML, XHTML, XML, SGML, XAML, ecc. Ovviamente, hai bisogno di qualcosa che ti renderà ciascuno di questi tipi di documenti applichi anche lo stile. Per definizione,conoscere / comprendere / preoccuparsi dei tag specifici del linguaggio di markup. Pertanto, i tag possono essere "non validi" per quanto riguarda l'HTML, ma non esiste un concetto di tag / elemento / tipo "valido" nei CSS.

I browser visivi moderni non sono programmi monolitici. Sono un insieme di "motori" diversi che hanno compiti specifici da svolgere. Come minimo posso pensare a 3 motori, il motore di rendering, il motore CSS e il motore javascript / VM. Non sono sicuro se il parser fa parte del motore di rendering (o viceversa) o se si tratta di un motore separato, ma si ottiene l'idea.

Se un browser visivo ( altri hanno già affrontato il fatto che gli screen reader potrebbero avere altre difficoltà a gestire tag non validi ) 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. Poiché renderebbe più difficile lo sviluppo / la manutenzione, i motori CSS non sono scritti per capire che "Questo è un documento HTML, quindi ecco l'elenco di tag / elementi / tipi validi". I motori CSS trovano semplicemente tag / elementi / tipi e quindi dicono al motore di rendering "Ecco gli stili che dovresti applicare". Indipendentemente dal fatto che il motore di rendering decida o meno di applicare effettivamente gli stili, dipende da esso.

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

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


10
Anche se hai detto che "tag" è diventato un termine comune per elementi, che non posso e non sono in disaccordo, ciò non cambia il fatto che il termine corretto per loro sia ancora "elementi". Un tag è specificamente una funzione di sintassi di HTML e XML e potrebbe non esistere in altri linguaggi di documenti compatibili con CSS. Quindi, dire che gli stili CSS "tag" come spesso li chiamano le persone non sta facendo molta giustizia all'agnosticismo del linguaggio documentale dei CSS.
BoltClock

53

Gli elementi sconosciuti sono trattati come divi browser moderni. Ecco perché funzionano. Questo fa parte dell'imminente standard HTML5 che introduce una struttura modulare alla quale è possibile aggiungere nuovi elementi.

Nei browser più vecchi (penso che IE7-) puoi applicare un trucco Javascript dopo il quale funzioneranno anche loro.

Ecco una domanda correlata che ho trovato quando cercavo un esempio.

Ecco una domanda sulla correzione Javascript . Si scopre che è davvero IE7 che non supporta questi elementi immediatamente.

Anche; perché non sapeva che i tag inventati esistevano e funzionavano con i CSS? Non sono comuni?

Sì, abbastanza. Ma soprattutto: non servono a scopi aggiuntivi. E sono nuovi in ​​HTML5. Nelle versioni precedenti di HTML un tag sconosciuto non era valido.

Inoltre, gli insegnanti sembrano avere delle lacune nelle loro conoscenze, a volte. Ciò potrebbe essere dovuto al fatto che devono insegnare agli studenti le nozioni di base su una determinata materia, e non paga davvero conoscere tutti i dettagli ed essere davvero aggiornati. Una volta sono stato detenuto perché un insegnante pensava che io programmassi un virus, solo perché avrei potuto far riprodurre musica al computer usando il playcomando in GWBasic. (Storia vera e sì, molto tempo fa). Ma qualunque sia la ragione, penso che il consiglio di non usare elementi personalizzati sia valido.


3
@OnoSendai Mi hai fatto dubitare, ma penso davvero che siano resi come "elementi a blocchi senza markup aggiuntivo", quindi sostanzialmente come i div.
GolezTrol,

6
@OnoSendai Un elemento a blocchi può avere la proprietà display di blocco , ma non è necessario. Ad esempio, i tag anchor sono stati promossi per bloccare lo stato (il che significa che è consentito inserire elementi di blocco come div al loro interno), ma hanno ancora la proprietà di visualizzazione incorporata.
cimmanon,

8
Il valore iniziale di displayè inline, quindi il commento di @ OnoSendai è corretto.
BoltClock

2
@cimmanon: gli aelementi hanno ora un modello di contenuto trasparente, quindi se sono bloccati o in linea dipende dal fatto che il loro antenato sia in blocco o in linea. Questa risposta parla di elementi sconosciuti, per i quali HTML non definisce un modello di contenuto. Per quanto riguarda i CSS, se non esiste un displayvalore predefinito del browser , utilizza il valore iniziale.
BoltClock

1
@ BoltClock'saUnicorn Quindi questo significa che <div> <a> foo </a> <a> bar </a> </div> renderà i due tag <a> come blocchi? Sembra un po 'sospetto ...
soffice

27

In realtà puoi usare elementi personalizzati. Ecco le specifiche del 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 su quali possono essere i nomi degli elementi.


7
Va notato che questa è una bozza di specifica nei primi giorni di sviluppo e che impone restrizioni su ciò che possono essere i nomi degli elementi.
Quentin,

2
+1 Non sapevo che W3C usasse githubma in effetti usano.
Vitor Canova,

22

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

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

Non necessariamente. Sono "non conformi" . Qual è la differenza? Qualcosa può "non conformarsi" ed essere ancora "permesso". Il W3C non invierà la polizia HTML a casa tua e ti trascinerà via.

Il W3C ha lasciato le cose in questo modo per un motivo. Conformità e specifiche sono definite da una comunità. Se ti capita di avere una comunità più piccola che consuma HTML per scopi più specifici e tutti concordano su alcuni nuovi elementi di cui hanno bisogno per rendere le cose più facili, possono avere quelle che il W3C definisce "altre specifiche applicabili" . (questa è una semplificazione eccessiva, ovviamente, ma hai l'idea)

Detto questo, i validatori rigorosi dichiareranno i tuoi elementi non standard come "non validi". ma questo perché il compito del validatore è garantire la conformità a qualunque specifica per la quale sta convalidando, non garantire la "legalità" per il browser o per l' uso .

FALSE (ish): elementi HTML non standard si tradurrà in problemi di rendering

Forse, ma improbabile. (sostituisci "will" con "might") L'unico modo in cui ciò dovrebbe comportare un problema di rendering è se il tuo elemento personalizzato è in conflitto con un'altra specifica, come una modifica alla specifica HTML o un'altra specifica onorata all'interno dello stesso sistema (come SVG, Math o qualcosa di personalizzato).

In effetti, il motivo per cui i CSS possono modellare tag non standard è perché la specifica HTML afferma chiaramente che:

Gli interpreti devono trattare elementi e attributi che non comprendono come semanticamente neutri; lasciandoli nel DOM (per i processori DOM) e disegnandoli secondo i CSS (per i processori CSS), ma non inferendo alcun significato da essi

Nota: se vuoi usare un tag personalizzato, ricorda che una modifica alle specifiche HTML in un secondo momento potrebbe far esplodere il tuo stile, quindi preparati. È davvero improbabile che il W3C implementerà il <imsocool>tag, tuttavia.

Tag e JavaScript non standard (tramite DOM)

Il motivo per cui puoi accedere e modificare elementi personalizzati usando JavaScript è perché la specifica parla anche di come dovrebbero essere gestiti 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: la conformità alle specifiche viene effettuata ai fini della comunicazione e della sicurezza. La non conformità è ancora consentita da tutto tranne che da un 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 attirerà fiamme, ma ci sono i miei 2 centesimi)


3
Non solo l'HTML specifica come gli elementi debbano essere trattati con il CSS, ma le specifiche CSS sono, per la maggior parte, anche documentate dal linguaggio agnostico di progettazione (questo è già un po 'implicito in alcune altre risposte, ma lo noto qui per convenienza). Se esiste un comportamento specifico di HTML e / o XHTML, viene sempre indicato , anche nel testo informativo (ad es. "L'ID di un elemento HTML è specificato dall'attributo id"), non solo il testo normativo (vedere Backgrounds and Borders 3 per un esempio).
BoltClock

18

Secondo le specifiche:

CSS

Un selettore del tipo è il nome di un tipo di elemento del linguaggio del documento scritto utilizzando la sintassi dei nomi qualificati CSS

Pensavo che questo fosse chiamato selettore di elementi , ma apparentemente in realtà è il selettore di tipi . Le specifiche continuano a parlareCSS qualified names che non pone restrizioni su quali siano effettivamente i nomi. Ciò significa che fino a quando il selettore del tipo corrisponde alla sintassi del nome qualificato CSS è tecnicamente corretto CSS e corrisponderà all'elemento nel documento. Non ci sono restrizioni specifiche per CSS su elementi che non esistono in una specifica specifica - HTML o altro.

HTML

Non ci sono restrizioni ufficiali sull'inclusione di eventuali tag nel documento desiderato. Tuttavia, la documentazione dice

Gli autori non devono utilizzare elementi, attributi o valori di attributo per scopi diversi dal loro scopo semantico previsto appropriato, in quanto ciò impedisce al software di elaborare correttamente la pagina.

E poi dice

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

Non sono sicuro in particolare dove o se la specifica dice che sono consentiti elementi sconosciuti , ma parla dell'interfaccia HTMLUnknownElement per gli elementi non riconosciuti. Alcuni browser potrebbero non riconoscere nemmeno gli elementi presenti nelle specifiche correnti (mi viene in mente IE8).

Tuttavia, esiste una bozza per gli elementi personalizzati , ma dubito che sia stata implementata ovunque.


Penso che la maggior parte di noi li consideri come selettori di elementi, ma ha senso che siano selettori di tipo "ufficialmente" .
Andrew Steitz,

@Andrew Steitz: pensala in questo modo: element: type :: person: name. Puoi avere molti elementi di diversi tipi, ognuno dei quali è di un solo tipo e allo stesso modo puoi avere molte persone, ognuna con un nome. I selettori funzionano su un albero del documento e ogni selettore può abbinare un numero di elementi dell'albero del documento, che puoi restringere con un selettore di classe, un selettore ID, un selettore di attributi ... o un selettore di tipi. Qualunque cosa tu usi, stai ancora abbinando elementi. Quindi in questo caso "selettore di elementi" non avrebbe senso: tutte queste cose sarebbero selettori di elementi.
BoltClock

@ BoltClock'saUnicorn: Vero, ma classe, ID e attributo sono tutti, uh, attributi (LOL) di un "elemento", cioè il "coso" all'interno delle parentesi angolari. Descrivono l '"elemento" di cui risiedono i tag di apertura. Sì, <a> e <div> sono "tipi" specifici di elementi, ma dubito che chiunque chiamerebbe classe, ID e attributi "elementi". Sono totalmente d'accordo sul fatto che tutti i selettori sono realmente selettori di "elementi", ma in USO COMUNE, le persone di solito si riferiscono ai selettori di "tipo" come selettori di "elementi". Questo era il punto del mio commento precedente. Mi dispiace non è stato chiaro. :-)
Andrew Steitz,

@ExplosionPills - Le specifiche HTML non dicono che gli elementi sconosciuti non sono consentiti, ma poiché ogni elemento ha un elenco elencato di nomi di elementi che sono consentiti come suoi figli (cioè il suo modello di contenuto), non è necessario. Non esiste semplicemente un elemento sconosciuto come figlio di un elemento consentito. Applicazione di HTMLUnknownElement a tali elementi fa parte delle specifiche precedenti - ovvero che cosa devono fare i consumatori HTML con documenti validi o meno - e non parte di ciò che gli autori devono fare per rendere validi i loro documenti.
Alohci,

@Alohci intendo dire che non è consentito nel senso che verrebbero scartati dal DOM invece di essere semanticamente non validi
Pillole di esplosione il

13

Questo è 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 difficoltà a capire di cosa si tratta, quindi un commento potrebbe far loro 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 hanno idea di cosa siano gli elementi html5 come nav/ section.

Se sei interessato a questo concetto, 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 tante nuove primitive API che atterrano sotto l'ombrello di Web Components, ma è probabilmente la più importante. I componenti Web non esistono senza le funzioni sbloccate da elementi personalizzati:

Definire nuovi elementi HTML / DOM Creare elementi che si estendono da altri elementi Raggruppare logicamente funzionalità personalizzate in un singolo tag Estendere l'API degli elementi DOM esistenti

C'è molto che puoi fare con esso e rende la tua sceneggiatura meravigliosa come piace a questo articolo. Elementi personalizzati che definiscono nuovi elementi in HTML .

Quindi ricapitoliamo,

Professionisti

  • Molto elegante e di facile lettura.

  • È bello non vederne così tante divs. : p

  • Consente una sensazione unica al codice

Contro

  • Il supporto del browser precedente è una cosa importante da considerare.

  • Altri sviluppatori potrebbero non avere idea di cosa fare se non conoscono i tag personalizzati. (Spiegagli o aggiungi commenti per informarli)

  • Infine una cosa da prendere in considerazione, ma non sono sicuro, sono gli elementi di blocco e in linea. Usando i tag personalizzati finirai per scrivere più css perché il tag personalizzato non avrà un lato predefinito.

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

Aggiornamento 1/2/2014

Ecco un articolo molto utile che ho trovato e ho pensato di condividere, Elementi personalizzati .

Scopri la tecnologia Perché Custom Elements? Gli elementi personalizzati consentono agli autori di definire i propri elementi. Gli autori associano il codice JavaScript ai nomi dei tag personalizzati, quindi utilizzano tali nomi di tag personalizzati come farebbero per qualsiasi tag standard.

Ad esempio, dopo aver registrato un tipo speciale di pulsante chiamato super-pulsante, utilizzare il super pulsante in questo modo:

Gli elementi personalizzati sono ancora elementi. Siamo in grado di creare, utilizzare, manipolare e comporre con la stessa facilità di qualsiasi standard o oggi.

Sembra un'ottima libreria da usare ma ho notato che non ha superato lo stato di Build di Windows. Anche questo è in una pre-alfa, quindi vorrei tenerlo d'occhio mentre si sviluppa.


3
" Other developers may have no clue what to do if they don't know about custom tags." Odio questa discussione. Si suppone che anche altri sviluppatori imparino nuove cose e se non comprendono le tecniche utilizzate nel tuo codice, dovrebbero esserti grati per aver messo in evidenza le loro carenze. Forse è un po 'ingiusto in questo caso, perché i tag personalizzati esistono solo come bozze, ma ho sentito lo stesso argomento quando ho usato tecniche standardizzate adeguate.
GolezTrol,

1
Non sto dicendo che lo sostengo, ma molti sviluppatori non continuano a imparare. Non c'è quasi motivo di non commentare qualcosa se è un po 'complesso o nuovo. Tutti commentiamo che i nostri script sono corretti? Per mostrare ciò che stiamo eseguendo e come, lo stesso con i tag personalizzati.
Josh Powell,

1
Certo, se si tratta solo di aggiungere commenti. Pensavo volessi dire che non dovresti usare affatto elementi personalizzati perché le altre persone non capiranno. Aggiungere un piccolo commento quando si aggiunge una tecnica meno utilizzata è una buona cosa da fare. Fai attenzione ai commenti in HTML, però. Possono finire sul client, consumando larghezza di banda e possibilmente rivelando dettagli di implementazione di cui non vuoi che i tuoi visitatori siano a conoscenza. Ma in alternativa puoi aggiungere commenti come commenti PHP / ASP, quindi sono ancora nel modello, ma rimangono sul server.
GolezTrol,

1
@GolezTroi, non è che non dovresti mai fare cose che sfidano altri sviluppatori, è una questione di costi-benefici. Se fare qualcosa che è più difficile per il prossimo sviluppatore rende legittimamente il tuo codice migliore e più pulito, fallo. Ma non fare cose nodose solo per divertimento.
Boston

1
@JoshPowell I commenti non dovrebbero riguardare cosa e come (il codice dice già questo, e se non è abbastanza chiaro, riscrivi il codice fino a quando non lo è), ma dovrei dirmi perché . Ci sono alcune cose peggiori di un sacco di commenti che dicono solo che la sendmailfunzione invia posta o qualcosa del genere. Sarei più interessato al motivo per cui invii posta e se il nome della funzione lo rende ovvio, fantastico! Quindi non ho bisogno di un commento, che è il caso ideale. Leggerò comunque il codice.
Christopher Creutzig,

4

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

Mi piacciono, però. Potresti essere interessato a XHTML5. Ti permette di definire i tuoi tag e usarli come parte dello standard.

Inoltre, come altri hanno sottolineato, non sono validi e quindi non sono 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.


2
Non esiste XHTML5 - c'era un gruppo di lavoro che cercava di realizzare XHTML 2 ma si è frantumato anni fa.
massimo

1
@papirtiger: XHTML5 è HTML5 servito come XML, ma hai ragione nel dire che non esiste uno standard XHTML indipendente oltre XHTML 1.1.
BoltClock

1
Quindi non v'è XHTML5, ma sembra differire difficilmente da HTML5 su questo argomento di tag personalizzati. Pertanto, ritengo che l'affermazione su XHTML5 che consente di definire tag aggiuntivi in ​​contrasto con HTML5 sia errata, il che potrebbe spiegare il downvote, anche se non sono abbastanza sicuro su XHTML5 per valutare o sottovalutare questa risposta.
GolezTrol,

1
Secondo la bozza HTML5 del W3C, HTML e XHTML sono (ora) "sintassi concrete" che rappresentano lo stesso "linguaggio astratto". Hanno le stesse caratteristiche fondamentali, tranne quelle che hanno senso solo in una sintassi (spazi dei nomi XML, interruttore parser noscript HTML): w3.org/TR/html5/introduction.html#html-vs-xhtml
IMSoP

2

I tag inventati non vengono quasi mai utilizzati, poiché è improbabile che funzionino in modo affidabile in tutti i browser correnti e in tutti i browser futuri.

Un browser deve analizzare il codice HTML in elementi che conosce, in tag inventati verranno convertiti in qualcos'altro per adattarsi al modello a oggetti del documento (DOM). Poiché gli standard Web non coprono il modo in cui 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 è attenersi a cose che sono effettivamente negli standard, questo è ciò che i fornitori di browser cercano di seguire, in modo che abbia le migliori possibilità di funzionare effettivamente.


2

Penso che i tag inventati siano potenzialmente più confusi o poco chiari di quelli con ID (qualche blocco di testo in generale). Sappiamo tutti che ap con un ID è un paragrafo, ma chi sa a cosa sono destinati i tag inventati? Almeno questo è il mio pensiero. :) Quindi questo è più un problema di stile / chiarezza che di funzionalità.


3
Grazie fata grammatica :)
runelynx il

2

Altri hanno fatto punti eccellenti, ma vale la pena notare che se si osserva un framework come AngularJS , esiste un caso molto valido per elementi e attributi personalizzati. Questi non solo trasmettono un significato semantico migliore all'xml, ma possono anche fornire comportamento, aspetto e aspetto alla pagina Web.


2

CSS è un linguaggio di fogli di stile che può essere utilizzato per presentare documenti XML, non solo (X) documenti HTML. Lo snippet con i tag inventati potrebbe far parte di un documento XML legale; sarebbe uno se lo racchiudessi in un singolo elemento radice. Probabilmente hai già un <html> ...</html>giro? Qualsiasi browser corrente può visualizzare documenti XML.

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

(X) HTML presenta vantaggi rispetto al semplice XML in quanto gli elementi hanno un significato semantico utile nel contesto di una presentazione di una pagina Web. Gli strumenti possono funzionare con questa semantica, altri sviluppatori ne conoscono il significato, è meno soggetto a errori e migliore da leggere.

Ma in altri contesti è meglio usare CSS con XML e / o XSLT per fare la presentazione. Questo è quello che hai fatto. Poiché 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 al tuo scenario.

È necessario aggiungere un'intestazione (X) HTML al documento in modo che gli strumenti possano fornire messaggi di errore significativi.


2
No, non è affatto un XML (ben formato) legale. C'è un <style>elemento, quindi ... un <body>elemento. Un documento XML deve avere un solo elemento radice; in questo caso, o l' <style>elemento è l'elemento radice ma <body>interferisce, oppure è necessario aggiungere un elemento radice facendo di entrambi i suoi figli. A meno che non si sostituisca l' <style>elemento con un riferimento al foglio di stile (anche un URI di dati come <?xml-stylesheet href="data:text/css,imsocool { color: blue; }"?>funzionerebbe bene) in modo che l'elemento radice diventi <body>.
BoltClock

2

... cambio semplicemente tutti i miei tag inventati in paragrafi con ID.

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

  1. Un <p>tag è per i paragrafi. Vedo le persone usarlo tutto il tempo invece di un div - semplicemente per scopi di spaziatura o perché sembra più delicato. Se non è un paragrafo, non usarlo.

  2. Non è necessario o non si desidera applicare gli ID su tutto, a meno che non sia necessario indirizzarli in modo specifico (ad es. Con Javascript). Usa le lezioni o semplicemente un div diretto.


2

Sin dai suoi inizi, il CSS è stato progettato per essere indipendente dal markup, quindi può essere utilizzato con qualsiasi linguaggio di markup producendo strutture DOM simili ad alberi (SVG per esempio). Qualsiasi tag conforme alla name tokenproduzione è perfettamente valido nei CSS. Quindi la tua domanda riguarda piuttosto l'HTML che il CSS stesso.

Gli elementi con tag personalizzati sono supportati dalla specifica HTML5. HTML5 standardizza il modo in cui gli elementi sconosciuti devono essere analizzati nel DOM. Quindi HTML5 è la prima specifica HTML che abilita gli elementi personalizzati in senso stretto. Hai solo bisogno di 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/ raccomanda tag personalizzati che si sceglie di contenere almeno un simbolo '-' (trattino). In questo modo non entreranno in conflitto con i futuri elementi HTML. Pertanto è meglio cambiare il tuo documento in qualcosa del genere:

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

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

2

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

Questo è un sottoprodotto delle guerre del browser .

Negli anni '90, quando Internet stava iniziando a diventare mainstream, la concorrenza si è sviluppata nel mercato dei browser. Per rimanere competitivi e attirare utenti, alcuni browser (in particolare Internet Explorer) hanno cercato di essere utili e "user-friendly" tentando di capire cosa significassero i progettisti di pagine e quindi permettevano markup errati (ad es.<b><i>foobar</b></i> Verrebbero correttamente visualizzati in grassetto- corsivo).

Ciò aveva senso in una certa misura perché se un browser continuava a lamentarsi degli errori di sintassi mentre un altro mangiava qualsiasi cosa tu gli lanciassi e sputasse un risultato (più o meno corretto), allora le persone si affollerebbero naturalmente a quest'ultimo.

Mentre molti pensavano che le guerre del browser fossero finite, una nuova guerra tra i fornitori di browser si è riaccesa negli ultimi anni da quando Chrome è stato rilasciato, Apple ha ricominciato a crescere e ha spinto Safari e IE ha perso il suo dominio. (Potresti definirla una "guerra fredda" a causa della cooperazione percepita e del supporto degli standard da parte dei fornitori di browser.) Pertanto, non è una sorpresa che persino i browser contemporanei che presumibilmente si conformano rigorosamente agli standard web, in realtà cercano di essere "intelligenti" e consentire comportamenti standard come questo al fine di cercare di ottenere un vantaggio come prima.

Sfortunatamente, questo comportamento permissivo ha portato a una crescita massiccia ( qualcuno potrebbe addirittura dire canceroso) di pagine Web scarsamente contrassegnate. Poiché IE era il browser più indulgente e popolare e, a causa del continuo fluttuazione degli standard di Microsoft, IE è diventato famoso per incoraggiare e promuovere la cattiva progettazione e la propagazione e la perpetuazione di pagine spezzate.

Per ora potresti essere in grado di cavartela usando stranezze e exploit simili su alcuni browser, ma a parte il puzzle o il gioco occasionale o qualcosa del genere, dovresti sempre attenerti agli standard web quando crei pagine Web e siti per assicurarti che vengano visualizzati correttamente e evitare che si rompano (possibilmente completamente ignorati) con un aggiornamento del browser.


Direi che incolpare questa particolare stranezza su IE è un po 'fuori base, perché quando un gruppo di nuovi tag è stato aggiunto ufficialmente (per HTML5), IE era l'unico browser principale che richiedeva uno specifico "shim" per renderli stylable . Ciò era in parte dovuto ai regimi di aggiornamento più aggressivi di altri browser (il che significa che le vecchie versioni di IE si aggirano più a lungo rispetto alle vecchie versioni di Chrome di Firefox), ma è piuttosto il contrario di IE che è "il più indulgente".
IMSoP

HTML5? Eh? <imsocool>non è un nuovo tag in HTML5. Questo non ha nulla a che fare con HTML5 o IE 8, 9, ecc. Questo tipo di comportamento non è una nuova stranezza; è un sottoprodotto di guerre di browser di anni fa . Anche se IE non è responsabile degli attuali reati standard (anche se per l'ira degli sviluppatori web, si rifiutano ancora di conformarsi correttamente), sono stati sicuramente noti per aver promosso pratiche di codifica scadenti per anni. Più specificamente i browser indulgenti (IE è il peggior trasgressore) sono arrivati ​​nel momento peggiore, proprio quando Internet stava iniziando a decollare e gli sviluppatori web hanno iniziato a imparare l'HTML ... in modo errato.
Synetech,

Non ho detto che questo avesse qualcosa a che fare con HTML5, ma ha a che fare con tag non standard (come ad esempio <header>fino a quando HTML5 non è diventato lo standard di destinazione) di cui le vecchie versioni di IE non sono certamente "tolleranti". Anche la clemenza non è la stessa della non conformità - HTML5 è uno standard estremamente pragmatico che accetta l'esistenza di HTML mal formato, a differenza dell'idealismo delle precedenti specifiche del W3C, e questa "clemenza" appoggia probabilmente la crescita democratica del web.
IMSoP

Ancora una volta, non sto parlando di alcun browser o versione specifici. Sto spiegando che la clemenza in generale è un effetto collaterale delle guerre dei browser. IE ha tollerato un comportamento non standardizzato e uniforme, come tag mancanti, tag e attributi non validi e tag non corrispondenti ( <b><i>foobar</b></i>). Questo non è un problema segreto e neppure ben criticato e molto diffamato. Come ho detto, IE non è stato l'unico browser a consentire un markup mediocre, ma poiché aveva una quota di mercato così elevata e arrivava al momento giusto (o sbagliato), ha contribuito in larga misura al markup mediocre in generale .
Synetech,

1

Mentre i browser generalmente collegheranno i tag CSS ai tag HTML indipendentemente dal fatto che siano validi o meno, NON DEVI ASSOLUTAMENTE farlo.

Tecnicamente non c'è nulla di sbagliato in questo dal punto di vista CSS. Tuttavia, l'uso di 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 dai crawler web, come Google.

Leggi ulteriori informazioni sull'importanza del markup corretto .

modificare

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

Gli span si riferiscono ad elementi che devono essere disegnati in modo diverso rispetto al contesto in cui si trovano attualmente e devono essere visualizzati in linea, non come un blocco. Un esempio è se alcune parole in una frase devono essere tutte maiuscole.

I tag personalizzati non sono correlati ad alcuno standard e pertanto devono essere usati span / div con proprietà class / ID.

Ci sono esenzioni molto specifiche a questo, come Angular JS


3
"Mai" non è mai la risposta giusta - sembra che tu abbia dimenticato XHTML;)
Izkata,

div e span inoltre non corrispondono a nessun tipo di informazione. Google e gli screen reader sembrano gestirli bene. È importante utilizzare il markup semantico, ma non è affatto un argomento contro l'utilizzo di tag personalizzati.
GolezTrol,

2
I div si riferiscono a gruppi di più elementi correlati, pensati per essere visualizzati in forma di blocco e manipolati come tali. Gli span si riferiscono ad elementi che devono essere disegnati in modo simile e devono essere visualizzati in linea, non come un blocco. I tag personalizzati non sono correlati ad alcuno standard e pertanto devono essere usati span / div con proprietà class / ID.
Dan Green-Leipciger,

Ho rimosso la tua parte riguardo gli screen reader perché non è corretto. La tecnologia assistiva leggerà <imsocool>some awesome text</imsocool>bene perché verrà interpretata come <>...</>. Ciò che non accadrà è che non saranno in grado di saltare a quel pezzo di testo in modo indipendente come se fosse un <p>. Naturalmente se hai scritto il proprio DOCTYPE e mappato imsocoola p, che avrebbe funzionato.
Ryan B,

0

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

I browser generalmente applicano i CSS a tag sconosciuti in HTML, perché questo è considerato migliore della rottura totale: almeno possono visualizzare qualcosa. Ma è una cattiva pratica usare deliberatamente tag "falsi". Uno dei motivi è che i nuovi tag vengono definiti di volta in volta, e se ne viene definito uno simile al tag falso ma non funziona allo stesso modo, ciò può causare problemi con il tuo sito sui nuovi browser.


0

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 in futuro quell'elemento sarà definito da una specifica, l'elemento avrà un comportamento imprevedibile.

Inoltre, perché non sapeva che esistono elementi inventati e funzionano con i CSS. Non sono comuni? Perché lui, come la maggior parte degli altri sviluppatori web, capisce che non dovremmo usare cose che potrebbero rompersi casualmente in futuro.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.