How inspect CSS vendor prefix in browser?

user_470749 0
Viewed 474

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.

cross-browser browser css
2 Answers

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

user_120875250
Related