kuma Make sticky header for the "Browser Compatibility Table"

Make sticky header for the "Browser Compatibility Table"

Open Konrud opened this issue 5 years ago • 4 comments

Proposal to make header of the "Browser Compatibility Table" sticky. That is, every time the user scrolls down, header sticks to the top, that way it always appears at the top and you don't need to remember or worst yet scroll to the top to see which column corresponds to which browser. Just look at the "Browser Compatibility Table" on the list-style-type page, it's quite long.

It can be done with the progressive enhancement in mind, that is browsers that don't support it will still get the old design. I would be happy to do this myself but it seems I can't find the right repository for it.

CSS, rough, code for the sticky header


@supports (position: sticky) or (position: -webkit-sticky) {
    thead tr.bc-browsers > th {
       position: -webkit-sticky
       position: sticky;
       top: 0;
       z-index: 1;
       background: rgba(212, 221, 228, .97);
   }

 /**
 *  1. That removes name of each browser for the sighted users, 
 *     but not for the screen readers
 */
  thead tr.bc-browsers > th > SPAN {
     color: transparent; /*[1]*/
  }
}

The result should be something like that:

StickyHeaderForMDN