[whatwg] <a onlyreplace>

[Markus Ernst]

Tab Atkins Jr. schrieb:
> Promoting this reply to top-level because I think it's crazy good.
[...]
>> Let's say we add a new attribute to <a>, like <a onlyreplace="foo">,
>> where "foo" is the id of an element on the page.  Or better, a
>> space-separated list of elements.  When the user clicks such a link,
>> the browser should do something like this: change the URL in the
>> navigation bar to the indicated URL, and retrieve the indicated
>> resource and begin to parse it.  Every time an element is encountered
>> that has an id in the onlyreplace list, if there is an element on the
>> current page with that id, remove the existing element and then add
>> the element from the new page.  I guess this should be done in the
>> usual fashion, first appending the element itself and then its
>> children recursively, leaf-first.
> 
> This. Is. BRILLIANT.

Yes it looks like an AJAX killer.

> The only problem I can see with this is that it's possible for authors
> to believe that they only need to actually write a single full page,
> and can just link to fragments containing only the chunk of content to
> be replaced.  This would mostly break bookmarking and deeplinking, as
> visitors would just receive a chunk of unstyled content separated from
> the overall page template.  However, because it breaks so *visibly*
> and reliably (unlike, say, framesets, which just break bookmarking by
> sending you to the 'main page'), I think there would be sufficient
> pressure for authors to get this right, especially since it's so
> *easy* to get it right.

Actually the problem I mentioned for Aryehs first proposal remains - 
still, a web designer could go wrong, for example when making a static 
website by changing another one he/she has made earlier:

The body of page1.html could look like:

<div id="pageHeader">Recipies for vegetarians</div>
<div id="content">
   <h1>Lovely broccoli</h1>
   <p>Take the broccoli and do the following:</p>
   ...
</div>
<ul id="navigation">
   <li><span>Broccoli</span></li>
   <li><a href="page2.html" onlyreplace="content">Leak</a></li>
</ul>

The body of page2.html:

<div id="pageHeader">Recipies for meat eaters</div>
<div id="content">
   <h1>Lovely leak</h1>
   <p>Take the leak and do the following:</p>
   ...
</div>
<ul id="navigation">
   <li><a href="page1.html" onlyreplace="content">Broccoli</a></li>
   <li><span>Leak</span></li>
</ul>

Note that the author forgot to change the page header of the meat eaters 
site he/she had used as raw material. The author will test the site and 
always see it correctly, while someone who comes from a deep link will 
see the meat eaters header.

Anyway I think that this error is much less likely to be made with the 
<a onlyreplace> solution. In many cases, such as template-based CMS 
sites, the static elements are made in one place only, anyway. I think 
this is a problem we could live with, in view of the benefits that this 
solution brings.