diff --git a/.gitignore b/.gitignore index a064bbc..c16e9b5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .DS_Store node_modules package-lock.json -pnpm-lock.yaml \ No newline at end of file +pnpm-lock.yaml +.vscode \ No newline at end of file diff --git a/README.md b/README.md index cf65360..c553700 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ A modern approach to consistently styled elements! 🧑‍💻 ![GitHub release](https://img.shields.io/github/release/neuekit/reboot.svg?style=for-the-badge) +### M2 has dropped support for IE11 💪 This is the somewhat incredible readme for a little mashup of normalize, sanitize and opinion. A reset in it's purest form is a way to level the browser playing field, attempting to ensure that each browser displays all standardised elements the same. Although that sounds fairly trivial, in practice it is quite time consuming and requries you to check every element in a variety of situations to ensure you haven't added strange issues. @@ -38,6 +39,6 @@ To build the project manually run either `$ npm run build` To watch for changes manually run either `$ npm run watch` ## Future -Although the gains aren't massive version 2 of reboot will drop support for the dreaded Internet Explorer and v1 will be maintained as the legacy branch until Mircrosoft kills it. +M3 (version 3) will shift to use the super low specificity pseudo selector `:where` and drop support for any browsers that do not support it (classic Edge, Safari 13 etc.) **That's all! Feel free to scrutinise this repo and help improve it.** diff --git a/index.scss b/index.scss index 8aa3f65..ca85304 100644 --- a/index.scss +++ b/index.scss @@ -1,31 +1,27 @@ /*----------------------------------------------------------------------------*\ #REBOOT BROWSER STYLES - - Version: 1.10.2 - - Author: Matt Pilott + - Version: 2.0.0 + - Author: Matt Pilott && Darby Manning && Chris Myers - Site: https://github.com/neuekit/reboot - - Copyright: 2020, Matt Pilott + - Copyright: 2022, Matt Pilott – License: MIT | http://goo.gl/p3bexl - - Mentions: Based on normalize/sanitize https://goo.gl/a3DzGd \*----------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------*\ - 1. Set background size to cover in all browsers (opinion). - 2. Remove repeating backgrounds in all browsers (opinion). - 3. Set background position to center apart from to pseudos (opinion). + 1. Remove repeating backgrounds in all browsers (opinion). + 2. Set background position to center apart from to pseudos (opinion). + 3. Set background size to cover in all browsers (opinion). 4. Add box sizing in all browsers (opinion). 5. Add relative positioning (opinion). \*----------------------------------------------------------------------------*/ -* { - background-size: cover; /* 1 */ -} - *, ::before, ::after { - background-repeat: no-repeat; /* 2 */ - background-position: center; /* 3 */ + background-repeat: no-repeat; /* 1 */ + background-position: center; /* 2 */ + background-size: cover; /* 3 */ box-sizing: border-box; /* 4 */ position: relative; /* 5 */ } @@ -63,11 +59,21 @@ html { /*----------------------------------------------------------------------------*\ - Remove margin in all browsers. (opinion) + 1. Set default font stack to leverage systom font (opinion) + 2. Remove margin in all browsers. (opinion) \*----------------------------------------------------------------------------*/ body { - margin: 0; + font-family: system-ui, + -apple-system, + 'Segoe UI', + Roboto, + Helvetica, + Arial, + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji'; /* 1 */ + margin: 0; /* 2 */ } @@ -83,41 +89,13 @@ h1 { /*----------------------------------------------------------------------------*\ - Remove the margin on nested lists in Chrome, Edge, IE, and Safari. -\*----------------------------------------------------------------------------*/ - -dl dl, -dl ol, -dl ul, -ol dl, -ul dl, -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; -} - - -/*----------------------------------------------------------------------------*\ - 1. Add the correct box sizing in Firefox. - 2. Show the overflow in Edge and IE. + 1. Correct the inheritance of border color in Firefox. + 2. Add the correct box sizing in Firefox. \*----------------------------------------------------------------------------*/ hr { - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - - -/*----------------------------------------------------------------------------*\ - Render the `main` element consistently in IE. - Add the correct display in Edge, IE 10+, and Firefox. -\*----------------------------------------------------------------------------*/ - -main, -details { - display: block; + color: inherit; /* 1 */ + height: 0; /* 2 */ } @@ -133,7 +111,7 @@ nav ul { /*----------------------------------------------------------------------------*\ - 1. Correct font sizing inheritance and scaling in all browsers. + 1. Set default font stack to leverage systom font (opinion) 2. Correct the odd `em` font sizing in all browsers. \*----------------------------------------------------------------------------*/ @@ -141,17 +119,21 @@ code, kbd, pre, samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ + font-family: ui-monospace, + SFMono-Regular, + Consolas, + 'Liberation Mono', + Menlo, + monospace; /* 1 */ + font-size: 1em; /* 2 */ } /*----------------------------------------------------------------------------*\ - Add the correct text decoration in Edge, IE, Opera, and Safari. + Add the correct text decoration in Edge, Opera, and Safari. \*----------------------------------------------------------------------------*/ abbr[title] { - text-decoration: underline; text-decoration: underline dotted; } @@ -175,6 +157,27 @@ small { } +/*----------------------------------------------------------------------------*\ + Stop 'sub' and 'sup' elements affecting line height in all browsers. +\*----------------------------------------------------------------------------*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + + /*----------------------------------------------------------------------------*\ Change the alignment on media elements in all browers (opinion). \*----------------------------------------------------------------------------*/ @@ -220,34 +223,23 @@ figure { /*----------------------------------------------------------------------------*\ - 1. Change the fill to match the text color in all browsers (opinion). - 2. Hide the overflow in IE. -\*----------------------------------------------------------------------------*/ - -svg { - &:not([fill]) { - fill: currentColor; /* 1 */ - } - - &:not(:root) { - overflow: hidden; /* 2 */ - } -} - - -/*----------------------------------------------------------------------------*\ - Remove border spacing in all browsers (opinion). + 1. Remove border spacing in all browsers (opinion). + 2. Correct table border color inheritance + 3. Remove text indentation from table contents \*----------------------------------------------------------------------------*/ table { - border-collapse: collapse; + border-collapse: collapse; /* 1 */ + border-color: inherit; /* 2 */ + text-indent: 0; /* 3 */ } /*----------------------------------------------------------------------------*\ - 1. Change the font styles in all browsers. - 2. Remove the margin in Firefox and Safari. - 3. Restore natural behaviour for inputs (opinion) + 1. Remove default styling (opinion). + 2. Change the font styles in all browsers. + 3. Remove the margin in Firefox and Safari. + 4. Restore natural behaviour for inputs (opinion) \*----------------------------------------------------------------------------*/ button, @@ -255,36 +247,23 @@ input, optgroup, select, textarea { - background-color: transparent; /* 1 */ - border-style: none; /* 1 */ - font-family: inherit; /* 1 */ - font-size: inherit; /* 1 */ - line-height: inherit; /* 1 */ - margin: 0; /* 2 */ - word-break: normal; /* 3 */ + background-color: transparent; /* 1 */ + border-style: none; /* 1 */ + font-family: inherit; /* 2 */ + font-size: inherit; /* 2 */ + line-height: inherit; /* 2 */ + margin: 0; /* 3 */ + word-break: normal; /* 4 */ } /*----------------------------------------------------------------------------*\ - Correct the overflow in IE. - 1. Correct the overflow in Edge -\*----------------------------------------------------------------------------*/ - -button, -input { - color: inherit; /* 1 */ - overflow: visible; /* 1 */ -} - - -/*----------------------------------------------------------------------------*\ - Remove the inheritance in Edge, Firefox, and IE. - 1. Remove the inheritance in Firefox. + Remove the inheritance in Edge, Firefox. \*----------------------------------------------------------------------------*/ button, select { - text-transform: none; /* 1 */ + text-transform: none; } @@ -314,40 +293,30 @@ fieldset { /*----------------------------------------------------------------------------*\ - 1. Correct the text wrapping in Edge and IE. - 2. Remove the padding so developers are not caught out when they zero out + Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. - 3. Correct the color inheritance from `fieldset` elements in IE. \*----------------------------------------------------------------------------*/ legend { - color: inherit; /* 3 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 2 */ - white-space: normal; /* 1 */ + padding: 0; } /*----------------------------------------------------------------------------*\ - 1. Add the correct display in Edge 18- and IE. - 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + Add the correct vertical alignment in Chrome, Firefox, and Opera. \*----------------------------------------------------------------------------*/ progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ + vertical-align: baseline; } /*----------------------------------------------------------------------------*\ - 1. Remove the vertical scrollbar in IE 10+. - 2. Change the resize direction on textareas in all browsers (opinion). + Change the resize direction on textareas in all browsers (opinion). \*----------------------------------------------------------------------------*/ textarea { - overflow: auto; /* 1 */ - resize: vertical; /* 2 */ + resize: vertical; } @@ -372,16 +341,6 @@ textarea { } -/*----------------------------------------------------------------------------*\ - Correct the text style on placeholders in Chrome, Edge, and Safari. -\*----------------------------------------------------------------------------*/ - -::-webkit-input-placeholder { - color: inherit; - opacity: 0.5; -} - - /*----------------------------------------------------------------------------*\ Remove the inner padding and cancel buttons in Chrome and Safari for macOS. \*----------------------------------------------------------------------------*/ @@ -430,33 +389,6 @@ textarea { } -/*----------------------------------------------------------------------------*\ - Add the correct styles in Edge 18-, IE, and Safari. -\*----------------------------------------------------------------------------*/ - -dialog { - background-color: white; - border: solid; - color: black; - display: block; - height: -moz-fit-content; - height: -webkit-fit-content; - height: fit-content; - left: 0; - margin: auto; - padding: 1em; - position: absolute; - right: 0; - width: -moz-fit-content; - width: -webkit-fit-content; - width: fit-content; - - &:not([open]) { - display: none; - } -} - - /*----------------------------------------------------------------------------*\ Add the correct display in all browsers. \*----------------------------------------------------------------------------*/ @@ -465,81 +397,3 @@ summary { display: list-item; } - -/*----------------------------------------------------------------------------*\ - Add the correct display in IE. -\*----------------------------------------------------------------------------*/ - -template { - display: none; -} - - -/*----------------------------------------------------------------------------*\ - Remove the tapping delay on clickable elements in all browsers (opinion). -\*----------------------------------------------------------------------------*/ - -a, -area, -button, -input, -label, -select, -summary, -textarea, -[tabindex] { - touch-action: manipulation; -} - - -/*----------------------------------------------------------------------------*\ - Change the cursor on busy elements (opinion). -\*----------------------------------------------------------------------------*/ - -[aria-busy="true"] { - cursor: progress; -} - - -/*----------------------------------------------------------------------------*\ - Change the cursor on control elements (opinion). -\*----------------------------------------------------------------------------*/ - -[aria-controls] { - cursor: pointer; -} - - -/*----------------------------------------------------------------------------*\ - Change the cursor on disabled, not-editable, or otherwise inoperable - elements (opinion). -\*----------------------------------------------------------------------------*/ - -[aria-disabled="true"], -[disabled] { - cursor: not-allowed; -} - - -/*----------------------------------------------------------------------------*\ - Remove the outline when hovering in all browsers (opinion/m). -\*----------------------------------------------------------------------------*/ - -a:hover { - outline-width: 0; -} - - -/*----------------------------------------------------------------------------*\ - Change the display on visually hidden accessible elements (opinion). -\*----------------------------------------------------------------------------*/ - -[aria-hidden="false"][hidden] { - display: initial; - - &:not(:focus) { - clip: rect(0, 0, 0, 0); - position: absolute; - } -} - diff --git a/package.json b/package.json index 0fe6fa9..63aba76 100644 --- a/package.json +++ b/package.json @@ -1,30 +1,27 @@ { - "name": "@neuekit/reboot", - "version": "1.10.2", - "license": "MIT", - "description": "The Neue Kit Reboot is an opionated style reset supporting modern browsers and IE11 😒", - "repository": { - "type": "git", - "url": "git+https://github.com/neuekit/reboot.git" - }, - "author": "Matt Pilott && Darby Manning && Chris Myers", - "bugs": { - "url": "https://github.com/neuekit/reboot/issues" - }, - "homepage": "https://github.com/neuekit/reboot#readme", - "publishConfig": { - "access": "public" - }, - "devDependencies": { - "csso-cli": "^3.0.0", - "onchange": "7.0.2", - "sass": "1.26.5" - }, - "scripts": { - "sass": "sass --no-source-map -s compressed index.scss reboot.css", - "clean": "csso reboot.css -o reboot.css", - "build": "npm run sass && npm run clean", - "watch": "onchange './*.scss' -- npm run build --silent", - "start": "npm run watch --silent" - } + "name": "@neuekit/reboot", + "version": "2.0.0", + "license": "MIT", + "description": "Neue Kit Reboot is an opionated style reset supporting modern browsers", + "repository": { + "type": "git", + "url": "git+https://github.com/neuekit/reboot.git" + }, + "author": "Matt Pilott && Darby Manning && Chris Myers", + "bugs": { + "url": "https://github.com/neuekit/reboot/issues" + }, + "homepage": "https://github.com/neuekit/reboot#readme", + "publishConfig": { + "access": "public" + }, + "devDependencies": { + "onchange": "7.1.0", + "sass": "1.69.3" + }, + "scripts": { + "build": "sass --no-source-map -s compressed index.scss reboot.css", + "watch": "onchange './*.scss' -- npm run build --silent", + "start": "npm run watch --silent" + } } diff --git a/reboot.css b/reboot.css index 1065b0d..187cc0d 100644 --- a/reboot.css +++ b/reboot.css @@ -1 +1 @@ -*,::after,::before{background-repeat:no-repeat;background-position:center;box-sizing:border-box;position:relative}*{background-size:cover}::after,::before{text-decoration:inherit;vertical-align:inherit}html{cursor:default;line-height:1.4;-moz-tab-size:3;tab-size:3;-webkit-tap-highlight-color:transparent;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body,dl dl,dl ol,dl ul,figure,ol dl,ol ol,ol ul,ul dl,ul ol,ul ul{margin:0}h1{font-size:2em;margin:.6875em 0}hr{height:0;overflow:visible}details,main{display:block}nav ol,nav ul{list-style:none;padding:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:83.3333%}audio,canvas,iframe,img,svg,video{vertical-align:middle}iframe,img{border-style:none}img,picture,svg{display:block;max-width:100%}img{height:auto}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}table{border-collapse:collapse}button,input,optgroup,select,textarea{background-color:transparent;border-style:none;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;word-break:normal}button,input{color:inherit;overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{cursor:pointer;-webkit-appearance:button}fieldset{border:1px solid silver;padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.5}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}dialog{background-color:#fff;border:solid;color:#000;display:block;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}dialog:not([open]){display:none}summary{display:list-item}template{display:none}[tabindex],a,area,button,input,label,select,summary,textarea{touch-action:manipulation}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}a:hover{outline-width:0}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute} \ No newline at end of file +*,::before,::after{background-repeat:no-repeat;background-position:center;background-size:cover;box-sizing:border-box;position:relative}::before,::after{text-decoration:inherit;vertical-align:inherit}html{cursor:default;line-height:1.4;-moz-tab-size:3;tab-size:3;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";margin:0}h1{font-size:2em;margin:.6875em 0}hr{color:inherit;height:0}nav ol,nav ul{list-style:none;padding:0}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-size:1em}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:83.3333%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}audio,canvas,iframe,img,svg,video{vertical-align:middle}img,iframe{border-style:none}img,picture,svg{display:block;max-width:100%}img{height:auto}figure{margin:0}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{background-color:rgba(0,0,0,0);border-style:none;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;word-break:normal}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{cursor:pointer;-webkit-appearance:button}fieldset{border:1px solid silver;padding:.35em .75em .625em}legend{padding:0}progress{vertical-align:baseline}textarea{resize:vertical}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}summary{display:list-item}