SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,011
    Mentioned
    57 Post(s)
    Tagged
    0 Thread(s)

    Is this a valid idea for a new CSS value;

    While we have less or sass to set constants while creating css, would it be useful to be able to reference other elements in CSS itself. Like this

    Code css:
    .myelement {
      border: 1px solid #333;
      color: border-color;
    }
     
    .myelement.variation {
      border-color: #faa;
    }

    So the text of the second markup would be red since it inherits a text color set to be "border color"

    This would be for color values - you could simply state the other property. If a recursive loop is encountered the browser would set the color to black.

    Thoughts?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    You can put a second class on an element

    Code:
    <div class="myelement variation">
    and reference it as you did:

    Code:
    .myelement.variation {
      border-color: #faa;
    }
    If the variation class is on a child element, it would be

    Code:
    .myelement .variation {
      border-color: #faa;
    }
    I may be missing something in the question, though. Could you give an example of where your idea would apply?

  3. #3
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,011
    Mentioned
    57 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I may be missing something in the question, though. Could you give an example of where your idea would apply?
    I know how to accomplish what I'm after in CSS 3. Typically, using Less, I'll use variables to store all my key colors. Most of my designs have less than six.

    The syntax I put forth above is theoretical. The question is, would it be useful? I'm thinking it might

    For example this declaration could be used to set all border colors on the page to the color of the element's text by default.

    * { border-color: color; }

    In the above "color" is a reference to whatever value the color property is set to.

    More specific selectors could assign a specific color to the elements affected by that selection.

  4. #4
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,836
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Michael Morris View Post
    While we have less or sass to set constants while creating css, would it be useful to be able to reference other elements in CSS itself. Like this

    Code css:
    .myelement {
      border: 1px solid #333;
      color: border-color;
    }
     
    .myelement.variation {
      border-color: #faa;
    }

    So the text of the second markup would be red since it inherits a text color set to be "border color"

    This would be for color values - you could simply state the other property. If a recursive loop is encountered the browser would set the color to black.

    Thoughts?
    I'm struggling to see what the advantage would be of just setting
    Code css:
    .myelement.variation {
      color: #faa;
      border-color: #faa;
    }
    given that the extra specificity would override any colour set on .myelement.

    Yes, variables are a good idea, but there are easier ways to implement them than this.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    It might be worth mentioning here that there are CSS variables on the horizon.

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,740
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    If a=b then it follows that b=a.

    I very seldom say this... but in all honesty I feel this could be a case of over thinking.


    If you have a general rule in which you want the border to be same color as the text you simply don't declare the border color. What you have suggested actually adds more work to the current process.
    .myelement {
    border: 1px solid;
    color: #333;
    }
    Yeah, but I want a variation...


    IF you want the border NOT TO MATCH then you could do
    .myelement.variation {
    border-color: #abc; /* color will still be #333*/
    }
    IF you want TO MATCH then all you have to do is change the COLOR
    .myelement.variation {
    color: #abc;/* border-color will also be #abc*/
    }

    I understand the appeal, from "human thinking" a point of view , but it really does encourage a lack of discipline as it creates two distinct ways to arrive at the exact same solution ( and the current way doesn't even have to worry about possible recursiveness)


    CSS variables in general, however, would be cool. Then you could link values between unrelated properties, build easily updatable color pallets, etc.

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    While we have less or sass to set constants while creating css, would it be useful to be able to reference other elements in CSS itself.
    I wonder if this would break with the whole idea of declarative language, just stating random things that all blindly apply to the element rather than knowing anything about the other. I think you'd want special syntax if you were going to do that.

    I recently saw a talk about Shadow Dom. It's like a DOM in a DOM. With the stylesheet of the outer DOM, you can refer to the parent element of the inner DOM using
    @host

    and when I saw this, I wondered if they were running out of keys on the keyboard they could use.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •