web 3d图形渲染器
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

334 lines
6.5 KiB

  1. # sanitize.css [<img src="https://csstools.github.io/sanitize.css/logo.svg" alt="sanitize" width="90" height="90" align="right">][sanitize.css]
  2. [sanitize.css] is a CSS library that provides consistent, cross-browser
  3. default styling of HTML elements alongside useful defaults.
  4. It is developed alongside [normalize.css], which means every normalization
  5. is included, and every normalization and opinion are clearly marked and
  6. documented.
  7. ## Usage
  8. ```html
  9. <link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
  10. ```
  11. ### Forms
  12. A separate stylesheet that normalizes form controls without side effects.
  13. ```html
  14. <link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" />
  15. ```
  16. A separate stylesheet that sizes form controls without affecting native styles.
  17. ```html
  18. <link href="https://unpkg.com/sanitize.css/formsize.css" rel="stylesheet" />
  19. ```
  20. ### Typography
  21. A separate stylesheet that normalizes typography using system interface fonts.
  22. ```html
  23. <link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />
  24. ```
  25. ### Measure
  26. A separate stylesheet that applies a comfortable measure to the page.
  27. ```html
  28. <link href="https://unpkg.com/sanitize.css/measure.css" rel="stylesheet" />
  29. ```
  30. ### Install
  31. ```sh
  32. npm install --save sanitize.css
  33. ```
  34. #### Webpack Usage
  35. Import [sanitize.css] in CSS:
  36. ```css
  37. @import 'sanitize.css';
  38. @import 'sanitize.css/typography.css';
  39. @import 'sanitize.css/forms.css';
  40. ```
  41. Alternatively, import [sanitize.css] in JS:
  42. ```js
  43. import 'sanitize.css';
  44. import 'sanitize.css/typography.css';
  45. import 'sanitize.css/forms.css';
  46. ```
  47. In `webpack.config.js`, be sure to use the appropriate loaders:
  48. ```js
  49. module.exports = {
  50. module: {
  51. rules: [
  52. {
  53. test: /\.css$/,
  54. use: [ 'style-loader', 'css-loader' ]
  55. }
  56. ]
  57. }
  58. }
  59. ```
  60. ## What does it do?
  61. * Normalizes styles for a wide range of elements.
  62. * Corrects bugs and common browser inconsistencies.
  63. * Provides common, useful defaults.
  64. * Explains what code does using detailed comments.
  65. ## Features
  66. ##### Box sizing defaults to border-box
  67. ```css
  68. *, ::before, ::after {
  69. box-sizing: border-box;
  70. }
  71. ```
  72. ##### Backgrounds do not repeat by default
  73. ```css
  74. *, ::before, ::after {
  75. background-repeat: no-repeat;
  76. }
  77. ```
  78. ##### Pseudo-elements inherit text decoration and vertical alignment
  79. ```css
  80. ::before,
  81. ::after {
  82. text-decoration: inherit;
  83. vertical-align: inherit;
  84. }
  85. ```
  86. ##### Cursors only change to hint non-obvious interfaces
  87. ```css
  88. html {
  89. cursor: default;
  90. }
  91. ```
  92. ##### Text has a comfortable line height in all browsers
  93. ```css
  94. html {
  95. line-height: 1.5;
  96. }
  97. ```
  98. ##### Tabs appear the same on the web as in a typical editor
  99. ```css
  100. html {
  101. tab-size: 4;
  102. }
  103. ```
  104. ##### Words break to prevent overflow
  105. ```css
  106. html {
  107. word-break: break-all;
  108. }
  109. ```
  110. ##### Documents do not use a margin for outer padding
  111. ```css
  112. body {
  113. margin: 0;
  114. }
  115. ```
  116. ##### Navigation lists do not include a marker style
  117. ```css
  118. nav ol, nav ul {
  119. list-style: none;
  120. padding: 0;
  121. }
  122. ```
  123. ##### Media elements align to the text center of other content
  124. ```css
  125. audio, canvas, iframe, img, svg, video {
  126. vertical-align: middle;
  127. }
  128. ```
  129. ##### SVGs fallback to the current text color
  130. ```css
  131. svg:not([fill]) {
  132. fill: currentColor;
  133. }
  134. ```
  135. ##### Tables do not include additional border spacing
  136. ```css
  137. table {
  138. border-collapse: collapse;
  139. }
  140. ```
  141. ##### Textareas only resize vertically by default
  142. ```css
  143. textarea {
  144. resize: vertical;
  145. }
  146. ```
  147. ##### Single taps are dispatched immediately on clickable elements
  148. ```css
  149. a, area, button, input, label, select, summary, textarea, [tabindex] {
  150. -ms-touch-action: manipulation;
  151. touch-action: manipulation;
  152. }
  153. ```
  154. ##### ARIA roles include visual cursor hints
  155. ```css
  156. [aria-busy="true"] {
  157. cursor: progress;
  158. }
  159. [aria-controls] {
  160. cursor: pointer;
  161. }
  162. [aria-disabled="true"], [disabled] {
  163. cursor: default;
  164. }
  165. ```
  166. ##### Visually hidden content remains accessible
  167. ```css
  168. [aria-hidden="false"][hidden] {
  169. display: initial;
  170. }
  171. [aria-hidden="false"][hidden]:not(:focus) {
  172. clip: rect(0, 0, 0, 0);
  173. position: absolute;
  174. }
  175. ```
  176. ### Typography
  177. [sanitize.css] includes a separate stylesheet for normalizing typography using
  178. system interface fonts.
  179. ### Forms
  180. [sanitize.css] includes a separate stylesheet for normalizing forms using
  181. minimal, standards-like styling.
  182. **Browser**
  183. ```html
  184. <link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />
  185. ```
  186. **Download**
  187. See https://csstools.github.io/sanitize.css/latest/typography.css
  188. **CDN**
  189. see https://cdnjs.com/libraries/10up-sanitize.css/typography.css
  190. #### Typography Features
  191. ##### The default font is the system ui font
  192. ```css
  193. html {
  194. font-family:
  195. system-ui,
  196. /* macOS 10.11-10.12 */ -apple-system,
  197. /* Windows 6+ */ Segoe UI,
  198. /* Android 4+ */ Roboto,
  199. /* Ubuntu 10.10+ */ Ubuntu,
  200. /* Gnome 3+ */ Cantarell,
  201. /* KDE Plasma 5+ */ Noto Sans,
  202. /* fallback */ sans-serif,
  203. /* macOS emoji */ "Apple Color Emoji",
  204. /* Windows emoji */ "Segoe UI Emoji",
  205. /* Windows emoji */ "Segoe UI Symbol",
  206. /* Linux emoji */ "Noto Color Emoji";
  207. }
  208. ```
  209. ##### Pre-formatted and code-formatted text uses the monospace system ui font
  210. ```css
  211. code, kbd, pre, samp {
  212. font-family:
  213. /* macOS 10.10+ */ Menlo,
  214. /* Windows 6+ */ Consolas,
  215. /* Android 4+ */ Roboto Mono,
  216. /* Ubuntu 10.10+ */ Ubuntu Monospace,
  217. /* KDE Plasma 5+ */ Noto Mono,
  218. /* KDE Plasma 4+ */ Oxygen Mono,
  219. /* Linux/OpenOffice fallback */ Liberation Mono,
  220. /* fallback */ monospace;
  221. }
  222. ```
  223. ## Differences
  224. [normalize.css] and [sanitize.css] correct browser bugs while carefully testing
  225. and documenting changes. normalize.css styles adhere to css specifications.
  226. sanitize.css styles adhere to common developer expectations and preferences.
  227. [reset.css] unstyles all elements. Both sanitize.css and normalize.css are
  228. maintained in sync.
  229. ## Browser support
  230. * Chrome (last 3)
  231. * Edge (last 3)
  232. * Firefox (last 3)
  233. * Firefox ESR
  234. * Opera (last 3)
  235. * Safari (last 3)
  236. * iOS Safari (last 2)
  237. * Internet Explorer 9+
  238. ## Contributing
  239. Please read the [contribution guidelines](CONTRIBUTING.md) in order to make the
  240. contribution process easy and effective for everyone involved.
  241. ## Acknowledgements
  242. sanitize.css is a project by [Jonathan Neal](https://github.com/jonathantneal),
  243. built upon normalize.css, a project by
  244. [Jonathan Neal](https://github.com/jonathantneal),
  245. co-created with [Nicolas Gallagher](https://github.com/necolas).
  246. [normalize.css]: https://github.com/csstools/normalize.css
  247. [reset.css]: http://meyerweb.com/eric/tools/css/reset/
  248. [sanitize.css]: https://github.com/csstools/sanitize.css