New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
The main navigation elements should also be in a list #16
Comments
In theory it would be easy, but nesting the Currently we have it like this: <nav class="paradeiser">
<a href="#">
<img src="http://danielwinter.at/apple-touch-icon_76x76.png" alt="Logo of Daniel Winter" class="logo">
</a>
<a href="#">
<icon class="paradeiser_icon_canvas">
<img src="img/menu_home.svg" alt="Navigate to Home" class="icon">
</icon>
<span>Home</span>
</a>
</nav> with a <nav class="paradeiser">
<ul>
<li>
<a href="#">
<img src="http://danielwinter.at/apple-touch-icon_76x76.png" alt="Logo of Daniel Winter" class="logo">
</a>
</li>
<li>
<a href="#">
<icon class="paradeiser_icon_canvas">
<img src="img/menu_home.svg" alt="Navigate to Home" class="icon">
</icon>
<span>Home</span>
</a>
</li>
</ul>
</nav> Which is a whole lot of additional code for the rare case of a missloading css. So I'm not quite sure if someone would benefit from that change |
When accessibility is your concern: nav is hardly supported in assistive technology, a list very much is. A screen reader for example will tell you "list of 6 items - first item - link foo, second item, link bar…" and so on. That's why it is good to have lists. You also have two elements to style for each entry, that's a lot of good hooks for styling you don't need to use :before or :after for. |
Yes, the list semantics are really important. The Stripping out important semantics to reduce verbosity is like removing wheels from a car to reduce weight. |
So basically both of you would like to have a |
To add to the points made by @codepo8 and @Heydon... the The A |
Stressful for older machines? You mean there would be a performance issue? If there is it will be barely measurable. Getting the markup right is paramount; CSS rendering performance perfection not so much. |
Well CSS Performance on Flexbox is still a bit critical, but I'm not saying that I won't implement this. Instead this idea might work out well with another idea I had yesterday. I'm gonna look into that whole topic. |
Thanks for that. The point about performance on older machines is important but you can also pretty much assume that very old and slow machines also have the newest browsers or be able to even run the last evergreen one. Therefore flexbox will just be skipped in the CSS. Which is another reason to use a list - at least this one will be displayed as a sensible structure instead of links smushed together. |
+1 Progressive enhancement! |
This helps with accessibility and also when CSS is not available for some reason. If the main CSS gets a special class on the UL of the extra items and it becomes a nested list inside a main one of the .paradeiser one this should be easy to do.
The text was updated successfully, but these errors were encountered: