new reset.css concept

reset.css

/*! reset.css 2 | MIT License | Android 4.3-4.4+, Chrome 39-40+, Firefox 34-35+, Internet Explorer 10-11+, iOS 7-8+, Safari 7-8+, Windows Phone 8.1+ */

[hidden], /* Internet Explorer 10- */
audio:not([controls]), /* Chrome 40+, iOS 8+, Safari 8+ */
template { /* Android 4.3-, Internet Explorer 11+, iOS 7-, Safari 7-, Windows Phone 8.1+ */
	display: none;
}

details, /* Firefox 35+, Internet Explorer 11+, Windows Phone 8.1+ */
main, /* Android 4.3-, Internet Explorer 11+, Windows Phone 8.1+ */
summary { /* Firefox 35+, Internet Explorer 11+, Windows Phone 8.1+ */
	display: block;
}

progress {
	display: inline-block; /* Internet Explorer 11+, Windows Phone 8.1+ */
}

*,
::after,
::before {
	border-style: inherit;
	border-width: 0;
	box-sizing: inherit;
	color: inherit;
	cursor: inherit;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-decoration: inherit;
	vertical-align: inherit;
}

html {
	cursor: default;
	border-style: solid;
	box-sizing: border-box;
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%; /* iOS 8+ */
}

a,
button,
input,
select {
	cursor: pointer;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace; /* Chrome, Firefox, Safari */
}

input:not([type]),
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="password"],
textarea {
	cursor: text;
}

pre {
	overflow: auto;
}

small {
	font-size: 75%;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

textarea {
	overflow: auto; /* Internet Explorer 11+ */
	resize: none; /* Chrome 40+, Firefox 35+, Safari 8+ */
}

::-moz-selection { /* Firefox 35+ */
	background-color: #B3D4FC;
	text-shadow: none;
}

::selection {
	background-color: #B3D4FC;
	text-shadow: none;
}

[disabled] {
	cursor: default;
}

[unselectable] {
	-moz-user-select: none; /* Firefox 35+ */
	-ms-user-select: none; /* Internet Explorer 11+, Windows Phone 8.1+ */
	-webkit-user-select: none; /* Chrome 40+, iOS 8+, Safari 8+ */
}

@media screen {
	[hidden~="screen"] {
		display: inherit;
	}

	[hidden~="screen"]:not(:active):not(:focus):not(:target) {
		clip: rect(0 0 0 0) !important;
		position: absolute !important;
	}
}

Notes

box-sizing: inherit: Makes it easier to change the box-sizing in specific areas, whether it’s for plugins or other components that leverage different box-sizing behavior (reference).

box-sizing: border-box: Sets a more useful box sizing method. The border-box value (as opposed to the content-box default) makes elements use their declared width, with any border and padding cut inside (reference).

font-size: 75%: Improve consistency on this particular element. Browsers implement font-size: smaller inconsistently. Given the differences, we can do whatever we want (reference).

::-moz-selection: This prefix is being removed in some future version of Firefox (reference).

background-color: #B3D4FC: Restores the background color on a text selection inadvertently removed by declaring this selector.

text-shadow: none: Removes text-shadow in selection highlight to avoid illegible text selections (reference).

[hidden="screen"]: Visually hides the element while keeping its content available to screenreaders. This is an experimental change. (reference).

:not(:active):not(:focus):not(:target): Avoids the visually hidden state when the element is active, focused, or the target. When an element is both visually hidden and focusable or targetable, like “skip to main content” links at the top of a page, the desired effect is to have them become visible on focus or target (reference).

absence of text-rendering: optimizeLegibility: There are significant, effectively-fatal performance problems on mobile devices when using optimizeLegibility for long pages (reference).

I like this.

The one question I have is why add styling to ::selection? Not sure what problem that piece is solving.

It's solving unreadable text during selection. Text shadows generally don't play nice with selection, makes sense to disable them.

Not sure I agree with resize: none; on textareas by default though...