How to Display an .HTML Document , or .HTML Fragment at CSS Content

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

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

<uri> 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 include html fragments using css?

Is this possible using only html and css?

No, it is not possible. That is not at all what CSS is for. It would be a direct violation of intent of CSS.

Your HTML document should contain semantically meaningful markup. By making an empty HTML document and applying only graphical styles, you're producing incredibly useless content.

If you want to produce static HTML pages without duplicating a ton of markup across every page, use a static site generator like jekyll or nanoc or look into server-side includes.

CSS content property: is it possible to insert HTML instead of Text?

Unfortunately, this is not possible. Per the spec:

Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).

In other words, for string values this means the value is always treated literally. It is never interpreted as markup, regardless of the document language in use.

As an example, using the given CSS with the following HTML:

<h1 class="header">Title</h1>

... will result in the following output:

<a href="#top">Back</a>Title

Include another HTML file in a HTML file

In my opinion the best solution uses jQuery:

a.html:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

b.html:

<p>This is my include file</p>

This method is a simple and clean solution to my problem.

The jQuery .load() documentation is here.

Replacing HTML then adding a document fragment back into the html

If the goal is to have only one highlight at a time, I'd go for a less complicated approach that:

When adding a highlight,
Checks the html for the previous highlight,
Removes it when found

To do so, mark your highlight <span>s with an attribute or class (or better yet, store a reference):

newNode.classList.add("js-highlight");

Add a method to remove such an element:

clearHighlight: function() {
  var selection = document.querySelector(".js-highlight");

  if (selection) {
    selection.parentElement.replaceChild(
      document.createTextNode(selection.innerText),
      selection  
    );
  }
}

Then, before replacing your range with the highlight element, call clearHighlight.

Example: https://jsfiddle.net/2tqdLfb1/

An alternative:

I also tried another approach that respected your "cached HTML" logic, but found it to be overcomplicated. The basics of that approach:

Check the query-path for the parentElement of the selection
Store the start index and end index of the selection
Replace the HTML by the cached HTML string
Find the newly injected parent element of the selection via the stored query-path
Split its innerText in to 1, 2 or 3 textNodes based on the selection start and end index
Replace the textNode that represents the selection by your highlight <span>

An example that shows how you could store the query path for your range ancestor:

function getPathUpToSelector(selector, element, path) {
  var parent = element.parentElement;

  if (parent && !element.matches(selector)) {
    var index = Array.from(parent.children).indexOf(element) + 1;
    path.push("*:nth-child(" + index + ")");

    return getPathUpToSelector(selector, parent, path);
  }

  return [selector].concat(path).join(" > ");
}

Content of after in css, how to split text into two styles

Although you can't use HTML content in the pseudo elements, well, as an alternative, you can use both ::after and ::before for this case. But please note, there are only those two. So, this is the way you go:

.button[aria-label*='first']::after {  position: relative;  content: 'some';  left: 1em;  color: #fcc;}
.button[aria-label*='first']::before {  position: relative;  content: 'text';  left: 6.5em;  color: #ccf;}

<div class="button" aria-label='first-button'>Hi</div>

How do I load an HTML page in a div using JavaScript?

I finally found the answer to my problem. The solution is

function load_home() {
     document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}

How to load page html and content (such as images) in jQuery?

If relative paths are not a problem, in your success function, you can then attempt to find all of the links and load them like this:

//....
success:function(data){
    $("*",data).each(function(){
        if($(this).attr("src")){
            $.ajax({url:$(this).attr("src"),dataType:"text"});
        }
        if($(this).attr("href")){
            $.ajax({url:$(this).attr("href"),dataType:"text"});
        }
    });
}
//....

How can I call HTML inside a DIV from a single location?

The best way to accomplish this would to use PHP with using include you would save the section of data you want in one file with the extension filename.php and then on all the pages you want that file to display you would include it by doing this <?php include('filepath/filename.php'); ?> and all your pages that your displaying this on will have to have a .php extension also, so something like this

index.php

<?php include('../includes/header.php'); ?>
<body>
<div class="body-container">

</div>
</body>
</html>

header.php Inside folder "includes"

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF=8">
  // Rest of your head content
</head>
<header class="page-header">
  <div class="logo"></div>
  <nav class="main-nav">

  </nav>
</header>

And just so you know, php has to be on a server to run.