Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add caniuse info boxes like the HTML spec #69

Closed
cvrebert opened this issue Sep 4, 2015 · 43 comments
Closed

Add caniuse info boxes like the HTML spec #69

cvrebert opened this issue Sep 4, 2015 · 43 comments

Comments

@cvrebert
Copy link
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
Copy link
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.

@domenic
Copy link
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
Copy link
Member Author

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

@cvrebert
Copy link
Member Author

cvrebert commented Oct 5, 2016

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

@annevk
Copy link
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
Copy link
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
Copy link
Member Author

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
Copy link
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
Copy link
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
Copy link
Member

domenic commented Oct 5, 2016

They link to spec sections of though...

@tabatkins
Copy link
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
Copy link
Member

annevk commented Oct 6, 2016

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
Copy link
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
Copy link
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
Copy link
Member

domenic commented Oct 6, 2016

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
Copy link
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
Copy link
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
Copy link
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
Copy link
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
Copy link
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
Copy link
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
Copy link
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
Copy link
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
Copy link
Member

annevk commented Oct 12, 2016

It basically means I won't use it.

@tabatkins
Copy link
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
Copy link
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
Copy link
Contributor

tabatkins commented Oct 12, 2016

: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
Copy link
Member

domenic commented Oct 12, 2016

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

@tabatkins
Copy link
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
Copy link
Member

annevk commented Oct 13, 2016

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
Copy link
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
Copy link
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
Copy link
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
Copy link
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
Copy link
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
Copy link
Member

annevk commented Nov 12, 2016

Just restrict it to our org. 😊

@dstorey
Copy link
Member

dstorey commented Jan 10, 2018

I'd prefer if we just parsed WebIDL for each browser and included the results that way. It will be exactly the right granularity needed (unlike canIUse…), the work would be useful for other things (such as MDN support tables, Intellisense data in browsers, etc.), and would be another justification to publish the Edge WebIDL.

@wanderview
Copy link
Member

I'd prefer if we just parsed WebIDL for each browser and included the results that way.

This would require understanding each browsers feature flag system, right? We often have webidl present but not enabled yet.

@dstorey
Copy link
Member

dstorey commented Jan 10, 2018

Sure, but the WebIDL info is useful for other reasons too (we probably want to use it for Sonar too), so that will need to be worked out. It would be good to have that documented too as we look at WebIDL to see interop status with browsers. In Edge's case we use [Pref=featureKey] if it is disabled using a runtime flag. It would be useful if we could agree on common ones (although that doesn't help for historical data)

@domenic
Copy link
Member

domenic commented Jan 10, 2018

This is a really interesting idea, and I think I like it---if we can get the infrastructure built. (Although I know both Edge and Chrome have projects that have done a lot of this already.)

I'm just conflicted as to whether it should replace caniuse or supplement it. I guess that's an easier decision for things like DOM which currently don't have any caniuse boxes (only HTML does).

@domenic
Copy link
Member

domenic commented Jan 10, 2018

What I'm picturing, by the way, is tiny little browser logos next to every API documented in the "Non-normative (for web developers)" boxes.

@snuggs
Copy link
Member

snuggs commented Jan 11, 2018

the work would be useful for other things (such as MDN support tables, Intellisense data in browsers, etc.), - @dstorey

For What It's Worth...I'm currently contributing to an initiative https://github.com/mdn/browser-compat-data to better define the compat table with JSON data from Github. Any value in extrapolating data from this repo? This is an area that has been frustrating to me previously. To be clear this is a fairly new initiative (i've been completing web components). Seems like the majority of momentum is around HTML and CSS. Web APIs relatively sparse with contributors working on respective interests from what i've seen. However, the intent is to have full coverage. I could be loading up a footgun as haven't done an assessment of what it would take to "complete the dom" to the liking of our requested needs but I know it will need to be done (eventually) and start down the cowpath. I was confused about how they were going to automate integration into MDN and was given explanation documentation

Great idea (or at least better than updating a CMS via a WYSIWYG) on MDN nonetheless. And definitely should be brought to attention just for knowledge's sake.

This would require understanding each browsers feature flag system, right? - @wanderview

With this strategy Feature Flags are *Batteries Included.

Thoughts.... /cc @domenic @annevk

@annevk
Copy link
Member

annevk commented Oct 14, 2021

We have this now, thanks to @sideshowbarker, in the form of MDN buttons. Nice!

@annevk annevk closed this as completed Oct 14, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

7 participants