ireade / caniuse-embed Goto Github PK
View Code? Open in Web Editor NEW๐ Embed realtime data from caniuse.com
Home Page: https://caniuse.bitsofco.de
๐ Embed realtime data from caniuse.com
Home Page: https://caniuse.bitsofco.de
Screenshot: https://i.imgur.com/trAyHQP.png
Right now, if you use the interactive embed and the user has JS activated, the fallback image will still be loaded, despite never beeing shown. This can be easily avoided by adding loading="lazy" to the img-Element. Most browsers support it already, and those wo don't just ignore the attribute:
https://caniuse.com/#feat=loading-lazy-attr
I tested this in Firefox and Chromium-Edge, and it works fine. As far as I understand the native lazy-loading attribute can be added without risk or downsides, and we could save time, money, CO2 etc.
Example:
<p class="ciu_embed" data-feature="dialog" data-periods="future_1,current,past_1,past_2" data-accessible-colours="false">
<picture>
<source type="image/webp" srcset="https://caniuse.bitsofco.de/image/dialog.webp">
<source type="image/png" srcset="https://caniuse.bitsofco.de/image/dialog.png">
<img loading="lazy" src="https://caniuse.bitsofco.de/image/dialog.jpg" alt="Data on support for the dialog feature across the major browsers from caniuse.com">
</picture>
</p>
Hi,
Thanks for creating this.
It would improve performance for initial page loads for pages that use the interactive embed if you include the loading='lazy
attribute on the iframe
you create in the script. The support in browsers for this is quite good now.
Codepen has similar embed functionality and includes it as per screenshot below.
I can submit a PR if you wish?
All the best
Rob
hi there~
it's there a es6/webpack version of the embeder?
like:
import CaniuseEmbed from 'caniuse-embed';
es6/webpack is friendly for the load-when-need kind of staff
Not sure if I'm doing something wrong, but e.g. https://caniuse.com/mdn-css_at-rules_media_-webkit-device-pixel-ratio does not seem to be working when I use the embed. It also does not show up in the dropdown here: https://caniuse.bitsofco.de/.
Sometime recently, Caniuse moved IE out of the first position - since it's no longer even supported by MS, and dropped to 0.44% global usage. Might be good to make a similar change here?
Hello!
I've been using your embed for some wile with Hugo, a static site generator, and I recently noticed that the embeds no longer work.
Here (https://kevingimbel.de/blog/2017/11/css-custom-properties-and-a-new-look/) should be one near the "CSS variables" headline.
I'm creating the embed code like this https://github.com/kevingimbel/hugo-kg-shortcodes/blob/master/layouts/shortcodes/caniuse.html#L5-L11, the bare code is taken from https://caniuse.bitsofco.de/
The rendered code is
<p class="ciu_embed" data-feature="css-variables" data-periods="future_1,current,past_1,past_2" data-accessible-colours="false"><picture>
<source type="image/webp" srcset="https://caniuse.bitsofco.de/image/css-variables.webp"><source type="image/png" srcset="https://caniuse.bitsofco.de/image/css-variables.png"><img src="https://caniuse.bitsofco.de/image/css-variables.jpg" alt="Data on support for the css-variables feature across the major browsers from caniuse.com"></picture></p>
and this looks correct, too. But nothing is shown and even the image cannot be loaded, when I click on the image link I see the image in the browser. ๐คท
I'm not sure what is wrong, is there anything else I need to do? I'm loading the script from cdn.jsdelivr.net like so
<script async="" src="https://cdn.jsdelivr.net/gh/ireade/caniuse-embed/public/caniuse-embed.min.js"></script>
The only thing different is the async
tag but I'm 100% sure this worked in the past.
Any help or hint is highly appreciated and thank you a lot for caniuse-embed, it's a super cool project!
I'm not sure exactly what causes this issue, but feature IDs with an mdn-css_
prefix (eg mdn-css_at-rules_property
or mdn-css_properties_writing-mode_sideways_values
or mdn-css_types_overflow_clip
) don't seem to work.
Thanks for such a useful tool!
This is such a great tool, thank you!
I'd like to use it for embedding data inside HTML slides when I present at conferences. But the set font-size is very small for a slide format:
html {
font-size: 62.5%;
}
Since there's no way to style an iframe contents based on context, this feature would need to be built-in explicitly. I propose exposing a data-base-size
attribute on the .ciu_embed
paragraph, and applying the value to html
as an override of the default font-size.
<html dir="ltr" lang="en" style="font-size: {provided-base-size}">
I'm not sure if this is something I'm doing wrong, but I'm using your embed on my CSS reference (Love it BTW, thanks for building this!) and when I just added the new aspect-ratio
property that's also included in MDN's docs, it doesn't seem to display the correct browser support data.
You can see the direct code for my embed here:
Or just type "aspect-ratio" on the main site and load up the browser support using the button.
When I compare that to what's on MDN or even what's in the JSON file that MDN's is sourced from, it seems to be different.
Is there something I'm doing wrong in my code? Or does aspect-ratio
need to be added to your tool's API before it will show correctly?
Thanks for any help with this!
Internet Explorer v11.240.10586.0 / Win10
On link, IE shows a looong space. On iframe, page make a "infinite" scroll...
It will be much easier to search a feature in generator if the select is enhanced with Chosen or Select2 with Search feature.
Howdy,
I'm trying to embed the preload data into one of the Lighthouse reference docs.
Using the generated embed code:
<script src="https://cdn.jsdelivr.net/gh/ireade/caniuse-embed/caniuse-embed.min.js"></script>
<p class="ciu_embed" data-feature="link-rel-preload"
data-periods="future_2,future_1,current,past_1,past_2"
data-accessible-colours="false">
<a href="http://caniuse.com/#feat=link-rel-preload">Can I Use link-rel-preload?</a>
Data on support for the link-rel-preload feature across the major browsers from caniuse.com.
</p>
Doesn't seem to be working. Just displays the plaintext, without the fancy table.
Hey, I really like this plugin, but there's a serious issue with it: on Safari 5 (maybe 6) and below, the height of the iframe glitches out and becomes infinite breaking my page. There's also a scrolling glitch but that's not really an issue that has to be addressed. If you don't have safari 5 on your PC, apple still hosts the link here: http://appldnld.apple.com/Safari5/041-5487.20120509.INU8B/SafariSetup.exe
Hello, great job on the tool :)
Im a huge fan of caniuse and this will help me visualize support in my blog posts.
Maybe high dpi screens are still not majority, but in the target group of this tool (and readers) its very common to have retina screens, so i would propose shooting screenshots at 2x dpi
Example how current screenshots look like on my screen:
Notice sharpness of the fonts.
First, good project.
I just found I can not show css columns with this, am I use it wrong?
here is this feature link: https://caniuse.com/#feat=mdn-css_properties_columns
Hi! A little while ago, caniuse.com updated the default view of 10 to display UC Browser and Samsung Internet (disclaimer: where I work). This is due to the StatCounter data showing that they have more global usage than Opera Desktop and the stock Android browser (the two which were bumped).
Currently, StatCounter has UC Browser as number 3 globally and Samsung Internet as number 6 globally (and one higher at number 5, when just considering the mobile category).
Please might you consider making the same update for caniuse-embed? :)
For URL of "menu" tag with description Method of defining a toolbar menu, a context menu or a list of (interactive) options using the <menu> element.
The "menu" tag from description render like as tag instead text:
โบ http://caniuse.com/#feat=menu
โบ http://caniuse.bitsofco.de/embed/index.html?feat=menu&periods=future_2,future_1,current,past_1,past_2
Wonderful project! I'm hoping to include some of these embeds on my site, but I noticed a few additional color contrast issues:
Related to that second issue is the fact that the global stats use the same colors as the tiles in the inaccessible color mode, so when the accessible color mode is enabled, there's a mismatch between the tile colors and the stat colors.
Some proposed colors that might work well:
#c34e03 for the orange footer (4.76):
Black for the global stats (this would also require labeling the two percentages to clarify what they correspond to).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.