CSS Only Full Browser Flash w/Minimums

Posted 4.04.11 at 3:02 pm

Want full browser flash with minimums but don’t want to rely on JavaScript? Here’s a CSS only solution.

Here’s the beauty: no importing of any javascript to handle IE6, no conditional comments, and in IE6 the minimum height will still work with JS turned off, and a simple expression will run for IE6 minimum width. It also doesn’t use any !important properties to target IE6, which could otherwise mess things up later in your CSS. It also works great on XHTML strict doctypes which everyone uses nowadays. And it’s short and easy as pie. I introduce FwOC:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*
	Fullscreen with Only CSS (aka: FwOC) v1.0
 
	(c) 2011 Bryan Grezeszak
	This is released under the MIT License <http://www.opensource.org/licenses/mit-license.php> 
	For more info go to http://grezeszak.com/css-only-full-browser-flash-with-minimums/2011/
*/
 
html, body, object {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
 
#content, object {
	display: block;
	height: 100%;
	min-height: 550px;
	*height: 550px;
	min-width: 960px;
	_width: expression(document.body.clientWidth<= 960 ? '960px' :'100%');
}

You can download demo files here and view an online demo here. Feel free to let me know in the comments about any browser inconsistencies you find. I’ve tested in Firefox 3.5, IE6, IE7, IE8, Safari 4 (windows) and Chrome 10 and all my tests have always worked great.

FwOC assumes that the div you put the flash in has the id of “content” and was developed for usage with SWFObject’s static embedding method. If you want to use a different div id then change the #content part to your new id (or your new .class). Other than that, leave the selectors as they are! It seems redundant but that’s actually important to fix bugs in certain browsers! If you have extra styles to add I recommend you add them to a different rule and not mess with the 2 rules in FwOC.

To change the minimums you need to change the height number in two places (min-height and *height) and the width in three places (min-width and the 2 places in the _width expression).

For the curious, the *height and the _width are methods of targeting IE7 and below only (the *) and IE6 and below only (the _). So literally IE6 and below are the only browsers that even evaluate the expression part, and only for width…so this is as pure CSS as it gets.

So go on and enjoy swfobject static embedding along with FwOC for zero JS full browser flash pages! As a general flash design tip: I recommend a minimum width of 960 (standard column width for HTML sites) and a minimum height of 550 (short enough to not harm your swf’s html backup layout and not turn scrollbars on for the flash when maximized in short monitors like laptops).

categorized in: Flash AS3

Tweet      
This Post Has 5 Comments
  1. Thank you. I’ve looked at a hundred attempted solutions to this issue. This is by far the simplest and most effective. An amazing bit of code.

  2. Bryan Grezeszak says:

    @dan – Thank you! It’s not a widely used method so it’s not tested as thoroughly as some, so feel free to let me know if you have any problems in any browsers. I’d really like to make sure this code stays useful in all modern systems if possible.

  3. Bryan Grezeszak says:

    Just re-tested this in newer versions of safari, IE, firefox & chrome with still flawless operation. So for those wondering…it still works! (as far as I know…of course let me know if you find any issues!)

  4. Stan says:

    It doesn’t seem to work correctly in IE9. The vertical scrollbar is always visible and if you scroll down it shows a blank white area. Viewing the demo [http://grezeszak.com/wp-content/uploads/2011/04/fwoc.html] on PC Win 7, 64-bit.

  5. Bryan Grezeszak says:

    I have IE9 on a Win 7 64-bit PC and the demo works perfectly for me, and I know some others that have tested IE9 on other systems without issue. Are you sure you aren’t in one of those strange IE8 testing modes where less things work than in the actual IE8 or anything like that?

Leave a Comment:

Note: All comments are subject to review and may be deleted for any reason. Your email address will not show. Comment spam will not be tolerated.