Optimizing my CSS

I have CSS that looks like this:

div#sbar {position:absolute;top: 10px;bottom: 10px开发者_开发问答;left:10px; right: 10px;}

There's a lot that specifies left, right, top, bottom etc. Is there any way that I can optimize / simplify the CSS. I wish there was a shortcut for this like there is for border.

Thanks

There is no shorthand for top, bottom, left, right.

You can't shorten this:

div#sbar {position:absolute;top: 10px;bottom: 10px;left:10px; right: 10px;}

But you could shorten this:

div#sbar {position:absolute;top: 10px;bottom: 10px;left:10px; right: 10px;}
div#gbar {position:absolute;top: 10px;bottom: 10px;left:500px; right: 30px;}
div#nbar {position:absolute;top: 10px;bottom: 10px;left:50px; right: 200px;}

To this:

div#sbar, div#gbar, div#nbar { position:absolute; top: 10px; bottom: 10px }

div#sbar { left:10px; right: 10px }
div#gbar { left:500px; right: 30px }
div#nbar { left:50px; right: 200px }

This could be useful.

Also, there's no need to use div in div#sbar: ids are by definition unique, so there's no need to qualify the id with the tag name. Using it actually (really, really marginally) slows down your browser.

So this would be better (and more to the point, shorter):

#sbar, #gbar, #nbar { position:absolute; top: 10px; bottom: 10px }

#sbar { left:10px; right: 10px }
#gbar { left:500px; right: 30px }
#nbar { left:50px; right: 200px }

Here's an example where I actually did something very similar to what I've just suggested:

• How can I refactor some repetitive HTML and CSS?

It actually worked out better in that question, because all the divs were contained in a common parent, so there was no need to list out the elements twice.

You are looking for something like:

div#sbar {position: absolute 10px 10px 10px 10px;}`

This doesn't exist however (as far as I know). it would be nice though.

An optimization tip: No need for div before #sbar

-- addendum --

Won't all of these attributes cancel each other out? Moving something down by 10px then moving it up by 10px will equal no movement.

There is no shorthand way of top, bottom, left, or right.

As for your CSS selector it self, it repeats it self twice. What I mean by this is that CSS parses from right to left.

If you have for example this: div table tr td#myContent{} Here is what happens:

div table tr td#myContent{}
 #myContent found!

div table tr td #myContent {}
We already found  #myContent, but okay!

div table tr td #myContent {}
I told you, we already found  #myContent...!

divtable tr td #myContent {}
Like I said the other 3 times, we already found  #myContent!!!

div table tr td #myContent {}
...