mirror_css/destyle
1
0
Fork 0
mirror of https://github.com/nicolas-cusan/destyle.css.git synced 2025-08-30 08:20:18 +02:00
Code Issues Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Nicolas Cusan
2020-08-12 14:02:04 +02:00
parent 59c71bbfb8
commit e5ea5dd35a
2 changed files with 56 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
Readme.md
View File

@@ -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>
```

88
destyle.css
View File

@@ -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+.