Add caniuse info boxes like the HTML spec #69

Open
cvrebert opened this Issue Sep 4, 2015 · 36 comments

Projects

None yet

4 participants

@cvrebert
Member
cvrebert commented Sep 4, 2015

The HTML spec displays little info boxes with relevant caniuse data next to the definitions of various entities.
caniuse likewise has data for many DOM features. It would be nice if the DOM spec could display this data similar to the way it's done in the HTML spec.

@annevk
Member
annevk commented Sep 4, 2015

This would either require support in Bikeshed natively or some kind of pre-processor similar to that of HTML, but probably not written in Pascal. Neither is a priority for me, but I welcome PRs of course.

@cvrebert cvrebert referenced this issue in tabatkins/bikeshed Mar 27, 2016
Closed

caniuse integration #645

@domenic
Member
domenic commented Mar 27, 2016

In general web platform test boxes would be better IMO. Caniuse has such sporadic coverage and low granularity.

@cvrebert
Member

Do you know of some data source that offers per-browser-version WPT results?

@cvrebert
Member
cvrebert commented Oct 5, 2016

This has been implemented in Bikeshed: tabatkins/bikeshed#824 😄

@annevk
Member
annevk commented Oct 5, 2016

That sounds very cool, but when I added Include Can I Use Panels: yes to <pre class='metadata'> it did not change the output.

@annevk
Member
annevk commented Oct 5, 2016

(I also tried true as a value by the way which would be more consistent with the No Editor field.)

@cvrebert
Member
cvrebert commented Oct 5, 2016

Per Tab's design choice, you need to also add a caniuse=the-caniuse-feature-id attr to each relevant <dfn>, rather than it being fully automatic.

See https://github.com/tabatkins/bikeshed/blob/master/tests/caniuse001.bs for a trivial example.

@annevk
Member
annevk commented Oct 5, 2016

@tabatkins can we have an option to make it automatic instead? This seems like it would require too much maintenance.

@tabatkins
Contributor

No, we can't, because there's no reasonable automatic mapping. The caniuse features are named in an ideosyncratic way that does not allow for automatic translation, and most of them are larger granularity than single methods/etc anyway, so I couldn't map them to a single WebIDL definition.

@domenic
Member
domenic commented Oct 5, 2016

They link to spec sections of though...

@tabatkins
Contributor

Which works if you're viewing the exact URL that caniuse happens to be linking to. Breaks if you're publishing, or viewing locally, or otherwise letting a spec be viewable in more than one place. That's really fragile.

(For example, I think it doesn't usually link to drafts.csswg.org.)

@annevk
Member
annevk commented Oct 6, 2016 edited

So get them to update their links (for CSS documents)? For WHATWG anyway we don't have that problem, although maybe we should disable it for snapshots?

@domenic
Member
domenic commented Oct 6, 2016

@tabatkins, would a solution be adding a new metadata item, something like caniuse prefix: https://dom.spec.whatwg.org/, which can be set in the source file, and thus you can use that + the generated IDs in the document to figure things out?

@tabatkins
Contributor

@annevk Updating won't help, because it's still just a single url, while documents can often be reached from multiple urls. (For example, the "latest" version of our EDs can be reached either with their versioned shortname, like css-foo-3, or the unversioned css-foo. The latter updates over time as we publish new versions.)

@domenic Hm, maybe. Looking over the urls, tho, they're totally inconsistent:

URLs

"http://asmjs.org/spec/latest/"
"http://dev.w3.org/csswg/css-conditional/#the-css-interface"
"http://dev.w3.org/csswg/css-counter-styles/"
"http://dev.w3.org/csswg/css-font-loading/"
"http://dev.w3.org/csswg/css-fonts/#descdef-unicode-range"
"http://dev.w3.org/csswg/css-images-3/#image-set-notation"
"http://dev.w3.org/csswg/css-images-3/#valdef-image-rendering-crisp-edges"
"http://dev.w3.org/csswg/css-logical-props/"
"http://dev.w3.org/csswg/css-pseudo-4/#placeholder-pseudo"
"http://dev.w3.org/csswg/css-size-adjust/"
"http://dev.w3.org/csswg/css-will-change/"
"http://dev.w3.org/csswg/cssom-view/#dom-window-devicepixelratio"
"http://dev.w3.org/fxtf/filters-2/#BackdropFilterProperty"
"http://developer.apple.com/fonts/TTRefMan/index.html"
"http://http2.github.io/http2-spec/index.html"
"http://http2.github.io/http2-spec/index.html"
"http://ip.hhi.de/imagecom_G1/assets/pdfs/csvt_overview_0305.pdf"
"http://mpgedit.org/mpgedit/mpeg_format/MP3Format.html"
"http://theora.org/doc/"
"http://w3.org/TR/css3-fonts/#font-rend-props"
"http://w3c.github.io/netinfo/"
"http://w3c.github.io/setImmediate/"
"http://w3c.github.io/web-animations/"
"http://w3c.github.io/webappsec/specs/referrer-policy/"
"http://webaudio.github.io/web-midi-api/"
"http://webbluetoothcg.github.io/web-bluetooth/"
"http://webkit.org/blog/176/css-canvas-drawing/"
"http://webkit.org/blog/182/css-reflections/"
"http://wiki.csswg.org/spec/css4-ui#pointer-events"
"http://wiki.ecmascript.org/doku.php?id=harmony:observe"
"http://www-mmsp.ece.mcgill.ca/documents/AudioFormats/WAVE/WAVE.html"
"http://www.digitalpreservation.gov/formats/fdd/fdd000114.shtml"
"http://www.ecma-international.org/ecma-262/5.1/"
"http://www.ecma-international.org/ecma-262/5.1/#sec-14.1"
"http://www.ecma-international.org/ecma-262/5.1/#sec-15.12"
"http://www.ecma-international.org/ecma-262/6.0/#sec-arrow-function-definitions"
"http://www.ecma-international.org/ecma-262/6.0/#sec-function-definitions"
"http://www.ecma-international.org/ecma-262/6.0/#sec-let-and-const-declarations"
"http://www.ecma-international.org/ecma-262/6.0/#sec-let-and-const-declarations"
"http://www.ecma-international.org/ecma-262/6.0/#sec-number-objects"
"http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects"
"http://www.ecma-international.org/ecma-262/6.0/#sec-proxy-object-internal-methods-and-internal-slots"
"http://www.ecma-international.org/ecma-262/6.0/#sec-typedarray-objects"
"http://www.ecma-international.org/ecma-402/1.0/"
"http://www.itu.int/rec/T-REC-T.800-200208-I"
"http://www.itu.int/rec/T-REC-T.832"
"http://www.w3.org/Submission/EOT/"
"http://www.w3.org/TR/2012/CR-CSP-20121115/"
"http://www.w3.org/TR/ambient-light/"
"http://www.w3.org/TR/battery-status/"
"http://www.w3.org/TR/beacon/"
"http://www.w3.org/TR/clipboard-apis/"
"http://www.w3.org/TR/compositing-1/#blending"
"http://www.w3.org/TR/compositing-1/#mix-blend-mode"
"http://www.w3.org/TR/compositing-1/#propdef-background-blend-mode"
"http://www.w3.org/TR/CSP/"
"http://www.w3.org/TR/css-cascade-3/#all-shorthand"
"http://www.w3.org/TR/css-cascade-3/#inherit-initial"
"http://www.w3.org/TR/css-device-adapt/"
"http://www.w3.org/TR/css-fonts-3/#font-size-adjust-prop"
"http://www.w3.org/TR/css-fonts-3/#font-stretch-prop"
"http://www.w3.org/TR/css-fonts-3/#propdef-font-variant-alternates"
"http://www.w3.org/TR/css-masking-1/"
"http://www.w3.org/TR/css-masking-1/#the-clip-path"
"http://www.w3.org/TR/css-pseudo-4/#selectordef-selection"
"http://www.w3.org/TR/css-shapes/"
"http://www.w3.org/TR/css-snappoints-1/"
"http://www.w3.org/TR/css-text-decor-3/#line-decoration"
"http://www.w3.org/TR/css-text-decor-3/#text-shadow-property"
"http://www.w3.org/TR/css-values/#common-keywords"
"http://www.w3.org/TR/CSS2/page.html#page-breaks"
"http://www.w3.org/TR/CSS2/text.html#propdef-letter-spacing"
"http://www.w3.org/TR/CSS2/ui.html#propdef-outline"
"http://www.w3.org/TR/CSS21/generate.html"
"http://www.w3.org/TR/CSS21/generate.html#counters"
"http://www.w3.org/TR/CSS21/selector.html"
"http://www.w3.org/TR/CSS21/tables.html"
"http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"
"http://www.w3.org/TR/CSS21/visuren.html#fixed-positioning"
"http://www.w3.org/TR/CSS21/visuren.html#fixed-positioning"
"http://www.w3.org/TR/css3-2d-transforms/"
"http://www.w3.org/TR/css3-3d-transforms/"
"http://www.w3.org/TR/css3-animations/"
"http://www.w3.org/TR/css3-background/"
"http://www.w3.org/TR/css3-background/#background-image"
"http://www.w3.org/TR/css3-background/#background-position"
"http://www.w3.org/TR/css3-background/#backgrounds"
"http://www.w3.org/TR/css3-background/#box-shadow"
"http://www.w3.org/TR/css3-background/#the-background-attachment"
"http://www.w3.org/TR/css3-background/#the-border-image"
"http://www.w3.org/TR/css3-background/#the-border-radius"
"http://www.w3.org/TR/css3-break/#break-decoration"
"http://www.w3.org/TR/css3-color/"
"http://www.w3.org/TR/css3-color/"
"http://www.w3.org/TR/css3-color/#currentcolor"
"http://www.w3.org/TR/css3-conditional/#at-supports"
"http://www.w3.org/TR/css3-exclusions/"
"http://www.w3.org/TR/css3-flexbox/"
"http://www.w3.org/TR/css3-fonts/#font-kerning-prop"
"http://www.w3.org/TR/css3-grid-layout/"
"http://www.w3.org/TR/css3-images/"
"http://www.w3.org/TR/css3-images/"
"http://www.w3.org/TR/css3-images/#image-orientation"
"http://www.w3.org/TR/css3-images/#repeating-gradients"
"http://www.w3.org/TR/css3-mediaqueries/"
"http://www.w3.org/TR/css3-mediaqueries/#resolution"
"http://www.w3.org/TR/css3-multicol/"
"http://www.w3.org/TR/css3-regions/"
"http://www.w3.org/TR/css3-selectors/"
"http://www.w3.org/TR/css3-selectors/#first-letter"
"http://www.w3.org/TR/css3-sizing/"
"http://www.w3.org/TR/css3-text/#hyphenation"
"http://www.w3.org/TR/css3-text/#overflow-wrap"
"http://www.w3.org/TR/css3-text/#tab-size"
"http://www.w3.org/TR/css3-text/#text-align-last-property"
"http://www.w3.org/TR/css3-text/#word-break"
"http://www.w3.org/TR/css3-transitions/"
"http://www.w3.org/TR/css3-ui/#box-sizing"
"http://www.w3.org/TR/css3-ui/#cursor"
"http://www.w3.org/TR/css3-ui/#cursor"
"http://www.w3.org/TR/css3-ui/#resize"
"http://www.w3.org/TR/css3-ui/#text-overflow"
"http://www.w3.org/TR/css3-values/#calc"
"http://www.w3.org/TR/css3-values/#font-relative-lengths"
"http://www.w3.org/TR/css3-values/#viewport-relative-lengths"
"http://www.w3.org/TR/css3-webfonts/"
"http://www.w3.org/TR/css4-images/#element-notation"
"http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect"
"http://www.w3.org/TR/cssom-view/#dom-window-matchmedia"
"http://www.w3.org/TR/cssom/#dom-window-getcomputedstyle"
"http://www.w3.org/TR/custom-elements/"
"http://www.w3.org/TR/DOM-Parsing/"
"http://www.w3.org/TR/DOM-Parsing/#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text"
"http://www.w3.org/TR/file-system-api/"
"http://www.w3.org/TR/FileAPI/"
"http://www.w3.org/TR/FileAPI/#constructorBlob"
"http://www.w3.org/TR/FileAPI/#dfn-filereader"
"http://www.w3.org/TR/FileAPI/#url"
"http://www.w3.org/TR/filter-effects-1/"
"http://www.w3.org/TR/filter-effects/#FilterCSSImageValue"
"http://www.w3.org/TR/gamepad/"
"http://www.w3.org/TR/geolocation-API/"
"http://www.w3.org/TR/hr-time/"
"http://www.w3.org/TR/html-imports/"
"http://www.w3.org/TR/ime-api/"
"http://www.w3.org/TR/IndexedDB/"
"http://www.w3.org/TR/MathML/"
"http://www.w3.org/TR/media-source/"
"http://www.w3.org/TR/mediacapture-streams/"
"http://www.w3.org/TR/mediaqueries-4/#mf-interaction"
"http://www.w3.org/TR/navigation-timing/"
"http://www.w3.org/TR/orientation-event/"
"http://www.w3.org/TR/page-visibility/"
"http://www.w3.org/TR/PNG/"
"http://www.w3.org/TR/pointerevents/"
"http://www.w3.org/TR/pointerevents/#the-touch-action-css-property"
"http://www.w3.org/TR/proximity/"
"http://www.w3.org/TR/resource-hints/#dfn-prefetch"
"http://www.w3.org/TR/resource-hints/#dns-prefetch"
"http://www.w3.org/TR/resource-hints/#preconnect"
"http://www.w3.org/TR/resource-hints/#prerender"
"http://www.w3.org/TR/resource-timing/"
"http://www.w3.org/TR/screen-orientation/"
"http://www.w3.org/TR/selectors4/#placeholder"
"http://www.w3.org/TR/selectors4/#range-pseudos"
"http://www.w3.org/TR/shadow-dom/"
"http://www.w3.org/TR/SRI/"
"http://www.w3.org/TR/SVG/"
"http://www.w3.org/TR/SVG/animate.html"
"http://www.w3.org/TR/SVG/filters.html"
"http://www.w3.org/TR/SVG/fonts.html"
"http://www.w3.org/TR/SVG/linking.html#SVGFragmentIdentifiers"
"http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement"
"http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty"
"http://www.w3.org/TR/touch-events/"
"http://www.w3.org/TR/uievents/#widl-KeyboardEvent-code"
"http://www.w3.org/TR/uievents/#widl-KeyboardEvent-getModifierState"
"http://www.w3.org/TR/uievents/#widl-KeyboardEvent-key"
"http://www.w3.org/TR/uievents/#widl-KeyboardEvent-location"
"http://www.w3.org/TR/upgrade-insecure-requests/"
"http://www.w3.org/TR/user-timing/"
"http://www.w3.org/TR/vibration/"
"http://www.w3.org/TR/wai-aria/"
"http://www.w3.org/TR/WD-font/#font-smooth"
"http://www.w3.org/TR/webaudio/"
"http://www.w3.org/TR/WebCryptoAPI/"
"http://www.w3.org/TR/WebCryptoAPI/#RandomSource-method-getRandomValues"
"http://www.w3.org/TR/webdatabase/"
"http://www.w3.org/TR/WOFF/"
"http://www.w3.org/TR/WOFF2/"
"http://www.w3.org/TR/XHTMLplusSMIL/"
"http://www.webmproject.org/"
"http://www.xiph.org/vorbis/doc/Vorbis_I_spec.html"
"https://compat.spec.whatwg.org/#text-fill-and-stroking"
"https://console.spec.whatwg.org/"
"https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-WebKit_SpecificUnsupportedProperties"
"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"
"https://developers.google.com/speed/webp/"
"https://docs.google.com/viewer?a=v&pid=forums&srcid=MDIwOTgxNDMwMTgyMjkzMTI2ODcBMDQ2MzU5NDU2MDA0MTg5NDE1MTkBTDZmaENoSG9BZ0FKATAuMQEBdjI"
"https://dom.spec.whatwg.org/#dom-addeventlisteneroptions-once"
"https://dom.spec.whatwg.org/#dom-childnode-remove"
"https://dom.spec.whatwg.org/#dom-document-getelementsbyclassname"
"https://dom.spec.whatwg.org/#dom-element-classlist"
"https://dom.spec.whatwg.org/#dom-element-closest"
"https://dom.spec.whatwg.org/#dom-element-insertadjacentelement"
"https://dom.spec.whatwg.org/#dom-element-matches"
"https://dom.spec.whatwg.org/#dom-eventtarget-addeventlistener"
"https://dom.spec.whatwg.org/#dom-eventtarget-dispatchevent"
"https://dom.spec.whatwg.org/#dom-node-textcontent"
"https://dom.spec.whatwg.org/#dom-parentnode-queryselector"
"https://dom.spec.whatwg.org/#interface-childnode"
"https://dom.spec.whatwg.org/#interface-customevent"
"https://dom.spec.whatwg.org/#mutation-observers"
"https://dom.spec.whatwg.org/#ranges"
"https://drafts.csswg.org/css-backgrounds-4/#background-position-longhands"
"https://drafts.csswg.org/css-break-3/#widows-orphans"
"https://drafts.csswg.org/css-containment/#style-containment"
"https://drafts.csswg.org/css-images-3/#cross-fade-function"
"https://drafts.csswg.org/css-page-3/"
"https://drafts.csswg.org/css-position/#sticky-pos"
"https://drafts.csswg.org/css-text-3/#text-justify-property"
"https://drafts.csswg.org/css-text-decor-3/#text-emphasis-property"
"https://drafts.csswg.org/css-ui-4/#appearance-switching"
"https://drafts.csswg.org/css-ui-4/#valdef-user-select-none"
"https://drafts.csswg.org/css-variables/"
"https://drafts.csswg.org/css-writing-modes-3/#block-flow"
"https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview"
"https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior"
"https://drafts.csswg.org/selectors-3/#first-line"
"https://drafts.csswg.org/selectors-4/#attribute-case"
"https://drafts.csswg.org/selectors-4/#descendant-combinators"
"https://drafts.csswg.org/selectors-4/#indeterminate"
"https://drafts.csswg.org/selectors-4/#optional-pseudo"
"https://drafts.csswg.org/selectors-4/#relational"
"https://drafts.csswg.org/selectors-4/#the-default-pseudo"
"https://drafts.csswg.org/selectors-4/#the-focus-within-pseudo"
"https://drafts.csswg.org/selectors/#the-nth-child-pseudo"
"https://drafts.fxtf.org/motion-1/"
"https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#execcommand()"
"https://dvcs.w3.org/hg/pointerlock/raw-file/default/index.html"
"https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html#speechreco-section"
"https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html#tts-section"
"https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/ResourcePriorities/Overview.html"
"https://encoding.spec.whatwg.org/#api"
"https://fetch.spec.whatwg.org/"
"https://fetch.spec.whatwg.org/#http-cors-protocol"
"https://fidoalliance.org/specs/fido-u2f-v1.0-nfc-bt-amendment-20150514/fido-u2f-javascript-api.html"
"https://fullscreen.spec.whatwg.org/"
"https://github.com/WebAssembly/spec"
"https://html.spec.whatwg.org/#dom-input-indeterminate"
"https://html.spec.whatwg.org/multipage/#dom-document-head"
"https://html.spec.whatwg.org/multipage/browsers.html#browser-state"
"https://html.spec.whatwg.org/multipage/browsers.html#dom-history-pushstate"
"https://html.spec.whatwg.org/multipage/browsers.html#offline"
"https://html.spec.whatwg.org/multipage/browsers.html#the-hashchangeevent-interface"
"https://html.spec.whatwg.org/multipage/comms.html#broadcasting-to-other-browsing-contexts"
"https://html.spec.whatwg.org/multipage/comms.html#channel-messaging"
"https://html.spec.whatwg.org/multipage/comms.html#crossDocumentMessages"
"https://html.spec.whatwg.org/multipage/comms.html#network"
"https://html.spec.whatwg.org/multipage/comms.html#server-sent-events"
"https://html.spec.whatwg.org/multipage/dom.html#dom-document-currentscript"
"https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes"
"https://html.spec.whatwg.org/multipage/dom.html#the-innertext-idl-attribute"
"https://html.spec.whatwg.org/multipage/embedded-content.html"
"https://html.spec.whatwg.org/multipage/embedded-content.html#attr-iframe-sandbox"
"https://html.spec.whatwg.org/multipage/embedded-content.html#attr-iframe-srcdoc"
"https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset"
"https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist-and-videotracklist-objects"
"https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist-and-videotracklist-objects"
"https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-naturalwidth"
"https://html.spec.whatwg.org/multipage/embedded-content.html#svg-0"
"https://html.spec.whatwg.org/multipage/embedded-content.html#the-audio-element"
"https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element"
"https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element"
"https://html.spec.whatwg.org/multipage/forms.html#attr-fae-form"
"https://html.spec.whatwg.org/multipage/forms.html#attr-fieldset-disabled"
"https://html.spec.whatwg.org/multipage/forms.html#attr-input-accept"
"https://html.spec.whatwg.org/multipage/forms.html#attr-input-maxlength"
"https://html.spec.whatwg.org/multipage/forms.html#attr-input-multiple"
"https://html.spec.whatwg.org/multipage/forms.html#attr-input-placeholder"
"https://html.spec.whatwg.org/multipage/forms.html#attr-input-readonly"
"https://html.spec.whatwg.org/multipage/forms.html#autofill"
"https://html.spec.whatwg.org/multipage/forms.html#autofocusing-a-form-control:-the-autofocus-attribute"
"https://html.spec.whatwg.org/multipage/forms.html#client-side-form-validation"
"https://html.spec.whatwg.org/multipage/forms.html#color-state-(type=color)"
"https://html.spec.whatwg.org/multipage/forms.html#date-state-(type=date)"
"https://html.spec.whatwg.org/multipage/forms.html#event-input-input"
"https://html.spec.whatwg.org/multipage/forms.html#forms"
"https://html.spec.whatwg.org/multipage/forms.html#input-modalities:-the-inputmode-attribute"
"https://html.spec.whatwg.org/multipage/forms.html#number-state-(type=number)"
"https://html.spec.whatwg.org/multipage/forms.html#range-state-(type=range)"
"https://html.spec.whatwg.org/multipage/forms.html#telephone-state-(type=tel)"
"https://html.spec.whatwg.org/multipage/forms.html#text-(type=text)-state-and-search-state-(type=search)"
"https://html.spec.whatwg.org/multipage/forms.html#the-datalist-element"
"https://html.spec.whatwg.org/multipage/forms.html#the-details-element"
"https://html.spec.whatwg.org/multipage/forms.html#the-dialog-element"
"https://html.spec.whatwg.org/multipage/forms.html#the-maxlength-and-minlength-attributes"
"https://html.spec.whatwg.org/multipage/forms.html#the-menu-element"
"https://html.spec.whatwg.org/multipage/forms.html#the-meter-element"
"https://html.spec.whatwg.org/multipage/forms.html#the-pattern-attribute"
"https://html.spec.whatwg.org/multipage/forms.html#the-progress-element"
"https://html.spec.whatwg.org/multipage/indices.html#event-pageshow"
"https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex"
"https://html.spec.whatwg.org/multipage/interaction.html#contenteditable"
"https://html.spec.whatwg.org/multipage/interaction.html#dnd"
"https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking"
"https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute"
"https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async"
"https://html.spec.whatwg.org/multipage/scripting.html#attr-script-defer"
"https://html.spec.whatwg.org/multipage/scripting.html#custom-elements"
"https://html.spec.whatwg.org/multipage/scripting.html#drawing-text-to-the-bitmap"
"https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element"
"https://html.spec.whatwg.org/multipage/scripting.html#the-template-element"
"https://html.spec.whatwg.org/multipage/semantics.html#attr-ol-reversed"
"https://html.spec.whatwg.org/multipage/semantics.html#dom-a-rellist"
"https://html.spec.whatwg.org/multipage/semantics.html#downloading-resources"
"https://html.spec.whatwg.org/multipage/semantics.html#link-type-noopener"
"https://html.spec.whatwg.org/multipage/semantics.html#rel-icon"
"https://html.spec.whatwg.org/multipage/semantics.html#rel-icon"
"https://html.spec.whatwg.org/multipage/semantics.html#sections"
"https://html.spec.whatwg.org/multipage/semantics.html#the-ruby-element"
"https://html.spec.whatwg.org/multipage/semantics.html#the-wbr-element"
"https://html.spec.whatwg.org/multipage/syntax.html#stop-parsing"
"https://html.spec.whatwg.org/multipage/webappapis.html#animation-frames"
"https://html.spec.whatwg.org/multipage/webappapis.html#atob"
"https://html.spec.whatwg.org/multipage/webappapis.html#custom-handlers"
"https://html.spec.whatwg.org/multipage/webstorage.html#storage"
"https://html.spec.whatwg.org/multipage/workers.html"
"https://html.spec.whatwg.org/multipage/workers.html#shared-workers-introduction"
"https://html.spec.whatwg.org/multipage/xhtml.html#parsing-xhtml-documents"
"https://msdn.microsoft.com/en-us/library/ms531189(v=vs.85).aspx"
"https://notifications.spec.whatwg.org/"
"https://slightlyoff.github.io/ServiceWorker/spec/service_worker/"
"https://tabatkins.github.io/specs/css-font-display/"
"https://tools.ietf.org/html/draft-grigorik-http-client-hints"
"https://tools.ietf.org/html/rfc2397"
"https://tools.ietf.org/html/rfc4346"
"https://tools.ietf.org/html/rfc5246"
"https://tools.ietf.org/html/rfc6066"
"https://tools.ietf.org/html/rfc6716"
"https://tools.ietf.org/html/rfc6797"
"https://tools.ietf.org/html/rfc7034"
"https://tools.ietf.org/html/rfc7469"
"https://tools.ietf.org/html/rfc7905"
"https://tools.ietf.org/html/rfc7932"
"https://url.spec.whatwg.org/#urlsearchparams"
"https://w3c.github.io/FileAPI/#FileReaderSync"
"https://w3c.github.io/mediacapture-record/MediaRecorder.html"
"https://w3c.github.io/permissions/"
"https://w3c.github.io/preload/"
"https://w3c.github.io/push-api/"
"https://w3c.github.io/requestidlecallback/"
"https://w3c.github.io/uievents/#widl-KeyboardEvent-charCode"
"https://w3c.github.io/uievents/#widl-KeyboardEvent-which"
"https://w3c.github.io/webrtc-pc/"
"https://w3c.github.io/webvtt/"
"https://webkit.org/blog/363/styling-scrollbars/"
"https://wiki.mozilla.org/APNG_Specification"
"https://www.khronos.org/registry/webgl/specs/1.0/"
"https://www.khronos.org/registry/webgl/specs/latest/2.0/"
"https://www.w3.org/community/ortc/"
"https://www.w3.org/TR/credential-management-1/"
"https://www.w3.org/TR/css-cascade-4/#valdef-all-revert"
"https://www.w3.org/TR/css-values/#attr-notation"
"https://www.w3.org/TR/css3-values/#ch"
"https://www.w3.org/TR/cssom-view-1/#dom-document-elementfrompoint"
"https://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusin"
"https://www.w3.org/TR/html51/document-metadata.html#element-attrdef-style-scoped"
"https://www.w3.org/TR/html51/semantics.html#attr-iframe-seamless"
"https://www.w3.org/TR/payment-request/"
"https://www.w3.org/TR/selection-api/"
"https://www.w3.org/TR/selectors4/#matches"
"https://www.w3.org/TR/selectors4/#negation"
"https://www.w3.org/TR/selectors4/#the-dir-pseudo"
"https://www.w3.org/TR/shadow-dom/"
"https://xhr.spec.whatwg.org/"
 
@domenic
Member
domenic commented Oct 6, 2016 edited

Yeah. In the past we've fixed that by doing pull requests to caniuse to point to the latest spec; they're quite good about accepting such PRs. And that way we improve the ecosystem for everyone!

Also from that list you can see how DOM would clearly benefit from just flipping a switch in that way; everything would just start working.

@tabatkins
Contributor

Yeah, it looks like DOM is the only one that would benefit from it; it would be saved from having to enter 15 attributes. The rest of the WHATWG specs either have only a single item, or some features link to the spec itself, which means the auto-mapping won't work.

I'll just write a PR for y'all adding the 15 attributes?

@domenic
Member
domenic commented Oct 7, 2016

I think that would be sad. It would mean every time someone adds a new DOM feature to caniuse, they also have to remember to come patch DOM. And it loses the incentive of ensuring caniuse is updated to the right spec URLs.

And with a prefix URL solution, not only DOM benefits; browsing the lists, css-fonts-3, css-cascade-3, compositing-1, css-text-decor-3, CSS2, CSS21, css3-background would all benefit before getting too far down the list.

@tabatkins
Contributor

Urgh, while I understand your position, I'm still resistant to doing it this way. Even presuming a world where all the URLs were "fixed" to something reasonable, this is still fragile. It doesn't respond well to things getting a new publication; you have to update Can I Use with the new URL and then remember to update your old spec as well. It means that well-meaning updates to Can I Use from external people to point the URL more accurately can break your spec.

I'd be okay with a compromise - you can provide a URL, and any features with that URL that you don't put in your document trigger a warning. That way, you still have to be explicit about what features you're using, and things can't disappear without your knowledge, but you're still informed if new stuff comes up without having to regularly check it out on your own. Sound okay?

@domenic
Member
domenic commented Oct 7, 2016

I'll defer to @annevk. I'd prefer no warning so I don't have to duplicate the information in both places, but it does give some of the benefits, which is nice.

@annevk
Member
annevk commented Oct 10, 2016

I would rather avoid the duplication. I don't really understand the "new publication" concern. If features move around, Can I Use will have to be updated anyway to point to the new location. It seems that will sort itself out correctly within a week of moving or so.

@tabatkins
Contributor

That (Can I Use being updated) hasn't happened for most of the specs it covers; there's a bewildering variety of URLs there, including some that I never even realized were in use (css3-webfonts, for example). It's possible that using this feature will make people more cognizant, but I suspect the more common reaction will be to just copy/paste the URL from the old draft over - it still works, after all!

As I said, the big thing I'm concerned about is Can I Use changing, and people not realizing that it did, thus losing the annotations. Most people don't seem to review diffs for the generated file, so it won't be noticed unless they happen to scroll by something that they know should have a CanIUse block and notice that it doesn't. I highly suspect this will happen when people "do the right thing" and update Can I Use with the new publication URL; any old drafts will stop showing annotations until the issue is noticed (if ever) and corrected. (This is especially problematic for CI-generated drafts.)

There's additionally the placement problems that I alluded to previously - several of the CanIUse URLs do not have a fragment; they just have the bare spec URL. Some specs have both - one feature with just the bare URL, and then several with anchors pointing to the specific definition. It's unclear where that no-fragment annotation should be placed; if I choose a place by default, there will always be people who want something else.

The "duplication" is super minor - you just add caniuse="insert-adjacent" to an element. Clear and small.

I'm gonna go ahead and go with what I proposed in the compromise. It avoids all the problems of trying to auto-associate caniuse annotations to a spec via URL, while also avoiding the "I need to regularly poll CanIUse to see if any new features of my specs are supported", as long as the URLs are set up properly (which is a requirement of either proposal).

@annevk
Member
annevk commented Oct 11, 2016

For HTML we just update Can I Use and it has gone fine thus far. Why don't we try out the way that requires less effort first?

@tabatkins
Contributor

For the reasons I just gave above - it fails silently in cases that I think are reasonably possible to happen. Just adding a few attributes (that also give you the ability to position the panel where you want), with a warning-generator to watch out for new things, is a small price on the spec author, and is much safer in general.

@annevk
Member
annevk commented Oct 12, 2016

It basically means I won't use it.

@tabatkins
Contributor

I mean... ok? You're free to refuse to use any feature. I'm not really willing to compromise on "this has a good chance of breaking in non-visible ways" because you don't want to put an attribute on fifteen elements across your spec.

@domenic
Member
domenic commented Oct 12, 2016

Maybe when I get some time I can hack up a tool we can use as a postprocessing step to add caniuse to WHATWG specs, since it looks like Bikeshed is not going to be suitable.

@tabatkins
Contributor
tabatkins commented Oct 12, 2016 edited

:thinks accepting a PR for adding an attribute to 15 elements in the document is too much work:
:thinks writing a post-processing tool that consumes a network resource, parses a document, and then adds those attributes programmatically is an okay amount of work:
¯_(ツ)_/¯

@domenic
Member
domenic commented Oct 12, 2016

No, it would be a separate tool to do caniuse; it would not add the Bikeshed attributes.

@tabatkins
Contributor

That just makes it worse! Now you're doing even more work (to produce the panels) solely to avoid using the existing Bikeshed feature.

@annevk
Member
annevk commented Oct 13, 2016 edited

The problem is that the bikeshed feature requires active maintenance by those writing the specifications. Whereas the alternative we've been successfully using for HTML for a while now (I'll just repeat that here) requires a one-time cleanup for the specification in Can I Use and some caution when adding new entries there (though that should become pretty self-evident when most specifications adopt it).

@tabatkins
Contributor

I just added the tracking metadata: you can add Can I Use URL: https://dom.whatwg.org/ and get informed whenever Can I Use adds new features from DOM.

@annevk
Member
annevk commented Nov 10, 2016

That does not help especially since Bikeshed is now mostly a server-side operation. What we need is automatic cross-referencing.

@tabatkins
Contributor

That does not help especially since Bikeshed is now mostly a server-side operation.

I don't understand what this means. Are you saying that you don't have a way to look at the warnings from Bikeshed? Do I need to give you a flag that elevates warnings and link errors to be fatal, so they'll stop your auto-build?

What we need is automatic cross-referencing.

And I've already explained why that doesn't actually work.

Even if I can fix some of the cross-ref issues (like the URLs that are to just a spec itself, not a particular anchor), there's no way to fix the problem that it's impossible to use on a spec published at more than one URL, which is the common case for W3C specs; if you move a spec, the panels just stop working until you write a Can I Use PR and get it accepted; if one of the features has its URL changed by someone else (not one of the spec editors), the panel just silently disappears until you notice and update Can I Use.

The current design is robust and easy to use. It relies on the stable identifiers from the CanIUse db, so nothing will change underneath you unless Can I Use goes totally crazy; it lets you position the panel wherever you want; it lets you publish the same spec to multiple URLs and it continues working without any effort on your part; it now warns you if someone changes the URLs away or adds new features to the same URL, so you can tell when you need to fix something; and the markup you add to tag it in is small and simple.

@annevk
Member
annevk commented Nov 11, 2016

Even if I can fix some of the cross-ref issues (like the URLs that are to just a spec itself, not a particular anchor), there's no way to fix the problem that it's impossible to use on a spec published at more than one URL

For WHATWG this will never be the case (assuming we disable this feature for snapshots which we should). Can we get a WHATWG-specific option?

@tabatkins
Contributor

I would rather write the PR to add the attributes for you than add a footgun feature that will be misused by others. :/

@annevk
Member
annevk commented Nov 12, 2016

Just restrict it to our org. 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment