.NET Tips and Tricks

Blog archive

Free Tool: Don't Reset Your CSS, Normalize It

Standards must be wonderful things; after all, there are so many of them. And there's a different standard for CSS defaults for every browser. As a result, if there's any relevant CSS setting that you don't supply a value for in your CSS, your perfectly good stylesheet will cause your page to display "uniquely" in every browser (and unique is never good).

The typical solution to this problem is to use a "CSS Reset" stylesheet, which shoves a value into every CSS setting (margins, line heights, font size) that might matter to you. But CSS Resets just steamrolls over the defaults, setting all numeric values to 0 or 1. It's a "zeroing out" approach. Since those "zeroed out" settings probably aren't what you want, you have to write a lot more CSS to provide values for those defaults.

Normalize.css takes a different approach. Rather than make every browser look like nothing, Normalize tries to make every browser look the same. Normalize.css attempts to support the browser defaults that are actually common, and bring those browsers that don't use those common defaults around to those defaults. So, for example, Normalize ensures that superscripts and subscripts use the same font-size and line-height in all browsers rather than zeroing those values out and forcing you to specify them. You can argue with the defaults the authors have chosen as "common," but they have drawn on the specifications established by a number of industry groups, including WHATWG (the people who brought you HTML5).

From a user interface design point of view, this is a two-edged sword. Users value consistency in their UIs more than anything else. Normalize.css will make your pages look alike across all browsers. But it also means that when your page is displayed in Chrome, your page may not look like every other Chrome page. I'm OK with that, but you're free to disagree.

Normalize.css is up to date with HTML5, understands mobile browsers, is easy to add to your project, and is well documented so that you know what it's doing (and why). It's not even very big. It should be the start point for all of your styling.

Posted by Peter Vogel on 07/30/2013 at 1:16 PM


comments powered by Disqus

Featured

  • Purple Blue Nebula Graphic

    How to Compute Disorder for Machine Learning Decision Trees Using C#

    Using a decision tree classifier from a machine learning library is often awkward because it usually must be customized and library decision trees have many complex supporting functions, says resident data scientist Dr. James McCaffrey, so when he needs a decision tree classifier, he always creates one from scratch. Here's how.

  • Blazor's Future: gRPC Is Key

    Blazor guru Steve Sanderson detailed what Microsoft is thinking about the future of the revolutionary project that enables .NET-based web development using C# instead of JavaScript, explaining how gRPC is key, along with a new way of testing and a scheme for installable desktop apps.

  • Don't Do It All Yourself: Exploiting gRPC Well Known Types in .NET Core

    If you're creating business services that send dates and decimal data then you may be concerned that gRPC services don't support the relevant data types. Don't Panic! There are solutions. Here's how to use them.

  • Sign

    Microsoft Points Blazor to Native Mobile Apps

    Blazor, the red-hot Microsoft project that lets .NET developers use C# for web development instead of JavaScript, is now being pointed toward the mobile realm, targeting native iOS and Android apps.

  • Circl

    Implementing State in .NET Core gRPC Messages with oneof

    In the real world, you've been dealing with the State pattern every time you designed a set of database tables. The Protocol Buffers specification lets you do the same thing when you define the messages you send and receive from your gRPC Web Service.

.NET Insight

Sign up for our newsletter.

Terms and Privacy Policy consent

I agree to this site's Privacy Policy.

Upcoming Events