Jacob Stamm Jacob Stamm - 3 months ago 7
CSS Question

What do all the classes on my <html> tag mean?

When I'm running my ASP.NET MVC site locally, the source of any page shows a seemingly ridiculous amount of CSS classes in the

<html>
tag.

<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch
geolocation postmessage websqldatabase indexeddb hashchange history draganddrop
websockets rgba hsla multiplebgs backgroundsize borderimage borderradius
boxshadow textshadow opacity cssanimations csscolumns cssgradients
cssreflections csstransforms csstransforms3d csstransitions fontface
generatedcontent video audio localstorage sessionstorage webworkers
applicationcache svg inlinesvg smil svgclippaths">


Our site uses a number of frameworks, including jQuery, AngularJS, jqWidgets, and a few other small ones. Is it typical to have so many of these classes? And is there a way for me to find the source of each one? I don't like having so much overhead when I don't understand how it works.

Answer

Looks like the work of Modernizr, a tool for detecting feature support in browsers. Here's a snippet from their docs (emphasis mine):

By default, Modernizr sets classes for all of your tests on the root element ( for websites). This means adding the class for each feature when it is supported, and adding it with a no- prefix when it is not (e.g. .feature or .no-feature).

This essentially lets you know which features are supported by that browser and allows you (and, presumably, Modernizr) to create some contextual CSS based on that information.

You can disable this behavior, though. Check out their configuration options... particularly:

enableClasses - default: true
Whether or not Modernizr should add its CSS classes at all

Comments