Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #12424 > unrolled thread

CSS Use of ID

Back to article view | Back to comp.lang.javascript

Contents

  CSS Use of ID Gene Wirchenko <genew@ocis.net> - 2012-03-05 22:15 -0800
    Re: CSS Use of ID "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-03-06 10:04 +0000
      Re: CSS Use of ID "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2012-03-06 12:37 +0200
        Re: CSS Use of ID Scott Sauyet <scott.sauyet@gmail.com> - 2012-03-06 04:24 -0800
          Re: CSS Use of ID "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2012-03-06 15:21 +0200
        Re: CSS Use of ID David Mark <dmark.cinsoft@gmail.com> - 2012-03-12 17:09 -0700
    Re: CSS Use of ID Norman Peelman <npeelmandog@cfl.rr.com> - 2012-03-06 06:40 -0500
      Re: CSS Use of ID Gene Wirchenko <genew@ocis.net> - 2012-03-06 11:27 -0800
        Re: CSS Use of ID Denis McMahon <denismfmcmahon@gmail.com> - 2012-03-07 01:49 +0000
        Re: CSS Use of ID Norman Peelman <npeelmandog@cfl.rr.com> - 2012-03-06 23:13 -0500
          Re: CSS Use of ID Gene Wirchenko <genew@ocis.net> - 2012-03-06 22:32 -0800
    Re: CSS Use of ID Scott Sauyet <scott.sauyet@gmail.com> - 2012-03-06 04:36 -0800
      Re: CSS Use of ID Gene Wirchenko <genew@ocis.net> - 2012-03-06 11:29 -0800
    Re: CSS Use of ID Ross McKay <au.org.zeta.at.rosko@invalid.invalid> - 2012-03-07 11:58 +1100

#12424 — CSS Use of ID

Dear JavaScripters:

     Is the issue of avoiding using the same id more than once but
using a special CSS item really just solved with using a class instead
of id?

Sincerely,

Gene Wirchenko

[toc] | [next] | [standalone]

#12426

Gene Wirchenko wrote on 06 mrt 2012 in comp.lang.javascript:
>      Is the issue of avoiding using the same id more than once but
> using a special CSS item really just solved with using a class instead
> of id?

Is it an issue that there are no maple trees growing in the ocean?

It is not an isssue, Gene, only if you make it one
by trying to do something that is impossible standardwize.

More so, if you accidentaly use an id more than once, most browsers will 
forgive you your grave error and only use the first id. 

Also CSS use of id is off-topic here.

However if you want to make a javascript collection of html-elements,
there are many ways to do that.

Most use getElementsBy* [with the 's']:

getElementsByName()
getElementsByTagName()
getElementsByClassName()

--------------------------------------------

However, 
while I hate to acknowledge this,
Javascript being Javascript [sorry Thomas],
there is [dirty?] a way around the html single id-limitation, Gene.

Try:

==========
<style type='text/css'>
div {color:red;}
</style>
<div id=a>1</div>
<div id=a>2</div>
<div id=b>3</div>
<span id=a>not a div</span>
<div id=a>4</div>

<script type='text/javascript'>

var x = document.getElementsByTagName('div');

for (var i = x.length-1;i>-1;i--)
 if (x[i].id == 'a')
  document.write('<br>'+x[i].id+' > ' + x[i].firstChild.nodeValue);

</script>
==========


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#12427

2012-03-06 12:04, Evertjan. wrote:

> More so, if you accidentaly use an id more than once, most browsers will
> forgive you your grave error and only use the first id.

I wouldn't count on that. I've seen situations where browsers behave as 
if no element had the id. This might even be seen as better error 
recovery: when something is supposed to uniquely identify some element, 
ignore it when it is multiply defined (instead of making a guess).

> However if you want to make a javascript collection of html-elements,
> there are many ways to do that.

Indeed. Using the id attribute value is fine when it is applicable, but 
not so when it is not.

> Most use getElementsBy* [with the 's']:
>
> getElementsByName()
> getElementsByTagName()
> getElementsByClassName()

These have varying limitations. In particular, getElementsByClassName() 
is not universally supported, so it is safer to process elements e.g. on 
the basis of tag name and just pick up those that belong to a specific 
class, or to use a library such as jQuery that does such things behind 
the curtains.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#12432

Jukka K. Korpela wrote:
> Evertjan. wrote:
>> More so, if you accidentaly use an id more than once, most browsers will
>> forgive you your grave error and only use the first id.
>
> I wouldn't count on that. I've seen situations where browsers behave as
> if no element had the id.

Do you have any examples of that?  I've never seen that behavior?
You're right that it might be a better way to handle such an error,
but I've yet to see it.  What JS engines were involved?

  -- Scott

[toc] | [prev] | [next] | [standalone]

#12433

2012-03-06 14:24, Scott Sauyet wrote:

> Jukka K. Korpela wrote:
>> Evertjan. wrote:
>>> More so, if you accidentaly use an id more than once, most browsers will
>>> forgive you your grave error and only use the first id.
>>
>> I wouldn't count on that. I've seen situations where browsers behave as
>> if no element had the id.
>
> Do you have any examples of that?

I have actively forgotten them.

> You're right that it might be a better way to handle such an error,
> but I've yet to see it.  What JS engines were involved?

If I could imagine some potential gain, I might be persuaded to 
construct some examples. But I'm not really interested.

Using id attribute as a unique identifier is such a basic principle, the 
essence of the very attribute, that it's not particularly relevant to 
analyze what happens if you use the attribute for something that is 
completely incompatible with its essence.

It can be relevant in debugging existing code, but the uniqueness of id 
attribute values is a formal syntactic requirement in HTML, so any 
violations will be detected by a markup validator.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#12624

On Mar 6, 6:37 am, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
> 2012-03-06 12:04, Evertjan. wrote:
> > More so, if you accidentaly use an id more than once, most browsers will
> > forgive you your grave error and only use the first id.
>
> I wouldn't count on that. I've seen situations where browsers behave as
> if no element had the id. This might even be seen as better error
> recovery: when something is supposed to uniquely identify some element,
> ignore it when it is multiply defined (instead of making a guess).

Yes. That's what getEBI does in My Library, which really pissed off
the Prototype pundits (they considered it "wrong").

>
> > However if you want to make a javascript collection of html-elements,
> > there are many ways to do that.
>
> Indeed. Using the id attribute value is fine when it is applicable, but
> not so when it is not.
>
> > Most use getElementsBy* [with the 's']:
>
> > getElementsByName()
> > getElementsByTagName()
> > getElementsByClassName()
>
> These have varying limitations. In particular, getElementsByClassName()
> is not universally supported, so it is safer to process elements e.g. on
> the basis of tag name and just pick up those that belong to a specific
> class, or to use a library such as jQuery that does such things behind
> the curtains.

And what if the man behind the curtains is insane (or incompetent at
the very least)? We've been over jQuery; it sucked in 2007 and it has
steadily gotten worse in the years since. The performance alone would
be a deal-breaker, but then there are all of the ways that it screws
up DOM queries (among other things). Many of their problems are
related to legacy IE browsers (the very browsers they purport to
"fix"), which should be excluded from most enhancements these days (of
course, you can't do that with jQuery). In short, slow + inept does
not add up to anything good.

[toc] | [prev] | [next] | [standalone]

#12428

On 03/06/2012 01:15 AM, Gene Wirchenko wrote:
> Dear JavaScripters:
>
>       Is the issue of avoiding using the same id more than once but
> using a special CSS item really just solved with using a class instead
> of id?
>
> Sincerely,
>
> Gene Wirchenko

Gene,

   You can refer to the same id as much as you need in your css 
declarations:

<style type="text/css">
   div {
	color:red;
	border-top:2px solid red;
	border-left2px solid blue;
   }

   p {
	color:white;
   }

   div {
	border-bottom:2px solid green;
	border-right:2px solid yellow;
   }

   p {
	border:1px dashed orange;
   }

   div {
	border:4px ridged purple;
   }
</style>

...for example. The changes are additive. In this rather boring useless 
example, the final 'div' declaration overwrites the previous border 
assignments but leaves the color property alone. This is how you group 
css declarations together while still being able to make alterations at 
a finer level:

<style type="text/css">
   H1, H2, H3, H4, H5, H6
   {
     color:black;
     border:none;
     margin:0,50%,0,50%;
     padding:0;
   }

   H3
   {
     color:white;
     background-color:black;
   }
</style>

...here H3 keeps the border, margin, and padding values from the first 
declaration but color is changed and background-color is added.

   That being said, you do not want to reuse the same 'id' in your HTML 
declarations. That is what can make browsers go goofy.

...HTML...

<div id='left_col' class='red'>
   blah blah blah
</div>
<div id='left_col' class='blue'>
   blah blah blah
</div>

...

is what you are trying to avoid. It may work here and there, but results 
aren't guaranteed. The bottom line is that in CSS you CAN and WILL use 
the same id from time to time, it's perfectly legal and that's exactly 
how it's supposed to work. You should AVOID reusing the same id in HTML, 
it's not illegal but it is rather pointless.

-- 
Norman
Registered Linux user #461062
AMD64X2 6400+ Ubuntu 10.04 64bit

[toc] | [prev] | [next] | [standalone]

#12451

On Tue, 06 Mar 2012 06:40:49 -0500, Norman Peelman
<npeelmandog@cfl.rr.com> wrote:

[snip]

>how it's supposed to work. You should AVOID reusing the same id in HTML, 
>it's not illegal but it is rather pointless.

     It is illegal.  As Evertjan has pointed out, HTML 4.01 standard:
"7.5.2 Element identifiers: the id and class attributes
  
   Attribute definitions
   
   id = name [CS]
          This attribute assigns a name to an element. This name must
be
          unique in a document."

     Since I want my code to be legal, I was trying to resolve the
conflict.

Sincerely,

Gene Wirchenko

    

[toc] | [prev] | [next] | [standalone]

#12462

On Tue, 06 Mar 2012 11:27:35 -0800, Gene Wirchenko wrote:

> On Tue, 06 Mar 2012 06:40:49 -0500, Norman Peelman
> <npeelmandog@cfl.rr.com> wrote:
> 
> [snip]
> 
>>how it's supposed to work. You should AVOID reusing the same id in HTML,
>>it's not illegal but it is rather pointless.
> 
>      It is illegal.  As Evertjan has pointed out, HTML 4.01 standard:
> "7.5.2 Element identifiers: the id and class attributes
>   
>    Attribute definitions
>    
>    id = name [CS]
>           This attribute assigns a name to an element. This name must
> be
>           unique in a document."
> 
>      Since I want my code to be legal, I was trying to resolve the
> conflict.

A css selector is not an ID attribute assigned to an element, although it 
will usually identify an element with an attribute matching the selector.

The "id" attribute must be unique in the context of all the values of id 
attributes assigned to elements in the document.

The content of style and script elements is outside the scope of the html 
markup (except that "</" can cause weirdness and should be escaped to "<
\/" in script elements, possibly in style elements too).

Hence within [java] script elements and external scripts you can use the 
id of an element with as many document.getElementById() calls as you 
like, and likewise within [css] style elements and external stylesheets 
you can use the #id selector to select as many style rules as you like, 
without impinging upon the html restriction of uniqueness of any given 
value of an id attribute within the document.

I hope that made sense to you, it did to me.

Rgds

Denis McMahon

[toc] | [prev] | [next] | [standalone]

#12463

On 03/06/2012 02:27 PM, Gene Wirchenko wrote:
> On Tue, 06 Mar 2012 06:40:49 -0500, Norman Peelman
> <npeelmandog@cfl.rr.com>  wrote:
>
> [snip]
>
>> how it's supposed to work. You should AVOID reusing the same id in HTML,
>> it's not illegal but it is rather pointless.
>
>       It is illegal.  As Evertjan has pointed out, HTML 4.01 standard:
> "7.5.2 Element identifiers: the id and class attributes
>
>     Attribute definitions
>
>     id = name [CS]
>            This attribute assigns a name to an element. This name must
> be
>            unique in a document."
>
>       Since I want my code to be legal, I was trying to resolve the
> conflict.
>
> Sincerely,
>
> Gene Wirchenko
>
>

   I simply meant that there's nothing stopping you from doing it, but 
it is rather pointless. Yes you can refer more than one HTML element to 
the same 'class' identifier but 'id' identifiers really should be unique.



-- 
Norman
Registered Linux user #461062
AMD64X2 6400+ Ubuntu 10.04 64bit

[toc] | [prev] | [next] | [standalone]

#12464

On Tue, 06 Mar 2012 23:13:10 -0500, Norman Peelman
<npeelmandog@cfl.rr.com> wrote:

>On 03/06/2012 02:27 PM, Gene Wirchenko wrote:
>> On Tue, 06 Mar 2012 06:40:49 -0500, Norman Peelman
>> <npeelmandog@cfl.rr.com>  wrote:
>>
>> [snip]
>>
>>> how it's supposed to work. You should AVOID reusing the same id in HTML,
>>> it's not illegal but it is rather pointless.
>>
>>       It is illegal.  As Evertjan has pointed out, HTML 4.01 standard:
>> "7.5.2 Element identifiers: the id and class attributes
>>
>>     Attribute definitions
>>
>>     id = name [CS]
>>            This attribute assigns a name to an element. This name must
>> be
>>            unique in a document."
>>
>>       Since I want my code to be legal, I was trying to resolve the
>> conflict.

>   I simply meant that there's nothing stopping you from doing it, but 
>it is rather pointless. Yes you can refer more than one HTML element to 
>the same 'class' identifier but 'id' identifiers really should be unique.

     I quoted the standard to that effect.  How did you imagine that
that was not my point?

Sincerely,

Gene Wirchenko

[toc] | [prev] | [next] | [standalone]

#12431

Gene Wirchenko wrote:
>      Is the issue of avoiding using the same id more than once but
> using a special CSS item really just solved with using a class instead
> of id?

I'm with Evertjan here.  I don't really see this as an issue any more
than I would see an issue in the fact that two distinct database
records in the same table can't share a primary key.  IDs and classes
are simply a way to store some metadata about elements in their markup
for use by para-markup systems such as CSS and script engines.

These are two distinct types of metadata.  One describes an element as
a member of a particular type (`class`.)  The other notes the element
as the unique one identified by a particular string (`id`).  Although
rendering engines are designed to be forgiving, it would be
understandable if the document parser came to a hard stop on a
repeated id, and I believe that is the case for some XML tools.

In other words, this works as designed.  If you want to use the same
metadata on multiple elements within a document, don't use `id`.  If
you do so, don't expect consistent results.

  -- Scott

[toc] | [prev] | [next] | [standalone]

#12452

On Tue, 6 Mar 2012 04:36:23 -0800 (PST), Scott Sauyet
<scott.sauyet@gmail.com> wrote:

>Gene Wirchenko wrote:
>>      Is the issue of avoiding using the same id more than once but
>> using a special CSS item really just solved with using a class instead
>> of id?
>
>I'm with Evertjan here.  I don't really see this as an issue any more
>than I would see an issue in the fact that two distinct database
>records in the same table can't share a primary key.  IDs and classes
>are simply a way to store some metadata about elements in their markup
>for use by para-markup systems such as CSS and script engines.

     It was an issue, because I did not know how to do it legally due
to false data.

>These are two distinct types of metadata.  One describes an element as
>a member of a particular type (`class`.)  The other notes the element
>as the unique one identified by a particular string (`id`).  Although
>rendering engines are designed to be forgiving, it would be
>understandable if the document parser came to a hard stop on a
>repeated id, and I believe that is the case for some XML tools.
>
>In other words, this works as designed.  If you want to use the same
>metadata on multiple elements within a document, don't use `id`.  If
>you do so, don't expect consistent results.

     You seem to think that I was trying to do it wrong.  I have been
trying to get it right.  Today, I will be making some fairly simple
but widespread changes to my test page because of figuring out,
finally, how to do it right.

Sincerely,

Gene Wirchenko

[toc] | [prev] | [next] | [standalone]

#12460

On Mon, 05 Mar 2012 22:15:50 -0800, Gene Wirchenko wrote:

>     Is the issue of avoiding using the same id more than once but
>using a special CSS item really just solved with using a class instead
>of id?

You can use CSS classes to tie related elements together, or you can
store your data in other attributes. With HTML5, you can use custom data
attributes[1], like so:

<p id="p1234" data-bar="foo">A foo</p>
<p id="p1235" data-bar="foo">Another foo</p>

You can then select them with querySelectorAll[2] like so:

<script>
var elements = document.querySelectorAll('[data-bar="foo"]');
...
</script>

(I say "with HTML5", but really this will work in modern browsers except
the IE browsers in IE7 compatibility mode)

[1] http://www.w3.org/TR/html5/elements.html
#embedding-custom-non-visible-data-with-the-data-attributes
( http://preview.tinyurl.com/7f7v4mc )

[2] https://developer.mozilla.org/En/DOM/Element.querySelectorAll
-- 
Ross McKay, Toronto, NSW Australia
"Let the laddie play wi the knife - he'll learn"
- The Wee Book of Calvin

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web