5

I am looking at an element on a web page, trying to figure out how it works.

Its text-align property is var(--btn-default-text-alignment, center), and the computed style says left, so I'm guessing the --btn-default-text-alignment variable is set to left.

But where is this CSS variable coming from? I looked in the file where the style is defined and couldn't find it. I found out that CSS variables in one file can be used by other files so it may be in one of the many CSS files that this page is including, but it would be a lot of tedious work to look in all of them and find it.

Is there any way to use the Chrome dev tools to find out what file a CSS variable is defined in?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Elias Zamaria
  • 96,623
  • 33
  • 114
  • 148

1 Answers1

1

In the image below I have selected and inspected the title of the page "Can I use Chrome dev... defined in?". In the bottom left quadrant/box of the inspector tool we can see all the CSS variables and which file they are in. For example, CSS element #question-header is in file primary.css.

enter image description here

If you click on the file name primary.css you can also see the folder structure and the actual contents of the file.

enter image description here

From here, you can Ctrl+F to find all the instances where something exists. The first instance will be where it is defined.

Firefox also has this feature.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Aleka
  • 242
  • 1
  • 15
  • 1
    That only shows where the variables are used, not where they are defined. – Elias Zamaria Jun 05 '20 at 00:04
  • 1
    An example from chrome for stackoverflow, `F12 -> ctr + shift + f -> insert in the input --blue-700 field -> press enter` You will see a list of where the `--blue-700` call is located, Unfortunately in this case you have to find yourself. In stackoverflow it is in `body`. Of course, if you program the dev version yourself, you set the sitemap for styles. Then you have a reference to the source but on the production page sitemap is usually off. – Grzegorz T. Jun 05 '20 at 11:44
  • 1
    @GrzegorzT. I tried your idea (but using Cmd+F since I'm using a Mac). It brought up all the places where `--blue-700` was mentioned, and I had to look at each of them to find where it is defined. This is not ideal, but it is much better than having to manually search through all the CSS. Thank you. – Elias Zamaria Jun 05 '20 at 17:56
  • Usually variables are clarified in `:root` see at [getbootstrap](https://getbootstrap.com/) or in body like on this page – Grzegorz T. Jun 05 '20 at 20:23
  • @EliasZamaria Because CSS is cascading, your first result in Ctrl+F/Cmd+F should always be the definition. Otherwise your CSS is probably not working. – TylerH Jun 16 '21 at 14:11