CSS For Speed

include those to override some of the browser’s default definitions,
it should be placed in the few first CSS file to load, but after the “reset CSS” (if you use any),
and before any of the websites’ main style.


*,*:hover,*:active,*:focus,*:checked{             /* normalize border-size to prevent jumps. improve fill.*/
  border:               1px none transparent;
  outline:              1px none transparent;

  border-collapse:                  collapse;

                     border-spacing:     0px;

          border-horizontal-spacing:     0px;
       -o-border-horizontal-spacing:     0px;
      -ms-border-horizontal-spacing:     0px;
     -moz-border-horizontal-spacing:     0px;
  -webkit-border-horizontal-spacing:     0px;
            border-vertical-spacing:     0px;
         -o-border-vertical-spacing:     0px;
        -ms-border-vertical-spacing:     0px;
       -moz-border-vertical-spacing:     0px;
    -webkit-border-vertical-spacing:     0px;
}

*,*:hover,*:active,*:focus,*:checked{             /* normalize border-size to prevent jumps. improve fill.*/
  box-sizing:                     border-box;
  background-origin:              border-box;
  background-clip:                border-box;
}

*{                                                /* limiting user-interaction to speed up the UI [high risk properties] - (you need to explicitly-override those in-case needded... for textare/input/form elements..). */
         user-select:                   none;
      -o-user-select:                   none;
     -ms-user-select:                   none;
    -moz-user-select:                   none;
 -webkit-user-select:                   none;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * improve UI reaction by giving every element tab index of "-1"
 * except those who needs UI interaction.
 * for example <html tabindex="-1" .....  <textarea tabindex="1"... <input tabindex="2"
 * don't use 0.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

                                    /* trigger GPU-assisted scroll + faster rendering. more reactive touch-scroll. */
body{
  overflow:         visible;
}
html{
  overflow:            auto;
  word-break:        normal;
  overflow-wrap: break-word;
  word-wrap:     break-word;
}

/* only vertical scroll - [high risk since will consider whitespace and newlines accurately!!!] - helps to make sure content is streamlined without vertical scroll. */
/*
html{
  overflow-y:auto;
  overflow-x:hidden;
  white-space: pre-line;
}
*/


*{                                                /* limiting scroll smoothness for faster UI. */
  scroll-behavior:            auto;     /*auto|smooth*/
          overflow-scrolling: auto;     /*auto|touch*/
       -o-overflow-scrolling: auto;
      -ms-overflow-scrolling: auto;
     -moz-overflow-scrolling: auto;
  -webkit-overflow-scrolling: auto;     
}

*{                                                /* limiting user-interaction to speed up the UI [low risk properties]. */
  resize:                               none;

           user-zoom:                   none;
        -o-user-zoom:                   none;
       -ms-user-zoom:                   none;
      -moz-user-zoom:                   none;
   -webkit-user-zoom:                   none;

           user-drag:                   none;
        -o-user-drag:                   none;
       -ms-user-drag:                   none;
      -moz-user-drag:                   none;
   -webkit-user-drag:                   none;

        touch-action:            pan-x pan-y;
     -o-touch-action:            pan-x pan-y;
    -ms-touch-action:            pan-x pan-y;
   -moz-touch-action:            pan-x pan-y;
-webkit-touch-action:            pan-x pan-y;

        touch-action:           manipulation;
     -o-touch-action:           manipulation;
    -ms-touch-action:           manipulation;
   -moz-touch-action:           manipulation;
-webkit-touch-action:           manipulation;
}

*{                                                  /* limiting rendering quality to speed up the UI [low risk]. */
               text-rendering:  optimizeSpeed;
            -o-text-rendering:  optimizeSpeed;
           -ms-text-rendering:  optimizeSpeed;
          -moz-text-rendering:  optimizeSpeed;
       -webkit-text-rendering:  optimizeSpeed;

        font-feature-settings:  'c2sc' 0, 'calt' 0, 'case' 0, 'dlig' 0, 'fina' 0, 'frac' 0, 'hist' 0, 'hlig' 0, 'init' 0, 'isol' 0, 'kern' 0, 'liga' 0, 'lnum' 0, 'locl' 0, 'mark' 0, 'medi' 0, 'mkmk' 0, 'onum' 0, 'rlig' 0, 'smcp' 0, 'ss**' 0, 'subs' 0, 'sups' 0, 'swsh' 0, 'tnum' 0, 'zero' 0;
     -o-font-feature-settings:  'c2sc' 0, 'calt' 0, 'case' 0, 'dlig' 0, 'fina' 0, 'frac' 0, 'hist' 0, 'hlig' 0, 'init' 0, 'isol' 0, 'kern' 0, 'liga' 0, 'lnum' 0, 'locl' 0, 'mark' 0, 'medi' 0, 'mkmk' 0, 'onum' 0, 'rlig' 0, 'smcp' 0, 'ss**' 0, 'subs' 0, 'sups' 0, 'swsh' 0, 'tnum' 0, 'zero' 0;
    -ms-font-feature-settings:  'c2sc' 0, 'calt' 0, 'case' 0, 'dlig' 0, 'fina' 0, 'frac' 0, 'hist' 0, 'hlig' 0, 'init' 0, 'isol' 0, 'kern' 0, 'liga' 0, 'lnum' 0, 'locl' 0, 'mark' 0, 'medi' 0, 'mkmk' 0, 'onum' 0, 'rlig' 0, 'smcp' 0, 'ss**' 0, 'subs' 0, 'sups' 0, 'swsh' 0, 'tnum' 0, 'zero' 0;
   -moz-font-feature-settings:  'c2sc' 0, 'calt' 0, 'case' 0, 'dlig' 0, 'fina' 0, 'frac' 0, 'hist' 0, 'hlig' 0, 'init' 0, 'isol' 0, 'kern' 0, 'liga' 0, 'lnum' 0, 'locl' 0, 'mark' 0, 'medi' 0, 'mkmk' 0, 'onum' 0, 'rlig' 0, 'smcp' 0, 'ss**' 0, 'subs' 0, 'sups' 0, 'swsh' 0, 'tnum' 0, 'zero' 0;
-webkit-font-feature-settings:  'c2sc' 0, 'calt' 0, 'case' 0, 'dlig' 0, 'fina' 0, 'frac' 0, 'hist' 0, 'hlig' 0, 'init' 0, 'isol' 0, 'kern' 0, 'liga' 0, 'lnum' 0, 'locl' 0, 'mark' 0, 'medi' 0, 'mkmk' 0, 'onum' 0, 'rlig' 0, 'smcp' 0, 'ss**' 0, 'subs' 0, 'sups' 0, 'swsh' 0, 'tnum' 0, 'zero' 0;
}

some of the attributes includes [low risk]/[high risk]
[high risk] simply means it might change the look of the website.

you should keep the internal-order of the properties in each block-set of rules,
they are designed to provide backward compatibility by overriding themselves when needed.

you should (also) keep the order of the code-blocks themselves,
to reduce some of the code I’ve used a combined-syntax-css,
and the current order provides the best support.

You may (and probably want to) override some of the rules for specific elements,
for example, adding this:

textarea:focus,textarea:active{
  user-select: text;
  border: 1px solid gray;
}

after the “css for speed” blocks will re-enable text-selection for textarea,
but only when focused (for example) and adds a border (overriding “none” and “transparent” before).

also available in here