Can CSS content be used to showcase an .html document or .html fragment?

Referencing the MDN documentation for css content:

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

Inquiry:

Can an image be displayed using the url() value of the content property in a css html element?

.content {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIM...
}
<div class="content"></div>

or by using the content property within a pseudo-element, such as ::before

.content::before {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCS...
}
<div class="content"></div>

Is it possible to display an .html document in a .html element using css content ?

.content {
  content: url(data:text/html,abc);
}
<div class="content"></div>

Also see 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.

...

Update

Achieving embedding and displaying of html documents in css generated content; leveraging an approach demonstrated by @LGSon. Including css generated content with html in svg.

Highlighted by @RokoC.Buljan, the MIME type should not be "text/html".

content {
  content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuDZEWxpPweEPeeA==)
}
<content></content>

<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 400 300">
    <foreignObject width="400px" height="300px" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
      <html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">content{content:url("data:image/png;base64,iVBORw0KGgoAAAANS...")}</style></head><body style="border:thick solid yellow;background:url(data:image/pn...)>
    </foreignObject>
</svg>

Learn more about content , 3.4. Resource Locators: the <url> type

htmlcss

Answer №1

The SVG solution provided here is in response to a specific request made by the OP for clarification.

Presented below are a few samples that demonstrate an alternative approach using SVG since rendering a normal HTML document is currently not supported. This method utilizes both the css content and pseudo element css content property.

It's important to note that the output appears as image/svg+xml, although the second sample illustrates that it can incorporate HTML elements.

div {
  height: 120px;
  background: gray;
}
div:before {
  content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27100%27%3E%3Ctext%20x%3D%2720%27%20y%3D%2745%27%20font-size%3D%2713px%27%3EHello%20World%20from%20SVG%3C%2Ftext%3E%3C%2Fsvg%3E);
}
div:after {
  content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2280%22%20width%3D%22160%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22red%22%20%2F%3E%0D%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E);
}

span {
  height: 120px;
  background: gray;
  content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27100%27%3E%3Ctext%20x%3D%2720%27%20y%3D%2745%27%20font-size%3D%2713px%27%3EHello%20World%20from%20SVG%3C%2Ftext%3E%3C%2Fsvg%3E);
}
<div></div>
<span></span>

Decoded SVG

<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'>
  <text x='20' y='45' font-size='13px'>Hello World from SVG</text>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="80" width="160">
  <circle cx="40" cy="40" r="38" stroke="black" stroke-width="1" fill="red" />
  <circle cx="120" cy="40" r="38" stroke="black" stroke-width="1" fill="blue" />
</svg>

Update: Included a commented plnkr example with html/xml elements incorporated.

.content:before {
  content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22300%22%3E%0A%20%20%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22100%22%20height%3D%22150%22%20fill%3D%22blue%22%2F%3E%0A%20%20%3CforeignObject%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22100%22%20height%3D%22150%22%3E%0A%20%20%20%20%20%20%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%20%20%20%20%20%20%20%20%20%20Here%20is%20a%20%3Cstrong%3Eparagraph%3C%2Fstrong%3E%20that%20requires%20%3Cem%3Eword%20wrap%3C%2Fem%3E%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%20%0A%20%20%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%22100%22%20fill%3D%22red%22%20%2F%3E%0A%20%20%3CforeignObject%20x%3D%22120%22%20y%3D%22120%22%20width%3D%22180%22%20height%3D%22180%22%3E%0A%20%20%20%20%20%20%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%20%20%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Cstrong%3EFirst%3C%2Fstrong%3E%20item%3C%2Fli%3E%0A%20%0A%20%20%20%20%20%20%20%20...

.content2 {
  content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22300%22%3E%0A%20%20%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22100%22%20height%3D%22150%22%20fill%3D%22blue%22%2F%3E%0A%20%20%3CforeignObject%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22100%22%20height%3D%22150%22%3E%0A%20%20%20%20%20%20%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%20%20%20%20%20%20%20%20%20%20Here%20is%20a%20%3Cstrong%3Eparagraph%3C%2Fstrong%3E%20that%20requires%20%3Cem%3Eword%20wrap%3C%2Fem%3E%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%20%0A%20%20%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%22100%22%20fill%3D%22red%22%20%2F%3E%0A%20%20%3CforeignObject%20x%3D%22120%22%20y%3D%22120%22%20width%3D%22180%22%20height%3D%22180%22%3E%0A%20%20%20%20%20%20%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%20%20%20%20%20%20%20%20%3Cul%3E...

    }
<content class="content"></content>
<content class="content2"></content>

Decoded SVG

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300">
  <rect x="10" y="10" width="100" height="150" fill="blue"/>
  <foreignObject x="10" y="10" width="100" height="150">
      <div xmlns="http://www.w3.org/1999/xhtml">
          Here is a <strong>paragraph</strong> that requires <em>word wrap</em></div>
  </foreignObject>

  <circle cx="200" cy="200" r="100" fill="red" />
  <foreignObject x="120" y="120" width="180" height="180">
      <div xmlns="http://www.w3.org/1999/xhtml">
        <ul>
          <li><strong>First</strong> item</li>

          <li><em>Second</em> item</li>
          <li>Thrid item</li>
        </ul>
      </div>
  </foreignObject>
</svg>

Answer №2

MDN (erroneously?) mentions the possibility...

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

o_O It could be a misunderstanding of the Recommendation Specifications and the distinction between URL (restricted to specific MIME types) and URI in general.

In this example, AJAX functions perfectly,
but 

content: url(someValidHTMLUri.html)
does not work for text/[html, ...], unlike 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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Regular Expressions for extracting data from an HTML webpage

Is it possible to extract the response "Here is the solution" from an HTML document using Regular Expression? <b>Previous Query:</b> <b>Here is the answer</b> ...

pythonhtmlregex

Arranging information within the Ngb-Accordion

Welcome to the code snippet showcasing how to create an accordion in Angular: <ngb-accordion [closeOthers]="false" activeIds="0"> <ng-container class="card" *ngFor="let post of Posts"> <ngb-panel title="{{post.title}} - ...

htmlangulartypescript

Maintain a fixed element and enable the rest of the elements to scroll as the mobile browser address bar collapses while scrolling upwards

Currently facing a challenge where I want the background image to remain static while the address bar and content underneath scroll up. The image occupies 90% of the view height, and although I've prevented it from resizing and jumping when the addres ...

javascripthtmljquerycss

Unexpected display issues with CSS shapes in Bootstrap framework

Been experimenting with creating custom shapes in Bootstrap - they display correctly in HTML and CSS, but Bootstrap distorts them. It seems like there are no conflicting classes. Could it be necessary to use '!important' on some of the elements? ...

cssbootstrap-5

Manipulating anchor links with jQuery by adding and removing classes

I am struggling to understand why I cannot remove a class from an element and then add a new one. Changing the CSS using .css(...) works, but for some reason .removeClass and .addClass are not functioning. Interestingly, I am able to successfully add and ...

jquerycss

Instructions for embedding a swf file in HTML and linking it to a different page

I've employed the following code snippet to embed my SWF file and redirect it to another page upon clicking: <object type="application/x-shockwave-flash" onmouseup="document.location='http://www.pageopensafterclick.com'" height=50 width= ...

html

Increasing the size of a container without displacing the elements beneath it

There is an element on my webpage that, when hovered over, expands to reveal hidden text. The issue I'm facing is that this expansion causes the content below it to shift position. I attempted to use position:absolute, but it did not have the desired ...

htmlcssbootstrap-4css-position

What is the best way to target CSS only to elements that do not have a parent with a specific class?

Striving to preserve the existing CSS in the codebase. .my-new-class { .existing-class { ...implementing new styles } } .existing-class { ...maintaining old styles } I attempted a technique that I know won't work and understand why: ...

csssassancestor

Styling text and images with Bootstrap

Currently, I'm utilizing bootstrap to structure a row with 2 div elements. The first div contains an image while the second div holds text content. The challenge I am facing is aligning the text to the edge of the image. However, since the image does ...

htmlbootstrap-4

Could you provide steps for verifying the functionality of the show password feature in selenium?

What is the best way to verify that the show password feature is functioning correctly? Which checkbox property should I inspect after clicking on the 'show password' checkbox to confirm that the entered text in the password field is visible? ...

javahtmlselenium-webdriver

The Art of Div Switching: Unveiling the Strategies

I have a question regarding my website. I have been working on it for some time now, but I have encountered a challenge that I am struggling to overcome. After much consideration, I am unsure of the best approach to take. The issue at hand is that I have ...

javascriptcsshtmldom

Why doesn't the WordPress Genesis child-theme inherit the parent CSS styles?

I am new to using the Genesis framework and I find myself confused about its child themes. The Genesis theme comes with its own stylesheet, but in order to use Genesis, you need to install a child theme. However, the child themes I have come across (such ...

csswordpressgenesis

Does text disappear when hovered over in CSS?

Having some trouble getting a text to display on hover over the parent container while adjusting the opacity. Despite trying multiple methods, it just won't show up no matter what I do! Here is my current code: .project{ position: relative; ...

htmlcsshover

Guide on Modifying the CSS File of an Installed Plugin on WordPress

I am looking to customize the design of a WordPress plugin by editing its CSS file. When trying to locate the CSS file of the installed plugin through Plugins --> Installed Plugin --> Editor, I could only find .php files instead of the desired CSS f ...

phphtmlcsswordpress

Achieving a layered effect: Bootstrap Navbar on Carousel

Currently, I am designing a mockup and aiming to create a full-screen carousel with the navigation bar links positioned on top of the images. At the moment, the navbar appears transparent until I scroll down the image/slider making it full screen. How can ...

htmlcsstwitter-bootstrap

Steps for designing a stationary footer in HTML and CSS

I have implemented a static footer on my website: HTML <div class="card fixedFooter"> <div class="card-body space-around"> <button type="button" class="buttonFooter" routerLink="/myRouter" > <i class ...

htmlcssbootstrap-4footer

Enter information into the TextArea and jQuery dialog

I require assistance in populating a textarea with data obtained from querying a database. I have a jQuery dialog that contains another dialog, inside of which is a textarea. Here is some pseudocode: <MODAL> <modalB> <TextArea>s ...

javascriptjqueryhtml

Displaying a div on click is simple with CSS and JQuery, but what if you want it to stay visible even after a second click? By utilizing classes within <li> tags instead of buttons

My current code involves clicking on a menu, which should reveal a list where each item has a corresponding section that slides down and slides back up when clicked. However, only the sliding down functionality is working at the moment. I'm new to jQu ...

jquerycssshow-hide

Is there a way to create an HTML popup that automatically opens a link and an image file side by side

Can a popup code be created to automatically open both a link and an image side by side? ...

htmlimagehyperlinkpopup

Displaying images in a horizontal row instead of a vertical column when using ng-repeat

I am currently using ng-repeat to showcase a series of images. While I believe this may be related to a CSS matter, I am uncertain. <div ng-repeat="hex in hexRow track by hex.id"> <img ng-src="{{hex.img}}"/> </div> How can I arrange ...

cssangularjs