Question about Video and audio APIs

MDN Learn
#1

Hi, I am currently reading Video and audio APIs article. In the CSS section in the @font-face, there is a CSS line

 src: url("fonts/heydings_controls-webfont.eot?#iefix") format("embedded-opentype"),

here in the Url, there is “?#iefix” at the end of the font file can somebody explain to me what is this?

I did search for this on the MDN and it is called “Fragment identifiers” but I am still confused about it. A good explanation would be helpful thank you.

1 Like
#2

Welcome back @Junaid_Ali :wave:

This is a fix for a bug in very old Internet Explorer versions (IE8 and below). Without the fragment they can’t read the URL correctly when there are multiple font formats.

So it’s just a remnant from old times and isn’t necessary anymore. Today, you mostly see only WOFF and WOFF2. (WOFF for IE9 and up and WOFF2 for modern browsers). Or even just WOFF2.

I hope that helps :slightly_smiling_face:
Michael

1 Like
#3

Hi, @mikoMK.

Thank you for your reply, the “?” was making confusion here as I did not find any information about this on the MDN docs. I got it now it is for old browsers and we do not need this anymore. Thank you again for the explanation.

1 Like
#4

Ahh, I see. The question mark starts the optional query string of an URL. Sometimes, this part is also called parameter list or similar. Actually, the question mark is the important thing for this IE workaround. Old IEs will interpret anything after that as parameters and can correctly read the main part of the URL. So in this specific case we have an empty parameter list and then the fragment (or anchor) #iefix. This is more like a comment as it actually isn’t needed for the workaround.

Here is a MDN article explaining the different parts of an URL: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL

1 Like
#5

Oh I see now in the example it is just a comment or placeholder for IE compatibility.

src: url("fonts/heydings_controls-webfont.eot?#iefix") format("embedded-opentype"),

As you mentioned it has an empty parameter list and then an anchor at the end of the URL. It makes sense now thank you for the explanation really appreciate it.

1 Like