Modo corretto per applicare elementi personalizzati CSS a HTML5

Question

Ho un tag HTML5 personalizzato chiamato <scroll-content>. Questo tag viene effettivamente creato e inserito per me da un framework in determinati punti all'interno del mio file HTML. Ora vorrei modificare il CSS di questo tag in modo da dentro il mio file CSS sono andato:

scroll-content{ 
    overflow: hidden; 
} 

Ha fatto quello che doveva, ma è questo il modo corretto di styling i tag personalizzati?

Non riesco ad aggiungere una classe perché non creo i tag, il framework funziona, quindi non posso accedervi nel mio codice e vorrei evitare di usare Javascript per trovare questi tag e aggiungere classi quel modo.

Preferirei conoscere il modo standard/più sicuro di modificare i tag personalizzati.

Answer 1

È possibile applicare i CSS per elementi personalizzati proprio come è possibile per gli elementi HTML standard.

Non c'è niente di sbagliato con scroll-content { ... }, come scritto nel codice.

---

un piccolo sfondo

Il browser, a un livello di base, non ha idea di cosa esistono elementi. Non riconosce nulla ... fino a è esposto al foglio di stile predefinito (sample).

Il foglio di stile predefinito introduce il browser in elementi HTML.

Gli elementi personalizzati possono quindi essere definiti come elementi che non sono inclusi nel foglio di stile predefinito. (Elementi che esistono, ma non sono supportati dal browser, potrebbero condividere questa definizione.)

Gli elementi personalizzati potrebbero tuttavia essere introdotti nel browser negli stili dell'autore.

Ecco qualcosa di importante da prendere in considerazione:

Se il browser non riconosce un elemento (vale a dire, non è nel foglio di stile di default), si applicherà CSS valori iniziali.

6.1.1 Specified values

agenti utente deve prima assegnare un valore specificato per ogni struttura basata dei seguenti meccanismi (in ordine di precedenza):

1. Se i risultati cascata in un valore, usalo

2. In caso contrario, se la proprietà è ereditata e l'elemento non è la radice dell'albero del documento, utilizzare il valore calcolato dell'elemento genitore .

3. Altrimenti utilizzare il valore iniziale della proprietà. Il valore iniziale di ogni proprietà è indicato nella definizione della proprietà.

Come indicato sopra, se un elemento è riconosciuto (# 1 & # 2 non si applicano), utilizzare il valore iniziale dalla definizione struttura (# 3 applica).

Quindi nel tuo caso:

• tuo elemento personalizzato è: <scroll-content>

• Il tuo CSS è: scroll-content { overflow: hidden; }

• Tu dici nella tua domanda che questo codice fa quello che si suppone fare. Tuttavia, a meno che il framework menzionato non fornisca stili aggiuntivi per elementi personalizzati, non può funzionare (demo).

Ecco perché:

• Dal <scroll-element> non è nel foglio di stile di default userà valori iniziali CSS.

• Bene, the initial value of the display property is inline.

• Ma the overflow property only works on block elements.

Quindi non c'è modo questa combinazione di HTML/CSS potrebbe lavorare – la proprietà overflow viene ignorato, come farebbe height, width e tutte le altre proprietà che non si applicano a elementi inline.

Un elemento personalizzato deve avere display: block richiesto per overflow per funzionare (demo).

Analogamente, l'unica ragione body, div, h1, p, ul esiste come elementi di blocco è perché sono definiti in questo modo nel foglio di stile predefinito (sample).

Così, mettendo da parte gli argomenti a favore e contro gli elementi personalizzati, ecco la linea di fondo:

Aggiungi display: block ai vostri elementi personalizzati e sei-to-go.

Answer 2

Sarebbe preferibile evitare l'uso di tag personalizzati poiché non si sa mai quando quei tag potrebbero diventare standardizzati o avere un uso specifico a un certo punto.

penso che sarebbe più sicuro se si crea una classe a quella tag personalizzato, qualcosa di simile:

.scroll-content{ 
    overflow: hidden; 
}