Extensions related to generated content fall in three categories:
Standard CSS only supports text and images. Example: content: url(images/right.png) "foo=" attr(foo);
. XXE supports other ways of specifying text and images as well as using controls (buttons, comboboxes, etc) as generated content.
Example:
img { content: image(attr(src)); }
Standard CSS does not allow to structure and layout generated content. XXE allows for example to structure and layout generated content as an embedded table.
Example:
orderedProducts:before { display: table-row; content: row(cell("QUANTITY"), cell("REFERENCE"), cell("DESIGNATION"), cell(content("PRICE\A", attr(currency))), font-weight, bold, color, white, background-color, #0000A0, border-width, 1, border-style, solid, border-top-color, gray, border-bottom-color, gray, border-right-color, gray, border-left-color, gray); }
Display values supported for generated content.
Standard CSS only supports inline, block, marker as the value of the display property of generated content, and generated content is limited to inline and block elements. XXE does much more than this.
Example: table-row in the above example.