CSS Optimization

In my everyday CSS coding practice I found a good way of CSS code optimization - in case you have a LOT of stylings in page.

I prepare a small pieces of code, which form big classes, as morphemes for high level CSS grammar.

My CSS grammar consist of elements, for example:

.tal {text-align:left}
.tac {text-align:center}
.tar {text-align:right}

.f10 {font-size:10px}
.f11 {font-size:11px}
.f12 {font-size:12px}

.cwhite {color:#fff}
.cred {color:red}
.cblack {color:#000}

.fb {font-weight:bold}

.pabs {position:absolute;}
.prel {position:relative;}

Using this approach you can easily create different combinations without using of big classes:

<p class="f10">text <span class="cwhite f12 fb">text text</span></p>

<p class="f12 cred">text <span class="cwhite f10 fb">text text</span></p>

Of course, there are another methods of CSS Optimization, but this one is good for page elements with a rich nuances.

Tag It · ·   Digg It

Comments (2) 29-08-2007

IE7 CSS Filters

IE7 CSS Filters:

*+html

element [attribute] { property:rule; }

element { property /**/:rule; }

#test1 { color /**/:green; }

IE 7 and below
*:first-child+html {} * html {}

IE 7 only
*:first-child+html {}

IE 7 and modern browsers only
html>body {}

Modern browsers only (not IE 7)
html>/**/body {}

Tag It · · ·   Digg It

Comments (0) 27-06-2007

Modern Separators In Lists Menu

Some time ago using of pseudo-class as :first and :first-child was impossible due to browsers that didn't support CSS enough. Nowadays we have almost ideal browsers such as Firefox 2 or Opera 9, which allows us to make really interesting CSS pirouettes.

For example, horizontal list menu with separators (pipes) in ancient CSS days was handcoded:

Item1 | Item2 | Item3 | Item4

Now we will use modern smart browsers. We will take a simple list without separators:

<ul>
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>

and add separators BY CSS itself with this style:

CSS

  1. li {
  2. display:inline; list-style-type:none; padding-left:1em; margin-left:1em; border-left:1px solid #ccc
  3. }
  4. li:first-child {
  5. border-left:none
  6. }

Now we have:

Thats all! The latest line deletes left border of first element in simple and elegant way. Here you are - so called piped list.

Well, there is more sophisticated way: li:after {content:" | "}, but you can try it yourself.

Here is an another interesting approach:

  1. #nav{
  2. overflow:hidden;
  3. width:100%;
  4. }
  5. #nav li{
  6. margin-left:-1px;/* all elements go on left*/
  7. }

Tag It · · · ·   Digg It

Comments (2) 20-03-2007

:hover In IE

If you need to play with :hover in IE, you can try effective approach that uses additional .htc file. To use :hover, for example in menu (li:hover), download htc file. Include this code


<!--[if IE]>
<style type="text/css">
BODY { behavior:url("way-to-file/csshover.htc"); }
</style>
<![endif]-->

between <head></head>. Thats all. Now you can write dynamic menu, color effects using this great pseudo-class :hover for ungrateful IE.

Tag It · · · ·   Digg It

Comments (1) 19-01-2007

<< First < Previous [2 / 3] Next > Last >>