Re: [csswg-drafts] Please add "tab-index" to CSS specification

I think `nav-pre`/`nav-next` is better design than `nav-index`.

For example, there are button elements like:
```html
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>
<button id="b4">Button 4</button>
<button id="b5">Button 5</button>
```
if the tabing order is specified with [nav-index](https://www.w3.org/TR/2012/WD-css3-ui-20120117/#nav-index0), it will be: 
```css
button {
    position: absolute;
}
button#b1 {
    top: 20%; left: 25%;
    nav-index: 1;
}
button#b2 {
    top: 30%; left: 0%;
    nav-index: 2;
}
button#b3 {
    top: 50%; left: 40%;
    nav-index: 3;
}
button#b4 {
    top: 60%; left: 25%;
    nav-index: 4;
}
button#b5 {
    top: 70%; left: 20%;
    nav-index: 5;
}
```
otherwise, the same result using `nav-pre` & `nav-next` is: 
```css
button {
    position: absolute;
}
button#b1 {
    top: 20%; left: 25%;
    nav-next: #b2;
}
button#b2 {
    top: 30%; left: 0%;
    nav-prev: #b1;
    nav-next: #b3;
}
button#b3 {
    top: 50%; left: 40%;
    nav-prev: #b2;
    nav-next: #b4;
}
button#b4 {
    top: 60%; left: 25%;
    nav-prev: #b3;
    nav-next: #b5;
}
button#b5 {
    top: 70%; left: 20%;
    nav-prev: #b4;
}
```
If I want to add a new button element(`#new`) and make it have a tab order between the button `#b2` and the button `#b3`, I have to modify the tab order of all the next button element after the button `#new` when using 'nav-index'.  
But when using `nav-pre` & `nav-next`, I need to modify the tab order the very previous and  next button of the button `#new`. This way is easier to use.

> Regarding nav-up, nav-right, nav-down, nav-left - it is good idea for table DATA layouts (like online emulation of MS Excel) but... it generates id-itis. All elements need to have "id". Is there possibility to avoid of it (too many id's)?

I think we can just give the direction to find the previous or the next element to `nav-pre` or `nav-next`. So the previous or the next element will be the closest element in the direction.
For example, the value type can be [ray(
)](https://www.w3.org/TR/motion-1/#offset-path-ray) that specifies the straight line with an angle starting from the element. 
`nav-next: ray(45%)` means the next element is the closest element which is at 45 degree angle from the current element.


-- 
GitHub Notification of comment by jihyerish
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1748#issuecomment-324259876 using your GitHub account

Received on Wednesday, 23 August 2017 08:31:29 UTC