specificity
specificity copied to clipboard
keeganstreet
Inline Style Input
It does not appear that you can enter an inline style into the calculator even though there is a "a" value visualized as an area to display them. I've tried entering style="..." as well as the full tag
and the calculator doesn't recognize it as an inline style. Taking a closer look at the source code, it seems that the calculated value for inline styles will always return zero.
Hi @TechTrain, the input fields are designed to accept CSS selectors, not HTML tags or attributes. I think this is clear enough as the label at the top of the page says "Change the selectors or paste in your own.". The red "Inline styles" box is there as a reminder that inline styles have a higher level of specificity than CSS selectors. I don't see much value in making the input fields accept HTML tags as the "inline style" box would always equal 1.
I understand your reasoning, but do have to say that it actually is not quite clear that an inline style cannot be inputted. I was one of a group of 30 people who were shown your page and it was not obvious to any of us since the premise of the tool is to calculate specificity and inline styles contribute to specificity. The tool (as is) seems like a calculator missing a button.
Perhaps you should just add a short statement to the page that makes it clear that inline styles must be manually accounted for.
Hi @TechTrain, thanks for the feedback. Happy to add some more copy to explain this. Maybe a tooltip on the red "inline styles" box would help. It could explain the relationship between inline styles and stylesheet styles.