Geek Answers Handbook

Optimize my CSS

I have CSS that looks like this:

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

There are many that indicate left, right, top, bottom, etc. Is there a way I can optimize / simplify CSS. I am sorry that there was no label for this, for example, for the border.

thanks

+4
source share
5 answers

There are no abbreviations for top, bottom, left, right.

+6
source

You cannot 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;}

For 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 may be helpful.

In addition, there is no need to use the div in the div#sbar : id is unique by definition, so there is no need to qualify the id with the tag name. Using this actually (really, very slightly) slows down your browser.

So this would be better (and more precisely, 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 is an example where I really did something very similar to what I just suggested:

In this question, it really worked because all div contained in a common parent, so there was no need to list the elements twice.

+2
source

Optimization tip: no need div before #sbar

- add -

Do not all of these attributes cancel each other out? Moving something down 10px and then moving up 10px will not equal moving.

0
source

You are looking for something like:

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

However, this does not exist (as far as I know). it would be nice.

0
source

There is no abbreviated path top , bottom , left or right .

As for your CSS selector, it repeats itself twice. I mean, CSS parses from right to left.

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

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

div table tr td #myContent {}
We already found #myContent, but everything is fine!

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

div table tr td #myContent {}
As I said 3 times, we already found #myContent !!!

div table tr td #myContent {}
...

0
source

More articles:


All Articles