Is it possible to display an .html document , or .html fragment at CSS content?

Question

At documentation for css content at MDN :

/*  value */ 
content: url(http://www.example.com/test.html);

Question:

It is possible to display an image at the css content property of html element at url() value of content

.content {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=);
}

or using content property at a pseudo element, for example ::before

.content::before {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=);
}

Is it possible to render an .html document , .html element at css content ?

.content {
  content: url(data:text/html,abc);
}

See also CSS Generated Content Module Level 3

The content property dictates what is rendered inside the element or pseudo-element. It takes a comma separated list of URIs, followed by a space separated list of tokens. If there are multiple URIs provided, then each is tried in turn until a value which is both available and supported is found. The last value is used as a fallback if the others fail.

For URIs other than URIs in the last comma separated section of the value, if the URI is available and the format is supported, then the element or pseudo-element becomes a replaced element, otherwise, the next item in the comma separated list is used, if any.

EXAMPLE 4

h1 { content: url(header/mng), url(header/png), none; }

In the example above, if header/mng wasn’t in a supported format, then header/png would have been used instead. In the example above, if header/png wasn’t available either, then the
element would be empty, as the last alternative is none.

To make an element fallback on its contents, you have to explicitly give contents as a fallback:

EXAMPLE 5

content: url(1), url(2), url(3), contents;

ISSUE 3 What happens when no formats are supported, and the author does not explicitly indicate a fallback?

ISSUE 4 Why doesn’t an element fallback to contents unless an author explicitly says so?

Update

The furthest have been able to reach, here, to embedding and displaying html document in css generated content; using approach demonstrated by @LGSon. Included css generated content within html at svg as well.

As noted by @RokoC.Buljan, the MIME type is not "text/html".

content {
  content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJ5ZXMiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDBweCIgaGVpZ2h0PSI0MDBweCIgdmlld0JveD0iMCAwIDQwMCAzMDAiPgogICAgPGZvcmVpZ25PYmplY3Qgd2lkdGg9IjQwMHB4IiBoZWlnaHQ9IjMwMHB4IiAKICAgICByZXF1aXJlZEZlYXR1cmVzPSJodHRwOi8vd3d3LnczLm9yZy9UUi9TVkcxMS9mZWF0dXJlI0V4dGVuc2liaWxpdHkiPgogICAgICA8aHRtbCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCI+PGhlYWQ+PHN0eWxlIHR5cGU9InRleHQvY3NzIj5jb250ZW50e2NvbnRlbnQ6dXJsKCJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQVNjQUFBRERDQVlBQUFEQStOZGhBQUFBQkhOQ1NWUUlDQWdJZkFoa2lBQUFBcGxKUkVGVWVKenQxQ0VCQUNBQXdEQ2dmdzF5UWdFOEYxdUNxOCt6eHhrQU1ldDNBTUNMT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRkpGMlBYQkNtc0t5TUpBQUFBQUVsRlRrU3VRbUNDIil9PC9zdHlsZT48L2hlYWQ+PGJvZHkgc3R5bGU9ImJvcmRlcjp0aGljayBzb2xpZCB5ZWxsb3c7YmFja2dyb3VuZDp1cmwoZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFTY0FBQURCQ0FZQUFBQ05NSFpxQUFBQUJITkNTVlFJQ0FnSWZBaGtpQUFBQXBKSlJFRlVlSnp0MURFQndDQVF3TUNueW5FT0JycVQ0VTVCcHF6WmN3WWc1bnNkQVBESG5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VpNlBEb0RBYnlDc244QUFBQUFTVVZPUks1Q1lJST0pIj48aDE+VGV4dCBnb2VzIGhlcmU8L2gxPjxpbWcgc3JjPSJncmVlbi5wbmciPjwvaW1nPjxkaWFsb2cgc3R5bGU9InRvcDoxNTBweDsiIG9wZW49InRydWUiPmNvbnRlbnQ8L2RpYWxvZz48Y29udGVudD48L2NvbnRlbnQ+PC9ib2R5PjwvaHRtbD4KICAgIDwvZm9yZWlnbk9iamVjdD4KPC9zdmc+Cg==)
}

content , 3.4. Resource Locators: the type

Roko C. Buljan · Accepted Answer

MDN (erroneously?) states that it's possible...

value
content: url(http://www.example.com/test.html);

o_O Probably a misinterpretation of the Recommendation Specifications and the basic difference between URL (restrictive to certain MIME types) and URI in general.

While as you can see in this example AJAX does the job perfectly,
while content: url(someValidHTMLUri.html) does not work for text/[html, ...], as opposed to MIME types Content-transfer-encoding like application/, image/, ...

http://jsbin.com/zozetaj/1/edit?html,css,js,output

https://www.w3.org/wiki/CSS/Properties/content The value is a URI that designates an external resource (such as an image). If the user agent cannot display the resource it must either leave it out as if it were not specified or display some indication that the resource cannot be displayed.

Is it possible to display an .html document , or .html fragment at CSS content?

Answers (2)

Related Questions