documentation.md

Documentation

Ergonomize.css is a CSS file aiming at bringing additional rules to HTML elements without altering their default styles in order to improve the user experience.

• The project Website

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; 
    }
}

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';
}

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

html {
    overflow-y: scroll;
}

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 of “tap” actions 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%;
}

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

html {
  tab-size: 4;
  -moz-tab-size: 4;
}

Grouping content

Prevents blockquote and pre content from spilling their container.

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

Improve consistency of default fonts in all browsers.

pre {
    font-family: ui-monospace, 
                 SFMono-Regular, 
                 Consolas, 
                 'Liberation Mono', 
                 Menlo, 
                 monospace;
}

Text-level semantics

Use a more readable tab size.

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

• Click delay mobile devices trick source

Gives 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%;
}

Improve consistency of default fonts in all browsers.

code,
kbd,
samp {
    font-family: ui-monospace, 
                 SFMono-Regular, 
                 Consolas, 
                 'Liberation Mono', 
                 Menlo, 
                 monospace;
}

Embedded content

Removes delay from tapping on area.

area {
    touch-action: manipulation;
}

• Click delay mobile devices trick source

Remove the gap between audio, canvas, iframes, images, videos and the bottom of their containers.

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

Preserves the aspect ratio on image.

img {
    height: auto;
}

Disables highlight on image when selecting and dragging 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%;
}

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;
}

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

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

• Click delay mobile devices trick source

Prevents input and textarea content from spilling their container.

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

Allows only vertical resizing of textarea.

textarea {
    resize: vertical;
}

Tables

Prevents table and td content from spilling their container.

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