[CSS] border-collapse inheritance

[JeRa]

Ik ben redelijk verbijsterd door het verschil in renderen van een geinheritede border-collapse op table elementen door verschillende browsers. Bekijk de volgende pagina eens:

http://gmta.nl/bugs/tablecssbug.html

Deze pagina bevat (zie ook de bron) een tabel binnen een tabel. De buitenste tabel heeft de CSS property 'border-collapse' op 'collapse' staan. Volgens het W3C is 'border-collapse' een property die standaard inherited is. Wat doen browsers?

• IE6: geen collapse
• IE8: wel collapse
• Opera 9: wel collapse
• Safari 4 (win32): geen collapse
• Firefox 3.5: geen collapse

Snapt iemand waarom deze browsers, en met name Safari en Firefox, zich anders gedragen?

[Aloys]

K zou niet weten waarom ze het fout doen, maar wat is het probleem? Je kan het toch gewoon dubbel aangeven, daar vallen de andere browser niet over ofzo hoor.

[JeRa]

Aloys schreef op donderdag 30 juli 2009 @ 12:29:
K zou niet weten waarom ze het fout doen, maar wat is het probleem? Je kan het toch gewoon dubbel aangeven, daar vallen de andere browser niet over ofzo hoor.

Het probleem is dat als browsers zich anders gaan gedragen dan naar de standaard, ik dus per browser moet gaan onthouden welke styles ik precies wél en niét moet aangeven. Of zou jij het ook logisch vinden als je properties zoals 'font-size' en 'color' voor elk element apart moest opgeven omdat er mogelijk een browser is die zich niet aan de standaard houdt?

Het gaat me er meer om dat Safari (Webkit, afgeleid van KHTML) en Firefox (Gecko) meestal goede keuzes maken wat betreft het aanhouden van standaarden en zij hier afwijken. Ik vraag me dus af wat daar de gedachte achter is

[ Voor 15% gewijzigd door JeRa op 30-07-2009 12:34 ]

[R4gnax]

JeRa schreef op donderdag 30 juli 2009 @ 12:33:
Het probleem is dat als browsers zich anders gaan gedragen dan naar de standaard, ik dus per browser moet gaan onthouden welke styles ik precies wél en niét moet aangeven.

Welkom in de wondere wereld van web development, waar dit de praktijk van alledag is. Als je je al ergert aan dit soort relatieve trivialiteiten, maak je borst dan maar nat.

JeRa schreef op donderdag 30 juli 2009 @ 12:33:
Het gaat me er meer om dat Safari (Webkit, afgeleid van KHTML) en Firefox (Gecko) meestal goede keuzes maken wat betreft het aanhouden van standaarden en zij hier afwijken. Ik vraag me dus af wat daar de gedachte achter is

Gecko wijkt overigens niet van de standaard af: Firebug geeft op tableB in je voorbeeld keurig aan dat 'border-collapse: collapse' van tableA overerfd is. Het renderen er van is alleen niet in orde.

Maar als ik me goed herinner werkt 'border-collapse: collapse' onder Gecko sowieso niet helemaal zoals het zou moeten: je krijgt vreemde 1px offsets in borders of borders verdwijnen spontaan. Beter is om gewoon met het standaard separated borders model te werken en ipv 'border-collapse: collapse' de property setting 'border-spacing: 0' te gebruiken. Voor IE zul je dan nog steeds hardcoded 'cellpadding="0" cellspacing="0"' op moeten geven in je table tag, want IE snapt 'border-spacing' nog niet.

[Niemand_Anders]

quickfix:

Cascading Stylesheet:

table { border-collapse: collapse; }

Ik heb zelf een 'basic' stylesheet welke van alle elementen de basis stylen zet. Deze is zorgvuldig in elkaar gezet en zorgt zonder verdere stylen dat de presentatie op alle browsers gelijk is.

[JeRa]

R4gnax schreef op donderdag 30 juli 2009 @ 14:09:
[...]

Welkom in de wondere wereld van web development, waar dit de praktijk van alledag is. Als je je al ergert aan dit soort relatieve trivialiteiten, maak je borst dan maar nat.

Ik doe al minstens 11 jaar aan web development waarbij ik nog nooit in de praktijk heb meegemaakt dat Gecko en/of KHTML en Webkit vreemde keuzes hadden gemaakt m.b.t. de standaarden of wat 'logisch' was. Meestal was Internet Explorer de boosdoener.

[...]

Gecko wijkt overigens niet van de standaard af: Firebug geeft op tableB in je voorbeeld keurig aan dat 'border-collapse: collapse' van tableA overerfd is. Het renderen er van is alleen niet in orde.

Als het wel in de DOM tree staat maar niet juist gerenderd wordt lijkt het me toch niet aan de standaard te houden; de standaard geeft namelijk ook een behoorlijk aantal rendering regels en vereisten

Maar als ik me goed herinner werkt 'border-collapse: collapse' onder Gecko sowieso niet helemaal zoals het zou moeten: je krijgt vreemde 1px offsets in borders of borders verdwijnen spontaan. Beter is om gewoon met het standaard separated borders model te werken en ipv 'border-collapse: collapse' de property setting 'border-spacing: 0' te gebruiken. Voor IE zul je dan nog steeds hardcoded 'cellpadding="0" cellspacing="0"' op moeten geven in je table tag, want IE snapt 'border-spacing' nog niet.

'border-spacing' is helaas niet hetzelfde als 'border-collapse'. Kijk bv. naar de borders van de table en de borders van de cells bij beide properties

[JeRa]

Niemand_Anders schreef op donderdag 30 juli 2009 @ 14:24:
quickfix:

Cascading Stylesheet:

table { border-collapse: collapse; }

Ik heb zelf een 'basic' stylesheet welke van alle elementen de basis stylen zet. Deze is zorgvuldig in elkaar gezet en zorgt zonder verdere stylen dat de presentatie op alle browsers gelijk is.

Dat leek mij uiteindelijk ook de enige haalbare optie, een soort reset.css gaan gebruiken dus. Bedankt voor je voorbeeldje. Het nadeel is dat ik een bestaand project aan het uitbouwen ben waarbij alle styles er vanuit gaan dat de default voor 'border-collapse' 'separate' is, zoals ook in de standaard staat. Het is ondoenlijk om na te gaan welke tabellen (en dat zijn er veel) er precies welke 'border-collapse' property gebruiken...

[crisp]

Zie o.a. https://bugzilla.mozilla.org/show_bug.cgi?id=329763

Nu IE8 wel de standaard is gaan volgen lijkt het me dat er voor Firefox ook minder reden is om af te wijken van de standaard. Vaak wordt er afgeweken met IE-compatibility als argument.

[JeRa]

crisp schreef op donderdag 30 juli 2009 @ 15:18:
Zie o.a. https://bugzilla.mozilla.org/show_bug.cgi?id=329763

Nu IE8 wel de standaard is gaan volgen lijkt het me dat er voor Firefox ook minder reden is om af te wijken van de standaard. Vaak wordt er afgeweken met IE-compatibility als argument.

Bedankt, ik heb even de resultaten uit mijn eerste post plus die uit Google Chrome (doet hetzelfde als Firefox en Safari) toegevoegd aan die bug

[crisp]

Nog een toevoeging:

IE8 in IE7mode (en dus ws IE7 zelf ook): geen inheritance van border-collapse

[R4gnax]

JeRa schreef op donderdag 30 juli 2009 @ 14:27:
Als het wel in de DOM tree staat maar niet juist gerenderd wordt lijkt het me toch niet aan de standaard te houden; de standaard geeft namelijk ook een behoorlijk aantal rendering regels en vereisten

Je claimde dat de standaard geschonden werd doordat de property border-collapse niet overerfd werd terwijl dat wel zou moeten. Border-collapse wordt echter wèl overerfd. (Anders kan 'ie ook niet in de DOM verschijnen, hè?) Alleen wordt er tijdens het renderen geen rekening met overerfde border-collapse regels gehouden. Dáár schendt Gecko inderdaad (al dan niet bewust) de standaard mee.

JeRa schreef op donderdag 30 juli 2009 @ 14:27:
'border-spacing' is helaas niet hetzelfde als 'border-collapse'. Kijk bv. naar de borders van de table en de borders van de cells bij beide properties

Dat was ook niet wat er stond. De boodschap was dat het door deze en andere issues omtrend het collapsed border model, misschien slimmer zou zijn om gewoon het separated border model te gebruiken en daarbij de cellen tegen elkaar te drukken m.b.v. de border-spacing property, usw.

Tja, je krijgt daarmee inderdaad problemen wanneer je in je layout expliciet gebruik maakt van meerdere soorten borders, waarbij a.d.h.v. de prioriteiten van elk type border bepaald wordt welke van de borders uiteindelijk zichtbaar zal zijn. Dat wel ja.

[JeRa]

R4gnax schreef op donderdag 30 juli 2009 @ 16:04:
[...]


Je claimde dat de standaard geschonden werd doordat de property border-collapse niet overerfd werd terwijl dat wel zou moeten.

Eens kijken wat ik precies gezegd heb:

quote: JeRa

Ik ben redelijk verbijsterd door het verschil in renderen van een geinheritede border-collapse op table elementen door verschillende browsers.

quote: JeRa

Volgens het W3C is 'border-collapse' een property die standaard inherited is. Wat doen browsers?

quote: JeRa

Het probleem is dat als browsers zich anders gaan gedragen dan naar de standaard

Dus nee, ik snap niet waar je het over hebt

Border-collapse wordt echter wèl overerfd. (Anders kan 'ie ook niet in de DOM verschijnen, hè?) Alleen wordt er tijdens het renderen geen rekening met overerfde border-collapse regels gehouden. Dáár schendt Gecko inderdaad (al dan niet bewust) de standaard mee.

En dat is dus precies wat ik zei (zie boven). De browser houdt zich niet aan de standaard bij het renderen, en behalve als jij in 'wat doen browsers' leest dat ik het over de DOM-tree heb, klopt het gewoon wat ik zei en nu weer verder ontopic a.u.b.

[crisp]

Firebug beroept zich waarschijnlijk puur op de default inheritance volgens de specificatie, dit zegt namelijk heel iets anders in Firefox:

JavaScript:

    alert(
        'tableA border-collapse: ' +
        document.defaultView.getComputedStyle(
            document.getElementById('tableA'),
            ''
        ).getPropertyValue('border-collapse')
    ); // collapse

    alert(
        'tableB border-collapse: ' +
        document.defaultView.getComputedStyle(
            document.getElementById('tableB'),
            ''
        ).getPropertyValue('border-collapse')
    ); // separate

[R4gnax]

crisp schreef op donderdag 30 juli 2009 @ 16:15:
Firebug beroept zich waarschijnlijk puur op de default inheritance volgens de specificatie, dit zegt namelijk heel iets anders in Firefox

Je hebt helemaal gelijk: het is inderdaad iets binnen Firebug.

Volgens mij ligt het er alleen niet aan dat Firebug zich op de default inheritance volgens de specificatie zou beroepen. Ik heb het even uitgeprobeerd en Firebug houdt zo te zien intern voor cascade van CSS regels geen rekening met de default user agent stylesheet, tenzij je die echt expliciet aanzet voor weergave ('Show User Agent CSS' in het CSS tabje). Zet je die aan, dan zie je inderdaad dat border-collapse: collapse van tableA weer weggestreept wordt voor de border-collapse: separate in de user agent sheet.

M.a.w. Firefox overerft border-collapse inderdaad totaal niet. Mea culpa.

offtopic:
Slordig trouwens dat de user agent sheet niet intern gebruikt wordt voor door rekenen van de cascade. Misschien maar eens een bug reportje over insturen.