ireade / caniuse-embed Goto Github PK

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?

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.

Wonderful project! I'm hoping to include some of these embeds on my site, but I noticed a few additional color contrast issues:

1. The white on orange has a contrast ratio of 3.93:

2. The two global stats have contrast ratios of 2.19 and 1.73, respectively:

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).

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 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

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:

https://cssvalues.com/includes/embed.php?feat=mdn-css__properties__aspect-ratio&periods=future_1,current,past_1,past_2&accessible-colours=false&image-base=none

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!

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

Hello,

It looks like markdown links are not interpreted by the screenshot tool.

Example:

Original:

I didnt do the code inspection to see how those images are rendered, just reporting, maybe its something easy to fix, or impossible to fix.

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? :)

Image example:

https://res.cloudinary.com/ireaderinokun/image/upload/v1/caniuse-embed/all/css-all.webp

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/.

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!

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

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

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!

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

Internet Explorer v11.240.10586.0 / Win10

On link, IE shows a looong space. On iframe, page make a "infinite" scroll...

Link: http://caniuse.bitsofco.de/embed/index.html?feat=meter&periods=future_2,future_1,current,past_1,past_2

I think that is a "responsive" text reflow problem... or Chrome bug?

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:

Compared to the original:

Notice sharpness of the fonts.

It will be much easier to search a feature in generator if the select is enhanced with Chosen or Select2 with Search feature.

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}">

Screenshot: https://i.imgur.com/trAyHQP.png