'How inspect CSS vendor prefix in browser?

I found a snippet of SCSS that I'm trying to use.

It contains CSS vendor prefixes that I'm unfamiliar with:

  • ::-webkit-slider-runnable-track
  • ::-webkit-slider-thumb
  • ::-moz-range-track
  • ::-ms-fill-lower
  • etc

I'd love to use Chrome or some other browser's "developer tools" / Inspect to be able to play around with colors and dimensions, but I can't find where these particular CSS rules are.

All I can find is my input element: <input type="range" id="position" name="position" min="0" step=".1" max="70" value="70">

Currently, I'm editing SCSS in Netbeans, and it compiles to CSS on each save, and then I refresh my browser.

It's time-consuming, and I'd also really like to see where those rules take affect when I highlight an element in the inspector.

I appreciate any suggestions.

P.S. I figured there would be a way to show them, like there is for active, focus, hover, and visited rules.

cssbrowsercross-browser


Solution 1:[1]

The vendor prefixes are actually considered pseudo-selectors, and as such, create their own CSS selectors. You won't see them in the CSS states such as :hover and :active, but rather as independent CSS rules:

input[type='range']::-webkit-slider-runnable-track
input[type='range']::-webkit-slider-runnable-thumb
input[type='range']::-moz-range-track
input[type='range']::-ms-fill-lower

This is illustrated in the example below, which has different displays on the different browsers:

input[type='range'] {
  width: 210px;
  height: 30px;
  overflow: hidden;
  cursor: pointer;
}

input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type='range']::-webkit-slider-runnable-track {
  width: 200px;
  height: 10px;
  background: #AAA;
}

input[type='range']::-webkit-slider-thumb {
  position: relative;
  height: 30px;
  width: 30px;
  margin-top: -10px;
  background: steelblue;
  border-radius: 50%;
  border: 2px solid white;
}
<div class="container">
  <input type="range" id="position" name="position" min="0" step=".1" max="70" value="70">
</div>

Hope this helps! :)

Solution 2:[2]

I finally could find an option on Chrome Dev Tools to show the user-agend pseudo-elements.

Basically you have to go to "Preferences" and scroll to the "Elements" section, where there is a option for that.

Webkit Pseudo Elements Documentation

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Obsidian Age
Solution 2 guilfer

Related Questions