public marks

PUBLIC MARKS from decembre with tags tab & panel

29 April 2017 15:30

CSS - TAB - Tab Panel, the right way...

The recipe for the best user experience: Start with POSH, a simple set of heading/div pairs Add ARIA (role, aria-selected, aria-hidden, aria-labelledby) and tabindex attributes using JavaScript as these would be confusing if there was no behavior attached to the widgets. Use JavaScript to also plug a class on the component according to its type (accordion or tabpanel). Style the widget using the selector inserted by the script, this way containers are not hidden if there is no script support. Use cursor to style the tabs because those behave like buttons (default), not links (pointer). In case the component is displayed as a Tab Panel, style it as an Accordion before its tabs start wrapping (to accomodate user’s font-size) or at narrow widths...... ../..

decembre's TAGS related to tag tab

3d +   :after +   :before +   anonymat +   best +   browser +   color +   css +   css-tricks +   csstricks +   demo +   enregistrer +   example +   exemple +   extension +   firefox +   javascript +   last-child +   libellules +   lien +   navigation +   onglet +   outil +   panel +   personnaliser +   preview +   privacy +   Prive +   productivite +   restauration +   sauvegarde +   selecteur +   selector +   session +   sidebar +   sty +   target +   tester +   truc +   tutorial +   tutoriel +   userstyles +   xpi +