@FirefoxDevTools engineer at @Mozilla Open Web & skateboarding š @nicolaschevobbe@mozilla.social
- Tweets 5,627
- Following 14
- Followers 901
- Likes 10,241
ALT Firefox DevTools Inspector rules view, showing a variable tooltip whose declaration value is `light-dark(hotpink, var(--primary-color))`. A computed value section has the following text in it `rgb(255, 105, 180)`. Below it is a `@property` section, describing the variable registered property information.
ALT Firefox DevTools Inspector rules view, showing a variable tooltip whose declaration value is `light-dark(hotpink, var(--primary-color))`. A computed value section has the following text in it `rgb(255, 105, 180)`. Below it is a `@property` section, describing the variable registered property information.
ALT Three code snippets: the first one showing an implicit association between an <input> and a <label> with the input nested inside the label. The second one showing an explicit association with the <label> and <input> separated but associated with the for and id attributes. The third snippet shows an <input> nested inside a <label> and associated with it using for and id attributes.
ALT Firefox DevTools Inspector showing a CSS value using a CSS variable. A popup is displayed, pointing to the variable name. In the popup, we can see the variable declaration (`--button-border-radius = var(--border-radius-small)`), as well as a "computed value" section, under which we can see the value: "4px"
ALT Firefox DevTools Inspector showing a CSS declaration value using a CSS variable. The tooltip displays the variable declaration value, the computed value, the @startin-style value, and the @property information
ALT Firefox DevTools rules view focus on a single declaration: `outline-color: var(--page-nav-button-outline)`. A tooltip is displayed, pointing to the `var()`; it has 2 sections: - the top one has the following text: `var(--unset, var(--page-nav-button-text-color))`. The `--unset` is struck through and has a gray color, while the second parameter of the var function has syntax highlighting - below it, a computed value section, with the following: `light-dark(#1514a, #fbfbfe)`. This time, the first param is syntax highlighted, while the second one is struck through, and has a gray color.
ALT Firefox DevTools Inspector showing a CSS value using a CSS variable. A popup is displayed, pointing to the variable name. In the popup, we can see the variable declaration (`--button-border-radius = var(--border-radius-small)`), as well as a "computed value" section, under which we can see the value: "4px"
ALT Firefox DevTools Inspector showing a CSS declaration value using a CSS variable. The tooltip displays the variable declaration value, the computed value, the @startin-style value, and the @property information
