to inline or not to inline

Discussion in 'HTML' started by Jon Slaughter, Apr 20, 2007.

  1. In the following code I use selectors to position containers and I'm
    wondering because of the "depth" of the selection if its better to inline or
    not?

    I'll be generating the code automatically for several containers so I'm not
    worried about inlining except that it will be much easier to change the
    styles of the boxes automatically without having to regenerate the code.
    Just curious as if theres any good reason not to use the selectors as I have
    done it(or maybe there is another way to step through child elements)?

    (BTW the code is just an example)

    Thanks,
    Jon


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>

    <style type="text/css">

    body *
    {
    margin:0px;
    padding:0px;
    }

    ..Box1
    {
    position:absolute;
    left:400px;
    top:200px;
    background-color:#003366;
    }

    ..Box1 > span:first-child
    {
    position:absolute;
    left:0px;
    top:0px;
    width:10px;
    height:10px;
    background-color:#990000;
    }

    ..Box1 > span:first-child + span
    {
    position:absolute;
    right:0px;
    top:0px;
    width:10px;
    height:10px;
    background-color:#000099;
    }

    ..Box1 > span:first-child + span + span
    {
    position:absolute;
    left:10px;
    right:10px;
    top:0px;
    height:10px;
    background-color:#999933;
    }

    ..Box1 > span:first-child + span + span + span
    {
    position:absolute;
    left:0px; bottom:0px;
    width:10px;
    height:10px;
    background-color:#990033;
    }

    ..Box1 > span:first-child + span + span + span + span
    {
    position:absolute;
    right:0px;
    bottom:0px;
    width:10px;
    height:10px;
    background-color:#990033;
    }

    ..Box1 > span:first-child + span + span + span + span + span
    {
    position:absolute;
    left:10px;
    right:10px;
    bottom:0px;
    height:10px;
    background-color:#006699;
    }

    ..Box1 > span:first-child + span + span + span + span + span + span
    {
    position:absolute;
    left:0px;
    top:10px;
    bottom:10px;
    width:10px;
    background-color:#333399;
    }

    ..Box1 > span:first-child + span + span + span + span + span + span + span
    {
    position:absolute;
    right:0px;
    top:10px;
    bottom:10px;
    width:10px;
    background-color:#CC9933;
    }

    </style>

    </head>
    <body>

    <div class="Box1">
    <span></span><span></span><span></span>
    <span></span><span></span><span></span>
    <span></span><span></span>

    <div style="padding:15px; margin:0px;
    background-color:#00FFFF;">ASD123412SDF<br />
    123412341234<br />
    134134</div>
    </div>



    </body>
    </html>
     
    Jon Slaughter, Apr 20, 2007
    #1
    1. Advertising

  2. Jon Slaughter

    Desmond Guest

    On 20 Apr, 04:18, "Jon Slaughter" <> wrote:
    > In the following code I use selectors to position containers and I'm
    > wondering because of the "depth" of the selection if its better to inline or
    > not?
    >
    > I'll be generating the code automatically for several containers so I'm not
    > worried about inlining except that it will be much easier to change the
    > styles of the boxes automatically without having to regenerate the code.
    > Just curious as if theres any good reason not to use the selectors as I have
    > done it(or maybe there is another way to step through child elements)?
    >
    > (BTW the code is just an example)
    >
    > Thanks,
    > Jon
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > <html xmlns="http://www.w3.org/1999/xhtml">
    > <head>
    > <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    > <title>Untitled Document</title>
    >
    > <style type="text/css">
    >
    > body *
    > {
    > margin:0px;
    > padding:0px;
    >
    > }
    >
    > .Box1
    > {
    > position:absolute;
    > left:400px;
    > top:200px;
    > background-color:#003366;
    >
    > }
    >
    > .Box1 > span:first-child
    > {
    > position:absolute;
    > left:0px;
    > top:0px;
    > width:10px;
    > height:10px;
    > background-color:#990000;
    >
    > }
    >
    > .Box1 > span:first-child + span
    > {
    > position:absolute;
    > right:0px;
    > top:0px;
    > width:10px;
    > height:10px;
    > background-color:#000099;
    >
    > }
    >
    > .Box1 > span:first-child + span + span
    > {
    > position:absolute;
    > left:10px;
    > right:10px;
    > top:0px;
    > height:10px;
    > background-color:#999933;
    >
    > }
    >
    > .Box1 > span:first-child + span + span + span
    > {
    > position:absolute;
    > left:0px; bottom:0px;
    > width:10px;
    > height:10px;
    > background-color:#990033;
    >
    > }
    >
    > .Box1 > span:first-child + span + span + span + span
    > {
    > position:absolute;
    > right:0px;
    > bottom:0px;
    > width:10px;
    > height:10px;
    > background-color:#990033;
    >
    > }
    >
    > .Box1 > span:first-child + span + span + span + span + span
    > {
    > position:absolute;
    > left:10px;
    > right:10px;
    > bottom:0px;
    > height:10px;
    > background-color:#006699;
    >
    > }
    >
    > .Box1 > span:first-child + span + span + span + span + span + span
    > {
    > position:absolute;
    > left:0px;
    > top:10px;
    > bottom:10px;
    > width:10px;
    > background-color:#333399;
    >
    > }
    >
    > .Box1 > span:first-child + span + span + span + span + span + span + span
    > {
    > position:absolute;
    > right:0px;
    > top:10px;
    > bottom:10px;
    > width:10px;
    > background-color:#CC9933;
    >
    > }
    >
    > </style>
    >
    > </head>
    > <body>
    >
    > <div class="Box1">
    > <span></span><span></span><span></span>
    > <span></span><span></span><span></span>
    > <span></span><span></span>
    >
    > <div style="padding:15px; margin:0px;
    > background-color:#00FFFF;">ASD123412SDF<br />
    > 123412341234<br />
    > 134134</div>
    > </div>
    >
    > </body>
    > </html>


    No this is not good it makes the page hard to maintain. you relay need
    an external style sheet using
    #Box1

    and then a <div id=Box1>

    you seem to be using box1 everywhere thay should all be diffrent
    names. and give an idea of to where they are used.
    you can have more than one style sheet if this becomes difficult.

    Desmond.
     
    Desmond, Apr 20, 2007
    #2
    1. Advertising

  3. Jon Slaughter

    Steve Pugh Guest

    On Apr 20, 4:18 am, "Jon Slaughter" <> wrote:
    > In the following code I use selectors to position containers and I'm
    > wondering because of the "depth" of the selection if its better to inline or
    > not?


    To use style="" attributes? Maybe. Or just to apply a class to each
    span.

    > I'll be generating the code automatically for several containers so I'm not
    > worried about inlining except that it will be much easier to change the
    > styles of the boxes automatically without having to regenerate the code.


    How many of these boxes will there be on each page? On the whole site?
    The savings in bandwidth may add up considerably if there are a lot.

    > Just curious as if theres any good reason not to use the selectors as I have
    > done it(or maybe there is another way to step through child elements)?


    The code will be problematic in reality. IE6 and lower doesn't
    support :first-child or > or +, so your styles really won't work for a
    large portion of the WWW.

    Apart from the colour of the top right corner this is identical, uses
    a lot less code and works better in less sophisticated browsers.

    ..Box1 {
    position:absolute;
    left:400px;
    top:200px;
    background-color:#990000;
    }

    ..Box1 div {
    border-top: 10px solid #999933;
    border-bottom: 10px solid #006699;
    border-left: none; border-right: none;
    margin: 0 10px;
    }

    ..Box1 div div {
    padding:5px;
    margin: 0 -10px;
    border-left: 10px solid #333399;
    border-right: 10px solid #CC9933;
    border-top: none; border-bottom: none;
    background-color:#00FFFF;
    }


    <div class="Box1">
    <div>
    <div>
    ASD123412SDF<br />
    123412341234<br />
    134134
    </div>
    </div>
    </div>

    Of course, as the parent box is fixed size it will still break badly
    when the user chooses a font size larger than you anticipated. Avoid
    absolute positioning where possible. It's a powerful tool but not
    really suitable for most tasks, rather like a chainsaw. And avoid
    fixed size containers 'cos they're just nasty.

    Steve
     
    Steve Pugh, Apr 20, 2007
    #3
  4. Jon Slaughter

    Andy Dingley Guest

    On 20 Apr, 04:18, "Jon Slaughter" <> wrote:

    > <div class="Box1">
    > <span></span><span></span><span></span>
    > <span></span><span></span><span></span>


    Try this insted

    <div class="Box1">
    <span class="foo" ></span><span class="bar" ></span><span
    class="bat" ></span>
    <span class="woof" ></span><span class="bark" ></span><span
    class="donkey" ></span>

    ..Box1 span.foo { ... }
    ..Box1 span.bar { ... }
    ..Box1 span.bat { ... }
    ..Box1 span.woof { ... }
    ..Box1 span.bark { ... }
    ..Box1 span.donkey { ... }


    Nice simple selectors, no dependence on ordering, all selectors are of
    equal specificity in the cascade (and so are unlikely to surprise
    you).

    Keep the outer "Box1" as a class, not an id. You can use both, but use
    the class name as the CSS selector, not the id. This avoids some
    trouble with high-specificity CSS selectors cascading above others.
     
    Andy Dingley, Apr 20, 2007
    #4
  5. Jon Slaughter

    John Hosking Guest

    Jon Slaughter wrote:
    > In the following code I use selectors to position containers and I'm
    > wondering because of the "depth" of the selection if its better to inline or
    > not?


    >
    > .Box1 > span:first-child + span + span + span + span + span + span + span
    > {


    I'm having trouble keeping track, but I think this is Reason #163 for
    you to stop trying to do absolute positioning. Maybe you should start
    keeping count for yourself.

    --
    John
     
    John Hosking, Apr 20, 2007
    #5
  6. "John Hosking" <> wrote in message
    news:4628d161$...
    > Jon Slaughter wrote:
    >> In the following code I use selectors to position containers and I'm
    >> wondering because of the "depth" of the selection if its better to inline
    >> or not?

    >
    >>
    >> .Box1 > span:first-child + span + span + span + span + span + span + span
    >> {

    >
    > I'm having trouble keeping track, but I think this is Reason #163 for you
    > to stop trying to do absolute positioning. Maybe you should start keeping
    > count for yourself.
    >



    You don't get it do you? First off just cause your having trouble doesn't
    mean I am... second off, I already said that this code will be generated
    automatically so there is no need to keep track.
     
    Jon Slaughter, Apr 20, 2007
    #6
  7. "Steve Pugh" <> wrote in message
    news:...
    > On Apr 20, 4:18 am, "Jon Slaughter" <> wrote:
    >> In the following code I use selectors to position containers and I'm
    >> wondering because of the "depth" of the selection if its better to inline
    >> or
    >> not?

    >
    > To use style="" attributes? Maybe. Or just to apply a class to each
    > span.


    Yes, I might have to do that but its kinda messy. Actually that is what I
    usually do. I start inlining first and then move the stuff to a class. I
    forgot about that when I posted though and now that I think about it, it
    probably is the best solution.

    >
    >> I'll be generating the code automatically for several containers so I'm
    >> not
    >> worried about inlining except that it will be much easier to change the
    >> styles of the boxes automatically without having to regenerate the code.

    >
    > How many of these boxes will there be on each page? On the whole site?
    > The savings in bandwidth may add up considerably if there are a lot.
    >


    There could be many. With classes I suppose its also much faster because
    there is no "searching" of the DOM. Ofcourse I'm not sure how slow it would
    be in the first place. The classes add a bit to the file size because you
    have to use class="..." for each span but probably not much.

    >> Just curious as if theres any good reason not to use the selectors as I
    >> have
    >> done it(or maybe there is another way to step through child elements)?

    >
    > The code will be problematic in reality. IE6 and lower doesn't
    > support :first-child or > or +, so your styles really won't work for a
    > large portion of the WWW.
    >


    yeah but screw IE6 and below. Doesn't work probably anyways.

    > Apart from the colour of the top right corner this is identical, uses
    > a lot less code and works better in less sophisticated browsers.
    >
    > .Box1 {
    > position:absolute;
    > left:400px;
    > top:200px;
    > background-color:#990000;
    > }
    >
    > .Box1 div {
    > border-top: 10px solid #999933;
    > border-bottom: 10px solid #006699;
    > border-left: none; border-right: none;
    > margin: 0 10px;
    > }
    >
    > .Box1 div div {
    > padding:5px;
    > margin: 0 -10px;
    > border-left: 10px solid #333399;
    > border-right: 10px solid #CC9933;
    > border-top: none; border-bottom: none;
    > background-color:#00FFFF;
    > }
    >
    >
    > <div class="Box1">
    > <div>
    > <div>
    > ASD123412SDF<br />
    > 123412341234<br />
    > 134134
    > </div>
    > </div>
    > </div>
    >
    > Of course, as the parent box is fixed size it will still break badly
    > when the user chooses a font size larger than you anticipated. Avoid
    > absolute positioning where possible. It's a powerful tool but not
    > really suitable for most tasks, rather like a chainsaw. And avoid
    > fixed size containers 'cos they're just nasty.
    >


    Nope, you don't get it(I think). Here I'm not going to end up using solid
    colors but images so I can't use what you are using. (this is why I have to
    go through the trouble with my original code)
     
    Jon Slaughter, Apr 20, 2007
    #7
  8. "Andy Dingley" <> wrote in message
    news:...
    > On 20 Apr, 04:18, "Jon Slaughter" <> wrote:
    >
    >> <div class="Box1">
    >> <span></span><span></span><span></span>
    >> <span></span><span></span><span></span>

    >
    > Try this insted
    >
    > <div class="Box1">
    > <span class="foo" ></span><span class="bar" ></span><span
    > class="bat" ></span>
    > <span class="woof" ></span><span class="bark" ></span><span
    > class="donkey" ></span>
    >
    > .Box1 span.foo { ... }
    > .Box1 span.bar { ... }
    > .Box1 span.bat { ... }
    > .Box1 span.woof { ... }
    > .Box1 span.bark { ... }
    > .Box1 span.donkey { ... }
    >
    >
    > Nice simple selectors, no dependence on ordering, all selectors are of
    > equal specificity in the cascade (and so are unlikely to surprise
    > you).
    >
    > Keep the outer "Box1" as a class, not an id. You can use both, but use
    > the class name as the CSS selector, not the id. This avoids some
    > trouble with high-specificity CSS selectors cascading above others.
    >


    Yeah, maybe better but not completely sure. In either case since the code
    will be automatically generated it will be easy to change and I suppose I
    can do some actual tests to see the real impact of using the selectors. (I
    sorta like the selector method for some reason)

    Thanks,
    Jon
     
    Jon Slaughter, Apr 20, 2007
    #8
  9. Jon Slaughter

    Steve Pugh Guest

    Jon Slaughter wrote:
    > "Steve Pugh" <> wrote in message
    > news:...
    > > On Apr 20, 4:18 am, "Jon Slaughter" <> wrote:
    > >> In the following code I use selectors to position containers and I'm
    > >> wondering because of the "depth" of the selection if its better to inline
    > >> or not?

    > >
    > > To use style="" attributes? Maybe. Or just to apply a class to each
    > > span.

    >
    > Yes, I might have to do that but its kinda messy. Actually that is what I
    > usually do. I start inlining first and then move the stuff to a class. I
    > forgot about that when I posted though and now that I think about it, it
    > probably is the best solution.


    Inline styles are useful for quick prototyping, you can keep the same
    file in front of you in the editor at all times; but should rarely be
    included in the final code.

    > >> I'll be generating the code automatically for several containers so I'm
    > >> not worried about inlining except that it will be much easier to change the
    > >> styles of the boxes automatically without having to regenerate the code.

    > >
    > > How many of these boxes will there be on each page? On the whole site?
    > > The savings in bandwidth may add up considerably if there are a lot.

    >
    > There could be many. With classes I suppose its also much faster because
    > there is no "searching" of the DOM. Ofcourse I'm not sure how slow it would
    > be in the first place. The classes add a bit to the file size because you
    > have to use class="..." for each span but probably not much.


    Keep the classnames short, and if you're really worrried, use <b>
    instead of <span>. The semantics are marginal, you save six characters
    each time and as there's no text content you don't even need to
    override the default styling.

    > >> Just curious as if theres any good reason not to use the selectors as I
    > >> have done it(or maybe there is another way to step through child elements)?

    > >
    > > The code will be problematic in reality. IE6 and lower doesn't
    > > support :first-child or > or +, so your styles really won't work for a
    > > large portion of the WWW.

    >
    > yeah but screw IE6 and below. Doesn't work probably anyways.


    Well, if it's just decoration (and that's all CSS should be) then
    that's okay. Those of us who do this for a living often need to
    consider the large (but not as large as it was, boy has it dropped
    fast since 7 came out) percentage of the audience who use IE6 and
    expect a site to look reasonably good.

    > > Apart from the colour of the top right corner this is identical, uses
    > > a lot less code and works better in less sophisticated browsers.

    [snip]
    > >
    > > Of course, as the parent box is fixed size it will still break badly
    > > when the user chooses a font size larger than you anticipated. Avoid
    > > absolute positioning where possible. It's a powerful tool but not
    > > really suitable for most tasks, rather like a chainsaw. And avoid
    > > fixed size containers 'cos they're just nasty.

    >
    > Nope, you don't get it(I think). Here I'm not going to end up using solid
    > colors but images so I can't use what you are using. (this is why I have to
    > go through the trouble with my original code)


    If the box is fixed size, then you can just use one background image.
    If it has one fixed dimension and one fluid dimension then you need
    two background images. If it's fluid in both dimensions then you need
    four background images. One to four nested divs, vs one div plus nine
    spans. I know which I'd use. And regardless of the specifics, my
    general advice about chainsaws is still valid.

    Steve
     
    Steve Pugh, Apr 20, 2007
    #9
  10. Jon Slaughter

    Andy Dingley Guest

    On Fri, 20 Apr 2007 14:19:48 -0500, "Jon Slaughter"
    <> wrote:

    >since the code will be automatically generated


    Don't automatically generate CSS.

    You don't need to.

    If you _think_ that you need to, chances are that you're abusing CSS. In
    your case you appear to be planning to over-use absolute positioning.
     
    Andy Dingley, Apr 20, 2007
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Abhi
    Replies:
    2
    Views:
    743
    E. Robert Tisdale
    Jul 3, 2003
  2. Alvin
    Replies:
    7
    Views:
    480
    E. Robert Tisdale
    May 6, 2005
  3. Replies:
    3
    Views:
    461
  4. Daniel Vallstrom
    Replies:
    2
    Views:
    1,898
    Kevin Bracey
    Nov 21, 2003
  5. Nish
    Replies:
    4
    Views:
    494
    Thomas Stegen
    Oct 8, 2004
Loading...

Share This Page