Prepare web.config for HTML5 and CSS3
HTML5 and CSS3 introduces some new file types that enables us to create even better websites. We are now able to embed video, audio and custom fonts natively to any web page. Some of these file types are relatively new and not supported by the IIS web server by default. It’s file types like .m4v, .webm and .woff.
When a request is made to the IIS for these unsupported file types, we are met with the following error message:
HTTP Error 404.3 - Not Found
The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.
The problem is that the IIS doesn’t know how to serve these new files unless we tell it how. This can be easily done in the web.config’s <system.webServer> section by adding the following snippet:
<staticContent> <mimeMap fileExtension=".mp4" mimeType="video/mp4" /> <mimeMap fileExtension=".m4v" mimeType="video/m4v" /> <mimeMap fileExtension=".ogg" mimeType="video/ogg" /> <mimeMap fileExtension=".ogv" mimeType="video/ogg" /> <mimeMap fileExtension=".webm" mimeType="video/webm" /> <mimeMap fileExtension=".oga" mimeType="audio/ogg" /> <mimeMap fileExtension=".spx" mimeType="audio/ogg" /> <mimeMap fileExtension=".svg" mimeType="image/svg+xml" /> <mimeMap fileExtension=".svgz" mimeType="image/svg+xml" /> <remove fileExtension=".eot" /> <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" /> <mimeMap fileExtension=".otf" mimeType="font/otf" /> <mimeMap fileExtension=".woff" mimeType="font/x-woff" /> </staticContent>
The above snippet includes support for most video, audio and font file types used by HTML5 and CSS3.
Comments
Mads - thanks for the snippet. But does this work with non-asp.net websites? I've got a demo site on Azure that won't render svg images because it thinks they're (default - html/text). I tried adding this web.config, but it just broke the site entirely. <?xml version="1.0" encoding="utf-8" ?> <configuration> <system.webServer> <staticContent> <remove fileExtension=".svg> /> <mimeMap fileExtension=".svg" mimeType="image/svg xml" /> </staticContent> </system.webServer> </configuration>
Eric FlammOops - found it - there's a ">" where there should be a """. Guess I'm a bit spoiled by the VS syntax checker...
Eric FlammSays for fileExtension=".woff" it sould be "application/font-woff" http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts
TopbotDidn't know you could set MIME directly on Web.config.
Vitor Canovajust in case I would always remove fileExtension before adding it.
JakubComments are closed