thallada/default-stylesheet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Tyler Hallada 2018-02-18 18:36:16 -05:00
commit 8edd9f7ac0
16 changed files with 11563 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules

186
README.md Normal file
View File

@ -0,0 +1,186 @@
# Default Stylesheet
Return styles to browser defaults.
## Warning: Work in Progress!
This technique is still a work in progress. Styles for all elements are not yet
completely isolated. Using the Firefox's browser default stylesheet means that
it doesn't quite work as expected in other browsers.
To see the current progress for yourself:
```bash
git clone https://github.com/thallada/default-stylesheet
cd default-stylesheet
npm install
npm run build
python -m SimpleHTTPServer 8888
```
Then visit `http://localhost:8888/example/index.html` in your browser.
That said, I've had success using only Bootstrap components on top of this reset
in another project.
## Why this is needed
If you have applied an [`all:
initial`](https://developer.mozilla.org/en-US/docs/Web/CSS/all) reset, the
affected elements will have absolutely no styling because they have been reset
to the element's initial values as defined in the CSS spec (e.g. all elements
will be inline). `all: initial` effectively undoes all styling on an element
including the browser default styling.
Applying this stylesheet after applying an `all: initial` style will return
elements to some sane browser default. It "redoes" the browser default
stylesheet after undoing it.
## Will this work in non-Firefox browsers?
Theoretically yes, you will just end up with a styling that looks a lot like
Firefox. This stylesheet is based upon the [default Firefox
stylesheets](https://dxr.mozilla.org/mozilla-central/source/layout/style/res),
but with modifications to remove `-moz-` prefixes, `%if` blocks, and
Firefox-specific properties.
You can use CSS resets, such as
[normalize.css](https://necolas.github.io/normalize.css/), to normalize the
Firefox styling to a cross-browser default standard.
## Usage
You have two options:
### Import source and process with Webpack (recommended)
Using [Webpack](https://webpack.js.org/) with [PostCSS](http://postcss.org/)
will give you the most control over how this stylesheet is applied.
Additionally, since `all: initial` is only supported by Firefox at the time of
writing, the [`postcss-initial`
plugin](https://github.com/maximkoretskiy/postcss-initial) is necessary to
polyfill it for other browsers.
If you are using `all: initial` to isolate a specific element on the page from
the surrounding CSS cascade, you will likely want to scope it and this
stylesheet to that specific element. This can either be done by nesting
[Sass](https://sass-lang.com/) selectors or by using the
[`postcss-prepend-selector`
plugin](https://www.npmjs.com/package/postcss-prepend-selector).
The advantage of using `postcss-prepend-selector` is that you won't have to wrap
every style in a selector to your embedded element. It will automatically
prepend every selector in your project with the selector at Webpack build-time.
Here is an example of a Sass file that fully resets an embedded element:
```scss
/* Note: Because postcss-prepend-selector is used in this project, all selectors defined in any CSS/SCSS file will have
* "#embedded.embedded " prepended to them so that all styles here will be scoped to *only* the root div. */
/* reset all element properties to initial values as defined in CSS spec (*not* browser defaults) */
* {
all: initial;
/* allow all elements to inherit these properties from the root "body" div */
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
text-align: left;
background-color: inherit;
cursor: inherit;
}
/* apply Firefox's default stylesheet so that Bootstrap has some browser-like styling to work with */
@import '~default-stylesheet/default.css';
/* apply the Bootstrap reboot (normalize.css) to convert Firefox default styling to some cross-browser baseline
* then, apply the Bootstrap component styling */
@import '~bootstrap/scss/bootstrap';
/* Since elements inside the embedded div can no longer inherit styles set on the <body>, we will apply the styles
* that the Bootstrap reboot applies to the <body> on the wrapper div instead, which containing elements can inherit.
*
* <div id="embedded" class="embedded">
* <div class="embedded-wrapper">
* <!-- ... embedded component here ... -->
* </div>
* </div>
*/
.embedded-wrapper {
font-family: $font-family-base;
font-size: $font-size-base;
font-weight: $font-weight-base;
line-height: $line-height-base;
color: $body-color;
text-align: left;
background-color: rgb(255, 255, 255);
}
```
And an example Webpack 3 SCSS/CSS rule to process it:
```javascript
{
test: /(.scss|.css)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
ident: 'postcss',
plugins: () => [
/* eslint-disable global-require */
require('autoprefixer'),
require('postcss-initial')(),
require('postcss-prepend-selector')({ selector: '#embedded.embedded ' }),
/* eslint-enable global-require */
],
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
includePaths: [
path.join(__dirname, '../node_modules'),
path.join(__dirname, '../src'),
],
},
},
],
},
```
### Include pre-built CSS
This project includes built CSS files in-case you are not using Webpack or
PostCSS. However, all of the styles are scoped to the hard-coded selector
"#embedded.embedded". Make sure there is an element on the page that has the id
"embedded" and a class name of "embedded". The styles will be applied to that
div.
```html
<html>
<head>
<!--- ... other stylesheets ... -->
<link rel="stylesheet" type="text/css" href="default.min.css">
</head>
<body>
<!-- ... other elements not affected ... -->
<div id="embedded" class="embedded">
<!--- ... embedded component here will be reset to default ... -->
</div>
<!-- ... other elements not affected ... -->
</body>
</html
```

935
chrome-default.css Normal file
View File

@ -0,0 +1,935 @@
/*
* The default style sheet used to render HTML.
*
* Copyright (C) 2000 Lars Knoll (knoll@kde.org)
* Copyright (C) 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 Apple Inc. All rights reserved.
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU Library General Public
* License as published by the Free Software Foundation; either
* version 2 of the License, or (at your option) any later version.
*
* This library is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Library General Public License for more details.
*
* You should have received a copy of the GNU Library General Public License
* along with this library; see the file COPYING.LIB. If not, write to
* the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
* Boston, MA 02110-1301, USA.
*
*/
@namespace "http://www.w3.org/1999/xhtml";
html {
display: block
}
/* children of the <head> element all have display:none */
head {
display: none
}
meta {
display: none
}
title {
display: none
}
link {
display: none
}
style {
display: none
}
script {
display: none
}
/* generic block-level elements */
body {
display: block;
margin: 8px
}
body:-webkit-full-page-media {
background-color: rgb(0, 0, 0)
}
p {
display: block;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
}
div {
display: block
}
layer {
display: block
}
article, aside, footer, header, hgroup, main, nav, section {
display: block
}
marquee {
display: inline-block;
}
address {
display: block
}
blockquote {
display: block;
margin-before: 1em;
margin-after: 1em;
margin-start: 40px;
margin-end: 40px;
}
figcaption {
display: block
}
figure {
display: block;
margin-before: 1em;
margin-after: 1em;
margin-start: 40px;
margin-end: 40px;
}
q {
display: inline
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
center {
display: block;
/* special centering to be able to emulate the html4/netscape behaviour */
text-align: center
}
hr {
display: block;
margin-before: 0.5em;
margin-after: 0.5em;
margin-start: auto;
margin-end: auto;
border-style: inset;
border-width: 1px
}
map {
display: inline
}
video {
object-fit: contain;
}
/* heading elements */
h1 {
display: block;
font-size: 2em;
margin-before: 0.67em;
margin-after: 0.67em;
margin-start: 0;
margin-end: 0;
font-weight: bold
}
:any(article,aside,nav,section) h1 {
font-size: 1.5em;
margin-before: 0.83em;
margin-after: 0.83em;
}
:any(article,aside,nav,section) :any(article,aside,nav,section) h1 {
font-size: 1.17em;
margin-before: 1em;
margin-after: 1em;
}
:any(article,aside,nav,section) :any(article,aside,nav,section) :any(article,aside,nav,section) h1 {
font-size: 1.00em;
margin-before: 1.33em;
margin-after: 1.33em;
}
:any(article,aside,nav,section) :any(article,aside,nav,section) :any(article,aside,nav,section) :any(article,aside,nav,section) h1 {
font-size: .83em;
margin-before: 1.67em;
margin-after: 1.67em;
}
:any(article,aside,nav,section) :any(article,aside,nav,section) :any(article,aside,nav,section) :any(article,aside,nav,section) :any(article,aside,nav,section) h1 {
font-size: .67em;
margin-before: 2.33em;
margin-after: 2.33em;
}
h2 {
display: block;
font-size: 1.5em;
margin-before: 0.83em;
margin-after: 0.83em;
margin-start: 0;
margin-end: 0;
font-weight: bold
}
h3 {
display: block;
font-size: 1.17em;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
font-weight: bold
}
h4 {
display: block;
margin-before: 1.33em;
margin-after: 1.33em;
margin-start: 0;
margin-end: 0;
font-weight: bold
}
h5 {
display: block;
font-size: .83em;
margin-before: 1.67em;
margin-after: 1.67em;
margin-start: 0;
margin-end: 0;
font-weight: bold
}
h6 {
display: block;
font-size: .67em;
margin-before: 2.33em;
margin-after: 2.33em;
margin-start: 0;
margin-end: 0;
font-weight: bold
}
/* tables */
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray
}
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit
}
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit
}
/* for tables without table section elements (can happen with XHTML or dynamically created tables) */
table > tr {
vertical-align: middle;
}
col {
display: table-column
}
colgroup {
display: table-column-group
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit
}
td, th {
display: table-cell;
vertical-align: inherit
}
th {
font-weight: bold
}
caption {
display: table-caption;
text-align: center
}
/* lists */
ul, menu, dir {
display: block;
list-style-type: disc;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
padding-start: 40px
}
ol {
display: block;
list-style-type: decimal;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
padding-start: 40px
}
li {
display: list-item;
text-align: match-parent;
}
ul ul, ol ul {
list-style-type: circle
}
ol ol ul, ol ul ul, ul ol ul, ul ul ul {
list-style-type: square
}
dd {
display: block;
margin-start: 40px
}
dl {
display: block;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
}
dt {
display: block
}
ol ul, ul ol, ul ul, ol ol {
margin-before: 0;
margin-after: 0
}
/* form elements */
form {
display: block;
margin-top: 0em;
}
label {
cursor: default;
}
legend {
display: block;
padding-start: 2px;
padding-end: 2px;
border: none
}
fieldset {
display: block;
margin-start: 2px;
margin-end: 2px;
padding-before: 0.35em;
padding-start: 0.75em;
padding-end: 0.75em;
padding-after: 0.625em;
border: 2px groove ThreeDFace;
min-width: min-content;
}
button {
appearance: button;
}
/* Form controls don't go vertical. */
input, textarea, keygen, select, button, meter, progress {
webkit-writing-mode: horizontal-tb !important;
}
input, textarea, keygen, select, button {
margin: 0em;
font: small-control;
text-rendering: auto; /* FIXME: Remove when tabs work with optimizeLegibility. */
color: initial;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0;
text-shadow: none;
display: inline-block;
text-align: start;
}
input[type="hidden"] {
display: none
}
input {
appearance: textfield;
padding: 1px;
background-color: white;
border: 2px inset;
rtl-ordering: logical;
user-select: text;
cursor: auto;
}
input[type="search"] {
appearance: searchfield;
box-sizing: border-box;
}
input::-webkit-textfield-decoration-container {
display: flex;
align-items: center;
-webkit-user-modify: read-only !important;
content: none !important;
}
input[type="search"]::-webkit-textfield-decoration-container {
direction: ltr;
}
input::-webkit-clear-button {
-webkit-appearance: searchfield-cancel-button;
display: inline-block;
flex: none;
-webkit-user-modify: read-only !important;
-webkit-margin-start: 2px;
opacity: 0;
pointer-events: none;
}
input:enabled:read-write:any(:focus,:hover)::-webkit-clear-button {
opacity: 1;
pointer-events: auto;
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
display: block;
flex: none;
-webkit-user-modify: read-only !important;
-webkit-margin-start: 1px;
opacity: 0;
pointer-events: none;
}
input[type="search"]:enabled:read-write:any(:focus,:hover)::-webkit-search-cancel-button {
opacity: 1;
pointer-events: auto;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: searchfield-decoration;
display: block;
flex: none;
-webkit-user-modify: read-only !important;
-webkit-align-self: flex-start;
margin: auto 0;
}
input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: searchfield-results-decoration;
display: block;
flex: none;
-webkit-user-modify: read-only !important;
-webkit-align-self: flex-start;
margin: auto 0;
}
input::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button;
display: inline-block;
cursor: default;
flex: none;
align-self: stretch;
-webkit-user-select: none;
-webkit-user-modify: read-only !important;
opacity: 0;
pointer-events: none;
}
input:enabled:read-write:any(:focus,:hover)::-webkit-inner-spin-button {
opacity: 1;
pointer-events: auto;
}
keygen, select {
border-radius: 5px;
}
keygen::-webkit-keygen-select {
margin: 0px;
}
textarea {
-webkit-appearance: textarea;
background-color: white;
border: 1px solid;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
flex-direction: column;
resize: auto;
cursor: auto;
padding: 2px;
white-space: pre-wrap;
word-wrap: break-word;
}
::-webkit-input-placeholder {
-webkit-text-security: none;
color: darkGray;
pointer-events: none !important;
}
input::-webkit-input-placeholder {
white-space: pre;
word-wrap: normal;
overflow: hidden;
-webkit-user-modify: read-only !important;
}
input[type="password"] {
-webkit-text-security: disc !important;
}
input[type="hidden"], input[type="image"], input[type="file"] {
appearance: initial;
padding: initial;
background-color: initial;
border: initial;
}
input[type="file"] {
align-items: baseline;
color: inherit;
text-align: start !important;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: #FAFFBD !important;
background-image:none !important;
color: #000000 !important;
}
input[type="radio"], input[type="checkbox"] {
margin: 3px 0.5ex;
padding: initial;
background-color: initial;
border: initial;
}
input[type="button"], input[type="submit"], input[type="reset"] {
appearance: push-button;
user-select: none;
white-space: pre
}
input[type="file"]::-webkit-file-upload-button {
-webkit-appearance: push-button;
-webkit-user-modify: read-only !important;
white-space: nowrap;
margin: 0;
font-size: inherit;
}
input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: ButtonText;
padding: 2px 6px 3px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
box-sizing: border-box
}
input[type="range"] {
appearance: slider-horizontal;
padding: initial;
border: initial;
margin: 2px;
color: #909090;
}
input[type="range"]::-webkit-slider-container, input[type="range"]::-webkit-media-slider-container {
flex: 1;
min-width: 0;
box-sizing: border-box;
-webkit-user-modify: read-only !important;
display: flex;
}
input[type="range"]::-webkit-slider-runnable-track {
flex: 1;
min-width: 0;
-webkit-align-self: center;
box-sizing: border-box;
-webkit-user-modify: read-only !important;
display: block;
}
input[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-media-slider-thumb {
-webkit-appearance: sliderthumb-horizontal;
box-sizing: border-box;
-webkit-user-modify: read-only !important;
display: block;
}
input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled,
input[type="file"]:disabled::-webkit-file-upload-button, button:disabled,
select:disabled, keygen:disabled, optgroup:disabled, option:disabled,
select[disabled]>option {
color: GrayText
}
input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, input[type="file"]:active::-webkit-file-upload-button, button:active {
border-style: inset
}
input[type="button"]:active:disabled, input[type="submit"]:active:disabled, input[type="reset"]:active:disabled, input[type="file"]:active:disabled::-webkit-file-upload-button, button:active:disabled {
border-style: outset
}
option:-internal-spatial-navigation-focus {
outline: black dashed 1px;
outline-offset: -1px;
}
datalist {
display: none
}
area {
display: inline;
cursor: pointer;
}
param {
display: none
}
input[type="checkbox"] {
appearance: checkbox;
box-sizing: border-box;
}
input[type="radio"] {
appearance: radio;
box-sizing: border-box;
}
input[type="color"] {
appearance: square-button;
width: 44px;
height: 23px;
background-color: ButtonFace;
/* Same as native_theme_base. */
border: 1px #a9a9a9 solid;
padding: 1px 2px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
display:flex;
padding: 4px 2px;
box-sizing: border-box;
-webkit-user-modify: read-only !important;
width: 100%;
height: 100%
}
input[type="color"]::-webkit-color-swatch {
background-color: #000000;
border: 1px solid #777777;
flex: 1;
min-width: 0;
-webkit-user-modify: read-only !important;
}
input[type="color"][list] {
appearance: menulist;
width: 88px;
height: 23px
}
input[type="color"][list]::-webkit-color-swatch-wrapper {
padding-left: 8px;
padding-right: 24px;
}
input[type="color"][list]::-webkit-color-swatch {
border-color: #000000;
}
input::-webkit-calendar-picker-indicator {
display: inline-block;
width: 0.66em;
height: 0.66em;
padding: 0.17em 0.34em;
-webkit-user-modify: read-only !important;
opacity: 0;
pointer-events: none;
}
input::-webkit-calendar-picker-indicator:hover {
background-color: #eee;
}
input:enabled:read-write:any(:focus,:hover)::-webkit-calendar-picker-indicator,
input::-webkit-calendar-picker-indicator:focus {
opacity: 1;
pointer-events: auto;
}
input[type="date"]:disabled::-webkit-clear-button,
input[type="date"]:disabled::-webkit-inner-spin-button,
input[type="datetime-local"]:disabled::-webkit-clear-button,
input[type="datetime-local"]:disabled::-webkit-inner-spin-button,
input[type="month"]:disabled::-webkit-clear-button,
input[type="month"]:disabled::-webkit-inner-spin-button,
input[type="week"]:disabled::-webkit-clear-button,
input[type="week"]:disabled::-webkit-inner-spin-button,
input:disabled::-webkit-calendar-picker-indicator,
input[type="date"][readonly]::-webkit-clear-button,
input[type="date"][readonly]::-webkit-inner-spin-button,
input[type="datetime-local"][readonly]::-webkit-clear-button,
input[type="datetime-local"][readonly]::-webkit-inner-spin-button,
input[type="month"][readonly]::-webkit-clear-button,
input[type="month"][readonly]::-webkit-inner-spin-button,
input[type="week"][readonly]::-webkit-clear-button,
input[type="week"][readonly]::-webkit-inner-spin-button,
input[readonly]::-webkit-calendar-picker-indicator {
visibility: hidden;
}
select {
appearance: menulist;
box-sizing: border-box;
align-items: center;
border: 1px solid;
white-space: pre;
rtl-ordering: logical;
color: black;
background-color: white;
cursor: default;
}
select:not(:-internal-list-box) {
overflow: visible !important;
}
select:-internal-list-box {
appearance: listbox;
align-items: flex-start;
border: 1px inset gray;
border-radius: initial;
overflow-x: hidden;
overflow-y: scroll;
vertical-align: text-bottom;
user-select: none;
white-space: nowrap;
}
optgroup {
font-weight: bolder;
display: block;
}
option {
font-weight: normal;
display: block;
padding: 0 2px 1px 2px;
white-space: pre;
min-height: 1.2em;
}
select:-internal-list-box optgroup option:before {
content: "\00a0\00a0\00a0\00a0";;
}
select:-internal-list-box option,
select:-internal-list-box optgroup {
line-height: initial !important;
}
select:-internal-list-box:focus option:checked {
background-color: -internal-active-list-box-selection !important;
color: -internal-active-list-box-selection-text !important;
}
select:-internal-list-box option:checked {
background-color: -internal-inactive-list-box-selection !important;
color: -internal-inactive-list-box-selection-text !important;
}
select:-internal-list-box:disabled option:checked,
select:-internal-list-box option:checked:disabled {
color: gray !important;
}
select:-internal-list-box hr {
border-style: none;
}
output {
display: inline;
}
/* meter */
meter {
appearance: meter;
box-sizing: border-box;
display: inline-block;
height: 1em;
width: 5em;
vertical-align: -0.2em;
}
meter::-webkit-meter-inner-element {
-webkit-appearance: inherit;
box-sizing: inherit;
-webkit-user-modify: read-only !important;
height: 100%;
width: 100%;
}
meter::-webkit-meter-bar {
background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd);
height: 100%;
width: 100%;
-webkit-user-modify: read-only !important;
box-sizing: border-box;
}
meter::-webkit-meter-optimum-value {
background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7);
height: 100%;
-webkit-user-modify: read-only !important;
box-sizing: border-box;
}
meter::-webkit-meter-suboptimum-value {
background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7);
height: 100%;
-webkit-user-modify: read-only !important;
box-sizing: border-box;
}
meter::-webkit-meter-even-less-good-value {
background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77);
height: 100%;
-webkit-user-modify: read-only !important;
box-sizing: border-box;
}
/* progress */
progress {
appearance: progress-bar;
box-sizing: border-box;
display: inline-block;
height: 1em;
width: 10em;
vertical-align: -0.2em;
}
progress::-webkit-progress-inner-element {
-webkit-appearance: inherit;
box-sizing: inherit;
-webkit-user-modify: read-only;
height: 100%;
width: 100%;
}
progress::-webkit-progress-bar {
background-color: gray;
height: 100%;
width: 100%;
-webkit-user-modify: read-only !important;
box-sizing: border-box;
}
progress::-webkit-progress-value {
background-color: green;
height: 100%;
width: 50%; /* should be removed later */
-webkit-user-modify: read-only !important;
box-sizing: border-box;
}
/* inline elements */
u, ins {
text-decoration: underline
}
strong, b {
font-weight: bold
}
i, cite, em, var, address, dfn {
font-style: italic
}
tt, code, kbd, samp {
font-family: monospace
}
pre, xmp, plaintext, listing {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0
}
mark {
background-color: yellow;
color: black
}
big {
font-size: larger
}
small {
font-size: smaller
}
s, strike, del {
text-decoration: line-through
}
sub {
vertical-align: sub;
font-size: smaller
}
sup {
vertical-align: super;
font-size: smaller
}
nobr {
white-space: nowrap
}
/* states */
:focus {
outline: auto 5px Highlight
}
/* Read-only text fields do not show a focus ring but do still receive focus */
html:focus, body:focus, input[readonly]:focus {
outline: none
}
embed:focus, iframe:focus, object:focus {
outline: none
}
input:focus, textarea:focus, keygen:focus, select:focus {
outline-offset: -2px
}
input[type="button"]:focus,
input[type="checkbox"]:focus,
input[type="file"]:focus,
input[type="hidden"]:focus,
input[type="image"]:focus,
input[type="radio"]:focus,
input[type="reset"]:focus,
input[type="search"]:focus,
input[type="submit"]:focus,
input[type="file"]:focus::-webkit-file-upload-button {
outline-offset: 0
}
a:any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
a:any-link:active {
color: -webkit-activelink
}
/* HTML5 ruby elements */
ruby, rt {
text-indent: 0; /* blocks used for ruby rendering should not trigger this */
}
rt {
line-height: normal;
text-emphasis: none;
}
ruby > rt {
display: block;
font-size: 50%;
text-align: start;
}
ruby > rp {
display: none;
}
/* other elements */
noframes {
display: none
}
frameset, frame {
display: block
}
frameset {
border-color: inherit
}
iframe {
border: 2px inset
}
details {
display: block
}
summary {
display: block
}
summary::-webkit-details-marker {
display: inline-block;
width: 0.66em;
height: 0.66em;
-webkit-margin-end: 0.4em;
}
template {
display: none
}
bdi, output {
unicode-bidi: isolate;
}
bdo {
unicode-bidi: bidi-override;
}
textarea[dir=auto] {
unicode-bidi: plaintext;
}
dialog:not([open]) {
display: none
}
dialog {
position: absolute;
left: 0;
right: 0;
width: fit-content;
height: fit-content;
margin: auto;
border: solid;
padding: 1em;
background: white;
color: black
}
dialog::backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.1)
}
/* page */
@page {
/* FIXME: Define the right default values for page properties. */
size: auto;
margin: auto;
padding: 0px;
border-width: 0px;
}
/* Disable multicol in printing, since it's not implemented properly. See crbug.com/99358 */
@media print {
* { columns: auto !important; }
}
/* noscript is handled internally, as it depends on settings. */

1
dist/default.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

74
dist/default.min.js vendored Normal file
View File

@ -0,0 +1,74 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ })
/******/ ]);
//# sourceMappingURL=default.min.js.map

1
dist/default.min.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["webpack:///webpack/bootstrap e6c9d4c4d948628824e9","webpack:///./firefox.css"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;AC7DA,yC","file":"default.min.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap e6c9d4c4d948628824e9","// removed by extract-text-webpack-plugin\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./firefox.css\n// module id = 0\n// module chunks = 0"],"sourceRoot":""}

1
dist/example.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

75
dist/example.min.js vendored Normal file
View File

@ -0,0 +1,75 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 1);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */,
/* 1 */
/***/ (function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ })
/******/ ]);
//# sourceMappingURL=example.min.js.map

1
dist/example.min.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["webpack:///webpack/bootstrap e6c9d4c4d948628824e9","webpack:///./example/example.scss"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;;AC7DA,yC","file":"example.min.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 1);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap e6c9d4c4d948628824e9","// removed by extract-text-webpack-plugin\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./example/example.scss\n// module id = 1\n// module chunks = 1"],"sourceRoot":""}

46
example/example.scss Normal file
View File

@ -0,0 +1,46 @@
/* Note: Because postcss-prepend-selector is used in this project, all selectors defined in any CSS/SCSS file will have
* "#embedded.embedded " prepended to them so that all styles here will be scoped to *only* the root div. */
/* reset all element properties to initial values as defined in CSS spec (*not* browser defaults) */
* {
all: initial;
/* allow all elements to inherit these properties from the root "body" div */
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
text-align: left;
background-color: inherit;
cursor: inherit;
}
/* apply Firefox's default stylesheet so that Bootstrap has some browser-like styling to work with */
// @import '../default.css';
@import '../firefox.css';
/* apply the Bootstrap reboot (normalize.css) to convert Firefox default styling to some cross-browser baseline
* then, apply the Bootstrap component styling */
// @import '~bootstrap/scss/bootstrap';
/* Since elements inside the embedded div can no longer inherit styles set on the <body>, we will apply the styles
* that the Bootstrap reboot applies to the <body> on the wrapper div instead, which containing elements can inherit.
*
* <div id="embedded" class="embedded">
* <div class="embedded-wrapper">
* <!-- ... embedded component here ... -->
* </div>
* </div>
*/
.embedded-wrapper {
font-family: sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 16px;
color: black;
text-align: left;
background-color: rgb(255, 255, 255);
border: 2px solid red;
margin: 10px;
padding: 10px;
}

66
example/index.html Normal file
View File

@ -0,0 +1,66 @@
<html>
<head>
<style>
body {
background-color: cornsilk;
}
p, input, label, select, ul, ol, code, pre, blockquote, button {
background-color: pink;
color: black;
font-family: monospace;
margin: 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="../dist/example.min.css">
</head>
<body>
<div>
<p>These are elements affected by the global styling on this page.</p>
<label><input type="checkbox"> A checkbox</label><br>
<input type="button" value="A button"><br>
<input type="textarea" value="Example text"><br>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<ul>
<li>One</li>
<li>Two</li>
</ul>
<ol>
<li>One</li>
<li>Two</li>
</ol>
<code>function () { console.log('Hello, world!'); }</code><br>
<pre>preformatted</pre><br>
<blockquote>"This is a blockquote!"</blockquote>
<button>Button!</button>
</div>
<div id="embedded" class="embedded">
<div class="embedded-wrapper">
<p>This is an embedded component isolated from the surrounding CSS cascade.</p>
<label><input type="checkbox"> A checkbox</label><br>
<input type="button" value="A button"><br>
<input type="textarea" value="Example text"><br>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<ul>
<li>One</li>
<li>Two</li>
</ul>
<ol>
<li>One</li>
<li>Two</li>
</ol>
<code>function () { console.log('Hello, world!'); }</code><br>
<pre>preformatted</pre><br>
<blockquote>"This is a blockquote!"</blockquote>
<button>Button!</button>
</div>
</div>
</body>
</html>

2648
firefox.css Normal file
View File

File diff suppressed because it is too large Load Diff

1
index.js Normal file
View File

@ -0,0 +1 @@
import defaultStyle from './default.css';

7411
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

49
package.json Normal file
View File

@ -0,0 +1,49 @@
{
"name": "default-stylesheet",
"version": "0.1.0",
"description": "Return styles to browser defaults.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "./node_modules/.bin/webpack"
},
"repository": {
"type": "git",
"url": "git+https://github.com/thallada/default-stylesheet.git"
},
"keywords": [
"css",
"unreset",
"all:initial",
"reset",
"postcss",
"browser",
"default",
"stylesheet"
],
"author": {
"name": "Tyler Hallada",
"email": "tyler@hallada.net",
"url": "https://www.hallada.net"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/thallada/default-stylesheet/issues"
},
"homepage": "https://github.com/thallada/default-stylesheet#readme",
"devDependencies": {
"autoprefixer": "^8.0.0",
"bootstrap": "^4.0.0",
"css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.7.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"postcss-initial": "^2.0.0",
"postcss-loader": "^2.1.0",
"postcss-prepend-selector": "^0.3.1",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.2",
"webpack": "^3.11.0"
},
"dependencies": {}
}

67
webpack.config.js Normal file
View File

@ -0,0 +1,67 @@
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: {
default: path.resolve(__dirname, 'firefox.css'),
example: path.resolve(__dirname, 'example/example.scss')
},
output: {
filename: '[name].min.js',
path: path.resolve(__dirname, 'dist'),
},
devtool: 'source-map',
module: {
rules: [
{
test: /(.scss|.css)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
minimize: true,
importLoaders: 1,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
ident: 'postcss',
plugins: () => [
/* eslint-disable global-require */
require('autoprefixer'),
require('postcss-initial')(),
require('postcss-prepend-selector')({ selector: '#embedded.embedded ' }),
/* eslint-enable global-require */
],
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
includePaths: [
path.join(__dirname),
path.join(__dirname, 'node_modules'),
],
},
},
],
}),
},
],
},
plugins: [
new ExtractTextPlugin({
filename: '[name].min.css',
allChunks: true,
}),
new OptimizeCssAssetsPlugin(),
],
};