The scenario
CSS3 is released and implemented in all major browser latest version.
Time to use it ! So you have defined a "nice" CSS3 page like
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style type="text/css">
div
{
padding: 10px;
background-color: Blue;
border: 1px solid black;
border-radius: 30px;
width: 800px;
box-shadow: 10px 10px 50px red;
}
</style>
</head>
<body>
<p>
Before</p>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et ipsum eget nibh gravida porta. Morbi vitae felis risus, sagittis egestas ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi
pretium eleifend ultricies. Nulla ut tellus vel dui ultricies scelerisque ut at odio. Morbi sem magna, facilisis non facilisis vel, molestie non diam. Aliquam ultrices velit nec lorem venenatis sit amet ultrices justo facilisis. Vivamus posuere ultricies
mauris, accumsan tempus nibh scelerisque eget. Curabitur sed tortor feugiat diam tincidunt ultrices. Aenean fringilla dictum risus, imperdiet rutrum nibh adipiscing non. Praesent porta massa ut risus consequat ut aliquam sapien venenatis. Phasellus
bibendum facilisis lacus, nec suscipit ante faucibus eget. Donec dolor sem, congue vestibulum malesuada et, condimentum at ante.
</p>
</div>
<p>After</p>
</body>
</html>
and you have checked in your favorite browser that the display is correct.
And now you want to use this page in a Windows Form / WPF application, hosting the page in a WebBrowser control.
The problem
One you have created a basic form and that you have rendered this HTML page in the WebBrowser, here is how it is rendered :
Well... seem that all the CSS3 functionalities have been skipped.
How the WebBrowser control works
When you use a WebBrowser control, there are several things to know:
- The WebBrowser control use the rendering engine of Internet Explorer that is installed in you computer
- More precisely it uses the ieframe.dll that is located in c:\Windows\System32
So if you have checked that you have correctly installed IE9 and that the ieframe.dll is at the correct version (meaning at least 9.0.8112.16421 for the first RTM version of IE9), the WebBrowser control will use the rendering engine of IE9.
But you must know that by default, the WebBrowser control is run in "IE7 compatibility mode", and so, quite logically, CSS3 is not supported.
How to correct it ?
Another important thing to know is that the WebBrowser control can be intensively configured thru the registry. That's what we call the Internet Feature Controls. More info about all those features can be found on http://msdn.microsoft.com/en-us/library/ee330720(v=VS.85).aspx
And one of these features is called Browser Emulation. It is the feature that controls the compatibility mode used by the WebBrowser control when rendering a page. The possible values are :
- 7000 : IE7 Standard mode (default)
- 8000 : IE8 mode if containing standards-based DOCTYPE
- 8888 : IE8 mode, whatever the DOCTYPE
- 9000 : IE9 mode if containing standards-based DOCTYPE
- 9999 : IE9, whatever the DOCTYPE
All info can be found on http://msdn.microsoft.com/en-us/library/ee330730%28v=vs.85%29.aspx#browser_emulation
So what do you need to do ? Just add a new DWORD value in the following registrey key:
- HKEY_LOCAL_MACHINE
- SOFTWARE
- Microsoft
- Internet Explorer
- MAIN
- FeatureControl
- FEATURE_BROWSER_EMULATION
The key you need to add is the name of your executable, meaning, if your application is named "WindowsFormsApplication1"
- WindowsFormsApplication1.exe when you will run directly the executable of your application
- WindowsFormsApplication1.vshost.exe when you will run your application in debug in Visual Studio
And so let's run once more our application :
Now everything is ok !
Thanks to Mike Dos Zhang for helping me to point out this solution !