media

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Thuộc tính media chỉ định một media query phải khớp thì style sheet mới được áp dụng.

Bạn có thể dùng thuộc tính này với phần tử SVG sau:

<style>

Ví dụ

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg">
  <style>
    rect {
      fill: black;
    }
  </style>
  <style media="(width >= 600px)">
    rect {
      fill: seagreen;
    }
  </style>

  <text y="15">Resize the window to see the effect</text>
  <rect y="20" width="200" height="200" />
</svg>