Latest Announcemnent
New thread

How to remove CSS Expression?

Status
Not open for further replies.
Rox

Rox

Active Member
8,492
2010
2,978
340
I was optimizing my site using gtmetrix and i see a suggestion of removing CSS Expressions. Can anybody please help me removing it as i am not aware of how to do it. tried googling it but could not figure it out :|

Below is the css code which has the expression.

Code: 
@import url("stylesheets/master.css");.aligncenter{display:block;margin-left:auto;margin-right:auto;} .alignleft{float:left;} .alignright{float:right;} #content img{border:3px solid #fff;max-width:616px;width:expression(this.width > 616 ? 616:true);}
 
21 comments
The bold part is the CSS Expression
#content img{
border:3px solid #fff;
max-width:616px;
width:expression(this.width > 616 ? 616:true);
}

Change it to
Code: 
#content img{
border:3px solid #fff;
width:616px;
}
 
Don't use @import to link the stylesheet. Its depreciated.
Use link instead of @import
Many people might not be aware of this but the usage of @import may cause some extreme performance problem when the site grows big. Even the people at W3C depreciate the usage of @import.
Read this article to know more.
Using @import within a stylesheet adds one more roundtrip to the overall download time of the page.
Using @import in IE causes the download order to be altered. This may cause stylesheets to take longer to download, which hinders progress rendering making the page feel slower.
Click to expand...
Read More
 
i read through it and i am confused about how to give the url!! i tried -Im.z2ight- suggestion and it didn't work...

this is the path btw - wp-content/themes/traction/stylesheets/master.css
 
PHP: 
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url') ?>/stylesheets/master.css" />

Put that in the <head> which should output something like this:
Code: 
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/twentyeleven/stylesheets/master.css" />
 
Last edited:
<link rel="stylesheet" type="text/css" href="themes/traction/stylesheets/master.css " />

I don't know your site folder so this should work unless you have another folder before this where your index is located. Which folder is your WP index in?
 
Rox said:
@ humour
its increasing the load time

@ apathetic
not working bro
Click to expand...

well it shouldnt. When u just combine ur css files it would actually help ur site. It should reduce the load time(by eliminating the time taken to request another file & shiz)
 
What happens when the available screen width is less than 616??

Screws up the layout. I am not saying right or wrong but something to keep in mind.
 
Try this:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

OR

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/master.css" type="text/css" media="screen" />
 
Lock Down said:
What happens when the available screen width is less than 616??

Screws up the layout. I am not saying right or wrong but something to keep in mind.
Click to expand...

yep, blaze's code did screw up the images because it mentioned "width" instead of "max-width" :P fixed it anyway..

@ Blaze

no, does not work :|

just curious, m i doing it right :facepalm: see code below i updated. is it correct?

Code: 
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/master.css" type="text/css" media="screen" />;.aligncenter{display:block;margin-left:auto;margin-right:auto;} .alignleft{float:left;} .alignright{float:right;} #content img{border:3px solid #fff;max-width:616px;}
 
Status
Not open for further replies.
Back
Top