Skip to content

Commit

Permalink
Dev edition: display the caniuse panels
Browse files Browse the repository at this point in the history 
Fixes whatwg#2794. Most of the work is done in
whatwg/wattsi#54; this commit consists of:

* Incorporating the styles for the caniuse boxes into the dev edition,
  with some tweaks.
* Marking up, or in some cases adding, appropriate subdfns for topics
  that appear on caniuse but are missing in the dev edition.

Fyrd/caniuse#3593 will also be important to get
two caniuse boxes to show up properly.
  • Loading branch information
@domenic @annevk
domenic authored and annevk committed Aug 19, 2017
1 parent cf02423 commit df05a09
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 25 deletions.
12 changes: 12 additions & 0 deletions dev/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -342,6 +342,13 @@ var > var::after {
background: transparent;
}

/* Caniuse boxes */

.status {
right: auto;
left: calc(50% + 586px / 2 - 9em / 2);
}

/* SPECIFIC ELEMENTS */
/* Header */

Expand Down Expand Up @@ -558,6 +565,11 @@ html:not(.index) ol.toc ol {
margin-left: 0.5em;
}

.status {
left: auto;
right: -8.9em;
}

/* Search */
#search {
position: relative;
Expand Down
59 changes: 34 additions & 25 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,23 +29,13 @@
<title w-nohtml>HTML Standard, Developer's Edition</title>
<meta name="theme-color" content="#3c790a">
<link w-nodev rel="stylesheet" href="https://resources.whatwg.org/standard.css">
<link w-nohtml rel="stylesheet" href="styles.css">
<link rel="icon" href="https://resources.whatwg.org/logo.svg">
<script>
function toggleStatus(div) {
div.parentNode.classList.toggle('wrapped');
}
</script>
<style w-nodev>
[hidden] { display: none; }

.bad, .bad *:not(.X\58X) { color: gray; border-color: gray; background: transparent; }

.fingerprint { position: absolute; right: 0; z-index: 5; }
@media (max-width: 767px) {
.fingerprint { max-width: 35px; }
}

<style>
.status { min-height: 0.6em; font: 1em sans-serif; width: 9em; padding: 0.3em; position: absolute; z-index: 8; right: 0.3em; background: #EEE; color: black; box-shadow: 0 0 3px #999; overflow: hidden; margin: -2em 0 0 0; border-collapse: initial; border-spacing: initial; }
.status:hover { z-index: 9; }
.status:focus-within { z-index: 9; }
Expand Down Expand Up @@ -80,12 +70,23 @@
.status > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.png); }
.status > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); }
.status > .support > .samsung::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.png); }
.status > .caniuse { text-align: right; font-style: italic; }
.status > .caniuse { text-align: right; font-style: italic; width: 100%; }
.status > .caniuse + p { margin-top: 0.5em; border-top: 1px solid silver; }

@media (max-width: 767px) {
.status { right: -9em; }
}
</style>
<link w-nohtml rel="stylesheet" href="styles.css">
<style w-nodev>
[hidden] { display: none; }

.bad, .bad *:not(.X\58X) { color: gray; border-color: gray; background: transparent; }

.fingerprint { position: absolute; right: 0; z-index: 5; }
@media (max-width: 767px) {
.fingerprint { max-width: 35px; }
}

.applies .yes, .yesno .yes { background: yellow; }
.yesno .yes, .yesno .no { text-align: center; }
Expand Down Expand Up @@ -9190,10 +9191,17 @@ partial interface <dfn id="document" data-lt="">Document</dfn> {
<dt><var>document</var> . <code subdfn data-x="dom-document-readyState">readyState</code></dt>
<dd>
<p>Returns "<code data-x="">loading</code>" while the <code>Document</code> is loading, "<code
data-x="">interactive</code>" once it is finished parsing but still loading sub-resources, and
data-x="">interactive</code>" once it is finished parsing but still loading subresources, and
"<code data-x="">complete</code>" once it has loaded.</p>

<p>The <code data-x="event-readystatechange">readystatechange</code> event fires on the
<code>Document</code> object when this value changes.</p>

<p><span w-nohtml subdfn data-x="stop parsing"></span>The <code
data-x="event-DOMContentLoaded">DOMContentLoaded</code> event fires after the transition to
"<code data-x="">interactive</code>" but before the transition to "<code
data-x="">complete</code>", at the point where all subresources apart from <code
data-x="attr-script-async">async</code> <code>script</code> elements have loaded.</p>
</dd>

</dl>
Expand Down Expand Up @@ -22342,10 +22350,11 @@ document.body.appendChild(wbr);</pre>
<span>HTTP(S) scheme</span>. <span w-nodev>The value is used by the user agent for <span>hyperlink
auditing</span>.</span></p>

<p>The <dfn><code data-x="attr-hyperlink-rel">rel</code></dfn> attribute on <code>a</code> and
<code>area</code> elements controls what kinds of links the elements create. The attribute's value
must be a <span>set of space-separated tokens</span>. The <a href="#linkTypes">allowed keywords
and their meanings</a> are defined below.</p>
<p><span w-nohtml subdfn data-x="dom-a-rellist"></span>The <dfn><code
data-x="attr-hyperlink-rel">rel</code></dfn> attribute on <code>a</code> and <code>area</code>
elements controls what kinds of links the elements create. The attribute's value must be a
<span>set of space-separated tokens</span>. The <a href="#linkTypes">allowed keywords and their
meanings</a> are defined below.</p>

<p><code data-x="attr-hyperlink-rel">rel</code>'s
<span data-x="concept-supported-tokens">supported tokens</span> are the keywords defined in
Expand Down Expand Up @@ -25629,8 +25638,8 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {

<dl class="domintro">

<dt><var>image</var> . <code data-x="dom-img-width">width</code> [ = <var>value</var> ]</dt>
<dt><var>image</var> . <code data-x="dom-img-height">height</code> [ = <var>value</var> ]</dt>
<dt><var>image</var> . <code subdfn data-x="dom-img-width">width</code> [ = <var>value</var> ]</dt>
<dt><var>image</var> . <code subdfn data-x="dom-img-height">height</code> [ = <var>value</var> ]</dt>

<dd>

Expand All @@ -25643,8 +25652,8 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {

</dd>

<dt><var>image</var> . <code data-x="dom-img-naturalWidth">naturalWidth</code></dt>
<dt><var>image</var> . <code data-x="dom-img-naturalHeight">naturalHeight</code></dt>
<dt><var>image</var> . <code subdfn data-x="dom-img-naturalWidth">naturalWidth</code></dt>
<dt><var>image</var> . <code subdfn data-x="dom-img-naturalHeight">naturalHeight</code></dt>

<dd>

Expand All @@ -25654,7 +25663,7 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {

</dd>

<dt><var>image</var> . <code data-x="dom-img-complete">complete</code></dt>
<dt><var>image</var> . <code subdfn data-x="dom-img-complete">complete</code></dt>

<dd>

Expand All @@ -25664,15 +25673,15 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {

</dd>

<dt><var>image</var> . <code data-x="dom-img-currentSrc">currentSrc</code></dt>
<dt><var>image</var> . <code subdfn data-x="dom-img-currentSrc">currentSrc</code></dt>

<dd>

<p>Returns the image's <span>absolute URL</span>.</p>

</dd>

<dt><var>image</var> . <code data-x="dom-img-decode">decode</code>()</dt>
<dt><var>image</var> . <code subdfn data-x="dom-img-decode">decode</code>()</dt>

<dd>

Expand All @@ -25689,7 +25698,7 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {

</dd>

<dt><var>image</var> = new <code data-x="dom-image">Image</code>( [ <var>width</var> [, <var>height</var> ] ] )</dt>
<dt><var>image</var> = new <code subdfn data-x="dom-image">Image</code>( [ <var>width</var> [, <var>height</var> ] ] )</dt>

<dd>

Expand Down

0 comments on commit df05a09

Please sign in to comment.