dom-examples/css-custom-functions/responsive-narrow-wide/index.html at main · mdn/dom-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Responsive narrow-wide function</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <p class="support">
      ⚠️ Your browser doesn't currently support
      <a href="https://drafts.csswg.org/css-mixins-1/#defining-custom-functions"
        >CSS custom functions</a
      >.
    </p>
    <section>
      <h2>Responsive narrow-wide function</h2>
      <p>
        This example features a custom CSS function called
        <code>--narrow-wide()</code>, which takes two parameters — a value to
        apply to a narrow layout and a value to apply to a wide layout.
      </p>
    </section>
    <section>
      <h2>Usage</h2>
      <p>
        The custom function is very useful — you can use it as the value of just
        about any property where you want to provide a choice of values — one
        for a narrow layout and one for a wide layout.
      </p>
    </section>
    <section>
      <h2>Defining the function</h2>
      <p>
        The <code>--narrow-wide()</code> function is built using two CSS custom
        properties and a media query to detect whether the viewport is narrower
        or wider than the provided breakpoint, and return one value or the other
        as appropriate.
      </p>
    </section>
  </body>
</html>