Sfondo
Ho mi è sempre piaciuta l'idea di usare la proprietà CSS di display:table . Usarlo sembra un brutto scherzo e preferisco sempre utilizzare un tag <table> diretto. Naturalmente, lo uso solo quando necessario e preferisco sempre un layout basato su% non basato su% se possibile. Ma per quelle occasioni in cui un tavolo è l'unica scelta, preferisco il tag non il CSS. Naturalmente sono stato rimproverato parecchie volte a riguardo. In una recente discussione con Toni Leigh finalmente sono riuscito a definire i miei sentimenti riguardo a questo argomento abbastanza bene da farne una discussione , quindi mi piacerebbe presentarlo qui e sentire cosa ne pensate voi ragazzi.
Definizioni cruciali
In HTML ogni tag può essere pensato per contenere tre proprietà distinte: funzionalità, layout e semantica.
La funzionalità è ciò che il tag fa . Un <table> reindirizza l'utente quando viene fatto clic. Un <a href=""> crea una casella di testo. Un <input type="text"> racchiude un blocco di contenuto in modo che possa essere ulteriormente modificato. Un <div> mostra un'immagine. Ecc.
Layout è ciò che il tag assomiglia (e suona come , se stai usando uno screen reader). Questo contiene cose come colori, bordi, spaziature, caratteri, ecc.
La semantica è ciò che il tag significa (o rappresenta ). Potrebbe essere una voce di menu, un post di blog, una fotografia, un elemento di design, ecc.
La carne del problema
Nel moderno HTML il layout è la provincia del CSS, mentre sia la funzionalità che la semantica dipendono dal nome del tag e occasionalmente da alcuni attributi, che ha l'effetto collaterale di intrecciarli. Le persone si sforzano molto per mantenere separati questi due domini (layout e funzionalità / semantica), in modo che le necessità di uno non influenzino l'altro. Per questo motivo, utilizzando <img> per il layout viene deriso, perché ciò impone una modifica semantica in cui dovrebbe essere presente solo una modifica del layout. E la soluzione alternativa è usare <table> come alternativa per ottenere effetti di layout simili a tabelle, ma senza le modifiche semantiche associate al tag display: table . (Risposta preventiva: no, un <table> non produce un zuppa tag più grande. Ricevi tutti gli stessi tag anche con <table> , sono tutti chiamati display:table ora)
Il motivo per cui mi sembra così "sbagliato" è perché vedo il <div> come una proprietà CSS che modifica la funzionalità di un tag . È come usare i CSS per cambiare una display:table in una <a> o una <form> in una <input type="text"> o qualcosa (beh, se fosse possibile). Per quanto ne so, è l'unica proprietà CSS con un tale effetto. Tutto il resto influisce solo sul layout, ma <button> fa di più. Per questo motivo sembra che non dovrebbe nemmeno essere in CSS. In particolare:
- Vengono creati nuovi tipi di relazioni tra le dimensioni dei tag. Nei layout non tabulari, solo le relazioni genitore-figlio tra tag possono influire l'una sull'altra. In una tabella, altri tag nella stessa riga / colonna possono influire sulle dimensioni di una cella, nonché sulla larghezza / altezza totali dell'intera tabella.
- Per peggiorare le cose, ottieni colspans / rowspans (il supporto per i browser CSS è instabile al momento, ma sta arrivando)
- L'elemento
display:tableverrà stampato su ogni pagina, quando si stampa il documento. - Ottieni l'allineamento verticale del testo e la compressione del bordo.
E probabilmente altri a cui non ho pensato. Beh, immagino che siano specie di caratteristiche del layout, ma sono un mondo intero oltre a qualsiasi altra cosa che i CSS possono fare. Trattare alcuni markup come una tabella trasforma il browser in una modalità completamente diversa, motivo per cui penso che sia una funzionalità diversa, non solo il layout.
La domanda
Che ne pensi? Tutte le modifiche apportate da display:table-header possono essere conteggiate solo come layout, oppure si tratta anche di un cambio di funzionalità?