best method to "hide" a whole <table> column ?

[whygee]

Hello,

I'm developping http://yasep.org/tools/listed.html
where there can be any number of tables of the same class and structure.
I would like to enable the user to "hide" a whole column
(like the "value", "size", "comments" etc.) of any of these tables.
The best way I have found is to set the "display" or "visibility"
style attribute to "none" or "hidden".
It works easily because all the <td> have the correct "class" attribute.

The issue is that I must change the .css on the fly for any table,
independently. If I knew the .id in advance, I could write
table.table_id > td.column_class { display:none; }
but I don't know how to do this dynamically in JS.
A temporary workaround would be to set the style of each <td>
as hidden or shown, but that would create other problems
(what if I add new rows ?)

Is there a possibility to attach to a table the attributes
of its sub-elements ? The element.style attribute changes the
style of the element and potentially the sub-elements,
but this is not specific to classes (one must use another CSS
rule with another selector). I have not found how to add
another selector without manually changing all the attributes
of the sub-elements (which is not a good solution).

yg, still scratching his head

 

[Evertjan.]

whygee wrote on 20 jul 2009 in comp.lang.javascript:

I'm developping http://yasep.org/tools/listed.html
where there can be any number of tables of the same class and structure.
I would like to enable the user to "hide" a whole column
(like the "value", "size", "comments" etc.) of any of these tables.
The best way I have found is to set the "display" or "visibility"
style attribute to "none" or "hidden".
It works easily because all the <td> have the correct "class" attribute.

The issue is that I must change the .css on the fly for any table,
independently. If I knew the .id in advance, I could write
table.table_id > td.column_class { display:none; }
but I don't know how to do this dynamically in JS.
A temporary workaround would be to set the style of each <td>
as hidden or shown, but that would create other problems
(what if I add new rows ?)

Asking for "the best way" is nonsense because that is so subjective to the
whims of each programmer.

I see two ways:

1/ give all cells of a column a common unique classname,
and change the content of the class with javascript rules manipulation.

2/ Have ech column of a table consist of one <td> containing a seperate
table with only one column, and manipulate the style of that <td>.

Having the rows line-up in 2/ will be a small nightmare, but so is the
cross browser "alignment" of the rules code. Waking up the page might even
work fine.

 

[whygee]

Asking for "the best way" is nonsense because that is so subjective to the
whims of each programmer.

I understand. However, I often discover "customs", "good practices" etc.

I see two ways:

1/ give all cells of a column a common unique classname,
and change the content of the class with javascript rules manipulation.

2/ Have ech column of a table consist of one <td> containing a seperate
table with only one column, and manipulate the style of that <td>.

Having the rows line-up in 2/ will be a small nightmare, but so is the
cross browser "alignment" of the rules code. Waking up the page might even
work fine.

2) is out of question in my perspective, and 1) is already partially
implemented, but I'm a complete n0Ob about "javascript rules manipulation".
The little I know (which is already quite an advanced topic to some others)
does not allow me to change the visibility of a column
independently of other tables.

At http://www.coderanch.com/t/115872/HTML-JavaScript/javascript-modify-CSS-classes
I have found that it is possible to change javascript rules with code like

function ChangeCSSRule(xElement,xValue) {
var strCSS = 'cssRules';
if(document.all) {
strCSS = 'rules';
}
document.styleSheets[0][strCSS][0].style[xElement] = xValue;
}

but I don't see how to add or delete them, or even add a new selector :-/
And when I don't know what I search, it's difficult to ask Google the right words...
Is there a tutorial somewhere ?

Note : I don't support MSIE so as long as it works with Mozilla, I'm ok.

regards,
yg

 

[Evertjan.]

whygee wrote on 20 jul 2009 in comp.lang.javascript:

I understand. However, I often discover "customs", "good practices"
etc.

Now try this:

==================================

<style type='text/css'>
body {margin:80px;}
table tr td {border:red 2px solid;font-size:15pt;}

table.tabcol0 tr td.col1 {display:;}
table.tabcol0 tr td.col2 {display:;}
table.tabcol0 tr td.col3 {display:;}
table.tabcol1 tr td.col1 {display:none;}
table.tabcol1 tr td.col2 {display:;}
table.tabcol1 tr td.col3 {display:;}
table.tabcol2 tr td.col1 {display:;}
table.tabcol2 tr td.col2 {display:none;}
table.tabcol2 tr td.col3 {display:;}
table.tabcol3 tr td.col1 {display:;}
table.tabcol3 tr td.col2 {display:;}
table.tabcol3 tr td.col3 {display:none;}

</style>

<script type='text/javascript'>
function hide(table,row) {
document.getElementById(table).className = 'tabcol'+row;
};
</script>

<table id='t1' class='tabcol0' border=1>
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
</table>
<br><br>

<table id='t2' class='tabcol0' border=1>
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
</table>
<br><br>

<button onclick='hide("t1",3);'>
hide columm C of the first table</button>
<br><br>

<button onclick='hide("t2",2);'>
hide columm B of the second table</button>
<br><br>

<button onclick='hide("t2",1);'>
hide columm A of the second table</button>
<br><br>

<button onclick='hide("t1",0);hide("t2",0);'>
Show all in both tables</button>


==================================

Tested working on Chrome ;-)

 

[Luuk]

Evertjan. schreef:

whygee wrote on 20 jul 2009 in comp.lang.javascript:


Now try this:

==================================

<style type='text/css'>
body {margin:80px;}
table tr td {border:red 2px solid;font-size:15pt;}

table.tabcol0 tr td.col1 {display:;}
table.tabcol0 tr td.col2 {display:;}
table.tabcol0 tr td.col3 {display:;}
table.tabcol1 tr td.col1 {display:none;}
table.tabcol1 tr td.col2 {display:;}
table.tabcol1 tr td.col3 {display:;}
table.tabcol2 tr td.col1 {display:;}
table.tabcol2 tr td.col2 {display:none;}
table.tabcol2 tr td.col3 {display:;}
table.tabcol3 tr td.col1 {display:;}
table.tabcol3 tr td.col2 {display:;}
table.tabcol3 tr td.col3 {display:none;}

</style>

<script type='text/javascript'>
function hide(table,row) {
document.getElementById(table).className = 'tabcol'+row;
};
</script>

<table id='t1' class='tabcol0' border=1>
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
</table>
<br><br>

<table id='t2' class='tabcol0' border=1>
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
</table>
<br><br>

<button onclick='hide("t1",3);'>
hide columm C of the first table</button>
<br><br>

<button onclick='hide("t2",2);'>
hide columm B of the second table</button>
<br><br>

<button onclick='hide("t2",1);'>
hide columm A of the second table</button>
<br><br>

<button onclick='hide("t1",0);hide("t2",0);'>
Show all in both tables</button>


==================================

Tested working on Chrome ;-)

also works in IE8 and FireFox3.5.1

 

[whygee]

Hello,

Now try this:

<style type='text/css'>
body {margin:80px;}
table tr td {border:red 2px solid;font-size:15pt;}

table.tabcol0 tr td.col1 {display:;}
table.tabcol0 tr td.col2 {display:;}
table.tabcol0 tr td.col3 {display:;}
table.tabcol1 tr td.col1 {display:none;}
table.tabcol1 tr td.col2 {display:;}
table.tabcol1 tr td.col3 {display:;}
table.tabcol2 tr td.col1 {display:;}
table.tabcol2 tr td.col2 {display:none;}
table.tabcol2 tr td.col3 {display:;}
table.tabcol3 tr td.col1 {display:;}
table.tabcol3 tr td.col2 {display:;}
table.tabcol3 tr td.col3 {display:none;}

</style>

heh, that's exactly what I try to avoid :-/

My situation has an undefined and variable number of tables
so I can't make a .css with x tables because the user
will make x+1 tables...
How could the css rules be created dynamically,
when a new table is created ?

thanks for your effort,
yg

 

[Evertjan.]

whygee wrote on 20 jul 2009 in comp.lang.javascript:

heh, that's exactly what I try to avoid :-/

My situation has an undefined and variable number of tables
so I can't make a .css with x tables because the user
will make x+1 tables...

Nonsense!

I showed you these are number of tables INDEPENDENT,
by supplying two independet tables.
please reread and reevaluate my code.

How could the css rules be created dynamically,
when a new table is created ?

What do you mean by created by the user?

It is you the programmar that makes the html,
and if you make the table dynamicly,
the setting of the class is no problem me thinks.

=========

I would do these dynamics serverside,
where the creating of the stylesheet is also trivial.

ASP-VBS example:
========================================
<style type='text/css'>
<%
for tabcol = 0 to maxcols
for col = 1 to maxcols
' [maxcols here shows te maximum of columns of the largest table]
' [the number of rows is not important, both could be 1000ths]
if tabcol=col then disp="none" else disp=""
%>
table.tabcol<%=tabcol%> tr td.col<%=col%> {display:<%=disp%>;}
<%
next
next
%>
</style>
=========================================


==========

If there is a html table without "classed" <td>s,
assigning them dynamically with the DOM
in clientside javascript is also easy.

you can loop though the tavle dom with "row" and "column",
but never tried that having access to serverside scripting.

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]

I'm developping http://yasep.org/tools/listed.html
where there can be any number of tables of the same class and
structure.
I would like to enable the user to "hide" a whole column
(like the "value", "size", "comments" etc.) of any of these tables.
The best way I have found is to set the "display" or "visibility"
style attribute to "none" or "hidden".
It works easily because all the <td> have the correct "class"
attribute.

The issue is that I must change the .css on the fly for any table,
independently.

Must you?

ISTM that, given a reference to the Table, you could either
(1) Fetch its innerHTML, adjust the elements, restore the innerHTML
(2) Traverse the table as a tree, counting rows, and adjust the
elements /en passant/.
The second is more elegant.

In order to avoid having to undo previous changes in detail, you could
initially construct an invisible full table, then each time copy it,
with the unwanted elements omitted, to the visible table.

Alternatively, you could store the table data as an array of arrays (or
otherwise), and regenerate it each time, either as an innerHTML string
or as an element tree.

HTML should have alternative syntax for Tables, using TC for columns
instead of TR for rows; then you would only need to style the TC
elements.

 

[Alexandre.Morgaut]

Hello,

I'm developpinghttp://yasep.org/tools/listed.html
where there can be any number of tables of the same class and structure.
I would like to enable the user to "hide" a whole column
(like the "value", "size", "comments" etc.) of any of these tables.
The best way I have found is to set the "display" or "visibility"
style attribute to "none" or "hidden".
It works easily because all the <td> have the correct "class" attribute.

The issue is that I must change the .css on the fly for any table,
independently. If I knew the .id in advance, I could write
   table.table_id > td.column_class {  display:none; }

You can do much simplier using colgroup tags

// CSS
..hidden {
display: none;
}


// HTML

<table id="books">
<colgroup id="books_isbn"></colgroup>
<colgroup id="books_title"></colgroup>
<colgroup id="books_price"></colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>

// JavaScript

document.getElementById('books_price').style.display = 'none';

//or if you want to do it by column number
document.getElementById('books').getElementsByTagName('colgroup')
[2].style.display = 'none';

 

[RobG]

Hello,

I'm developpinghttp://yasep.org/tools/listed.html
where there can be any number of tables of the same class and structure.
I would like to enable the user to "hide" a whole column
(like the "value", "size", "comments" etc.) of any of these tables.
The best way I have found is to set the "display" or "visibility"
style attribute to "none" or "hidden".
It works easily because all the <td> have the correct "class" attribute.

As Alexandre suggested, you can use colgroup elements, then show or
hide the colgroup.

The issue is that I must change the .css on the fly for any table,
independently. If I knew the .id in advance, I could write
table.table_id > td.column_class { display:none; }
but I don't know how to do this dynamically in JS.
A temporary workaround would be to set the style of each <td>
as hidden or shown, but that would create other problems
(what if I add new rows ?)

Yes, that's an issue that can be avoided using colgroups.

Here's a script I wrote some time ago that should do the job of
modifying a style rule. For more information, check the archives,
checkout David Mark's MyLibrary, or peter michaux's FORK. Matt Kruse
used to have some of this stuff on his javascript toolbox site, but
that seems to have closed down.

<script type="text/javascript">

// To change the display property of class 'foo'
// changeStyle('foo', 'display', 'none');
// name : class name
// spName : style property name
// newValue: value to set

function changeStyle(cName, spName, newValue)
{
// Get the style sheets collection
var sSheets = document.styleSheets;

// Exit if no style sheets collection
if (!sSheets || !sSheets.length) return;

// Work out which rule accessor name is needed,
// either W3C or IE compliant
var rules = (sSheets[0].cssRules)? 'cssRules' :
(sSheets[0].rules)? 'rules' : null;

// Exit if not one of the above
if (!rules || 'object' != typeof sSheets[0][rules]) return;

// Setup some variables
var sRule, sRules;

// Setup a RegExp to test class names with
// selectorText allowed to have '.' or '*' as leading character
// browser dependent (old IE uses '*')
var re = new RegExp('^[.*]' + cName + '$');

// Go thru style sheets & get rules
for(var i=0, m=sSheets.length; i<m; ++i){
sRules = sSheets[rules];

// Look for rule & modify it
for (var j=0, n=sRules.length; j<n; ++j){
sRule = sRules[j];
if (re.test(sRule.selectorText)){
sRule.style[spName] = newValue;

// Can return here if know only one instance of rule
return;
}
}
}
}
</script>

 

[yg]

You can do much simplier using colgroup tags

<snip>

I must say... wow... that's the answer that I expected without hoping
that
it could be so simple and so adapted. I had never heard of <colgroup>
before,
and if I did, it never seemed to reach my brain...

// JavaScript
document.getElementById('books_price').style.display = 'none';
//or if you want to do it by column number
document.getElementById('books').getElementsByTagName('colgroup')
[2].style.display = 'none';

This does not seem to work :-(

Here is a first test :

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<html>
<style> /* I'm not sure it's useful */
..hidden {
display: none;
}
</style>

<body onload="init()">

<table border="1">
<colgroup id="col1" align="right">
<colgroup id="col2" align="left">
<colgroup id="col3" align="right" style="color:#0000FF;">
<tr>
<th onclick="hidecol(1)">ISBN</th>
<th onclick="hidecol(2)">Title</th>
<th onclick="hidecol(3)">Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>3489632</td>
<td>My best HTML</td>
<td>$42</td>
</tr>
</table>

<button id="col1bt" onclick="showcol(1)">show col 1</button>
<button id="col2bt" onclick="showcol(2)">show col 2</button>
<button id="col3bt" onclick="showcol(3)">show col 3</button>

</body>
<script>
var colid=new Array(), colbt=new Array();

function showcol(i) {
colid.style.display="";
colbt.style.display="none";
}

function hidecol(i) {
colid.style.display="none";
colbt.style.display="";
}

function init() {
for (var i=1; i<4; i++) {
colid=document.getElementById("col"+i);
colbt=document.getElementById("col"+i+"bt");
showcol(i);
}
}
</script>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The buttons disappear and reappear correctly but not the columns :-/
(using FF3.5.1)

thanks for the big hint,
yg

 

[yg]

The buttons disappear and reappear correctly but not the columns :-/

Some googling and it works !
cf http://bytes.com/groups/css/101076-display-property-colgroup
and others

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function showcol(i) {
colid.style.visibility="";
colbt.style.display="none";
}

function hidecol(i) {
colid.style.visibility="collapse";
colbt.style.display="";
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Thanks to everyone for taking the time to answer and
thank you Alexandre for the great hint !

yg

 

[Thomas 'PointedEars' Lahn]

heh, that's exactly what I try to avoid :-/

You definitely would want to, because that's not Valid.
Property values MUST NOT be omitted in CSS.


PointedEars

 

[Alexandre.Morgaut]

.hidden {
display: none;}

</style>

Yes of course its not required
I wrote this because its usually a better practice to change a class
whereas changing directly the style in that your code becomes more
evolutive

I'am waiting for the day all frameworks will use the same semantic in
their widget so I can apply common css skins to datagrids or calendars
from any of YUI, ExtJS, Script.aculo.us, ...



so you could have it as a more unobtrusive code :

Warning:
- Unfortunately, Firefox as a bug handling css on colgroups
- it works nearly well on IE 8 (I don't understand why the table
width isn't reduced)

This code is just an example of good practices, but Browsers lacks
makes it a little more complicated
So don't hesitate to use well designed frameworks like JQuery or YUI

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<html>

<head>
<title>Show / Hide columns</title>
<style type="text/css">
table th, table td {
width: 250px;
border: solid 1px black
}

caption {
border: solid 1px black
}

..hidden {
visibility: hidden;
}

..hiddenColumn {
visibility: hidden;
width: 0px;
display: none
}

#col1, #col3{
text-align: right
}

#col2 {
text-align: left
}

#col3 {
color: #0000FF;
}

</style>
</head>

<body>
<h1>Show / Hide columns</h1>
<table id="books">
<caption>books</caption>
<colgroup id="col1" />
<colgroup id="col2" />
<colgroup id="col3" />
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>3489632</td>
<td>My best HTML</td>
<td>$42</td>
</tr>
</table>

<h3>Show hidden columns</h3>
<p id="showColumns">
<button>show col 1</button>
<button>show col 2</button>
<button>show col 3</button>
</p>

<script type="text/javascript">
<!--
(function () {

var colHeads, colHead, colGroups, colGroup, nbCols, buttons, button,
i, byId, showColumn, hideColumn;

byId = function (id) {
var elem = document.getElementById(id);
elem.byName = elem.getElementsByTagName;
return elem;
}
colHeads = byId('books').rows[0].cells;
nbCols = colHeads.length;
colGroups = byId('books').byName('colgroup');
buttons = byId('showColumns').byName('button');

showColumn = function () {
// this is the button which has been clicked
this.col.className = '';
this.className = 'hidden';
};

hideColumn = function () {
// this is the column title which has been clicked
this.col.className = 'hiddenColumn';
this.button.className = '';
};


for (i = 0; i < nbCols; i += 1) {
colHead = colHeads;
colGroup = colGroups;
button = buttons;

colGroup.name = 'colGroup ' + i;

colHead.name = 'colHead ' + i;
colHead.onclick = hideColumn;
colHead.col = colGroup;
colHead.button = button

button.name = 'button ' + i;
button.onclick = showColumn;
button.col = colGroup;
button.className = 'hidden';
}


})();
//-->
</script>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

[whygee]

Hi,

You definitely would want to, because that's not Valid.
Property values MUST NOT be omitted in CSS.

probably. However :
1) it works without (ok I know it's not a good argument)
2) the tables are cloneNode()ed so the properties are cloned too.
3) I am receptive to XYZ validity arguments, but it's not a requirement here.
4) default values are implicit, so why write them ?
5) when the original table is cloned, all the columns are visible.
I did not expect that the table structure would be changed so now
I have to cleanup the table scanning routines... Lesson learned.

Regards,

PointedEars

yg

 

[whygee]

Hi,

Yes of course its not required
I wrote this because its usually a better practice to change a class
whereas changing directly the style in that your code becomes more
evolutive OK.

Warning:
- Unfortunately, Firefox as a bug handling css on colgroups

what is the consequence ?

- it works nearly well on IE 8 (I don't understand why the table
width isn't reduced)

maybe because you should use visibility="collapse" ?

Anyway, MSIE is not an issue for me,
I have chosen to favor feature
development over absolute portability.
Otherwise it would be like shooting a moving target
and I would end up having something working well
everywhere, but useless. I have been there already :-/

This code is just an example of good practices, but Browsers lacks
makes it a little more complicated
So don't hesitate to use well designed frameworks like JQuery or YUI

I don't need or want to use them.
My project is already complex enough ;-)

.hiddenColumn {
visibility: hidden;
width: 0px;
display: none
}

visibility="collapse" ?

BTW, interesting code, thank you very much your insight,
some aspects that I like are going to be reused soon

yg

 

[Thomas 'PointedEars' Lahn]

probably.

No, definitely, see <http://www.w3.org/TR/CSS2/grammar.html>. Observe there
that `stylesheet' produces `ruleset' (among other symbols) which produces
`selector' (a.o.) which produces `declaration' (a.o.) which produces `expr'
(a.o.) which produces `term' (a.o.) which does _not_ produce, through any
alternation, only the empty string (the terminal representing "nothing" in
formal grammars).

However : 1) it works without (ok I know it's not a good argument)

A masterpiece of understatement; it is the silliest possible reply of all.
Of course it may work without, because implementations need to handle such
silly author's mistakes for adequate presentation. The Specification even
defines how they MUST do this:

<http://www.w3.org/TR/CSS2/syndata.html#parsing-errors>

Nevertheless, errors are errors, and best avoided.

2) the tables are cloneNode()ed so the properties are cloned too.

That does not matter for the validity constraint.

3) I am receptive to XYZ validity arguments, but it's not a requirement
here.

I beg your pardon? You do want your style-sheet to work reliably, do you not?

4) default values are implicit,

Some are implementation-dependent.

so why write them ?

Because the declared and used style-sheet language, CSS, requires it.

5) when the original table is cloned, all the columns are visible.

Again, this has no relevance at all to the validity constraint.

Please do not quote signatures unless you refer to their content.


PointedEars

 

[Garrett Smith]

No, definitely, see <http://www.w3.org/TR/CSS2/grammar.html>. Observe there
that `stylesheet' produces `ruleset' (among other symbols) which produces
`selector' (a.o.) which produces `declaration' (a.o.) which produces `expr'
(a.o.) which produces `term' (a.o.) which does _not_ produce, through any
alternation, only the empty string (the terminal representing "nothing" in
formal grammars).



A masterpiece of understatement; it is the silliest possible reply of all.
Of course it may work without, because implementations need to handle such
silly author's mistakes for adequate presentation. The Specification even
defines how they MUST do this:

<http://www.w3.org/TR/CSS2/syndata.html#parsing-errors>

The more pertinent portion of the specification is the next item, titled
"Malformed declarations"

| Malformed declarations. User agents must handle unexpected tokens
| encountered while parsing a declaration by reading until the end of
| the declaration, while observing the rules for matching pairs of (),
| [], {}, "", and '', and correctly handling escapes. For example, a
| malformed declaration may be missing a property, colon ) or value.
| The following are all equivalent:
|
| p { color:green }
| p { color:green; color }/* malformed declaration missing ':', value */
| p { color:red; color; color:green }/* same with expected recovery */
| p { color:green; color: } /* malformed declaration missing value */
| p { color:red; color:; color:green }/* same with expected recovery */
| p { color:green; color{;color:maroon} } /* unexpected tokens { } */
| p {color:red;color{;color:maroon}; color:green }/*same with recovery*/


(Some of the allowed whitespace, was removed, so that the example could
be formatted to 72 characters).

The specification describes the expected error-handling procedure and
how a missing value is to be handled, providing a commented example.

The CSS parser should be expected to perform the specified error
correction. If and only if that error handling is performed correctly,
the result will be the invalid part of the code being ignored.

Nevertheless, errors are errors, and best avoided.

Adding that error would increase the file size and increase the number
of errors issued by the validator, making debugging harder.

Garrett

 

[whygee]

Hello,
and thank you all for taking the time to explain me all this.
I come from domains that have nothing to do with
the subject of this newsgroup and I find the SNR
quite good here, so I decided to stay a bit and learn.


After the Nth proofreading, I finally understood what this leg of the thread is about.
Please excuse me if I'm mistaken again, as my brain is a bit crushed by the lack of sleep.

1) Evertjan wrote :etc.

2) I complained because I don't want / can't write in advance
the CSS properties of each column of each table that will ever be used,
or else i'll have to make a gigabyte-sized .css
in order to cover any corner case and/or put artificial
size limitations to my code...

2") Thomas complained for something else, if I understand correctly :
it's about the syntax (hence the description of the BNF below) becauseis invalid.

That's also why I thought that Evertjan's proposition
was to be avoided : if the value is not given, then the selector is
useless and can be skipped entirely, so I don't have to write the
whole line. Hence my remark later about default values too,
as well as the cloning of the properties.
In my code, I just have to create one correct table with one
correct CSS, and the user interactions will clone then modify the
table and the associated properties, no need of hundred of CSS lines.

Now, the rest of the thread makes new and better sense to me,
and I agree with Garrett & Thomas. However I still don't understand
why Evertjan wrote the code in the first place. OTOH, Evertjan
doesn't understand that I don't create the tables server-side,
which is a completely different issue (going almost completely
serverside-less is a design choice that pays well for me).
I'll check this soon, for the rest of my project.
from here on, the misunderstanding gets very thick as we don't speak
about the same thing.

<http://www.w3.org/TR/CSS2/syndata.html#parsing-errors>

The more pertinent portion of the specification is the next item, titled
"Malformed declarations"
| Malformed declarations. User agents must handle unexpected tokens
| encountered while parsing a declaration by reading until the end of
| the declaration, while observing the rules for matching pairs of (),
| [], {}, "", and '', and correctly handling escapes. For example, a
| malformed declaration may be missing a property, colon ) or value.

<snip>
Here is the hint about what went wrong in the discussion.
I thought that Thomas & Garrett promoted the heavy use
of explicit declaration of every CSS property possible,
until I see that they speak about a lower-level syntax aspect.

Adding that error would increase the file size and increase the number
of errors issued by the validator, making debugging harder.

This makes sense to me now

Garrett

yg

 

[Thomas 'PointedEars' Lahn]

No, definitely, see <http://www.w3.org/TR/CSS2/grammar.html>. Observe there
that `stylesheet' produces `ruleset' (among other symbols) which produces
`selector' (a.o.) which produces `declaration' (a.o.) which produces `expr'
(a.o.) which produces `term' (a.o.) which does _not_ produce, through any
alternation, only the empty string (the terminal representing "nothing" in
formal grammars).


A masterpiece of understatement; it is the silliest possible reply of all.
Of course it may work without, because implementations need to handle such
silly author's mistakes for adequate presentation. The Specification even
defines how they MUST do this:

<http://www.w3.org/TR/CSS2/syndata.html#parsing-errors>

The more pertinent portion of the specification is the next item, titled
"Malformed declarations" [...]

The URL provided above refers to CSS 2.1 (CR), section 4.2 "Rules for
handling parsing errors" which includes the so-called "next item".


PointedEars