Lately I’ve been working on performance issues. I could figure out some of the issues using the YSlow plugin of firefox. It looks at various things in your site. It rates your site based on certain parameters one of the parameter that I have been working on was Javascript compressor.
There are various ways you can compress your Javascript. You can have a plugin installed, you can find HTTPHandlers and HTTPModules which will do the work for you.
Just in case you are still not able to compress your Javascript files, here is the site that will do that for you, http://javascriptcompressor.com/ just paste your javascript file and the site will compress that for you.
Similarly, you need to compress your CSS as well to improve your site performance. Here is the link forĀ CSS compressor, http://www.cssoptimiser.com/
Hope this helps
Usage:
document.getElementById(div_id).style.JS_property_reference = “new_CSS_property_value”;
| CSS Property | JavaScript Reference |
|---|---|
| background | background |
| background-attachment | backgroundAttachment |
| background-color | backgroundColor |
| background-image | backgroundImage |
| background-position | backgroundPosition |
| background-repeat | backgroundRepeat |
| border | border |
| border-bottom | borderBottom |
| border-bottom-color | borderBottomColor |
| border-bottom-style | borderBottomStyle |
| border-bottom-width | borderBottomWidth |
| border-color | borderColor |
| border-left | borderLeft |
| border-left-color | borderLeftColor |
| border-left-style | borderLeftStyle |
| border-left-width | borderLeftWidth |
| border-right | borderRight |
| border-right-color | borderRightColor |
| border-right-style | borderRightStyle |
| border-right-width | borderRightWidth |
| border-style | borderStyle |
| border-top | borderTop |
| border-top-color | borderTopColor |
| border-top-style | borderTopStyle |
| border-top-width | borderTopWidth |
| border-width | borderWidth |
| clear | clear |
| clip | clip |
| color | color |
| cursor | cursor |
| display | display |
| filter | filter |
| font | font |
| font-family | fontFamily |
| font-size | fontSize |
| font-variant | fontVariant |
| font-weight | fontWeight |
| height | height |
| left | left |
| letter-spacing | letterSpacing |
| line-height | lineHeight |
| list-style | listStyle |
| list-style-image | listStyleImage |
| list-style-position | listStylePosition |
| list-style-type | listStyleType |
| margin | margin |
| margin-bottom | marginBottom |
| margin-left | marginLeft |
| margin-right | marginRight |
| margin-top | marginTop |
| overflow | overflow |
| padding | padding |
| padding-bottom | paddingBottom |
| padding-left | paddingLeft |
| padding-right | paddingRight |
| padding-top | paddingTop |
| page-break-after | pageBreakAfter |
| page-break-before | pageBreakBefore |
| position | position |
| float | styleFloat |
| text-align | textAlign |
| text-decoration | textDecoration |
| text-decoration: blink | textDecorationBlink |
| text-decoration: line-through | textDecorationLineThrough |
| text-decoration: none | textDecorationNone |
| text-decoration: overline | textDecorationOverline |
| text-decoration: underline | textDecorationUnderline |
| text-indent | textIndent |
| text-transform | textTransform |
| top | top |
| vertical-align | verticalAlign |
| visibility | visibility |
| width | width |
| z-index | zIndex |
Today I was just digging about how to create a rounded corner div without using images.
As this is the need in most of the web application and web pages, and almost everyone does that with images. We can still create the rounded corner div with using images and just by CSS alone.
Here are few links that I digged and are helpful you to attain this,
http://www.fireandknowledge.org/archives/2004/05/22/rounded-corners-without-images-part-1/
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
http://www.html.it/articoli/nifty/index.html
Enjoy!!!
tags: CSS, Rounded Div's, stylesheet