Axelology » CSS

Improving compile times with runtime css

admin — Fri, 03 Oct 2008 19:36:49 +0000

This post is a video showing how embedding fonts and images can have a drastic effect on compile times. It goes on in the video to show a possible way to improve those compile times with runtime css.

Here is the zip of the Project – SOURCE

The Problem

When you embed a lot of fonts you immediately hurt your compile times. In the video I go about showing you how just embedding a few fonts can’t hurt your compile times, I have about 8 fonts embedded and 2 of them with bold font embeddings as well. This slowed down my compile time to 8 seconds, with barely any mxml, it’s all css and embedding fonts that caused the issue. This post goes to show you how to create a separate project to hold your css and how to include it as runtime css in your original project.

A (possible) Solution

The solution is to create a separate project to hold you css and embedded assets, the reason for this is most the time in your development cycle once you are done setting up the style it just sets there… and then you work on the logic of the application…

So what you do is create a separate project put your css and the embedded assets in the seperate project, and set its output folder to be the actual project’s html-template folder, then you right-click the css file and make sure “Compile CSS to SWF” is checked. This tells flexbuilder to compile a swf just for the css file… NOTE: you may have to make a change to the css file to get it to output the swf.

Once the file is a swf, and the output folder is your destination project you simply use StyleManager.loadStyleDeclarations(‘somecss.swf’); to load your css on the “initialize” event of the main application mxml file.

To also help improve compile times you can try using unicode ranges for you font as well, and only embedding what you need Using unicode ranges for fonts

Please see the video for more details

Here is the zip of the Project - SOURCE

THE VIDEO

(be patient, it takes a minute to load)

Use CSS to create a drop shadow

admin — Wed, 13 Feb 2008 20:44:13 +0000

Short and to the point.
View the example

Download the File

“title”>
“#”>“text”>Alice in Wonderland
“shadow”>Alice in Wonderland

CHECK THIS LINK OUT!

admin — Mon, 11 Feb 2008 18:36:47 +0000

this is a great plug-in for firefox… it’s an IE tab plug in, from within firefox… great for developing, and trying to get css to work. https://addons.mozilla.org/firefox/1419/

CSS and Flex

admin — Mon, 11 Feb 2008 18:25:01 +0000

ADOBE EXAMPLES / FLEX 2 THIS IS A GREAT TOOL FOR BEGINNERS AND FLEX UTILIZING CSS!

Browser detection script

admin — Sun, 10 Feb 2008 20:08:40 +0000

Here is a simple browser detection script

2, “;”)) EQ “MSIE 6.0″>

“stylesheet”
type=“text/css”
href=“css/main_IE6.css”
media=“screen”
/>

2, “;”)) EQ “MSIE 7.0″>

“stylesheet”
type=“text/css”
href=“css/main_IE7.css”
media=“screen”
/>

“stylesheet”
type=“text/css”
href=“css/main_FF.css”
media=“screen”
/>

Dynamic Menu in coldfusion

admin — Sun, 10 Feb 2008 18:50:39 +0000

Here is a simple way to do a dynamic menu, there are some limits to this, but it seems to do ok…

style.css

/*=========================*/
/* Menu */

#navlist
{
border-bottom: 1px solid #ccc;
margin: 0;
padding-bottom: 19px;
padding-left: 10px;
}

#navlist ul, #navlist li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}

#navlist a:link, #navlist a:visited
{
background: #E8EBF0;
border: 1px solid #ccc;
color: #666;
float: left;
font-size: small;
font-weight: normal;
line-height: 14px;
margin-right: 8px;
padding: 2px 10px 2px 10px;
text-decoration: none;
}

#navlist a:link#current, #navlist a:visited#current
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}

#navlist a:hover { color: #f00; }

body.section-1 #navlist li#nav-1 a,
body.section-2 #navlist li#nav-2 a,
body.section-3 #navlist li#nav-3 a,
body.section-4 #navlist li#nav-4 a
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}
/*==================*/

menu.cfm

—>

“Active” default=“id=current”>

“Welcome” default=“page1.cfm”>
“WelcomeDisplay” default=“All Concerns”>

“SecondPage” default=“page2.cfm”>
“SecondPageDisplay” default=“Tab two example”>

“#Welcome#,#SecondPage#”>
“#WelcomeDisplay#”,#SecondPageDisplay#>

2)>

“navcontainer”>

“1″

“#ArrayLen(arrayMenu)#”

“i”

“active”>“#arrayMenu[i][1]#” “#CGI.SCRIPT_NAME#”)# is 1> #Active#> >
#arrayMenu[i][2]#