A modern alternative of CSS Resets.
- Corrects bugs and common browser inconsistencies.
- Improves usability with subtle modifications.
- Explains what code does using detailed comments.
- All
elementshaveposition: relativeby default. So, while usingposition: absoluteon a child element you don't need to worry about origins. - Heading tags such as
h1, h2, h3, h4, h5, h6have reponsivefont-size. - Elements like
canvas, iframe, img, object, svg, videowill not get overflowed or chopped off from the screen or cause any vertical/horizontal scrollbars.
To rapidly include the minified production file in your webpage.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/KunalTanwar/preflight/dist/css/preflight.min.css"
/>@import url('https://cdn.jsdelivr.net/gh/KunalTanwar/preflight/dist/css/preflight.min.css');In this version Inter is set as default font with fallbacks. Also contains different character variant : 'cv07', 'cv08', 'cv10';
You can find more character variants here
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/KunalTanwar/preflight/dist/css/preflight.inter.min.css"
/>@import url('https://cdn.jsdelivr.net/gh/KunalTanwar/preflight/dist/css/preflight.inter.min.css');You can add Inter manually or just copy the below code and paste it before preflight.inter.min.css.
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />preflight.scsspreflight.inter.scsspreflight.csspreflight.inter.csspreflight.prefixed.csspreflight.inter.prefixed.csspreflight.min.csspreflight.inter.min.css
In chrome some emojis will replace by symbols. In that case, you can wrap that emoji inside a span tag and apply :
.emoji {
font-family: var(--emoji-font); /* available globally */
}There is an open bug about this if you are interested.
Please read the contribution guidlines in order to make the contribution process easy and effective for everyone involved.