Getting Started

Preset and normalize global styles.

Normalizing browsers and presetting global styles make subsequent style programming neater.

Setup

Download

npm install @master/normal.css

Import into your global CSS file:

@import '@master/normal.css';

CDN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.master.co/normal.css" rel="stylesheet">
</head>
</html>

Features

Here are some optimizations and presets made by @master/normal.css, the complete code is here.

If you want to stay lazy, you can use it without even knowing the behavior behind it!

Geometric precision rendering for prettier text

* {
    text-rendering: geometricPrecision;
}

Antialiased font smoothing looks great

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

Standard CSS font variables and presets

:root {
    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    --font-serif: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
}
body {
    font-family: var(--font-sans);
}
code,
kbd,
samp {
    font-family: var(--font-mono);
}

Remove margins and padding from certain elements

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

Uniform box sizing calculation

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

Neutral typography and formatting

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-tab-size: 4;
    tab-size: 4;
}
b,
strong {
    font-weight: bolder;
}
small {
    font-size: 80%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}
ul {
    list-style: none;
}
hr {
    height: 0;
    color: inherit;
}

Preset some elements as block

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
}
© Aoyue Design LLC.
關於此頁的問題
編輯自Aron