Categories: CSSScriptWeb Design

CSS Reset For Modern Web Development – normal.css

normal.css is a super tiny (~600kb) CSS reset library that provides a consistent, cross-browser foundation for your CSS styles. It eliminates the need to write repetitive reset rules and allows you to focus on writing your own styles without worrying about browser inconsistencies.

normal.css offers several enhancements over traditional CSS reset libraries like normalize.css, such as better support for responsive media, improved text rendering, and a more comprehensive set of reset rules. These features make it easier to build modern, responsive web applications with beautiful typography and consistent styling across all devices.

Table of Contents

Toggle

How to use it:

1. Install the normal.css with NPM.

# NPM
$ npm install @master/normal.css

2. Import the normal.css into your project.

// All in one
@import '@master/normal.css';
// 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-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';

3. Or load the normal.css from a CDN.

<link rel="stylesheet" href="https://cdn.master.co/normal.css">

Changelog:

v3.2.0 (04/19/2025)

  • Consistent device view height

v3.1.0 (06/09/2024)

  • Remove heading styles
  • Buttons and links should not be pointer

v3.0.2 (05/08/2024)

  • Bugfixes

v3.0.0 (05/02/2024)

  • Add @layer base to lower the precedence for all rules

v2.1.1 (03/12/2024)

  • Merge rules by same selecto

The post CSS Reset For Modern Web Development – normal.css appeared first on CSS Script.

rssfeeds-admin

Share
Published by
rssfeeds-admin

Recent Posts

Warhammer 40,000 Confirms Ready-Painted Terrain for 11th Edition, but Games Workshop Rules Out Ready-Painted Miniatures

Games Workshop has shocked Warhammer 40,000 fans by confirming a leak of plans to sell…

27 minutes ago

Witnesses report racing before fatal crash at McKinney and Lafayette

FORT WAYNE IND. (WOWO) One man is dead following a fiery early-morning crash at Lafayette…

1 hour ago

The Hunt for Ben Solo Fan Campaign Takes the Fight to The Mandalorian and Grogu Premiere in Hollywood

The Hunt For Ben Solo fan campaign is still going, and its latest stunt saw…

1 hour ago

10 Anime Worth Watching This Spring

Daemons, seasonal powers, and giants are what you can expect this spring anime season. There's…

1 hour ago

This website uses cookies.