diff --git a/Readme.md b/Readme.md index 91d70e3..dae3fde 100644 --- a/Readme.md +++ b/Readme.md @@ -50,7 +50,7 @@ Add your base font and color styles to the `body` element in your stylesheet, al body { color: #333; - font: 16px/1.4 'Helvetica Neue', sans-serif; + font: 16px/1.4 "Helvetica Neue", sans-serif; } ``` @@ -111,9 +111,11 @@ Creating two different styles for `h1` is made easy, only the properties for the ### Buttons -`button` tags have a lot of default styles that can make them cumbersome to use from a styling perspective, especially if they should look like plain things or need to wrap some other content, but `button` tags are the recommended elements to use as click targets for user interactions. Falling back to using `` even with `role="button"` is [not recomended](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role) from an accessibility standpoint as Screenreaders will recognize `button`s as interactive elements by default and treat them accordingly. `a` should be used when there is the need to link to a page via `href`. +`button` tags have a lot of default styles that can make them cumbersome to use from a styling perspective, especially if they should look like plain things or need to wrap some other content, but `button` tags are the recommended elements to use as click targets for user interactions. Falling back to using `` even with `role="button"` is [not recomended](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role) from an accessibility standpoint as screen readers will recognize `button`s as interactive elements by default and treat them accordingly. `a` should be used when there is the need to link to a page via `href`. + destyle.css resets buttons completely to make them usable as any other element * see note [below](#caveats). + ```css /* Make anything look like a link, even a ``` diff --git a/destyle.css b/destyle.css index 21802bc..ad3a6e6 100644 --- a/destyle.css +++ b/destyle.css @@ -1,7 +1,7 @@ /*! destyle.css v1.0.13 | MIT License | https://github.com/nicolas-cusan/destyle.css */ -/* Reset box-model - ========================================================================== */ +/* Reset box-model */ +/* ============================================ */ * { box-sizing: border-box; @@ -12,8 +12,8 @@ box-sizing: inherit; } -/* Document - ========================================================================== */ +/* Document */ +/* ============================================ */ /** * 1. Correct the line height in all browsers. @@ -27,8 +27,8 @@ html { -webkit-tap-highlight-color: transparent; /* 3*/ } -/* Sections - ========================================================================== */ +/* Sections */ +/* ============================================ */ /** * Remove the margin in all browsers. @@ -46,8 +46,8 @@ main { display: block; } -/* Vertical rhythm - ========================================================================== */ +/* Vertical rhythm */ +/* ============================================ */ p, table, @@ -61,8 +61,8 @@ dl { margin: 0; } -/* Headings - ========================================================================== */ +/* Headings */ +/* ============================================ */ h1, h2, @@ -76,8 +76,8 @@ h6 { margin: 0; } -/* Lists (enumeration) - ========================================================================== */ +/* Lists (enumeration) */ +/* ============================================ */ ul, ol { @@ -86,8 +86,8 @@ ol { list-style: none; } -/* Lists (definition) - ========================================================================== */ +/* Lists (definition) */ +/* ============================================ */ dt { font-weight: bold; @@ -97,8 +97,8 @@ dd { margin-left: 0; } -/* Grouping content - ========================================================================== */ +/* Grouping content */ +/* ============================================ */ /** * 1. Add the correct box sizing in Firefox. @@ -130,8 +130,8 @@ address { font-style: inherit; } -/* Text-level semantics - ========================================================================== */ +/* Text-level semantics */ +/* ============================================ */ /** * Remove the gray background on active links in IE 10. @@ -204,8 +204,8 @@ sup { top: -0.5em; } -/* Embedded content - ========================================================================== */ +/* Embedded content */ +/* ============================================ */ /** * Remove the border on images inside links in IE 10. @@ -223,16 +223,16 @@ iframe { vertical-align: bottom; } -/* Forms - ========================================================================== */ +/* Forms */ +/* ============================================ */ /** * Reset form fields to make them styleable - * 1. Reset radio and checkbox to preserve their look in iOS. */ button, -input, +input:not([type="radio"]), +input:not([type="checkbox"]), optgroup, select, textarea { @@ -250,16 +250,10 @@ textarea { text-align: inherit; } +[type="radio"], [type="checkbox"] { - /* 1 */ - -webkit-appearance: checkbox; - appearance: checkbox; -} - -[type="radio"] { - /* 1 */ - -webkit-appearance: radio; - appearance: radio; + margin: 0; + outline: 0; } /** @@ -327,6 +321,14 @@ button:-moz-focusring, outline: 1px dotted ButtonText; } +/** + * Remove arrow in IE10 & IE11 + */ + +select::-ms-expand { + display: none; +} + /** * Remove padding */ @@ -429,8 +431,8 @@ label[for] { cursor: pointer; } -/* Interactive - ========================================================================== */ +/* Interactive */ +/* ============================================ */ /* * Add the correct display in Edge, IE 10+, and Firefox. @@ -448,8 +450,16 @@ summary { display: list-item; } -/* Table - ========================================================================== */ +/* + * Remove outline for editable content. + */ + +[contenteditable] { + outline: none; +} + +/* Table */ +/* ============================================ */ table { border-collapse: collapse; @@ -471,8 +481,8 @@ th { font-weight: bold; } -/* Misc - ========================================================================== */ +/* Misc */ +/* ============================================ */ /** * Add the correct display in IE 10+.