Documentation of Ergonomize.css, A set of CSS rules to improve usability.

Scroll Behavior

If the user has not requested the system to minimize the amount of animation or movement, Defines a smooth scroll effect to the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling APIs.

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth; 
    }
}

Selection

This part removes a possible default shadow of text during a selection, making the text unreadable according to the background color of the selected text.

/*
 * 1. For Firefox 2+, Firefox for Android 33+.
 * 2. For Chrome 4+, Safari 3.1+, Opera 9.6+, Android 4.4+.
 */

::-moz-selection {
    background: #b3d4fc;
    color: #fff;
    text-shadow: none; /* 1 */
}

::selection {
    background: #b3d4fc;
    color: #fff;
    text-shadow: none; /* 2 */
}

These selection rule sets have to be separate and you must define the background properties when you declare ::selection in a CSS file. Adapt background and color values to your project.

The root element

Improve consistency of default fonts in all browsers (often more readable than the default serif typo).

html {
    font-family: system-ui, 
                'Segoe UI', 
                 Roboto, 
                 Helvetica, 
                 Arial, 
                 sans-serif, 
                'Apple Color Emoji', 
                'Segoe UI Emoji';
}

Force scrollbars to always be visible to prevent awkward jumps when navigating between pages that do/do not have enough content to produce scrollbars naturally.

/**
* 1. For some Firefox.
*/

html {
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical; /* 1 */
}

Force scrollbars trick source

Displays auto-hiding scrollbars during mouse interactions and panning indicators during touch and keyboard interactions.

html {
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

Fonts on OSX will look more consistent with other systems that do not render text using sub-pixel anti-aliasing.

html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

Removes the highlighting effect when "tapped" action on webkit.

/*
* 1. For Androids.
* 2. For some Androids.
*/ 

html {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* 1 */
    -webkit-tap-highlight-color: transparent; /* 2 */
}

Trick source

Prevents iOS text size adjust after orientation change, without disabling user zoom.

html {
    -webkit-text-size-adjust: 100%;
}

Grouping content

Prevents certain content from spilling their container.

blockquote,
pre {
    max-width: 100%;
}

Adds a better looking default horizontal rule.

hr {
    border: 0;
    border-top: 1px solid #ccc;
    display: block;
    height: 1px;
    margin: 1em 0;
    padding: 0;
}

Text-level semantics

Removes delay from tapping on links and removes gaps in links underline in iOS 8+ and Safari 8+.

a {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-text-decoration-skip: objects;
}

Click delay mobile devices trick source

Give a help cursor to elements that give extra info on :hover.

abbr[title],
dfn[title] {
    cursor: help;
}

Display for code the text as it was written and line breaks so that text does not leave the block and prevents code content from spilling their container.

code {
    white-space: pre-wrap;
    max-width: 100%;
}

Embedded content

Remove delay from tapping on area.

area {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

Click delay mobile devices trick source

Remove the gap between audio, canva, iframe, image, video and the bottom of their containers.

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

Remove gap embedded content trick source

Preserves the aspect ratio on image.

img {
    height: auto;
}

Disable highlight on image when select and drag it with the mouse.

/*
* 1. For Firefox 2+, Firefox for Android 33+.
* 2. For Chrome 4+, Safari 3.1+, Opera 9.6+, Android 4.4+.
*/

img::-moz-selection { /* 1 */
    background-color: transparent;
}

img::selection { /* 2 */
    background-color: transparent;
}

Disable highlight on image trick source

Prevents img, svg and video content from spilling their container.

img,
svg,
video {
    max-width: 100%;
}

Change the fill color to match the text color in all browsers.

svg {
    fill: currentColor;
}

Forms

Gives a pointer cursor to clickable forms elements.

[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled),
label[for],
select {
    cursor: pointer;
}

Remove delay from tapping on button, input, label, select and textarea.

button,
input,
label,
select,
textarea {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

Fix vertical align for form elements.

button,
input,
label,
select {
    vertical-align: middle;
}

Prevents input and textarea content from spilling their container.

input,
textarea {
    max-width: 100%;
}

Allow only vertical resizing of textareas.

textarea {
    resize: vertical;
}

Tables

Prevents table and td content from spilling their container.

table,
td {
    max-width: 100%;
}