SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    : in id attribute?

    Why if I use a : in a id.. my document validates.. and is allowed by w3c.

    like: id="position:top"

    http://www.w3.org/TR/REC-html40/types.html#type-name

    But cannot be used in css and will throw and error?

    Unknown pseudo-element or pseudo-class :top

    I know that there are some default pseudo classes... but if allow it in an id why now allow css to reference it (if no conflicts with pseude classes)
    Go visit my site you know you want to
    http://con.cept.me

  2. #2
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Actually it's not allowed by the W3C, as far as the specification states I doubt using that character is legal, while it validates it doesn't make it the correct usage, remember that the validator is a GUIDE, not a rulebook... the validator is probably allowing it because the style attribute allows colons to match properties and values. The reason why it fails is because top is not a pseudo selector which is valid according to the CSS specification, ergo it's invalid syntax.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you click on the link in my post you will see..

    # ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
    So where it states that using colons is not valid?
    Go visit my site you know you want to
    http://con.cept.me

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Correct me if I am wrong but that doesn't seem to reference ID as in the ID attribute, but ID as simply a named identifier (as in how the syntax is comprised according to SGML), and being fair to the CSS parser because that particular character (the colon) usually signifies the use of a pseudo selector it's only natural to assume that the conflict may arise that it could be confused as such, after all what would stop you from ID naming something to hello:hover and the result of which would be a direct conflict between SGML ID naming conventions and CSS syntax. While colons may be a valid convention for HTML, CSS is an entirely different language so you can't use the HTML specification to reference what crosses as valid syntax to another language.

  5. #5
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Correct me if I am wrong but that doesn't seem to reference ID as in the ID attribute, but ID as simply a named identifier
    why would then http://www.w3.org/TR/REC-html40/stru...l#id-and-class (id = name [CS]) link back to the above?
    Dan G
    Marketing Strategist & Consultant

  6. #6
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use Unicode, note the space after the Unicode for the colon.
    Code:
    #my\3A colon {color:red;}
    <p id="my:colon">qwerty</p>

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Why make things harder for yourself by using characters which while valid in the HTML require special handling in the CSS.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Why make things harder for yourself by using characters which while valid in the HTML require special handling in the CSS.
    because it would be a nice character for namespacing id's

    id="module_rss:1"
    id="module_rss:2"

    etc... which works very nice in js... anyway i gave up on this idea, and decided to use modules_rss_1..

    Still weird wondering why w3c allows it but makes it very hard to use it.
    Go visit my site you know you want to
    http://con.cept.me

  9. #9
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    As I stated before... just because it's valid in HTML does not mean it's valid in CSS... their two different and independant languages, the HTML 4.01 specification ONLY relates to naming conventions for HTML elements and their syntax. You should be looking to the CSS specification in respect to ID selector naming to determine what is the appropriate cross compatible name, what your doing is basing your naming conventions on one language without considering the compatibility within the other.

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mech7 View Post
    But cannot be used in css and will throw and error?
    It can be used, but you have to escape the colon since it has special meaning in CSS.

    Code CSS:
    position\:top { ... }

    Some Java frameworks auto-generate IDs like this. (Java web framework authors seem to be singularly clueless about web standards, for some reason.)
    Birnam wood is come to Dunsinane

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    For some reason my husband's boss likes to use colons in id's as well. They're more for keeping track of what's going on in the Perl code I guess, as they don't use those id's for CSS styling and so haven't run across problems like this.

    Esp. stuff like "field::name_of_some_field"

  12. #12
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Colons in IDs are not namespace-valid in XML, however namespace-valid is a pretty useless concept that no-one cares about.

    http://www.w3.org/TR/REC-xml-names/#dt-nv
    Simon Pieters

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    For some reason my husband's boss likes to use colons in id's as well. They're more for keeping track of what's going on in the Perl code I guess, as they don't use those id's for CSS styling and so haven't run across problems like this.

    Esp. stuff like "field::name_of_some_field"
    That was my id too.. table_name:id easy to keep all id's unique and find out where they come from
    Go visit my site you know you want to
    http://con.cept.me

  14. #14
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The use of the colon is perfectly valid in css, although you will have to use it's Unicode equivalent.
    The backslash escaping will also work in modern browsers, except in IE.

  15. #15
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dogFang View Post
    The use of the colon is perfectly valid in css, although you will have to use it's Unicode equivalent.
    The backslash escaping will also work in modern browsers, except in IE.
    No one said it wasn't valid, just that you have to do a lot more work with less readable code in order to get it to work.

    That makes it far less maintainable than if you avoid using it.

    Using : in ids is just making things more difficult for yourself when it comes to maintaining the code (despite any initial appearance to the contrary).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  16. #16
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Replacing the colon with it's Unicode value in the css. Not a maintenance issue imho.
    Replacing all characters with Unicode values in the css. Yes a maintenance nightmare.

  17. #17
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dogFang View Post
    Replacing the colon with it's Unicode value in the css. Not a maintenance issue imho.
    Replacing all characters with Unicode values in the css. Yes a maintenance nightmare.
    Until you get one person on your 20 person support team who doesn't understand it properly and stuffs it all up.

    It may be okay for small one man projects but for anything involving a team the team standards would normally be set to prohibit that sort of thing.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  18. #18
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    And as it's not something which is commonly used it'll be a pain for others to debug if their not used to character escaping, hence why I stated that for the sake of ensuring that your bases are covered you are better off simply going with something which won't cause the confliction in the first place.

  19. #19
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unicode solves the OP's problem.
    It's use is not restricted to css, but commonly used in (x)html and JavaScript, particularly in non-English sites.

  20. #20
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dogFang View Post
    Unicode solves the OP's problem.
    It's use is not restricted to css, but commonly used in (x)html and JavaScript, particularly in non-English sites.
    You do not appear to understand the concept of having standards within an organisation. Most such standards prohibit the use of anything (like this) that will potentially make the code harder to maintain. So while you may be able to use it for your own projects you are unlikely to be able to use it if working with a project team.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •