SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: The CSS-counter

  1. #1
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The CSS-counter

    Although it's only supported in Opera, it wil one day be in all the browsers, so I thought it would be smart to start using it now so I know the ins and outs already: The counter!

    What I was wondering: is it possible to write html in the content-property?

    eg:
    HTML Code:
     <html>
     <head>
     <style>
     p{counter-increment:section;}
     h1 {counter-reset: section}
     p:before {content: "<span>The start of a paragraph</span>" counter(section);}
     span {color:red;}
     </style>
     </head>
     <body>
     <h1>h</h1>
     <p>test1</p>
     <p>test2</p>
     </body>
     </html>
    Opera doesn't support that btw, but I coudn't find any reason not to use it in the specs, but maybe that is because I don't want it to be there?

  2. #2
    SitePoint Wizard megamanXplosion's Avatar
    Join Date
    Jan 2004
    Location
    Kentucky, USA
    Posts
    1,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm, I'm uncertain if this will work like you want, I don't think it will, but it's worth a try...


    content: "\00003Espan\00003CThe start of a paragraph\00003E/span\00003C" counter(section);

    \00003E is the unicode equivalent of <
    \00003C is the unicode equivalent of >

    I think that this will simply put "<" and ">" in the text instead of making it HTML, I can't be bothered to test

  3. #3
    SitePoint Wizard megamanXplosion's Avatar
    Join Date
    Jan 2004
    Location
    Kentucky, USA
    Posts
    1,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just tested, didn't work. Also, I got the two unicode-equivalents mixed up, 3E is for > and 3C is for <

    You could just put <span></span> inside of the paragraphs and then use CSS to place your text inside of them.

    Then, use p span:after {} to place the list counter value after the span tag.

    That should work.

  4. #4
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But is it valid according to the specs (could not find a definition)? Otherwise this would be a very strong way to create repetitive-markup... eg. comment-boxes, everything different from the content itself could be in CSS (like some kind of template)

  5. #5
    SitePoint Wizard megamanXplosion's Avatar
    Join Date
    Jan 2004
    Location
    Kentucky, USA
    Posts
    1,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by momos
    But is it valid according to the specs (could not find a definition)? Otherwise this would be a very strong way to create repetitive-markup... eg. comment-boxes, everything different from the content itself could be in CSS (like some kind of template)
    I don't think it's valid, to be truthful. There is nothing in the specification concerning the usage of HTML inside of CSS, but it's semantically wrong because HTML doesn't belong in the presentation. If CSS allowed HTML inside of the presentation then it would become the same kind of mess HTML was with it's presentational elements. HTML is for structure and content (the content property in CSS is for decorational purposes and not for informal content), CSS is for presentation, JavaScript (ECMAScript) is for functionality, etc. Each of them serve a specific purpose and blurring the lines between them would go against everything they've been trying to achieve with the structuralization of webpages.

    Of course, a better way to make repetitive presentational techniques would be for browser developers to allow people to use multiple :before and :after selectors. For example...

    Before Before | Before | Element | After | After After

    .element:before:before
    .element:before
    .element
    .element:after
    .element:after:after

    Unfortunately, none of the browsers currently available support this functionality and it's not talked about at all in the CSS3 specification, so it's neither forbidden or acceptable at this point in time. Hopefully, such functionality will make it into CSS3 or a future specification.

    Just my opinion on the matter.

  6. #6
    SitePoint Wizard megamanXplosion's Avatar
    Join Date
    Jan 2004
    Location
    Kentucky, USA
    Posts
    1,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just dug a little deeper and it appears that the functionality I mentioned is in the Generated and Replaced Content Module Working Draft, so it might be possible to use multiple ::before and ::after psuedo-elements in the future

    Example Display

    A B C D E


    Example Code
    Code:
    .element::before(2) {
        content: "A ";
    }
    
    .element::before(1) {
        content: "B ";
    }
    
    .element {
        content: "C ";
    }
    
    .element::after(1) {
        content: "D ";
    }
    
    .element::after(2) {
        content: "E ";
    }


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
  •