Search code examples
cssgoogle-chrome-devtoolsuser-agent

In Chrome DevTools where is [Attribute Style] defined?

I'm working on a web app that has a lot of tables. In the prior version of the product, there was a little extra padding on the table rows. This wasn't defined specifically in a style sheet, but was added by the User Agent (Chrome v126.0.6478 on Windows 10 in this case) as border-spacing:

enter image description here

In the new version, this spacing is gone-- but I don't see where it was changed. Now the user agent's border-spacing is being overridden by table[Attribute Style] which is setting -webkit-border-n-spacing values:

enter image description here

Where is this table[Attribute Style] being defined, and why would it be different between the two versions when I'm using the same browser to view the same (basic) code?

Solution

  • It's quite likely that your table has a "cellspacing" attribute. When present, this provides a presentational hint which is added to the styling cascade just below author-origin styles as belonging to an author-presentational-hint-origin.

    This is what [Attributes Style] means - a presentational hint taken from an HTML attribute on the element, in this case on the table element.

    The cellspacing attribute has long been obsolete in HTML, but browsers are still expected to apply styles based on it.