web 3d图形渲染器

131 lines
3.5 KiB

  1. # PostCSS Focus Visible [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
  2. [![NPM Version][npm-img]][npm-url]
  3. [![CSS Standard Status][css-img]][css-url]
  4. [![Build Status][cli-img]][cli-url]
  5. [![Support Chat][git-img]][git-url]
  6. [PostCSS Focus Visible] lets you use the `:focus-visible` pseudo-class in
  7. CSS, following the [Selectors Level 4 specification].
  8. It is the companion to the [focus-visible polyfill].
  9. ```css
  10. :focus:not(:focus-visible) {
  11. outline: none;
  12. }
  13. /* becomes */
  14. :focus:not(.focus-visible) {
  15. outline: none;
  16. }
  17. :focus:not(:focus-visible) {
  18. outline: none;
  19. }
  20. ```
  21. [PostCSS Focus Visible] duplicates rules using the `:focus-visible` pseudo-class
  22. with a `.focus-visible` class selector, the same selector used by the
  23. [focus-visible polyfill]. This replacement selector can be changed using the
  24. `replaceWith` option. Also, the preservation of the original `:focus-visible`
  25. rule can be disabled using the `preserve` option.
  26. ## Usage
  27. Add [PostCSS Focus Visible] to your project:
  28. ```bash
  29. npm install postcss-focus-visible --save-dev
  30. ```
  31. Use [PostCSS Focus Visible] to process your CSS:
  32. ```js
  33. const postcssFocusVisible = require('postcss-focus-visible');
  34. postcssFocusVisible.process(YOUR_CSS /*, processOptions, pluginOptions */);
  35. ```
  36. Or use it as a [PostCSS] plugin:
  37. ```js
  38. const postcss = require('postcss');
  39. const postcssFocusVisible = require('postcss-focus-visible');
  40. postcss([
  41. postcssFocusVisible(/* pluginOptions */)
  42. ]).process(YOUR_CSS /*, processOptions */);
  43. ```
  44. [PostCSS Focus Visible] runs in all Node environments, with special
  45. instructions for:
  46. | [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
  47. | --- | --- | --- | --- | --- | --- |
  48. ## Options
  49. ### preserve
  50. The `preserve` option defines whether the original selector should remain. By
  51. default, the original selector is preserved.
  52. ```js
  53. focusVisible({ preserve: false });
  54. ```
  55. ```css
  56. :focus:not(:focus-visible) {
  57. outline: none;
  58. }
  59. /* becomes */
  60. :focus:not(.focus-visible) {
  61. outline: none;
  62. }
  63. ```
  64. ### replaceWith
  65. The `replaceWith` option defines the selector to replace `:focus-visible`. By
  66. default, the replacement selector is `.focus-visible`.
  67. ```js
  68. focusVisible({ replaceWith: '[focus-visible]' });
  69. ```
  70. ```css
  71. :focus:not(:focus-visible) {
  72. outline: none;
  73. }
  74. /* becomes */
  75. :focus:not([focus-visible]) {
  76. outline: none;
  77. }
  78. :focus:not(:focus-visible) {
  79. outline: none;
  80. }
  81. ```
  82. [cli-img]: https://img.shields.io/travis/jonathantneal/postcss-focus-visible.svg
  83. [cli-url]: https://travis-ci.org/jonathantneal/postcss-focus-visible
  84. [css-img]: https://cssdb.org/badge/focus-within-pseudo-class.svg
  85. [css-url]: https://cssdb.org/#focus-visible-pseudo-class
  86. [git-img]: https://img.shields.io/badge/support-chat-blue.svg
  87. [git-url]: https://gitter.im/postcss/postcss
  88. [npm-img]: https://img.shields.io/npm/v/postcss-focus-visible.svg
  89. [npm-url]: https://www.npmjs.com/package/postcss-focus-visible
  90. [focus-visible polyfill]: https://github.com/WICG/focus-visible
  91. [Gulp PostCSS]: https://github.com/postcss/gulp-postcss
  92. [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
  93. [PostCSS]: https://github.com/postcss/postcss
  94. [PostCSS Focus Visible]: https://github.com/jonathantneal/postcss-focus-visible
  95. [PostCSS Loader]: https://github.com/postcss/postcss-loader
  96. [Selectors Level 4 specification]: https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo