Internet Explorer support

[Kristinita]

Of the browsers that do not support tags, your script good supports Firefox, Edge and Opera Mini, but Internet Explorer (newest version IE 11.0.10240.17071 for me) is not supported. Could you introduce the tag support for IE?

Thank you for a great script!

[uniqname]

Thanks @Kristinita

I just tested the polyfill out on IE 11.0.9600.16663 and it seems to be working fine. The demo page however is broken, and should be fixed, but it is just failing to load the polyfill. Once, loaded, everything works as expected. Are you seeing issues when using the polyfill, or viewing the demo page?

[Kristinita]

@uniqname, I use the Details-Polyfill to my articles, example: http://kristinita.ru/Gingerinas/Korvers.

Minimal example:

• Code: https://github.com/Kristinita/Kristinita.github.io/blob/master/technical_texts/Details-Polyfill.html
• Result: http://kristinita.ru/technical_texts/Details-Polyfill

Thanks.

[uniqname]

Thanks for the reduced test case!

You're test case is having the same problem as my demo page. The error is not in the polyfill, but the test for whether the polyfill should be loaded.

See this pen for an example on how to test and conditionally load the polyfill. I will get the demo page updated to reflect this same approach.

https://codepen.io/uniqname/pen/akZbjX

[Kristinita]

Thanks, great work!

One more request.

As disclosed spoilers appear in the Chrome and Opera, browsers that support normal tag details and summary:

▼ Click me:
Sasha
▼ Click me:
Chernykh
▼ Click me:
Fantasy

Result in Firefox and Internet Explorer, don't support this tags:

Click me: Sasha
Click me: Chernykh
Click me: Fantasy

Could you make result in browsers that supports the tags details and summary normally (Opera, Chrome) would have been the same as in browsers that do not support these tags (Firefox, IE)? Character ▼ and a line break?

Thanks.

[Kristinita]

@uniqname, actually. For example, how users see detailed spoilers in your page https://codepen.io/uniqname/pen/akZbjX in Chrome:

And in Internet Explorer, when using Details-Polyfill.

The results slightly different, but it would be nice if they were identical.

Thanks.

[uniqname]

Yeah, I debated whether or not to match current implementation or spec. I settled on spec which does does not indicate anything about presentation. I also chose that route to make styling them easier since Chrome's default styling is quite painful to override. It's not too difficult to emulate Chrome's implementation if you need it.

details > summary::before {
  content: '/25BC';
  font-size: .75em;
  padding-right: .25em;
}

details[open] > summary::before {
  content: '\25B6';
}

[Kristinita]

@uniqname , it's not worked for me.

My code: https://gist.github.com/Kristinita/63564d7e1a69a11fdfccac618a7b94dd

How I see result in Internet Explorer:

How I see result in Chrome:

In browsers which support the <details> and <summary> tags, arrows are duplicated.

Thanks.

[Kristinita]

@uniqname , actually.

Thanks.