CSS Attribute Proposal

I'm not too sure if anyone saw this before, so I'm resending it now.

I thought of something that might come in handy when it comes to adding
backgrounds to elements.  As it is right now, you have to have container
elements for each background you want in addition to that already present.
A good example of what I mean is this:

Let's say you wanted rounded corners in a titlebar of some sort.  There are
many ways to make the corners of this title bar appear rounded, but they all
include a fair amount of CSS and/or HTML.  As it stands, one of the most
frequently used techniques is to add a container element for each corner
(which would total to four) and set a non-repeating background as the
rounded corner.  It would look right, yes, but take a look at the code for a
second to see the problem:

HTML:
<div id="corner1">
    <div id="corner2">
        <div id="corner3">
            <div id="corner4">
                <h3>This is a titlebar</h3>
            </div>
        </div>
    </div>
</div>

CSS:
#corner1 {
    background: #666666 url(images/top-left-corner.gif) no-repeat left top;
    width: 90%;
}
#corner2 {
    background: url(images/top-right-corner.gif) no-repeat right top;
}
#corner3 {
    background: url(images/bottom-right-corner.gif) no-repeat right bottom;
}
#corner4 {
    background: url(images/bottom-left-corner.gif) no-repeat left bottom;
    padding: 5px;
}
h3 {
    text-align: center;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    color: #FFFFFF;
    margin: 0px;
}

Looking at the above code, imagine what it'd be like if you were to have two
or more separate page elements that required these corners in order for the
page's design to flow properly.  What if, also, those other elements were
different sizes than the original?  That'd be a very big problem, indeed, as
CSS is supposed to eliminate more code than it adds.  This being the case,
problems like this defeat the entire purpose of CSS, which is, need I remind
you again, to make it simpler.

Now, here's the question.  What if you could simplify all of that into one
CSS class and one HTML element?  Right now, as I've stated, you can't really
do that, unless you have a fixed size titlebar.  In that case a simple
background would do the trick.  But if it's an auto sizing titlebar, well,
you're limited to the way I just stated or a variation thereof.  There could
be a possibility of adding a different background CSS attribute for each
background you'd want to add, but to my knowledge, each new background
attribute would override those that come before it.

So, here's my proposal for a solution: an addition of twelve distinct CSS
attributes and their values.  What I would add, if it were possible, are the
following "background-" elements (for a graphical representation of each of
these twelve attributes and where they'd be positioned on an element, refer
to this: http://www.hyponiqs.com/images/special/background-diagram.gif):

Left Background:
background-left: [#FFFFFF|RGB(255, 255, 255)|white] url(images/example.gif)
[center|top|bottom] [repeat|no-repeat|repeat-y|repeat-x];
background-left-top: [#FFFFFF|RGB(255, 255, 255)|white]
url(images/example.gif) [repeat|no-repeat|repeat-y|repeat-x];
background-left-bottom: [#FFFFFF|RGB(255, 255, 255)|white]
url(images/example.gif) [repeat|no-repeat|repeat-y|repeat-x];
background-left-center: [#FFFFFF|RGB(255, 255, 255)|white]
url(images/example.gif) [repeat|no-repeat|repeat-y|repeat-x];

Right Background:
background-right: [#FFFFFF|RGB(255, 255, 255)|white] url(images/example.gif)
[center|top|bottom] [repeat|no-repeat|repeat-y|repeat-x];
background-right-top: [#FFFFFF|RGB(255, 255, 255)|white]
url(images/example.gif) [repeat|no-repeat|repeat-y|repeat-x];
background-right-bottom: [#FFFFFF|RGB(255, 255, 255)|white]
url(images/example.gif) [repeat|no-repeat|repeat-y|repeat-x];
background-right-center: [#FFFFFF|RGB(255, 255, 255)|white]
url(images/example.gif) [repeat|no-repeat|repeat-y|repeat-x];

Centered Background:
background-center: [#FFFFFF|RGB(255, 255, 255)|white]
url(images/example.gif) [center|top|bottom]
[repeat|no-repeat|repeat-y|repeat-x];
background-center-top: [#FFFFFF|RGB(255, 255, 255)|white]
url(images/example.gif) [repeat|no-repeat|repeat-y|repeat-x];
background-center-bottom: [#FFFFFF|RGB(255, 255, 255)|white]
url(images/example.gif) [repeat|no-repeat|repeat-y|repeat-x];
background-center-center: [#FFFFFF|RGB(255, 255, 255)|white]
url(images/example.gif) [repeat|no-repeat|repeat-y|repeat-x];

Now, with these CSS attributes in tact, take a look at the coding that would
be necessary for my previous example:

HTML:
<div id="container">
    <h3>This is a Title Bar</h3>
</div>

CSS:
#container {
    background-left-top: url(images/left-top-corner.gif) no-repeat;
    background-right-top: url(images/right-top-corner.gif) no-repeat;
    background-left-bottom: #333333 url(images/left-bottom-corner.gif)
no-repeat;
    background-right-bottom: url(images/right-bottom-corner.gif) no-repeat;
    padding: 5px;
    width: 90%;
}
h3 {
    text-align: center;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12pt;
    color: #FFFFFF;
    margin: 0px;
}

You should also make note that the above example could be shortened down
even further by combining the 'container' DIV and the H3 HTML elements and
CSS classes.  I did it this way, however, to give a clearer understanding of
the task at hand.

Another nifty idea would be the addition of a CSS attribute that would allow
for absolutely positioning backgrounds, but that's another topic,
altogether.

I guess that's all I have left to say on the matter.  I would greatly
appreciate seeing my suggestion implemented.  Though, I know the likelyhood
of seeing that in the near future is slim.  Whatever the case, do let me
know what you think.

Note: If there are any articles about this topic, please do feel free to
contact me at wlsuttonjr@hyponiqs.com so that I can look them over.  I
glanced briefly at the content provided by this site and found nothing on
the matter.

Received on Thursday, 19 August 2004 06:18:06 UTC