how does GWT Designer on Windows with IE7 supports XHTML strict mode?
I've noticed that before while using legacy .css files but I've been looking for some clear, official test case sample,
here is one: IE7 (Windows) supports "first-child" selector when viewed in strict mode. Paragraph element if being first child of its parent should render red text over white background. Otherwise white text over red bacground in inheritance css chain,
While that is true in hosted mode run from GWT Designer "Design" editor mode seems to be in quirks mode:
[hosted mode]
- view in Hosted mode (IE7/Windows)
- hostedView.png (19.92 KiB) Viewed 1670 times
[design mode]
- view in Design editor mode (IE7/Windows)
- designerView.png (4.3 KiB) Viewed 1711 times
full source code (very easy example to write):
modified generated .html page:
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<meta name='gwt:module' content= 'com.mycompany.project.StrictMode'>
<link type="text/css" rel='stylesheet' href= 'StrictMode.css'>
</head>
<body>
<script type="text/javascript" language="javascript" src= "com.mycompany.project.StrictMode.nocache.js">
</script>
<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0">
</iframe>
</body>
</html>
modified generated .css:
- Code: Select all
body {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.note {
color: white;
background-color: red;
}
p:first-child {
color: red;
background-color: white;
}
entry point:
- Code: Select all
package com.mycompany.project.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class StrictMode implements EntryPoint {
private HTML secondSample;
private HTML firstSample;
public void onModuleLoad() {
RootPanel rootPanel = RootPanel.get();
firstSample = new HTML("<p> The first P inside the note. </p>");
rootPanel.add(firstSample);
firstSample.setStyleName("note");
secondSample = new HTML(
"<h2>Note</h2><p> The first P inside the note. </p>");
rootPanel.add(secondSample);
secondSample.setStyleName("note");
}
}
example is based on Microsf relevant example code:
http://msdn2.microsoft.com/en-us/library/ms530712(VS.85).aspx
.zip-ped project included:
IEStrictModeTest.zip- project sources
- (2.42 KiB) Downloaded 95 times
regards,
Peter
I could bet that most of us will follow toolkit modes support choosen now and in future,