| Autor | Zpráva | ||
|---|---|---|---|
| jefitto44 Profil |
#1 · Zasláno: 19. 1. 2014, 08:06:56
S príchodom html 5 som sa rozhodol vytvoriť niečo (len tak, pre potešenie duše) za použitie <header><footer><article> a pod.
Moja otázka je, či je v pohode do seba tieto tágy zanorovať, to jest. <header>Hlavný header stránky</header> <article><header>Nadpís článku</header> Text článku bla bla... <footer>Footer článku</footer> </article> <footer> Footer stránky </footer> </html> V CSS potom vyberám takto: header {bla bla;}
article {bla bla bla;}
footer {bla bla bla bla;}
article header {bla bla;}
article footer {bla bla bla;}Je dobrý a správny, takýto zápis? Pretože pokiaľ v article header v CSS nezapíšem nič, tak si ten header berie vlastnosti z hlavného header... Je dobré, že sa to takto prepisuje? |
||
| Petr ZZZ Profil |
Řekl bych, že popsané chování má logiku, protože vlastnosti zapsané pro
header platí pro jakýkoli <header>, tedy i pro <article> <header>, pokud je zápisem vlastností pro article header nepřebiješ. Dá se to i různě kombinovat, tedy zápisem header {color:green;} article header {font-weight:bold;} bude <header> zelený a <article><header> bude zelený a navíc ještě tučný.
Upozorňuji ale, že tebou uvedeným novým tagům z HTML 5 některé starší prohlížeče nerozumí. Místo <header> doporučuji tedy psát raději třeba <div class="header">. Kromě toho působí přinejmenším zvláštně použít „sémantické novinky“ nesémantickým způsobem — na nadpisy máme <h1> až <h6>.
„či je v pohode do seba tieto tágy zanorovať“ S dlouhým á se píše něco jiného. |
||
| Joker Profil |
#3 · Zasláno: 19. 1. 2014, 09:34:57
jefitto44:
Přímo v HTML5 specifikaci u prvku <article> je příklad s takovým dělením. Jinak prvky article, header a footer jsou flow-content a povolený obsah je taky flow-content, jen v <header> a <footer> nesmí být <header>, <footer> a <main>. Dá se říci, že se v tomhle ohledu chovají stejně jako <div>, až na ty výjimky u <header> a <footer>. „Je dobrý a správny, takýto zápis?“ Nebude fungovat v některých prohlížečích, o tom jsme se už bavili. A z pohledu sémantiky nadpis článku by neměl být obalený prvkem <header>, ale některým z nadpisů. Resp. „sémantický křižák“ by asi řekl, že v daném příkladu do článku místo <header> patří <h1> a že v <article>, <header> a <footer> by ani neměl být přímo text, ale další prvky. |
||
| jefitto44 Profil |
#4 · Zasláno: 19. 1. 2014, 18:56:13
Petr ZZZ:
„na nadpisy máme“ Do <header>, kde nastavujem výšku a pozadie, samozrejme potom nadpis stránky zanorujem do <h1> |
||
| Chamurappi Profil |
#5 · Zasláno: 19. 1. 2014, 19:33:25
Reaguji na jefitta44:
Výšku? Jak můžeš vědět, jak bude nadpis vysoký, když je to text? Proč bys chtěl nové elementy z HTML 5 používat? Jaké spatřuješ reálné výhody? |
||
| jefitto44 Profil |
#6 · Zasláno: 19. 1. 2014, 20:23:25
Lepšiu prehľadnosť a semantickosť kódu, ako keď sú všade len divy a spany
Nadpis som myslel tak, že určujem min-height:30px do headeru a farbu pozadia (gradient samozrejme) Samozrejme, potom mám nastylovane article header h1 {text-size, color, atď atď} |
||
| Chamurappi Profil |
#7 · Zasláno: 19. 1. 2014, 20:48:12
Reaguji na jefitta44:
„Lepšiu prehľadnosť kódu“ Tu návštěvník nijak neocení. Stránku píšeš pro lidi, ne pro sebe. Ty tři elementy přehlednost moc nevytrhnou. „Lepšiu semantickosť kódu“ Ta přináší jako reálné výhody? „určujem min-height:30px do headeru a farbu pozadia“ Proč tyto vlastnosti nenastavuješ přímo nadpisu? |
||
| jefitto44 Profil |
#8 · Zasláno: 21. 1. 2014, 13:39:49
Chamurappi:
„Proč tyto vlastnosti nenastavuješ přímo nadpisu?“ Lebo potrebujem, aby bola hlavička v danej farbe až do konca, nikoliv len pod nadpisom... či ak by som nadpisu nastavil width: 100%; bolo by to to isté? |
||
| Chamurappi Profil |
#9 · Zasláno: 21. 1. 2014, 13:55:43
Reaguji na jefitta44:
Nadpis je blokový element, stejně jako třeba <div> (nebo jen v nových prohlížečích ten <header>). Když mu nenastavíš šířku, roztáhne se přes celý řádek.
Kdyby nebyl blokovým elementem, šlo by mu nastavit display: block.
„bolo by to to isté?“ Příště si to místo ptaní můžeš sám vyzkoušet. |
||
|
Časová prodleva: 10 let
|
|||
0