Skip to main content
Topic: Teh webkit.css needs stomping. (Read 8830 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Re: Teh webkit.css needs stomping.

Reply #15

that matrix seems outdated,
Code: [Select]
<!doctype html>
<html>
<head>
<style>
menu { clear: left;}
li {float: left; padding: 0 5px; margin: 0; list-style-type: none;}
menu li {border-top: 1px solid grey; border-bottom: 1px solid grey; border-right: 1px solid grey; background-color: #eee;}
menu li:first-child {border-left: 1px solid grey; border-radius: 4px 0 0 4px;}
menu li:last-child {border-radius: 0 4px 4px 0;}
</style>
</head>
<body>
<menu class="pagination">
<li class="prev_page"><a href="#">previous page</a></li>
<li><a href="#page1">1</a></li>
<li class="active">2</li>
<li><a href="#page3">3</a></li>
<li class="expand_pages"><a href="#">...</a></li>
<li><a href="#page20">20</a></li>
<li><a href="#page20">20</a></li>
<li class="next_page"><a href="#">next page</a></li>
</menu>
</body>
</html>
works fine for me in Chrome 27, IE10 and Opera 12.15 .. haven't tested Firefox.
Thorsten "TE" Eurich
------------------------

Re: Teh webkit.css needs stomping.

Reply #16

Oh good. Well that's kinda handy then. MDN was still saying it wasn't supported too.

Anyway, what I was getting at before is that you should be able to set your border on the parent element ("pagination") and then you only have to do the left borders on the li bitz (except for first-child).

Code: [Select]
<style>
.pagination {border: 1px solid grey; border-radius: 4px; clear: left;}
.pagination li {float: left; padding: 0 5px; margin: 0; list-style-type: none; border-left: 1px solid grey; background-color: #eee;}
.pagination li:first-child {border-left: none;}
</style>

If the menu isn't floated, you'd need a clearfix of some sort to get the border to wrap the content. I think in practice it will be floated though. Or, you could just use inline-block instead of float on the li, which shouldn't need a clearfix.
Last Edit: June 09, 2013, 06:01:20 pm by Antechinus
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Teh webkit.css needs stomping.

Reply #17

Oh while we're on menus, might as well talk about hidden content. Superfish, and most of the other js, basically relies on display: none; to hide collapsed content. That's good for sighted users, but as you'd be aware it's bad for screen readers because the content will also be hidden from them. So, the risk is that it'll be so well hidden that blind peeps wont even know it's there.

Traditional a11y workaround was to try and avoid display: none; but there's a better way of handling it. http://www.w3.org/TR/wai-aria/states_and_properties

The main one of interest here is http://www.w3.org/TR/wai-aria/states_and_properties#aria-haspopup. If that's put in the markup for any parent that contains hidden content, straight away any screen reader will notify the user that there's a droppy menu or whatever waiting in the wings. This means display: none; now works as well for blind peeps as it does for sighted peeps, with no other workarounds required.

This WAI-ARIA stuff has very good browser support (IE8 is fine) and will validate with Elk's HTML5 doctype.

You can also use WAI-ARIA roles to give good a11y for lists. Taking the current main menu as an example, this is how it looks in the repo now:

Code: [Select]
function template_menu()
{
global $context, $settings, $txt;

echo '
<div id="main_menu">
<ul class="dropmenu topmenu" id="menu_nav">';

// Note: Menu markup has been cleaned up to remove unnecessary spans and classes.
foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '" ', !empty($button['sub_buttons']) ? 'class="subsections"' : '', '>
<a class="', $button['sub_buttons'] ? 'submenu' : '', !empty($button['active_button']) ? ' active' : '', '" href="', $button['href'], '" ', isset($button['target']) ? 'target="' . $button['target'] . '"' : '', '>', $button['title'], '</a>';

// does it have child buttons? (2nd level menus)
if (!empty($button['sub_buttons']))
{
echo '
<ul>';

foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li ', !empty($childbutton['sub_buttons']) ? 'class="subsections"' : '', '>
<a href="', $childbutton['href'], '" ' , isset($childbutton['target']) ? 'target="' . $childbutton['target'] . '"' : '', '>
', $childbutton['title'], '</a>';

// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul>';

foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a href="', $grandchildbutton['href'], '" ' , isset($grandchildbutton['target']) ? 'target="' . $grandchildbutton['target'] . '"' : '', '>
', $grandchildbutton['title'], '
</a>
</li>';

echo '
</ul>';
}

echo '
</li>';
}

echo '
</ul>';
}

echo '
</li>';
}



This is how it would look with the WAI-ARIA stuff for a11y:
Code: [Select]
function template_menu()
{
global $context, $settings, $txt;

echo '
<div id="main_menu">
<ul class="dropmenu topmenu" id="menu_nav" role="menubar">'; // Note role="menubar" added here.

// Note: All li's have role="menuitem" added. Also, li's which contain subsections have aria-haspopup="true". Nested ul's have role="menu".
foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '" ', !empty($button['sub_buttons']) ? 'class="subsections" aria-haspopup="true"' : '', ' role="menuitem">
<a class="', $button['sub_buttons'] ? 'submenu' : '', !empty($button['active_button']) ? ' active' : '', '" href="', $button['href'], '" ', isset($button['target']) ? 'target="' . $button['target'] . '"' : '', '>', $button['title'], '</a>';

// does it have child buttons? (2nd level menus)
if (!empty($button['sub_buttons']))
{
echo '
<ul role="menu">';

foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li ', !empty($childbutton['sub_buttons']) ? 'class="subsections" aria-haspopup="true"' : '', ' role="menuitem">
<a href="', $childbutton['href'], '" ' , isset($childbutton['target']) ? 'target="' . $childbutton['target'] . '"' : '', '>
', $childbutton['title'], '</a>';

// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul role="menu">';

foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li role="menuitem">
<a href="', $grandchildbutton['href'], '" ' , isset($grandchildbutton['target']) ? 'target="' . $grandchildbutton['target'] . '"' : '', '>
', $grandchildbutton['title'], '
</a>
</li>';

echo '
</ul>';
}

echo '
</li>';
}

echo '
</ul>';
}

echo '
</li>';
}

Pretty simple changes, but very effective for screen readers. Since the main purpose of using new HTML5 elements like nav and menu is for a11y (sighted users don't give a rat's how things are marked up) IMHO this is every bit as good as more trendy wrapping elements. :)

I'd suggest using this sort of thing for a11y wherever Elk has collapsible content that relies on display: none;
Note that standard tooltips (title attribute) are not considered to need any indication via aria stuffz, since screen readers already deal with titles with no probs.



So, as far as a11y goes you could equally well mark up your pagination like this:

Code: [Select]
<body>
<ul class="pagination" role="menubar">
<li class="prev_page" role="menuitem"><a href="#">previous page</a></li>

etc, etc....

That might not get HTML5 fanboyz as excited as using a menu or nav tag as a wrapper, but for all practical purposes it's every bit as effective, and it has browser support back to the stone age.
Last Edit: June 09, 2013, 06:41:04 pm by Antechinus
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P