diff options
| author | Chris Rebert <github@chrisrebert.com> | 2016-04-21 22:49:48 +0300 |
|---|---|---|
| committer | Chris Rebert <github@chrisrebert.com> | 2016-04-21 22:49:48 +0300 |
| commit | cbb86d0a1c9514f7781769a39256605a80e4c054 (patch) | |
| tree | 997c57ee0d3533e53ad7446bf7c20a088af69b7d | |
| parent | ff961bef5096124b0442390e0620978622e545aa (diff) | |
| parent | 3fd0cde7cb71284472929e5464c01aec1b2085a8 (diff) | |
readme – format bullet points
| -rw-r--r-- | README.md | 42 |
1 files changed, 22 insertions, 20 deletions
@@ -16,27 +16,29 @@ NOTE: This shim only adds support for the `hover` value of the `hover` media fea The shim consists of two parts: * A [PostCSS](https://github.com/postcss/postcss)-based server-side CSS postprocessor that rewrites -```css -@media (hover: hover) { - some-selector { - property: value; - } -} -``` -into -```css -some-prefix some-selector { - property: value; -} -``` -(In normal use-cases, `some-selector` will contain the `:hover` pseudo-class and `some-prefix` will be a specially-named CSS class that will typically be added to the `<html>` element.) + + ```css + @media (hover: hover) { + some-selector { + property: value; + } + } + ``` + into + ```css + some-prefix some-selector { + property: value; + } + ``` + (In normal use-cases, `some-selector` will contain the `:hover` pseudo-class and `some-prefix` will be a specially-named CSS class that will typically be added to the `<html>` element.) * A client-side JavaScript library that detects whether the user-agent truly supports hovering. When the check returns true, then your code can add the special CSS class to the appropriate element to enable [`:hover`](hover-pseudo) styles; for example: -```js -$(document).on('mq4hsChange', function (e) { - $(document.documentElement).toggleClass('some-special-class', e.trueHover); -}); -``` -Obviously, this requires JavaScript to be enabled in the browser, and would default to disabling `:hover` styles when JavaScript is disabled. + + ```js + $(document).on('mq4hsChange', function (e) { + $(document.documentElement).toggleClass('some-special-class', e.trueHover); + }); + ``` + Obviously, this requires JavaScript to be enabled in the browser, and would default to disabling `:hover` styles when JavaScript is disabled. [hover-pseudo]: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover |