Update CSS comment style, add style for contenteditable, hide arrow for select elements in IE, use :not selector to keep checkboxes & radiobuttons default appearance, update README.

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 `<a href="#">` 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 `<a href="#">` 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`.
 
+<!-- prettier-ignore-start -->
 destyle.css resets buttons completely to make them usable as any other element <small>* see note [below](#caveats)</small>.
+<!-- prettier-ignore-end -->
 
 ```css
 /* Make anything look like a link, even a <button> */
@@ -129,11 +131,12 @@ destyle.css resets buttons completely to make them usable as any other element <
   border-radius: 0.2em;
   background-color: blue;
   color: white;
-  text-align: center
+  text-align: center;
 }
 
 .block {
   display: block;
+  width: 100%;
 }
 ```
 
@@ -146,7 +149,7 @@ destyle.css resets buttons completely to make them usable as any other element <
 
 <!-- Use as block level element -->
 <button class="block">
-  <img src="..." alt="...">
+  <img src="..." alt="..." />
 </button>
 ```
 

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 */
+  margin: 0;
-  -webkit-appearance: checkbox;
+  outline: 0;
-  appearance: checkbox;
-}
-
-[type="radio"] {
-  /* 1 */
-  -webkit-appearance: radio;
-  appearance: radio;
 }
 
 /**
@@ -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+.