Fundamentals

Global Styles

Normalize browser and preset global styles for more concise-style programming.

Using official package

The official Normal CSS is a ~600B lightweight CSS package, is similar to modern-normalize and normalize.css you are familiar with but better:

npm install @master/normal.css and import it in your global CSS file:

@import '@master/normal.css';
Paste the CDN or import on-demand through modularization.
<link href="https://cdn.master.co/normal.css" rel="stylesheet">

Or import on-demand:

@import '@master/normal.css/better-text-appearance.css';
@import '@master/normal.css/eliminate-click-delays.css';
@import '@master/normal.css/improve-user-recognition.css';
@import '@master/normal.css/intuitive-sizing-control.css';
@import '@master/normal.css/readable-tab-size.css';
@import '@master/normal.css/responsive-media-elements.css';
/* consistent */
@import '@master/normal.css/consistent-abbreviation-styles.css';
@import '@master/normal.css/consistent-bold-styles.css';
@import '@master/normal.css/consistent-code-styles.css';
@import '@master/normal.css/consistent-control-styles.css';
@import '@master/normal.css/consistent-horizontal-lines.css';
@import '@master/normal.css/consistent-small-styles.css';
@import '@master/normal.css/consistent-superscript-subscript.css';
@import '@master/normal.css/consistent-table-styles.css';
/* remove */
@import '@master/normal.css/remove-anchor-styles.css';
@import '@master/normal.css/remove-control-styles.css';
@import '@master/normal.css/remove-default-borders.css';
@import '@master/normal.css/remove-default-spacing.css';
@import '@master/normal.css/remove-tap-highlight.css';
@import '@master/normal.css/remove-list-styles.css';

Consistency

Consistent abbreviation styles

Fixed the inconsistent appearance of <abbr> across browsers.

abbr[title] {
text-decoration: underline dotted;
}

Consistent control styles

Fixed the inconsistent appearance of controls across browsers.

::-moz-focus-inner {
border-style: none;
padding: 0;
}
:-moz-ui-invalid {
box-shadow: none;
}
progress {
vertical-align: baseline;
}
[type="search"] {
appearance: textfield;
outline-offset: -2px;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}

Consistent horizontal lines

Fixed the inconsistent appearance of horizontal lines across browsers.

Before
After
hr {
height: 0;
color: inherit;
}

Consistent bold styles

Fixed the inconsistent font weight of <b> and <strong> across browsers.

b, strong {
font-weight: bolder;
}

Consistent code styles

Fixed the inconsistent font size of code-related elements across browsers.

pre,
code,
kbd,
samp {
font-size: 1em;
}

Consistent small styles

Fixed the inconsistent font size of <small> across browsers.

small {
font-size: 80%;
}

Consistent superscript and subscript styles

Fixed the inconsistent appearance of superscripts and subscripts across browsers.

This paragraph contains a subscript and a superscript.

sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}

Consistent table styles

Fixed the inconsistent appearance of tables across browsers.

table {
text-indent: 0;
border-color: inherit;
}

Intuitive sizing control

Control the size of elements more intuitively, including content and padding, without worrying about the impact of padding and borders on dimensions.

*, ::before, ::after {
box-sizing: border-box;
}

Elimination

Remove anchor styles

The <a> element usually serves as more than just an inline text link; it could be a button, navigation, or even a card.

Removing its default underline and inheriting the parent color allows you to start with a clean style.

a {
color: inherit;
text-decoration: none;
}

Remove control styles

Inherit the font family, size, and color of control elements from the parent's settings and remove spacing and background as a cleaner starting point.

button, input, optgroup, select, textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
padding: 0;
color: inherit;
background-color: transparent;
}

Remove default borders and preset to solid style

Remove borders from all elements to give you the freedom to fully customize the appearance of your elements, preset to the most used solid style.

*, ::before, ::after {
border: 0 solid;
}

Remove default spacing

Setting margins and padding to zero allows you to customize the appearance and spacing of elements without worrying about the impact of default browser styles.

body, blockquote, dl, dd, hr, figure, p, pre, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
td, legend, fieldset {
padding: 0;
}
ul, ol {
margin: 0;
padding: 0;
}

Remove list styles

Remove the ul styles while retaining it as a commonly used structural markup for elements like the navbar and menu.

ul {
list-style: none;
}

Remove tap highlight color

You should customize the tap highlight color based on current UI features rather than relying on the default.

body {
-webkit-tap-highlight-color: transparent;
}

The -webkit-tap-highlight-color CSS property controls the highlight color that appears when an element is tapped on a mobile device, such as Safari and some WebKit-based mobile browsers.

Eliminate click delays

Disable double-click to zoom on links, input fields, and buttons to improve responsiveness for touch devices.

300ms tap delay, gone away
a, button {
touch-action: manipulation;
}

An instantly responsive UI enables users to confidently press each button without pausing and waiting for a response. To learn more about the influence of human reaction times and web performance, explore the introduction to RAIL.

Disabling user-scalable=no can harm user experience, accessibility, and mobile-friendliness and have negative SEO implications.

<meta name="viewport" content="width=device-width, user-scalable=no">

Improvement

Better text rendering and appearance

Ensure consistent, clear, high-quality text and font appearance across various browsers.

* {
text-rendering: geometricPrecision;
}
body {
line-height: 1.2;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}

Readable tab size

Setting the tab size to 4 makes the code more structured and easier to read.

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

Responsive friendly media elements

Preset the maximum width of media-related elements to the parent container to make them responsive.

Before
No responsive image
After
Responsive image
img, svg, video, canvas, audio, iframe, embed, object {
max-width: 100%;
display: block;
}

Browsers default these elements to inline display. block can be centered using common tricks like margin: auto.

For media that needs to overflow the container, you can cancel the maximum width by selecting descendants:

<article class="max-w:none_:where(img)"></article>

Using syntax

Stylizing descendant elements

Customize your fonts, foreground color, etc., add syntax in <body class=""> and rely on native inheritance behavior or use CSS selectors to preset global styles.

Use zero specificity :where() to select elements and preset styles.

<body class="font:sans font:mono_:where(code,pre)"></body>

Otherwise, you risk falling into !important hell with :is() and _ descendant selectors.

Fundamentals
Responsive Design

Adapt your user interface to different devices with flexible responsive syntax.

Fundamentals
Browser Support

The core engine of Master CSS hardly affects CSS support for browsers.

© Aoyue Design LLC.