Anyone have a "CSS Box Model Sniffer" for GWT?
8 views
Skip to first unread message
John Gunther
Dec 21, 2007, 3:26:44 PM12/21/07
to Google Web Toolkit
It's well known that IE6 (quirks mode) and IE5 don't support the
standard CSS box model. This link provides a good description of the
issue if you need more detail:
http://webdesign.about.com/od/css/a/aaboxmodelhack.htm
My understanding is that this is NOT one of the cross-browser
incompatibilities that GWT insulates you from. Or am I missing
something?
If not, is there an easy way to determine which "box model variant"
the browser currently running my code is using?
To be specific, I'd like to be able to write GWT code that would set
an Image object's width, and, say, its left border width, AS IF all
browsers supported the standard CSS box model. And if I cannot do that
with GWT right now, I'd like to at least be able to determine which
box model was being used, so I could make appropriate adjustments so
the Image would look the same in every GWT-compatible browser.
John
standard CSS box model. This link provides a good description of the
issue if you need more detail:
http://webdesign.about.com/od/css/a/aaboxmodelhack.htm
My understanding is that this is NOT one of the cross-browser
incompatibilities that GWT insulates you from. Or am I missing
something?
If not, is there an easy way to determine which "box model variant"
the browser currently running my code is using?
To be specific, I'd like to be able to write GWT code that would set
an Image object's width, and, say, its left border width, AS IF all
browsers supported the standard CSS box model. And if I cannot do that
with GWT right now, I'd like to at least be able to determine which
box model was being used, so I could make appropriate adjustments so
the Image would look the same in every GWT-compatible browser.
John
Fred Sauer
Dec 21, 2007, 3:49:22 PM12/21/07
to Google-We...@googlegroups.com
John,
If you could use a DOCTYPE and run your application in strict mode, you'll find the number of issues between IE and others greatly reduced. Personally, I find strict (standards) mode rendering easier to deal with than quirks mode.
I should note that there are a few (strict mode) doctype issues in 1.4.61 that will likely (all?) be addressed in 1.5. If you must use 1.4.61, you may have to work around these in your client code. Again, my personal opinion is that is easier to deal with these (which are well documented in the issue tracker; just search for "label:doctype") than to deal with IE in quirks mode.
If, by the way, you can use a build from 'trunk' (stuff that's in the queue for inclusion in 1.5) on your project instead of 1.4.61, then many of these doctype issues will have already been fixed for you. Also, there's expected to be a milestone build for 1.5 soon in case that is more manageable than a 'build it yourself from sources' distribution.
Hope that helps.
Fred
If you could use a DOCTYPE and run your application in strict mode, you'll find the number of issues between IE and others greatly reduced. Personally, I find strict (standards) mode rendering easier to deal with than quirks mode.
I should note that there are a few (strict mode) doctype issues in 1.4.61 that will likely (all?) be addressed in 1.5. If you must use 1.4.61, you may have to work around these in your client code. Again, my personal opinion is that is easier to deal with these (which are well documented in the issue tracker; just search for "label:doctype") than to deal with IE in quirks mode.
If, by the way, you can use a build from 'trunk' (stuff that's in the queue for inclusion in 1.5) on your project instead of 1.4.61, then many of these doctype issues will have already been fixed for you. Also, there's expected to be a milestone build for 1.5 soon in case that is more manageable than a 'build it yourself from sources' distribution.
Hope that helps.
Fred
--
Fred Sauer
fr...@allen-sauer.com
John Gunther
Dec 21, 2007, 4:41:35 PM12/21/07
to Google Web Toolkit
Thanks, Fred. Quite helpful.
Would it be correct to interpret your remarks to mean that GWT will
likely make the use of a DOCTYPE the recommended "best practice" for
GWT applications in 1.5 (e.g. the generated "Hello GWT" app HTML would
include a DOCTYPE declaration at the top) ?
John
Would it be correct to interpret your remarks to mean that GWT will
likely make the use of a DOCTYPE the recommended "best practice" for
GWT applications in 1.5 (e.g. the generated "Hello GWT" app HTML would
include a DOCTYPE declaration at the top) ?
John
On Dec 21, 3:49 pm, "Fred Sauer" <f...@allen-sauer.com> wrote:
> John,
>
> If you could use a DOCTYPE and run your application in strict mode, you'll
> find the number of issues between IE and others greatly reduced. Personally,
> I find strict (standards) mode rendering easier to deal with than quirks
> mode.
>
> I should note that there are a few (strict mode) doctype issues in
> 1.4.61that will likely (all?) be addressed in
> John,
>
> If you could use a DOCTYPE and run your application in strict mode, you'll
> find the number of issues between IE and others greatly reduced. Personally,
> I find strict (standards) mode rendering easier to deal with than quirks
> mode.
>
> I should note that there are a few (strict mode) doctype issues in
> 1.5. If you must use 1.4.61, you may have to work around these in your
> client code. Again, my personal opinion is that is easier to deal with these
> (which are well documented in the issue tracker; just search for
> "label:doctype") than to deal with IE in quirks mode.
>
> If, by the way, you can use a build from 'trunk' (stuff that's in the queue
> for inclusion in 1.5) on your project instead of 1.4.61, then many of these
> doctype issues will have already been fixed for you. Also, there's expected
> to be a milestone build for 1.5 soon in case that is more manageable than a
> 'build it yourself from sources' distribution.
>
> Hope that helps.
> Fred
>
> client code. Again, my personal opinion is that is easier to deal with these
> (which are well documented in the issue tracker; just search for
> "label:doctype") than to deal with IE in quirks mode.
>
> If, by the way, you can use a build from 'trunk' (stuff that's in the queue
> for inclusion in 1.5) on your project instead of 1.4.61, then many of these
> doctype issues will have already been fixed for you. Also, there's expected
> to be a milestone build for 1.5 soon in case that is more manageable than a
> 'build it yourself from sources' distribution.
>
> Hope that helps.
> Fred
>
> On Dec 21, 2007 1:26 PM, John Gunther <johncurtisgunt...@yahoo.com> wrote:
>
>
>
>
>
> > It's well known that IE6 (quirks mode) and IE5 don't support the
> > standard CSS box model. This link provides a good description of the
> > issue if you need more detail:
>
> >http://webdesign.about.com/od/css/a/aaboxmodelhack.htm
>
> > My understanding is that this is NOT one of the cross-browser
> > incompatibilities that GWT insulates you from. Or am I missing
> > something?
>
> > If not, is there an easy way to determine which "box model variant"
> > the browser currently running my code is using?
>
> > To be specific, I'd like to be able to write GWT code that would set
> > an Image object's width, and, say, its left border width, AS IF all
> > browsers supported the standard CSS box model. And if I cannot do that
> > with GWT right now, I'd like to at least be able to determine which
> > box model was being used, so I could make appropriate adjustments so
> > the Image would look the same in every GWT-compatible browser.
>
> > John
>
> --
> Fred Sauer
> f...@allen-sauer.com>
>
>
>
>
> > It's well known that IE6 (quirks mode) and IE5 don't support the
> > standard CSS box model. This link provides a good description of the
> > issue if you need more detail:
>
> >http://webdesign.about.com/od/css/a/aaboxmodelhack.htm
>
> > My understanding is that this is NOT one of the cross-browser
> > incompatibilities that GWT insulates you from. Or am I missing
> > something?
>
> > If not, is there an easy way to determine which "box model variant"
> > the browser currently running my code is using?
>
> > To be specific, I'd like to be able to write GWT code that would set
> > an Image object's width, and, say, its left border width, AS IF all
> > browsers supported the standard CSS box model. And if I cannot do that
> > with GWT right now, I'd like to at least be able to determine which
> > box model was being used, so I could make appropriate adjustments so
> > the Image would look the same in every GWT-compatible browser.
>
> > John
>
> --
> Fred Sauer
Fred Sauer
Dec 21, 2007, 5:16:49 PM12/21/07
to Google-We...@googlegroups.com
John,
I'm not sure where the GWT team's recommendation will land on this. But, you can bet it will boil down to whether or not a particular recommendation means better applications for end users.
End users don't directly care whether a given web page is rendered in quirks or strict/standards mode. So, it comes down to whether you as a developer (or team of developers) can produce beter apps or apps in less time using a standards rendering mode. This may depend on many factors in your development and deployment environments, and on the history of the team and project.
I hope/expectation is that the Hello GWT examples will be tested and made to work identically in both quirks and standards mode. Also, to the extent that GWT can isolate developers from the differences, I think they will make every effort to do so.
I also hope that the "default" deployment and documentation examples suggest standards mode, since IMO this causes fewer headaches down the line for developers, and thus means better apps for end users.
In the real world, in non-trivial applications, there are practical differences between rendering modes, no matter what toolkit or library you use. My personal recommendation is "always use standards mode, unless you absolutely have to use quirks mode".
Cheers
Fred
I'm not sure where the GWT team's recommendation will land on this. But, you can bet it will boil down to whether or not a particular recommendation means better applications for end users.
End users don't directly care whether a given web page is rendered in quirks or strict/standards mode. So, it comes down to whether you as a developer (or team of developers) can produce beter apps or apps in less time using a standards rendering mode. This may depend on many factors in your development and deployment environments, and on the history of the team and project.
I hope/expectation is that the Hello GWT examples will be tested and made to work identically in both quirks and standards mode. Also, to the extent that GWT can isolate developers from the differences, I think they will make every effort to do so.
I also hope that the "default" deployment and documentation examples suggest standards mode, since IMO this causes fewer headaches down the line for developers, and thus means better apps for end users.
In the real world, in non-trivial applications, there are practical differences between rendering modes, no matter what toolkit or library you use. My personal recommendation is "always use standards mode, unless you absolutely have to use quirks mode".
Cheers
Fred
On Dec 21, 2007 2:41 PM, John Gunther <johncurt...@yahoo.com> wrote:
Thanks, Fred. Quite helpful.
Would it be correct to interpret your remarks to mean that GWT will
likely make the use of a DOCTYPE the recommended "best practice" for
GWT applications in 1.5 (e.g . the generated "Hello GWT" app HTML would
Peter Blazejewicz
Dec 21, 2007, 6:25:25 PM12/21/07
to Google Web Toolkit
hi John,
have you tried following:
.######### {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
which should put everything to use tranditional model,
regards,
Peter
have you tried following:
.######### {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
which should put everything to use tranditional model,
regards,
Peter
gregor
Dec 22, 2007, 7:08:33 AM12/22/07
to Google Web Toolkit
Hi john,
Another way to insulate against different box models is to put the
widget/panel you want to decorate inside an extra decorator
SimplePanel and apply border etc.styling to the decorator, not the
widget/panel itself, e.g.
SimplePanel decorator = new SimplePanel;
decorator.setStyleName("myWidget-decorator");
SomeWidget myWidget = new SomeWidget();
decorator.add(myWidget);
someHigherPanel.add(decorator);
.myWidget-decorator {
border: 10px solid #d3d3d3;
}
This works because in IE the decorator will expand to fill all the
available space in someHigherPanel, but it will subtract the border
when sizing myWidget, whereas e.g. Firefox will squash the decorator
by 20px each way first and then size myWidget to fit into that reduced
size. The effect is the same in both browsers i.e. myWidget +
decorator is exactly the same size.
Regards
Gregor
On Dec 21, 11:25 pm, Peter Blazejewicz <peter.blazejew...@gmail.com>
wrote:
Another way to insulate against different box models is to put the
widget/panel you want to decorate inside an extra decorator
SimplePanel and apply border etc.styling to the decorator, not the
widget/panel itself, e.g.
SimplePanel decorator = new SimplePanel;
decorator.setStyleName("myWidget-decorator");
SomeWidget myWidget = new SomeWidget();
decorator.add(myWidget);
someHigherPanel.add(decorator);
.myWidget-decorator {
border: 10px solid #d3d3d3;
}
This works because in IE the decorator will expand to fill all the
available space in someHigherPanel, but it will subtract the border
when sizing myWidget, whereas e.g. Firefox will squash the decorator
by 20px each way first and then size myWidget to fit into that reduced
size. The effect is the same in both browsers i.e. myWidget +
decorator is exactly the same size.
Regards
Gregor
On Dec 21, 11:25 pm, Peter Blazejewicz <peter.blazejew...@gmail.com>
wrote:
Reply all
Reply to author
Forward
0 new messages